{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeStat %}main-menu-active{% endblock %}
{% block titre %}Statistiques{% endblock %}
{% block body %}
<style>
    .chart-box {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 20px;
      margin:15px;
    }
    canvas {
      max-height: 400px;
    }
    h4{
      color:#3c70b3;
    }

    .table>thead {
      vertical-align: bottom;
      background-color: aliceblue;
    }
</style>
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">Statistiques</h3>
        </div>
    </div>
    <div class="row block_ac">

      <div class="container py-5">
        <div class="row justify-content-center">
          {% for stat in statistiques %}
            {% if stat.type == 4 and stat.excel is defined and stat.excel|length > 0 %}
              <div class="col-lg-10 mb-2 table-responsive">
                <h4>{{ stat.titre }}</h4>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            {% for col in stat.excel[0] %}
                                <th>{{ col }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in stat.excel|slice(1) %}
                            <tr>
                                {% for cell in row %}
                                    <td>{{ cell }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
              </div>
            {% elseif stat.type == 5 %}
              <div class="col-lg-5 mb-5 chart-box">
                <h4>{{ stat.titre }}</h4>
                <img src="{{ stat.image }}" alt="{{ stat.titre }}" style="width: -webkit-fill-available;" />
                {# <br/> #}
                {# <h6>{{ stat.texte }}</h6> #}
              </div>
            {% else %}
              {#<div class="col-lg-5 mb-5 chart-box">#}
              {#  <h4>{{ stat.titre }}</h4>#}
              {#  <canvas id="chart{{ loop.index }}"></canvas>#}
              {#  <br/>#}
              {#  <h6>{{ stat.texte }}</h6>#}
              {#</div>#}
              {% if stat.type != 0 %}
                  <div class="col-lg-5 mb-5 chart-box">
                    {#<h4>{{ stat.titre }}</h4>#}
                    {#<canvas id="chart{{ loop.index }}"></canvas>#}
                    {#<br/>#}
                    {#<h6>{{ stat.texte }}</h6>#}
                      <h4>{{ stat.titre }}</h4>
                      <canvas id="chart{{ chartIndex }}" style="width: 100%; height: 300px;"></canvas>
                      <p>{{ stat.texte }}</p>
                  </div>
              {% endif %}
              {% set chartIndex = chartIndex + 1 %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

    </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
   document.addEventListener("DOMContentLoaded", function () {
    const statistiques = {{ statistiques|json_encode|raw }};
    let chartIndex = 1;

    statistiques.forEach((stat) => {
      if (![1, 2, 3].includes(stat.type)) return;

      const ctx = document.getElementById('chart' + chartIndex);
      if (!ctx) return;

      let chartType = 'bar';
      if (stat.type === 2) chartType = 'doughnut';
      else if (stat.type === 3) chartType = 'line';

      new Chart(ctx, {
        type: chartType,
        data: {
          labels: stat.labels,
          datasets: [{
            label: stat.titre,
            data: stat.valeurs,
            backgroundColor: chartType === 'line' ? 'rgba(75, 192, 192, 0.4)' : [
              'rgba(255, 99, 132, 0.6)',
              'rgba(54, 162, 235, 0.6)',
              'rgba(255, 206, 86, 0.6)',
              'rgba(75, 192, 192, 0.6)',
              'rgba(153, 102, 255, 0.6)',
              'rgba(255, 159, 64, 0.6)'
            ],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: chartType !== 'line'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          },
          scales: (chartType === 'bar' || chartType === 'line') ? {
            y: {
              beginAtZero: true
            }
          } : {}
        }
      });

      chartIndex++;
    });
  });

  </script>

{% endblock %}