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

{% block title %}{% trans "Dashboard" %}{% endblock %}

{% block content %}

<style>
  /* PROFILE EXTEND PANEL – spodný panel pre profilové štatistiky */
  #profile-extend-panel {
      position: fixed;
      left: 60px;
      right: 60px;
      top: 150px;
      --gap: 60px;
      bottom: var(--gap);

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

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

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

  #profile-extend-panel.open {
      transform: translateY(0);
  }

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

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

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

  /* PAYMENT PANEL – vysúvacie okno pre NOVÚ PLATBU v Dashbord-e */
  #payment-panel {
      position: fixed;

      /* šírka a centrovanie */
      width: 60%;
      max-width: 900px;
      min-width: 600px;
      left: 50%;
      transform: translateX(-50%) translateY(110vh);  /* úplne mimo obrazovku */

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

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

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

  #payment-panel.open {
      transform: translateX(-50%) translateY(0);  /* vysunutý hore */
  }

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

  #payment-close {
      position: absolute;
      top: 8px;
      right: 12px;
      background: none;
      border: none;
      font-size: 26px;
      cursor: pointer;
      z-index: 2200;
  }
</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 "Dashboard" %}
        </h2>

        <div class="container">
            <div class="row justify-content-center my-4 g-2">

                {# ────────────────────────────────────────────── #}
                {#  SPOJENÝ PANEL: Welcome + Profile summary      #}
                {# ────────────────────────────────────────────── #}

                <div class="col-12 col-lg-8 m-3 rounded-3 bg-white"
                     style="box-shadow:0 0 20px rgba(0,0,255,.2);">
                    <div class="bg-white py-4">
                        <div class="row align-items-center">

                            {# ĽAVÁ ČASŤ – pôvodný welcome obsah #}
                            <div class="col-12 col-lg-4 d-flex flex-column align-items-center mb-4 mb-lg-0">

                                <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mb-3"
                                     style="width:110px;height:110px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
                                         viewBox="0 0 103 103" fill="none">
                                        <path d="M81.5417 90.125C81.5417 73.5334 68.0915 60.0833 51.5 60.0833C34.9084 60.0833 21.4583 73.5334 21.4583 90.125M51.5 47.2083C42.0191 47.2083 34.3333 39.5226 34.3333 30.0417C34.3333 20.5608 42.0191 12.875 51.5 12.875C60.9809 12.875 68.6667 20.5608 68.6667 30.0417C68.6667 39.5226 60.9809 47.2083 51.5 47.2083Z"
                                              stroke="white" stroke-width="2"
                                              stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>

                                {% blocktrans with name=user.get_full_name %}
                                <h4 class="my-3 lh-1 fw-bold text-center">Welcome, {{ name }}!</h4>
                                {% endblocktrans %}

                                <a href="{% url 'profile' %}" class="btn btn-primary mt-2">
                                    {% trans "More" %}
                                </a>
                            </div>

                            {# PRAVÁ ČASŤ – pôvodný Profile summary box #}
                            <div class="col-12 col-lg-8 text-center">
                                <div class="card-body d-flex flex-column position-relative align-items-center">
                                    <h3 class="card-title text-nowrap">
                                        {% trans "Profile summary" %}
                                    </h3>

                                    {% if profile_income_total or profile_expenses_total %}
                                    {% blocktrans with inc=profile_income_total|floatformat:2 %}
                                    <p class="m-0">Total income: {{ inc }} EUR</p>
                                    {% endblocktrans %}
                                    {% blocktrans with exp=profile_expenses_total|floatformat:2 %}
                                    <p class="m-0">Total expenses: {{ exp }} EUR</p>
                                    {% endblocktrans %}
                                    {% else %}
                                    <p class="m-0 mt-2">
                                        {% trans "No transactions for this profile yet." %}
                                    </p>
                                    {% endif %}
                                </div>

                                {% if profile_income_total or profile_expenses_total %}
                                <p class="m-0 mt-3">{% trans "Statistic" %}</p>
                                <div class="d-flex justify-content-center">
                                    <canvas class="w-75 h-75" id="profileTotalsChart"></canvas>
                                </div>
                                <script>
                                  document.addEventListener("DOMContentLoaded", function () {
                                    const canvas = document.getElementById('profileTotalsChart');
                                    if (!canvas) return;
                                    const ctx = canvas.getContext('2d');

                                    const data = [
                                      parseFloat('{{ profile_expenses_total|unlocalize }}'),
                                      parseFloat('{{ profile_income_total|unlocalize }}'),
                                    ];

                                    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="profile-extend-btn" class="btn btn-primary mt-3 px-4">
                                    {% trans "Extend" %}
                                </button>
                            </div>

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

                {# ─────────────────────────── #}
                {#        KARTY ÚČTOV        #}
                {# ─────────────────────────── #}

                {% for account in accounts %}
                <div class="col-12 col-lg-4 m-3 text-center rounded-3 bg-white" style="box-shadow:0 0 20px rgba(0,0,255,.2);">
                    <div class="bg-white py-4">
                        <div class="card-body d-flex flex-column position-relative">
                            <h3 class="card-title text-nowrap">{{ account.name }}</h3>

                            <a href="{% url 'account_detail' account.slug %}" class="d-flex justify-content-center">
                                <div class="mb-1 w-75 position-relative">
                                    <img src="{% if forloop.counter == 2 %}{% static 'images/card_2.png' %}{% else %}{% static 'images/card_1.png' %}{% endif %}"
                                         class="img-fluid" alt="{% trans 'Card Image' %}">
                                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                                        <h5 class="card-title text-nowrap text-white" style="font-size:90%;">{{ account.iban }}</h5>
                                    </div>
                                </div>
                            </a>

                            {% blocktrans with bal=account.balance|floatformat:2 %}
                            <p class="m-0">Available balance: {{ bal }} EUR</p>
                            {% endblocktrans %}
                        </div>

                        {% with beneficiaries=account.payer_transaction_set.all payers=account.beneficiary_transaction_set.all %}
                        {% if beneficiaries or payers %}
                        <p class="m-0">{% trans "Statistic" %}</p>
                        <div class="d-flex justify-content-center">
                            <canvas class="w-75 h-75" id="spendingChart{{ account.iban|slugify }}"></canvas>
                        </div>
                        <script defer>
              const bData{{ forloop.counter }} = [{% for t in beneficiaries %}{{ t.amount }},{% endfor %}],
                    pData{{ forloop.counter }} = [{% for t in payers %}{{ t.amount }},{% endfor %}],
                    ctx{{ forloop.counter }} = document.getElementById("spendingChart{{ account.iban|slugify }}").getContext('2d');
              new Chart(ctx{{ forloop.counter }}, {
                type: 'doughnut',
                data: {
                  labels: ['{% trans "expenses" %}', '{% trans "income" %}'],
                  datasets: [{
                    data: [bData{{ forloop.counter }}.reduce((a,b)=>a+b,0), pData{{ forloop.counter }}.reduce((a,b)=>a+b,0)],
                    backgroundColor: (n => { const c=[];for(let i=0;i<n;i++){ const h=(i*137.5)%360;c.push(`hsl(${h},75%,50%)`);}return c;})(2)
                  }]
                },
                options:{responsive:true,plugins:{legend:{position:"bottom",labels:{boxWidth:15}}}}
              });
            </script>
                        {% else %}
                        <p class="text-muted text-center">{% trans "No transactions were found to create the chart" %}</p>
                        {% endif %}
                        {% endwith %}

                        <!-- NEW PAYMENT tlačidlo → otvorí PAYMENT PANEL -->
                        <button
                                type="button"
                                class="btn btn-success d-inline-flex align-items-center gap-1 open-payment-panel"
                                data-url="{% url 'transaction_create' account.slug %}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                 class="bi bi-credit-card" viewBox="0 0 16 16">
                                <path d="M0 4a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H2a2 2 0 01-2-2V4zm2-1a1 1 0 00-1 1v1h14V4a1 1 0 00-1-1H2zm13 4H1v5a1 1 0 001 1h12a1 1 0 001-1V7z"/>
                                <path d="M2 10a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-1z"/>
                            </svg>
                            {% trans "New payment" %}
                        </button>
                    </div>
                </div>
                {% endfor %}

            </div>
        </div>

    </div>
</div>

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

{# ---------- PAYMENT PANEL PRE DASHBOARD (NOVÁ PLATBA) ---------- #}
<div id="payment-panel">
    <button type="button" id="payment-close">&times;</button>
    <div id="payment-panel-body">
        <!-- sem sa načíta formulár -->
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const prBtn   = document.getElementById('profile-extend-btn');
  const prPanel = document.getElementById('profile-extend-panel');
  const prClose = document.getElementById('profile-extend-close');

  function toggleProfilePanel() {
    if (!prPanel) return;
    prPanel.classList.toggle('open');
  }

  if (prBtn)   prBtn.addEventListener('click', toggleProfilePanel);
  if (prClose) prClose.addEventListener('click', toggleProfilePanel);

  const prConfig = {
    "30d": {
      labels: {{ pchart_30_labels|default:"[]"|safe }},
      income: {{ pchart_30_income|default:"[]"|safe }},
      expenses: {{ pchart_30_expenses|default:"[]"|safe }},
    },
    "6m": {
      labels: {{ pchart_6_labels|default:"[]"|safe }},
      income: {{ pchart_6_income|default:"[]"|safe }},
      expenses: {{ pchart_6_expenses|default:"[]"|safe }},
    },
    "12m": {
      labels: {{ pchart_12_labels|default:"[]"|safe }},
      income: {{ pchart_12_income|default:"[]"|safe }},
      expenses: {{ pchart_12_expenses|default:"[]"|safe }},
    }
  };

  const prCanvas = document.getElementById('profilePaymentsChart');
  if (prCanvas && Array.isArray(prConfig["30d"].labels)) {
    const ctx = prCanvas.getContext('2d');
    const initialRange = "30d";
    const initial = prConfig[initialRange];

    let prChart = new Chart(ctx, {
      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-pr-range]');
    rangeButtons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        rangeButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const range = btn.getAttribute('data-pr-range');
        const cfg = prConfig[range];
        if (!cfg) return;
        prChart.data.labels = cfg.labels;
        prChart.data.datasets[0].data = cfg.income;
        prChart.data.datasets[1].data = cfg.expenses;
        prChart.update();
      });
    });
  }

  const payPanel   = document.getElementById('payment-panel');
  const payBody    = document.getElementById('payment-panel-body');
  const payClose   = document.getElementById('payment-close');
  const payButtons = document.querySelectorAll('.open-payment-panel');

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

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

  function bindPaymentForm(url) {
    if (!payBody) return;
    const form = payBody.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;
        payBody.innerHTML = html;
        bindPaymentForm(url);
      }).catch(function(err) {
        console.error('Payment submit failed', err);
      });
    });
  }

  if (payPanel && payBody && payButtons.length) {
    payButtons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        const url = btn.getAttribute('data-url');
        if (!url) return;

        payPanel.classList.add('open');

        payBody.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) {
          payBody.innerHTML = html;
          bindPaymentForm(url);
        })
        .catch(function(err) {
          console.error('Failed to load payment form', err);
          payBody.innerHTML = '<p class="text-danger">Failed to load form.</p>';
        });
      });
    });
  }
});
</script>

{% endblock %}