{% extends 'base.html' %}

      {% block content %}

      
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

      <script>
        document.getElementById("superdashboard").classList.add("is-active")
      </script>
      
      <style>
        /* Responsive filters */
        @media 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;
          }
          
          /* Filtres responsive */
          .field.has-addons {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
          }
          
          .field.has-addons .control {
            width: 100%;
          }
          
          .field.has-addons .select,
          .field.has-addons .select select,
          .field.has-addons .button {
            width: 100%;
          }
        }
      </style>
      
  <section class="section is-title-bar">
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <div>
            <h2 class="title is-4" style="margin-bottom: 4px; color: #1f2937;">Tableau de bord Admin</h2>
            <p class="subtitle is-6" style="color: #6b7280; margin: 0;">Vue d'ensemble complète de la plateforme</p>
          </div>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <div class="field has-addons" style="margin-bottom: 0;">
            <div class="control">
              <div class="select">
                <select id="yearFilter">
                  <option value="2026" {% if filter_year == '2026' %}selected{% endif %}>2026</option>
                  <option value="2025" {% if filter_year == '2025' %}selected{% endif %}>2025</option>
                  <option value="2024" {% if filter_year == '2024' %}selected{% endif %}>2024</option>
                  <option value="2023" {% if filter_year == '2023' %}selected{% endif %}>2023</option>
                  <option value="2022" {% if filter_year == '2022' %}selected{% endif %}>2022</option>
                  <option value="2021" {% if filter_year == '2021' %}selected{% endif %}>2021</option>
                  <option value="all" {% if filter_year == 'all' %}selected{% endif %}>Toutes les années</option>
                </select>
              </div>
            </div>
            <div class="control">
              <div class="select">
                <select id="monthFilter">
                  <option value="all" {% if filter_month == 'all' %}selected{% endif %}>Tous les mois</option>
                  <option value="1" {% if filter_month == '1' %}selected{% endif %}>Janvier</option>
                  <option value="2" {% if filter_month == '2' %}selected{% endif %}>Février</option>
                  <option value="3" {% if filter_month == '3' %}selected{% endif %}>Mars</option>
                  <option value="4" {% if filter_month == '4' %}selected{% endif %}>Avril</option>
                  <option value="5" {% if filter_month == '5' %}selected{% endif %}>Mai</option>
                  <option value="6" {% if filter_month == '6' %}selected{% endif %}>Juin</option>
                  <option value="7" {% if filter_month == '7' %}selected{% endif %}>Juillet</option>
                  <option value="8" {% if filter_month == '8' %}selected{% endif %}>Août</option>
                  <option value="9" {% if filter_month == '9' %}selected{% endif %}>Septembre</option>
                  <option value="10" {% if filter_month == '10' %}selected{% endif %}>Octobre</option>
                  <option value="11" {% if filter_month == '11' %}selected{% endif %}>Novembre</option>
                  <option value="12" {% if filter_month == '12' %}selected{% endif %}>Décembre</option>
                </select>
              </div>
            </div>
            <div class="control">
              <button class="button is-primary" id="applyFilter">
                <span class="icon"><i class="mdi mdi-filter"></i></span>
                <span>Appliquer</span>
              </button>
            </div>
            <div class="control">
              <button class="button" id="exportBtn" title="Exporter en CSV">
                <span class="icon"><i class="mdi mdi-download"></i></span>
              </button>
            </div>
            <div class="control">
              <button class="button" id="refreshBtn" title="Rafraîchir">
                <span class="icon"><i class="mdi mdi-refresh"></i></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section is-main-section">
    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    Solde
                  </h3>
                  <h1 class="title" id="solde-amount">
                    {{amount}} XOF
                  </h1>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">

                  <span class="icon has-text-primary is-large"><i class="mdi mdi-cards mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    WAVE
                  </h3>
                  <h1 class="title" id="wave-amount">
                    {{wave}} <b>XOF</b>
                  </h1>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">
                  <span class="icon has-text-info is-large"><i class="mdi mdi-cash mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    Orange Money
                  </h3>
                  <h1 class="title">
                    {{om}} <b>XOF</ id="om-amount"b>
                  </h1>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">
                  <span class="icon has-text-danger   is-large"><i class="mdi mdi-cash-multiple mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="columns">

      <div class="column is-6">

        <div class="card" style="height: 60vh !important;">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon"><i class="mdi mdi-finance"></i></span>
              Revenus
            </p>
            <a href="" class="card-header-icon">
              <span class="icon"><i class="mdi mdi-reload"></i></span>
            </a>
          </header>
          <div class="card-content">
            <div class="chart-area">
              <div style="height: 100%;">
                <div class="chartjs-size-monitor">
                  <div class="chartjs-size-monitor-expand">
                    <div>
                    </div>
                  </div>
                  <div class="chartjs-size-monitor-shrink">
                    <div>
                    </div>
                  </div>
                </div>
                <canvas id="big-line-chart-revenus"
                        width="2992"
                        height="400px"
                        class="chartjs-render-monitor"
                        style="display: block;
                               height: 400px;
                               width: 1197px;"></canvas>
              </div>
            </div>
          </div>
        </div>

        

      </div>

      <div class="column is-6">

        <div class="card" style="height: 60vh !important;">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon"><i class="mdi mdi-finance"></i></span>
              Retraits
            </p>
            <a href="" class="card-header-icon">
              <span class="icon"><i class="mdi mdi-reload"></i></span>
            </a>
          </header>
          <div class="card-content">
            <div class="chart-area">
              <div style="height: 100%;">
                <div class="chartjs-size-monitor">
                  <div class="chartjs-size-monitor-expand">
                    <div>
                    </div>
                  </div>
                  <div class="chartjs-size-monitor-shrink">
                    <div>
                    </div>
                  </div>
                </div>
                <canvas id="big-line-chart-retraits"
                        width="2992"
                        height="400px"
                        class="chartjs-render-monitor"
                        style="display: block;
                               height: 400px;
                               width: 1197px;"></canvas>
              </div>
            </div>
          </div>
        </div>

        

      </div>

    </div>



  </section>


  <script>
    ////////////////// revenus charts

          const ctx = document.getElementById('big-line-chart-revenus').getContext('2d');
          const myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels : [{% for item in p_labels %}"{{ item }}",{% endfor %}],
                  datasets: [{
                    label: "les Transactions des paiements par type (XOF)",
                    data : [{% for item in p_values %}{{ item }},{% endfor %}],
                    backgroundColor: '#FEC802',
                    borderColor: '#FEC802',
                    borderWidth: 1,
                    
                  }]
              },
              options: {
                responsive: true,
                maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          ticks: {
                            callback: function(value) {
                              return Math.round(value).toLocaleString('fr-FR') + ' XOF';
                            }
                          }
                      }
                  },
                  plugins: {
                    tooltip: {
                      callbacks: {
                        label: function(context) {
                          let label = context.dataset.label || '';
                          if (label) label += ': ';
                          label += Math.round(context.parsed.y).toLocaleString('fr-FR') + ' XOF';
                          return label;
                        }
                      }
                    }
                  }
              }
          });
          




          ////////////////// retraits charts

          const ctx2 = document.getElementById('big-line-chart-retraits').getContext('2d');
          const myChart_2 = new Chart(ctx2, {
              type: 'bar',
              data: {
                labels : [{% for item in r_labels %}"{{ item }}",{% endfor %}],
                  datasets: [{
                    label: "les Transactions des retraits par type (XOF)",
                    data : [{% for item in r_values %}{{ item }},{% endfor %}],
                    backgroundColor: '#FEC802',
                    borderColor: '#FEC802',
                    borderWidth: 1,
                    
                  }]
              },
              options: {
                responsive: true,
                maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          ticks: {
                            callback: function(value) {
                              return Math.round(value).toLocaleString('fr-FR') + ' XOF';
                            }
                          }
                      }
                  },
                  plugins: {
                    tooltip: {
                      callbacks: {
                        label: function(context) {
                          let label = context.dataset.label || '';
                          if (label) label += ': ';
                          label += Math.round(context.parsed.y).toLocaleString('fr-FR') + ' XOF';
                          return label;
                        }
                      }
                    }
                  }
              }
          });

          // ========== Gestion des filtres ==========
          const yearFilter = document.getElementById('yearFilter');
          const monthFilter = document.getElementById('monthFilter');
          const applyFilterBtn = document.getElementById('applyFilter');
          const exportBtn = document.getElementById('exportBtn');
          const refreshBtn = document.getElementById('refreshBtn');

          // ========== Fonction de formatage ==========
          function formatCurrency(amount) {
            const rounded = Math.round(amount);
            return rounded.toLocaleString('fr-FR');
          }

          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;
            `;
            notification.innerHTML = `<button class="delete"></button>${message}`;
            document.body.appendChild(notification);
            
            notification.querySelector('.delete').addEventListener('click', () => {
              notification.remove();
            });
            
            setTimeout(() => notification.remove(), 3000);
          }

          // ========== Formatage des montants des stat cards ==========
          function formatStatCards() {
            const soldeEl = document.getElementById('solde-amount');
            const waveEl = document.getElementById('wave-amount');
            const omEl = document.getElementById('om-amount');

            if (soldeEl) {
              const soldeValue = "{{amount}}";
              const soldeNumber = parseFloat(soldeValue);
              if (!isNaN(soldeNumber)) {
                soldeEl.textContent = formatCurrency(soldeNumber) + ' XOF';
              }
            }

            if (waveEl) {
              const waveValue = "{{wave}}";
              const waveNumber = parseFloat(waveValue);
              if (!isNaN(waveNumber)) {
                waveEl.innerHTML = formatCurrency(waveNumber) + ' <b>XOF</b>';
              }
            }

            if (omEl) {
              const omValue = "{{om}}";
              const omNumber = parseFloat(omValue);
              if (!isNaN(omNumber)) {
                omEl.innerHTML = formatCurrency(omNumber) + ' <b>XOF</b>';
              }
            }
          }

          // Formater les montants au chargement de la page
          formatStatCards();

          applyFilterBtn.addEventListener('click', function() {
            const year = yearFilter.value;
            const month = monthFilter.value;
            
            this.classList.add('is-loading');
            
            let filterUrl = window.location.pathname + '?';
            if (year !== 'all') filterUrl += `year=${year}&`;
            if (month !== 'all') filterUrl += `month=${month}&`;
            
            // Recharger la page avec les nouveaux paramètres
            window.location.href = filterUrl;
          });

          exportBtn.addEventListener('click', function() {
            const year = yearFilter.value;
            const month = monthFilter.value;
            
            let exportUrl = '/export-superdashboard?';
            if (year !== 'all') exportUrl += `year=${year}&`;
            if (month !== 'all') exportUrl += `month=${month}`;
            
            showNotification('Export des données en cours...', 'info');
            setTimeout(() => {
              window.location.href = exportUrl;
              showNotification('Export terminé!', 'success');
            }, 1000);
          });

          refreshBtn.addEventListener('click', function() {
            this.classList.add('is-loading');
            setTimeout(() => {
              window.location.reload();
            }, 500);
          });
      </script>
       
      {% endblock content %}