{% extends 'base.html' %}

      {% block content %}
      <script>
        document.getElementById("trans").classList.add("is-active")
      </script>

      <!-- En-tête avec filtres -->
      <section class="section is-title-bar" style="background: #ffffff; padding: 2rem 1.5rem; margin-bottom: 1.5rem; border-radius: 12px; border: 1px solid #f0f0f0;">
        <div class="level" style="margin-bottom: 0;">
          <div class="level-left">
            <div class="level-item">
              <div>
                <h1 class="title mb-5" style="color: #6B1414; margin-bottom: 0.25rem; font-size: 1.75rem; font-weight: 600;">Transactions</h1>
                
                <p class="subtitle is-6" style="color: #9ca3af; margin-bottom: 0;">Gérez toutes vos transactions</p>
              </div>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              <button class="button" style="background: #C62828; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-weight: 500; transition: all 0.3s;" onclick="openPopup('retrait')">
                <span class="icon"><i class="mdi mdi-cash-minus"></i></span>
                <span>Demande de retrait</span>
              </button>
            </div>
            {% include "pages/formretrait.html" %}
          </div>
        </div>

        <!-- Barre de recherche -->
        <div class="columns is-multiline" style="margin-top: 1.5rem; margin-bottom: 0;">
          <div class="column is-9">
            <div class="field">
              <label class="label" style="font-size: 0.75rem; text-transform: uppercase; color: #9ca3af; font-weight: 500; margin-bottom: 0.5rem;">Rechercher</label>
              <div class="control has-icons-left">
                <input id="searchInput" class="input" type="text" placeholder="ID ou numéro client" style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.65rem 1rem; padding-left: 2.5rem;">
                <span class="icon is-left" style="color: #9ca3af;">
                  <i class="mdi mdi-magnify"></i>
                </span>
              </div>
            </div>
          </div>

          <div class="column is-3">
            <label class="label" style="font-size: 0.75rem; text-transform: uppercase; color: #9ca3af; font-weight: 500; margin-bottom: 0.5rem;">Actions</label>
            <div class="field">
              <button id="exportBtn" class="button is-fullwidth" style="background: #F5E6D3; color: #6B1414; border: none; border-radius: 8px; padding: 0.65rem 1.5rem; font-weight: 500;">
                <span class="icon"><i class="mdi mdi-download"></i></span>
                <span>Export</span>
              </button>
            </div>
          </div>
        </div>
      </section> 

      <!-- Carte de transactions -->

      <!-- Carte de transactions -->
      <div class="card" style="border-radius: 12px; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
        <header class="card-header" style="background: #fdfcfc; border-bottom: 1px solid #f0f0f0; border-radius: 12px 12px 0 0;">
          <p class="card-header-title" style="color: #4b5563; font-weight: 600;">
            <span class="icon" style="color: #6B1414;"><i class="mdi mdi-swap-horizontal"></i></span>
            <span>Liste des transactions</span>
          </p>
          <a href="" class="card-header-icon" style="color: #9ca3af;">
            <span class="icon"><i class="mdi mdi-reload"></i></span>
          </a>
        </header>
        <div class="card-content" style="padding: 0;">
          <div class="b-table">
            <div class="table-wrapper">
              {% if count == 0 %}
              <div style="padding: 4rem 2rem; text-align: center;">
                <span class="icon is-large" style="color: #e5e7eb; font-size: 4rem; margin-bottom: 1rem;">
                  <i class="mdi mdi-text-box-remove-outline mdi-48px"></i>
                </span>
                <p class="subtitle" style="color: #9ca3af; margin-top: 1rem;">Vous n'avez aucune transaction</p>
              </div>
              {% else %}
              
              <table class="table is-fullwidth is-hoverable" style="margin-bottom: 0;">
                <thead>
                  <tr style="background: #fafafa; border-bottom: 2px solid #f0f0f0;">
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">ID</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Client</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Montant</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Moyen</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Statut</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Date</th>
                    <th style="color: #6b7280; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem;">Type</th>
                  </tr>
                </thead>
                <tbody id="transactionsTableBody">
                  {% for t in transactions %}
                  <tr class="transaction-row" data-type="{{t.type}}" data-status="{{t.transactionStatus}}" data-wallet="{{t.type_wallet}}" data-search="{{t.transactionID}} {{t.client_number}}" style="border-bottom: 1px solid #f5f5f5; transition: background 0.2s;">
                    <td data-label="Id" style="padding: 1rem; color: #4b5563; font-weight: 500; font-family: 'Courier New', monospace; font-size: 0.85rem;">
                      {{t.transactionID}}
                    </td>
                    <td data-label="Client" style="padding: 1rem; color: #6b7280;">
                      <span style="background: #f3f4f6; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500;">
                        {{t.client_number|slice:":15"}}
                      </span>
                    </td>
                    <td data-label="Montant" style="padding: 1rem; color: #1f2937; font-weight: 600;">
                      <span class="amount-value" data-amount="{{t.amount}}" style="{% if t.type == 'RETRAIT' %}color: #C62828;{% else %}color: #059669;{% endif %}">
                        {% if t.type == "RETRAIT" %}- {% endif %}{{t.amount}} XOF
                      </span>
                    </td>
                    <td data-label="Par" style="padding: 1rem;">
                      <span style="{% if t.type_wallet == 'WAVE' %}background: #dbeafe; color: #1e40af;{% else %}background: #ffedd5; color: #c2410c;{% endif %} padding: 0.35rem 0.85rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;">
                        {{t.type_wallet}}
                      </span>
                    </td>
                    <td data-label="Status" style="padding: 1rem;">
                      <span class="tag {% if t.transactionStatus == 'SUCCESS' %}is-success{% else %}is-warning{% endif %}" style="border-radius: 6px; font-weight: 500; padding: 0.5rem 1rem;">
                        {{t.transactionStatus}}
                      </span>
                    </td>
                    <td data-label="Date" style="padding: 1rem; color: #9ca3af; font-size: 0.875rem;">
                      {{t.created}}
                    </td>
                    <td data-label="Type" style="padding: 1rem;">
                      <span style="{% if t.type == 'RETRAIT' %}background: #fee2e2; color: #991b1b;{% else %}background: #d1fae5; color: #065f46;{% endif %} padding: 0.35rem 0.85rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;">
                        {{t.type}}
                      </span>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>

              {% endif %}

            </div>


            {% if nbpage > 1 %}

            <div style="background: #fafafa; border-top: 1px solid #f0f0f0; padding: 1.5rem; border-radius: 0 0 12px 12px;">
              <div class="level" style="margin-bottom: 0;">
                <div class="level-left">
                  <div class="level-item">
                    <div class="buttons has-addons">

                      {% if transactions.has_previous %}
                          <button onclick="goTo('?page={{ transactions.previous_page_number }}')" type="button" class="button" style="border: 1px solid #e5e7eb; border-radius: 8px; background: white; color: #6b7280;">{{ transactions.previous_page_number }}</button>
                      {% endif %}

                      <button type="button" class="button" style="background: #6B1414; color: white; border: none; border-radius: 8px; font-weight: 600;">{{transactions.number}}</button>

                      {% if transactions.has_next %}
                          <button onclick="goTo('?page={{ transactions.next_page_number }}')" type="button" class="button" style="border: 1px solid #e5e7eb; border-radius: 8px; background: white; color: #6b7280;">{{ transactions.next_page_number }}</button>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="level-right">
                  <div class="level-item">
                    <small style="color: #9ca3af; font-weight: 500;">Page {{transactions.number}} sur {{nbpage}}</small>
                  </div>
                </div>
              </div>
            </div>

          {% endif %}




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

      <!-- Styles pour le hover sur les lignes de transaction -->
      <style>
        .transaction-row:hover {
          background-color: #fafafa !important;
          cursor: pointer;
        }

        @keyframes slideIn {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }

        @media only screen and (max-width: 768px) {
          /* Header responsive */
          .section.is-title-bar .level {
            display: block;
          }
          
          .section.is-title-bar .level-left,
          .section.is-title-bar .level-right {
            margin-bottom: 1rem;
          }
          
          .section.is-title-bar .level-item {
            justify-content: flex-start;
            width: 100%;
          }
          
          .section.is-title-bar .button {
            width: 100%;
            justify-content: center;
          }
          
          /* Colonnes responsive */
          .columns.is-multiline {
            display: block !important;
          }
          
          .column.is-9,
          .column.is-3 {
            width: 100% !important;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
          }
          
          /* Table responsive */
          table, thead, tbody, th, td, tr {
            display: block;
          }
          
          thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
          }
          
          tr {
            margin-bottom: 1rem;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            background: white;
          }
          
          td {
            border: none;
            position: relative;
            padding: 0.75rem 1rem !important;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          
          td:before {
            content: attr(data-label);
            font-weight: 600;
            color: #6b7280;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            width: 100px;
          }
          
          td > * {
            flex: 1;
            text-align: right;
          }
        }
      </style>

      <!-- JavaScript pour les filtres et le formatage -->
      <script>
        // Fonction de formatage des montants
        function formatCurrency(amount) {
          const rounded = Math.round(amount);
          return rounded.toLocaleString('fr-FR');
        }

        // Formater tous les montants au chargement de la page
        document.addEventListener('DOMContentLoaded', function() {
          document.querySelectorAll('.amount-value').forEach(el => {
            const amount = el.getAttribute('data-amount');
            const isRetrait = el.textContent.includes('-');
            if (amount) {
              const formatted = formatCurrency(parseFloat(amount));
              el.textContent = (isRetrait ? '- ' : '') + formatted + ' XOF';
            }
          });
        });

        // Fonction pour afficher les notifications
        function showNotification(message, type = 'info') {
          const notification = document.createElement('div');
          notification.className = `notification is-${type}`;
          notification.style.cssText = `
            position: fixed; top: 20px; right: 20px; z-index: 9999;
            min-width: 300px; border-radius: 8px; animation: slideIn 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          `;
          notification.innerHTML = `<button class="delete"></button>${message}`;
          document.body.appendChild(notification);
          
          notification.querySelector('.delete').addEventListener('click', () => {
            notification.remove();
          });
          
          setTimeout(() => notification.remove(), 3000);
        }

        // Initialiser la recherche après le chargement du DOM
        document.addEventListener('DOMContentLoaded', function() {
          const searchInput = document.getElementById('searchInput');
          const exportBtn = document.getElementById('exportBtn');

          function searchTransactions() {
            const searchValue = searchInput.value.toLowerCase();
            const rows = document.querySelectorAll('.transaction-row');
            let visibleCount = 0;

            rows.forEach(row => {
              const searchData = (row.getAttribute('data-search') || '').toLowerCase();
              const matchesSearch = searchData.includes(searchValue);

              if (matchesSearch) {
                row.style.display = '';
                visibleCount++;
              } else {
                row.style.display = 'none';
              }
            });

            return visibleCount;
          }

          // Recherche en temps réel lors de la saisie
          if (searchInput) {
            searchInput.addEventListener('input', function() {
              searchTransactions();
            });
          }

          // Export des transactions
          if (exportBtn) {
            exportBtn.addEventListener('click', function() {
              showNotification('Export des transactions en cours...', 'info');
              
              setTimeout(() => {
                showNotification('Export terminé! Téléchargement du fichier CSV...', 'success');
              }, 1000);
            });
          }
        });

        // Fonction de navigation (si non définie ailleurs)
        if (typeof goTo !== 'function') {
          function goTo(url) {
            window.location.href = url;
          }
        }
      </script>


  {% endblock content %}