{% extends "base.html" %}
{% load static %}
{% load tz %}
{% load l10n %}
{% load i18n %}

{% block title %}{% trans "Account detail" %}{% endblock %}

{% block content %}

<style>
  /* ────────── layout pre hlavný panel + vysúvací filter napravo ────────── */

  #detail-shell {
      position: relative;
  }

  #main-card {
      margin-right: 380px;
      margin-left: -100px;
  }

  #top-actions {
      position: absolute;
      top: -33px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 40;
      display: flex;
      gap: .5rem;

      flex-wrap: nowrap
      align-items : flex-end

  }



  /* ────────── FIXNÝ FILTER PANEL (overlay vpravo) ────────── */

  #filter-panel {
      position: absolute;
      right: 0px;
      width: 360px;
      height : 100%;

      background: #ffffff;
      box-shadow: -2px 0 10px rgba(0,0,0,0.2);
      padding: 1.25rem 1.5rem 1.5rem;
      overflow-y: auto;

      transform: translateX(120%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.35s ease, opacity 0.35s ease;
      z-index: 1050;
  }

  #filter-panel.no-animate {
      transition: none;
  }

  #detail-shell.filter-open #filter-panel {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
  }

  /* ────────── EXTEND PANEL – bottom sheet úplne skrytý pri close ────────── */


    #extend-panel {
        position: fixed;
        left: 60px;
        right: 60px;
        top: 150px;

        --extend-gap: 60px;
        bottom: var(--extend-gap);

        background: #ffffff;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.25);

        transform: translateY(calc(100% + var(--extend-gap)));  /* úplne schovaný */
        transition: transform 0.35s ease;

        z-index: 1060;
        display: flex;
        flex-direction: column;
    }

    #extend-panel.open {
        transform: translateY(0);  /* otvorený */
    }


  #extend-panel .extend-header {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #dee2e6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
  }

  #extend-panel .extend-body {
      padding: 1rem;
      overflow: auto;
      flex: 1;
  }

  #extend-panel .btn-group .btn.active {
      background-color: #0d6efd;
      color: #fff;
  }

  /* ────────── PAYMENT PANEL – bottom sheet pre novú platbu ────────── */

  #payment-panel {
    position: fixed;

    /* šírka a centrovanie */
    width: 60%;
    max-width: 900px;
    min-width: 600px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 40px));  /* skrytý pod spodkom */

    /* výška / pozícia */
    top: 70px;
    height: calc(100vh - 80px);  /* kratší panel */

    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    border-radius: 16px;

    transition: transform 0.35s ease;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

    #payment-panel.open {
        transform: translateX(-50%) translateY(0);
    }

    #payment-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    z-index: 9999;

   }




  #payment-panel .payment-body {
      padding: 1rem;
      overflow: auto;
      flex: 1;
  }

#report-btn,
#filter-toggle,
#new-payment-btn {
    padding: .45rem 1.3rem;
    border-radius: .75rem .75rem 0 0;
    font-size: .85rem;
    color: #fff !important;
    border: none;


    margin-bottom: -6px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(0);
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease;
}

/* --- ODTIENE MODREJ --- */

#report-btn {
    background-color: #3C7FF2;
}
#filter-toggle {
    background-color: #2F73E5;
}
#new-payment-btn {
    background-color: #2569DC;
}



#report-btn:hover {
    transform: translateY(-2px);
    background-color: #5A90F6;
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
#filter-toggle:hover {
    transform: translateY(-2px);
    background-color: #4B82EA;
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
#new-payment-btn:hover {
    transform: translateY(-2px);
    background-color: #3B78E5;
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
</style>

