{% extends "../frames/__account.html" %}
{% load static %}

{% block activeTresorerie %}active{% endblock activeTresorerie %}
{% block docTitle %}Tresorerie{% endblock docTitle %}
{% block navTitle %}Tresorerie{% endblock navTitle %}
{% block navTitleUrl %}{% url "tresorerie" %}{% endblock navTitleUrl %}

{% block headLinks %}

  <!-- Select2 -->
  <!-- daterange picker -->
  <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="{% static "plugins/select2/css/select2.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css" %}">

  <!-- DataTables -->
  <link rel="stylesheet" href="{% static "plugins/datatables-bs4/css/dataTables.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-responsive/css/responsive.bootstrap4.min.css" %}">
  <link rel="stylesheet" href="{% static "plugins/datatables-buttons/css/buttons.bootstrap4.min.css" %}">
  
{% endblock headLinks %}

{% block contents %}

<div class="row mt-3 mb-3">
  <div class="form-group col-md-4">
    <label>Localite</label>
    <select class="form-control select2bs4" style="width: 100%;">
      <optgroup label="Burkina Faso">
        {% for province in provinces %}
        <option>{{province}}</option>
      {% endfor %}
      </optgroup>
      <optgroup label="Disapora">
      {% for d in diasporas %}
        <option>{{d}}</option>
      {% endfor %}
      </optgroup>
    </select>
  </div>
    <!-- Date range -->
    <div class="form-group col-md-8">
      <label>Periode :</label>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <i class="far fa-calendar-alt"></i>
          </span>
        </div>
        <input type="text" class="form-control float-right" id="reservation">
      </div>
      <!-- /.input group -->
    </div>

</div>
<div class="row">
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div class="col-6">
          <div class="small-box bg-success">
              <div class="inner">
                  <h3>120000</h3>
                  <p>Total recu</p>
              </div>
              <div class="icon">
                  <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
          </div>
      </div>
      
      <div class="col-6">
          <div class="small-box bg-danger">
              <div class="inner">
                  <h3>40000</h3>
                  <p>Total non paye</p>
              </div>
              <div class="icon">
                  <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
          </div>
      </div>
      
      <div class="col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{total_cotisations_payees}}</h3>
                <p class="mb-0">Total recu</p>
                <span style="font-size: 10px;">Du {{debut}} au {{fin}}</span>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      
      <div class="col-6">
          <div class="small-box bg-danger">
              <div class="inner">
                  <h3>{{total_cotisations_non_payees}}</h3>
                  <p class="mb-0">Total non paye</p>
                  <span style="font-size: 10px;">Du {{debut}} au {{fin}}</span>
              </div>
              <div class="icon">
                  <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
          </div>
      </div>
    
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="card">
      <div class="card-header border-0">
        <div class="d-flex justify-content-between">
          <h3 class="card-title">Cotisations</h3>
          {% comment %} <a href="javascript:void(0);">View Report</a> {% endcomment %}
        </div>
      </div>
      <div class="card-body">
        {% comment %} <div class="d-flex">
          <p class="d-flex flex-column">
            <span class="text-bold text-lg">$18,230.00</span>
            <span>Sales Over Time</span>
          </p>
          <p class="ml-auto d-flex flex-column text-right">
            <span class="text-success">
              <i class="fas fa-arrow-up"></i> 33.1%
            </span>
            <span class="text-muted">Since last month</span>
          </p>
        </div> {% endcomment %}
        <!-- /.d-flex -->

        <div class="position-relative mb-4">
          <canvas id="cotisations-chart" height="200"></canvas>
        </div>

        <div class="d-flex flex-row justify-content-end">
          <span class="mr-2">
            <i class="fas fa-square text-primary"></i> Paye
          </span>

          <span>
            <i class="fas fa-square text-gray"></i> Non paye
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <h5 class="text-success">
      Paiements recents
    </h5>
    <table id="example1" class="table table-bordered table-striped" style="background-color:#00ff0020;">
      <thead>
      <tr>
        <th>Membres</th>
        <th>Periode</th>
        <th>Montant</th>
        <th>Date</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Nom prenoms</td>
        <td>Janvier 2024
        </td>
        <td>1000</td>
        <td>19 janvier 2024</td>
      </tr>
      <tr>
        <td>Nom prenoms</td>
        <td>Mars 2024
        </td>
        <td>1000</td>
        <td>02 avril 2024</td>
      </tr>
      <tr>
        <td>Nom prenoms</td>
        <td>Avril 2024
        </td>
        <td>2000</td>
        <td>31 mars 2024</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="col-md-6 col-sm-12">
    <h5 class="text-danger">
      Liste des impayes
    </h5>
    <table id="example1" class="table table-bordered table-striped" style="background-color:#ff000020;">
      <thead>
      <tr>
        <th>Membres</th>
        <th>Periode</th>
        <th>Montant</th>
        <th>Date</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Nom prenoms</td>
        <td>Septembre 2024
        </td>
        <td>1000</td>
        <td>01 septembre 2024</td>
      </tr>
      <tr>
        <td>Nom prenoms</td>
        <td>Octobre 2024
        </td>
        <td>2000</td>
        <td>01 octobre 2024</td>
      </tr>
      <tr>
        <td>Nom prenoms</td>
        <td>Otcobre 2024
        </td>
        <td>1000</td>
        <td>01 Octobre 2024</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock contents %}

