{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block titre %} CRDES {% endblock %}
{% block content %}
<div class="main-content">
  <section class="section">
    {% block entete %}
    <div class="row ">
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="card">
          <div class="card-statistic-4">
            <div class="align-items-center justify-content-between">
              <div class="row ">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                  <div class="card-content">
                    <h5 class="font-15">Reunion Cercle</h5>
                    <h2 class="mb-3 font-18">{{renioncerclecount}}</h2>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl-0">
                  <div class="banner-img">
                    <img src="/media/1.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="card">
          <div class="card-statistic-4">
            <div class="align-items-center justify-content-between">
              <div class="row ">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                  <div class="card-content">
                    <h5 class="font-15">Dialogue Communautaire</h5>
                    <h2 class="mb-3 font-18">{{dialoguecomcount}}</h2>

                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl-0">
                  <div class="banner-img">
                    <img src="/media/3.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="card">
          <div class="card-statistic-4">
            <div class="align-items-center justify-content-between">
              <div class="row ">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                  <div class="card-content">
                    <h5 class="font-15">Reunion de Coordination</h5>
                    <h2 class="mb-3 font-18">{{reunioncordcount}}</h2>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl-0">
                  <div class="banner-img">
                    <img src="/media/2.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="card">
          <div class="card-statistic-4">
            <div class="align-items-center justify-content-between">
              <div class="row ">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pr-0 pt-3">
                  <div class="card-content">
                    <h5 class="font-15">Enquetes</h5>
                    <h2 class="mb-3 font-18">{{enquetecount}}</h2>
                    <p class="mb-0"><span class="col-orange">{{pcnenqu}}%</span> </p>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pl-0">
                  <div class="banner-img">
                    <img src="/media/5.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
    {% block board %}
    <div class="row">
      <div class="col-12 col-sm-12 col-lg-12">
        <div class="card ">
          <div class="card-header upper-case">
            <h4>Reunion / Mois</h4>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-12">
                <canvas id="reunionChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
    {% block chart %}
    <div class="row">
      <div class="col-12 col-sm-12 col-lg-6">
        <div class="card">
          <div class="card-header upper-case">
            <h4>10 Derniers Reunions</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped table-hover" style="width:100%;">
                <thead>
                <tr>
                  <th>TITRE</th>
                  <th>DATE</th>
                  <th>DUREE</th>
                  <th>LIEU</th>
                  <th>THEME</th>
                  <th>MODERATEUR</th>
                  <th>BUDGET</th>
                  <th>ACTION</th>

                </tr>
                </thead>
                <tbody>
                {% for reunion in reunionall %}
                <tr>
                  <td>
                    {{reunion.titre_reunion}}
                  </td>
                  <td>{{reunion.date}}</td>
                  <td>{{reunion.duree}}</td>
                  <td>{{reunion.lieu}}</td>
                  <td>{{reunion.theme}}</td>
                  <td>{{reunion.modérateur}}</td>
                  <td>{{reunion.budget}}</td>
                  <td>
                        <a href="{{reunion.get_absolute_url}}" class="dropdown-item has-icon"><i class="fas fa-eye"></i></a>

                  </td>
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-12 col-lg-6">
        <div class="card">
          <div class="card-header upper-case">
            <h4>10 Derniers Enquetes</h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped table-hover" style="width:100%;">
                <thead>
                <tr>
                  <th>INTITULE</th>
                  <th>REUNION</th>
                  <th>CIBLE</th>
                  <th>LIEU</th>
                  <th>NOMBRE D'ENQUETE</th>
                  <th>PERIODE</th>
                  <th>ACTION</th>

                </tr>
                </thead>
                <tbody>
                {% for enquete in enquete10 %}
                <tr>
                  <td>{{enquete.intitule}}</td>
                  <td>{{enquete.reunion.titre_reunion}}</td>
                  <td>{{enquete.cible}}</td>
                  <td>{{enquete.lieu}}</td>
                  <td>{{enquete.nombre_enquetes}}</td>
                  <td>{{enquete.periode}}</td>
                  <td>
                        <a href="{{enquete.get_absolute_url}}" class="dropdown-item has-icon"><i class="fas fa-eye"></i></a>

                  </td>
                </tr>
                {% endfor %}
                </tbody>
              </table>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
    {% block tache %}
    {% endblock %}
    {% block ticket %}
    {% endblock %}
  </section>
</div>
<script>
    // Les mois
    const months = {{ months|safe }};

    // Données pour chaque type de réunion
    const cercleData = {{ cercle_data|safe }};
    const comData = {{ com_data|safe }};
    const coordData = {{ coord_data|safe }};

    // Configuration du graphique
    const ctx = document.getElementById('reunionChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: [
                {
                    label: 'Réunion Cercle',
                    data: cercleData,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: false,
                },
                {
                    label: 'Dialogue Communautaire',
                    data: comData,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    fill: false,
                },
                {
                    label: 'Réunion de Coordination',
                    data: coordData,
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    fill: false,
                },
            ],
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: "Graphique des Réunions par Type pour l'Année en Cours",
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });
</script>
{% endblock %}