<div style="background:linear-gradient(180deg,#FFF 0%,#95B9FF 100%);">
    <div class="container px-1 py-2" style="min-height:70vh;">

        <h2 class="display-6 my-4 lh-1 fw-bold text-center text-lg-start">
            {% trans "Account Details" %}
        </h2>

        <div class="container">


            <div id="detail-shell">


                <div id="top-actions">




                    <a id="report-btn"
                       class="btn btn-primary btn-sm"
                       href="{% url 'account_statement_pdf' account.slug %}"
                       target="_blank">
                        {% trans "Generate PDF" %}
                    </a>


                    <button
                            id="filter-toggle"
                            class="btn btn-primary btn-sm"
                            type="button">
                        {% trans "Filter" %}
                    </button>


                    <button
                            id="new-payment-btn"
                            type="button"
                            class="btn btn-success btn-sm"
                            data-new-payment-url="{% url 'transaction_create' account.slug %}">
                        {% trans "New payment" %}
                    </button>

                </div>


                <div id="filter-panel">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h5 class="mb-0">{% trans "Filter transactions" %}</h5>
                        <button type="button" id="filter-close" class="btn btn-sm btn-light">
                            &times;
                        </button>
                    </div>

                    <form method="get">
                        <input type="hidden" name="sort" value="{{ sort }}">
                        <input type="hidden" name="filter" value="open">

                        <div class="mb-3">
                            <label class="form-label">{% trans "Date from" %}</label>
                            <input type="date"
                                   class="form-control"
                                   name="date_from"
                                   value="{{ date_from }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Date to" %}</label>
                            <input type="date"
                                   class="form-control"
                                   name="date_to"
                                   value="{{ date_to }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">IBAN</label>
                            <input type="text"
                                   class="form-control"
                                   name="beneficiary_q"
                                   value="{{ beneficiary_q }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Transaction type" %}</label>
                            <select class="form-select" name="tx_direction">
                                <option value="">{% trans "All" %}</option>
                                <option value="sent" {% if tx_direction == "sent" %}selected{% endif %}>
                                {% trans "Sent" %}
                                </option>
                                <option value="received" {% if tx_direction == "received" %}selected{% endif %}>
                                {% trans "Received" %}
                                </option>
                            </select>
                        </div>

                        <div class="row mb-4">
                            <div class="col-6">
                                <label class="form-label">{% trans "Min amount" %}</label>
                                <input type="number"
                                       class="form-control"
                                       name="amount_min"
                                       value="{{ amount_min }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label">{% trans "Max amount" %}</label>
                                <input type="number"
                                       class="form-control"
                                       name="amount_max"
                                       value="{{ amount_max }}">
                            </div>
                        </div>

                        <div class="d-flex gap-2 justify-content-center">
                            <button type="submit" class="btn btn-primary px-4">
                                {% trans "Apply" %}
                            </button>
                            <button type="submit"
                                    name="clear"
                                    value="1"
                                    class="btn btn-outline-secondary px-4">
                                {% trans "Clear" %}
                            </button>
                        </div>

                        <div class="d-flex justify-content-center mt-3">
                            {# FILTERED PDF #}
                            <button type="button"
                                    class="btn btn-primary px-4"
                                    id="generate-pdf-btn">
                                {% trans "Generate filter PDF" %}
                            </button>
                        </div>
                    </form>
                </div>


                <div id="main-card"
                     class="row justify-content-center pb-5 rounded-3 bg-white my-4 g-2"
                     style="box-shadow:0 0 20px rgba(0,0,255,.2);">


                    <div class="col-12 col-lg-5 text-center">
                        <div class="bg-white">
                            <div class="card-body d-flex flex-column position-relative">
                                <h3 class="card-title text-nowrap">
                                    <span id="account-name">{{ account.name }}</span>
                                    <a href="#" data-bs-toggle="modal"
                                       data-bs-target="#updateAccountNameModal" class="ms-1">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                </h3>

                                <div class="d-flex justify-content-center">
                                    <div class="mb-1 w-50 position-relative">
                                        <img src="{% static 'images/card_1.png' %}"
                                             class="img-fluid" alt="{% trans 'Card Image' %}">
                                        <h5 class="position-absolute top-50 start-50 translate-middle
                               text-white text-nowrap" style="font-size:90%;">
                                            {{ account.iban }}
                                        </h5>
                                    </div>
                                </div>

                                <p>
                                    {% trans "Available balance:" %} {{ account.balance|floatformat:2 }} EUR
                                </p>
                            </div>
                        </div>

                        {% if beneficiaries %}
                        <p class="m-0 mt-3">{% trans "Statistic" %}</p>
                        <div class="d-flex justify-content-center">
                            <canvas class="w-75 h-75" id="spendingChart"></canvas>
                        </div>
                        <script>
                document.addEventListener("DOMContentLoaded", function(){
                  const data = {{ amounts|safe }};
                  const ctx = document.getElementById('spendingChart').getContext('2d');
                  new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                      labels: ['{% trans "expenses" %}', '{% trans "income" %}'],
                      datasets: [{
                        data: data,
                        backgroundColor: ['#C5152B', '#0F9D58']
                      }]
                    },
                    options: {
                      plugins: {
                        legend: { position: 'bottom' }
                      }
                    }
                  });
                });
              </script>
                        {% endif %}
                        <button id="extend-btn" class="btn btn-primary mt-3 px-4">
                            {% trans "Extend" %}
                        </button>
                    </div>


                    <div class="col-12 col-lg-7">

                        <div class="table-responsive mb-2">
                            <table class="table tx-table align-middle mb-0">
                                <thead>
                                <tr>
                                    <th style="width: 25%;">
                                        <a class="sort-link text-decoration-none"
                                           href="?sort={% if sort == 'date' %}-date{% else %}date{% endif %}">
                                            {% trans "Date" %}
                                        </a>
                                    </th>
                                    <th style="width: 5%;"></th>
                                    <th style="width: 25%;">
                                        <a class="sort-link text-decoration-none"
                                           href="?sort={% if sort == 'iban' %}-iban{% else %}iban{% endif %}">
                                            {% trans "User" %}
                                        </a>
                                    </th>
                                    <th style="width: 25%;" class="text-end">
                                        <a class="sort-link text-decoration-none"
                                           href="?sort={% if sort == 'amount' %}-amount{% else %}amount{% endif %}">
                                            {% trans "Amount" %}
                                        </a>
                                    </th>
                                    <th style="width: 20%;">
                                        <a class="sort-link text-decoration-none"
                                           href="?sort={% if sort == 'type' %}-type{% else %}type{% endif %}">
                                            {% trans "Type" %}
                                        </a>
                                    </th>
                                </tr>
                                </thead>
                            </table>
                        </div>

                        <div style="height:35em;overflow:auto;border:1px solid #ccc;">
                            {% if all_transactions %}
                            <table class="table tx-table align-middle mb-0">
                                <tbody>
                                {% for tx in all_transactions %}
                                <tr class="{% if tx.payer == account %}table-danger{% else %}table-success{% endif %}">
                                    <td style="width: 25%;">
                                        {% language 'sk' %}
                                        {{ tx.created|localtime|date:"d. F Y H:i" }}
                                        {% endlanguage %}
                                    </td>
                                    <td style="width: 5%;"></td>
                                    <td style="width: 25%;" class="text-center">
                                        {% if tx.beneficiary == account %}
                                        <span>{{ tx.payer.user.get_full_name }}</span>
                                        <button type="button"
                                                class="btn btn-sm btn-link p-0 ms-1 text-decoration-none align-baseline"
                                                onclick="copyIban('{{ tx.payer.iban|escapejs }}')"
                                                title="{% trans 'Copy IBAN' %}"
                                                aria-label="{% trans 'Copy IBAN' %}">
                                            ⓘ
                                        </button>
                                        {% else %}
                                        <span>{{ tx.beneficiary.user.get_full_name }}</span>
                                        <button type="button"
                                                class="btn btn-sm btn-link p-0 ms-1 text-decoration-none align-baseline"
                                                onclick="copyIban('{{ tx.beneficiary.iban|escapejs }}')"
                                                title="{% trans 'Copy IBAN' %}"
                                                aria-label="{% trans 'Copy IBAN' %}">
                                            ⓘ
                                        </button>
                                        {% endif %}
                                    </td>
                                    <td style="width: 25%;" class="text-end">
                                        {% if tx.payer == account %}-{% endif %}
                                        {{ tx.amount }} €
                                    </td>
                                    <td style="width: 20%;">
                                        {% if tx.payer == account %}
                                        {% trans 'Sent' %}
                                        <a class="ms-2 text-white text-decoration-none"
                                           href="{% url 'duplicate_transaction' account.slug tx.id %}">
                                            <i class="bi bi-arrow-repeat"></i>
                                            <small>{% trans 'Duplicate payment' %}</small>
                                        </a>
                                        {% else %}
                                        {% trans 'Received' %}
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            {% else %}
                            <h3 class="text-center my-4">{% trans 'No transactions found.' %}</h3>
                            {% endif %}
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