{% block scripts %}

<script src="{% static "plugins/select2/js/select2.full.min.js" %}"></script>
<!-- date-range-picker -->

<!-- Bootstrap4 Duallistbox -->
<script src="{% static "plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js" %}"></script>
<script src="{% static "plugins/moment/moment.min.js" %}"></script>
<script src="{% static "plugins/inputmask/jquery.inputmask.min.js" %}"></script>
<script src="{% static "plugins/daterangepicker/daterangepicker.js" %}"></script>

<!-- DataTables  & Plugins -->
<script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
<script src="{% static "plugins/datatables-bs4/js/dataTables.bootstrap4.min.js" %}"></script>
<script src="{% static "plugins/datatables-responsive/js/dataTables.responsive.min.js" %}"></script>
<script src="{% static "plugins/datatables-responsive/js/responsive.bootstrap4.min.js" %}"></script>

<script>
    $(function () {
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });
        //Date range picker
        $('#reservation').daterangepicker({
          format: 'L',
          locale: {
            format: 'DD/MM/YYYY'
          }
        });
        $('#paiement').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true,
        });
        $('#impaye').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true,
        });


  var ticksStyle = {
    fontColor: '#495057',
    fontStyle: 'bold'
  }

  var mode = 'index'
  var intersect = true

  var $cotisations = $('#cotisations-chart');
  // eslint-disable-next-line no-unused-vars
  var cotisations = new Chart($cotisations, {
    type: 'bar',
    data: {
      labels: [{% for d in mois_annee %}"{{d|safe}}" {% if not forloop.last %},{% endif %}{% endfor %}],
      datasets: [
        {
          backgroundColor: '#007bff',
          borderColor: '#007bff',
          data: [{% for d in total_payee %}{{d|safe}} {% if not forloop.last %},{% endif %}{% endfor %}]
        },
        {
          backgroundColor: '#ced4da',
          borderColor: '#ced4da',
          data: [{% for d in total_non_payee %}{{d|safe}} {% if not forloop.last %},{% endif %}{% endfor %}]
        }
      ]
    },
    options: {
      maintainAspectRatio: false,
      tooltips: {
        mode: mode,
        intersect: intersect
      },
      hover: {
        mode: mode,
        intersect: intersect
      },
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          // display: false,
          gridLines: {
            display: true,
            lineWidth: '4px',
            color: 'rgba(0, 0, 0, .2)',
            zeroLineColor: 'transparent'
          },
          ticks: $.extend({
            beginAtZero: true,

            // Include a dollar sign in the ticks
            callback: function (value) {
              if (value >= 1000) {
                value /= 1000
                value += 'k'
              }

              return value + "f cfa"
            }
          }, ticksStyle)
        }],
        xAxes: [{
          display: true,
          gridLines: {
            display: false
          },
          ticks: ticksStyle
        }]
      }
    }
  });

    });
</script>
{% endblock scripts %}