{% extends "admin/change_list.html" %}
{% load static %}

{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'hub/css/jquery.dataTables.min.css' %}">
    <script src="{% static 'hub/js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'hub/js/jquery.dataTables.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'alertify/alertify.min.css' %}">
    <script src="{% static 'alertify/alertify.min.js' %}"></script>
{% endblock %}

{% block content %}
    <!--
    <div style="margin-bottom: 30px; padding: 20px; background-color: #eef;">
        <h3>Tableau des cotisations</h3>
        <p>Nombre total : {{ cl.result_count }}</p>
    </div>
-->
<div class="col-lg-12 d-flex flex-wrap">



<div class="p-1 col-lg-12">
  <div class="card">
    <div class="card-body">
      <div style="overflow:auto;">
        <!-- 
        <div class="py-2">
          <div> <span class="badge bg-danger"> <i class=" fas fa-times"></i> </span> </div>
        </div>
        -->
        <div class="py-3 d-flex justify-content-between">
          <div class="p-1">
            <i class="fa-2x fas fa-angle-left"> </i>
          </div>
          <div class="h2 text-center"> Comptes <b style="cursor:pointer;" onclick="miniCalendar()"> Mai 2025 </b> </div>
          <div class="p-1">
            <i class="fa-2x fas fa-angle-right"> </i>
          </div>
        </div>
        <table id="data-table" style="overflow-y: auto;" class="table table-responsive">
          <thead> 
              <td> Noms et Prenoms </td>
              <td> Ville </td>
              <td> Coopte par </td>
              <td> Telephone </td>
              <td> Adhesion </td>
              <td> Cotisation Mensuelle </td>
              <td> Epargne </td>
              <td> Caisse de Solidarite </td>
          </thead>
          <tbody>
            {% for c in cl.result_list %}
            <tr>
              <td> <a href="{{c.id}}/change/"> {{c}} </a></td>
              <td> {{c.ville}}</td>
              <td> {{c.telephone}}</td>
              <td>{{c.coopte_par}}</td>
              <td>{{c.adhesion}} FCFA</td>
              <td> {% if c.actu_cotisation != None  %} {{c.actu_cotisation.versement.montant}} FCFA {% endif %}</td>
              <td>{% if c.actu_epargne != None  %} {{c.actu_epargne.versement.montant}} FCFA {% endif %}</td>
              <td>
                {% if c.actu_solidarite != None  %} {{c.actu_solidarite.versement.montant}} FCFA {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

    </div>

  </div>
</div>

</div>

<script src="{% static 'hub/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'hub/js/chart.js' %}"></script>
<script>

        $(document).ready(function () {
            //alert("hfg")
            let table = new DataTable('#data-table');
            //$('#data-table').DataTable(); // Active DataTables
        });

  var months = ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];

  var actuMonth = new Date().getMonth()+1;

  const monthYear = document.getElementById('monthYear');
  const calendarDates = document.getElementById('calendarDates');
  let currentDate = new Date();

  function renderCalendar(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
      const startDay = (firstDay.getDay() + 6) % 7; // Lundi = 0

      //monthYear.textContent = `${date.toLocaleString('fr-FR', { month: 'long' })} ${year}`;
      //calendarDates.innerHTML = '';

      for (let i = 0; i < startDay; i++) {
        const emptyDiv = document.createElement('div');
        emptyDiv.className = "col day";
        //calendarDates.appendChild(emptyDiv);
      }

      for (let i = 1; i <= lastDay.getDate(); i++) {
        const div = document.createElement('div');
        div.className = 'col day';
        const today = new Date();
        if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
          div.classList.add('today');
        }
        div.innerText = i;
        //calendarDates.appendChild(div);
      }
    }

    function changeYear(offset) {
      amonthYear = document.getElementById("amonthYear");
      var val = parseInt(amonthYear.textContent) ;
      val += offset;
      amonthYear.textContent = val;
      //currentDate.setMonth(currentDate.getMonth() + offset);
      //renderCalendar(currentDate);
    }

    renderCalendar(currentDate);

    function miniCalendar(){
      alertify.alert("",`
        <div class=' justify-content-between'>

          <div class='pb-3 w-100'>
            <div class='h4'> Annee </div>
            <div class='w-100'> <input type='number' class='w-100 form-control'> </div>
            
          </div>

          <div class='w-7'>
            <div class='h4'> Mois  </div>
            <div class="" style="max-height:220px;overflow:auto;">
              <div class='py-1'> <div class='list-group-item'> Janvier </div> </div>
              <div class='py-1'> <div class='list-group-item'> Fevrier </div> </div>
              <div class='py-1'> <div class='list-group-item'> Mars </div> </div>
              <div class='py-1'> <div class='list-group-item'> Avril </div> </div>
              <div class='py-1'> <div class='list-group-item'> Mai </div> </div>
              <div class='py-1'> <div class='list-group-item'> Juin </div> </div>
              <div class='py-1'> <div class='list-group-item'> Juillet </div> </div>
              <div class='py-1'> <div class='list-group-item'> Aout </div> </div>
              <div class='py-1'> <div class='list-group-item'> Septembre </div> </div>
              <div class='py-1'> <div class='list-group-item'> Octobre </div> </div>
              <div class='py-1'> <div class='list-group-item'> Novembre </div> </div>
              <div class='py-1'> <div class='list-group-item'> Decembre </div> </div>
            </div>
          </div>

        </div>
      `);
    }

</script>
  {% endblock %}