{# EXTEND PANEL – grafy #}
<div id="extend-panel">
    <div class="extend-header">
        <div class="d-flex align-items-center flex-wrap gap-2">
            <h5 class="mb-0">{% trans "Payments statistics" %}</h5>
            <div class="btn-group btn-group-sm" role="group">
                <button type="button"
                        class="btn btn-outline-primary active"
                        data-range-button
                        data-range="30d">
                    {% trans "Last 30 days" %}
                </button>
                <button type="button"
                        class="btn btn-outline-primary"
                        data-range-button
                        data-range="6m">
                    {% trans "Last 6 months" %}
                </button>
                <button type="button"
                        class="btn btn-outline-primary"
                        data-range-button
                        data-range="12m">
                    {% trans "Last 12 months" %}
                </button>
            </div>
        </div>
        <button type="button" id="extend-close" class="btn btn-sm btn-outline-secondary">
            &times;
        </button>
    </div>
    <div class="extend-body">
        <div style="height:100%;"><canvas id="paymentsBarChart"></canvas></div>
    </div>
</div>

{# PAYMENT PANEL – nová platba ako bottom sheet #}
<div id="payment-panel">
    <div class="payment-header">
        <button type="button" id="payment-close" class="btn btn-sm btn-outline-secondary">
            &times;
        </button>
    </div>
    <div id="payment-panel-body" class="payment-body">

    </div>
</div>

{# modal – update account name #}
<div class="modal fade" id="updateAccountNameModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" method="post"
              action="{% url 'update_account_name' account.slug %}">
            {% csrf_token %}
            <div class="modal-header">
                <h5 class="modal-title">{% trans 'Update account name' %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label" for="account-name-input">
                    {% trans 'Enter your new account name:' %}</label>
                <input id="account-name-input" name="new_account_name"
                       class="form-control"
                       value="{{ account.name }}">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
                    {% trans 'Cancel' %}
                </button>
                <button class="btn btn-primary" type="submit">{% trans 'Save' %}</button>
            </div>
        </form>
    </div>
</div>

<div id="iban-copy-toast"
     style="display:none; position:fixed; bottom:20px; right:20px; z-index:9999; background:#198754; color:white; padding:10px 14px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2);">
    {% trans "IBAN copied" %}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    function copyIban(iban) {
        navigator.clipboard.writeText(iban).then(function () {
            const toast = document.getElementById("iban-copy-toast");
            toast.style.display = "block";

            clearTimeout(window.ibanCopyToastTimeout);
            window.ibanCopyToastTimeout = setTimeout(function () {
                toast.style.display = "none";
            }, 1800);
        }).catch(function () {
            alert("IBAN: " + iban);
        });
    }
    window.copyIban = copyIban;
    const shell    = document.getElementById('detail-shell');
    const toggle   = document.getElementById('filter-toggle');
    const closeBtn = document.getElementById('filter-close');
    const panel    = document.getElementById('filter-panel');

    function toggleFilter() {
      shell.classList.toggle('filter-open');
    }

    if (toggle && closeBtn) {
      toggle.addEventListener('click', toggleFilter);
      closeBtn.addEventListener('click', toggleFilter);
    }

    const params = new URLSearchParams(window.location.search);
    if (params.get("filter") === "open") {
      panel.classList.add('no-animate');
      shell.classList.add('filter-open');

      requestAnimationFrame(function () {
        panel.classList.remove('no-animate');
      });
    }

    const extendBtn    = document.getElementById('extend-btn');
    const extendPanel  = document.getElementById('extend-panel');
    const extendClose  = document.getElementById('extend-close');

    function toggleExtendPanel() {
      extendPanel.classList.toggle('open');
    }

    if (extendBtn && extendPanel) {
      extendBtn.addEventListener('click', toggleExtendPanel);
    }

    if (extendClose) {
      extendClose.addEventListener('click', toggleExtendPanel);
    }

    const filterPdfBtn = document.getElementById('generate-pdf-btn');
    const filterForm   = document.querySelector('#filter-panel form');
    if (filterPdfBtn && filterForm) {
      filterPdfBtn.addEventListener('click', function () {
        const oldAction = filterForm.getAttribute('action') || '';
        const oldTarget = filterForm.getAttribute('target') || '';

        filterForm.action = "{% url 'account_statement_pdf_filtered' account.slug %}";
        filterForm.target = "_blank";
        filterForm.submit();

        filterForm.action = oldAction;
        filterForm.target = oldTarget;
      });
    }

    const chartConfig = {
      "30d": {
        labels: {{ chart_30_labels|safe }},
        income: {{ chart_30_income|safe }},
        expenses: {{ chart_30_expenses|safe }},
      },
      "6m": {
        labels: {{ chart_6_labels|safe }},
        income: {{ chart_6_income|safe }},
        expenses: {{ chart_6_expenses|safe }},
      },
      "12m": {
        labels: {{ chart_12_labels|safe }},
        income: {{ chart_12_income|safe }},
        expenses: {{ chart_12_expenses|safe }},
      }
    };

    const barCanvas = document.getElementById('paymentsBarChart');
    if (barCanvas) {
      const ctxBar = barCanvas.getContext('2d');
      const initialRange = "30d";
      const initial = chartConfig[initialRange];

      let paymentsChart = new Chart(ctxBar, {
        type: 'bar',
        data: {
          labels: initial.labels,
          datasets: [
            {
              label: '{% trans "Income" %}',
              data: initial.income,
              backgroundColor: '#0F9D58'
            },
            {
              label: '{% trans "Expenses" %}',
              data: initial.expenses,
              backgroundColor: '#C5152B'
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });

      const rangeButtons = document.querySelectorAll('[data-range-button]');
      rangeButtons.forEach(function (btn) {
        btn.addEventListener('click', function () {
          rangeButtons.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
          const range = btn.getAttribute('data-range');
          const cfg = chartConfig[range];
          if (!cfg) return;

          paymentsChart.data.labels = cfg.labels;
          paymentsChart.data.datasets[0].data = cfg.income;
          paymentsChart.data.datasets[1].data = cfg.expenses;
          paymentsChart.update();
        });
      });
    }

    const newPaymentBtn = document.getElementById('new-payment-btn');
    const paymentPanel  = document.getElementById('payment-panel');
    const paymentClose  = document.getElementById('payment-close');
    const paymentBody   = document.getElementById('payment-panel-body');

    function closePaymentPanel() {
      if (paymentPanel) {
        paymentPanel.classList.remove('open');
      }
    }

    if (paymentClose) {
      paymentClose.addEventListener('click', closePaymentPanel);
    }

    function bindPaymentForm(url) {
      if (!paymentBody) return;
      const form = paymentBody.querySelector('form');
      if (!form) return;

      form.addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(form);
        fetch(url, {
          method: 'POST',
          body: formData,
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        }).then(function(resp) {
          if (resp.redirected) {
            window.location.href = resp.url;
            return null;
          }
          return resp.text();
        }).then(function(html) {
          if (!html) return;
          paymentBody.innerHTML = html;
          bindPaymentForm(url);
        }).catch(function(err) {
          console.error('Payment submit failed', err);
        });
      });
    }

    if (newPaymentBtn && paymentPanel && paymentBody) {
      newPaymentBtn.addEventListener('click', function () {
        const url = newPaymentBtn.getAttribute('data-new-payment-url');
        if (!url) return;

        paymentPanel.classList.add('open');
        paymentBody.innerHTML = `
          <div class="d-flex justify-content-center align-items-center h-100">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>`;

        fetch(url, {
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
        .then(function(resp) { return resp.text(); })
        .then(function(html) {
          paymentBody.innerHTML = html;
          bindPaymentForm(url);
        })
        .catch(function(err) {
          console.error('Failed to load payment form', err);
          paymentBody.innerHTML = '<p class="text-danger">Failed to load form.</p>';
        });
      });
    }
  });
</script>

{% endblock %}