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

{% block docTitle %}Tableau de bord{% endblock docTitle %}
{% block navTitle %}Tableau de bord{% endblock navTitle %}
{% block navTitleUrl %}{% url "dashboard" %}{% endblock navTitleUrl %}

{% block activeDashboard %}active{% endblock activeDashboard %}

{% block contents %}
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{nb_membre}}</h3>
                <p>Membres</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{nb_sous_section}}</h3>
                <p>Mes sous sections</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-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{toutes_demandes}}</h3>
                <p>Toutes les demandes</p>
            </div>
            <div class="icon">
                <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">Voir <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>65</h3>
                <p>Nombre de visiteurs</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>
<div class="row">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-header border-0">
          <div class="d-flex justify-content-between">
            <h3 class="card-title">Nombre de visiteurs</h3>
            <a href="javascript:void(0);">View Report</a>
          </div>
        </div>
        <div class="card-body">
          <div class="d-flex">
            <p class="d-flex flex-column">
              <span class="text-bold text-lg">820</span>
              <span>Visitors au total</span>
            </p>
          </div>
          <div class="position-relative mb-4">
            <canvas id="visitors-chart" height="200"></canvas>
          </div>
        </div>
      </div>
      <!-- /.card -->

    </div>
    <!-- /.col-md-6 -->
    <div class="col-lg-6">

      <div class="card">
        <div class="card-header border-0">
          <h3 class="card-title">Resume des demandes</h3>
          <div class="card-tools">
            <a href="#" class="btn btn-sm btn-tool">
              <i class="fas fa-download"></i>
            </a>
            <a href="#" class="btn btn-sm btn-tool">
              <i class="fas fa-bars"></i>
            </a>
          </div>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
              <p class="text-primary text-xl">
                <i class="ion ion-ios-refresh-empty"></i>
              </p>
              <p class="d-flex flex-column text-right">
                <span class="font-weight-bold">
                  <i class="ion ion-android-arrow-up text-success"></i> {{demandes_en_attente}}
                </span>
                <span class="text-muted">NOUVELLES DEMANDES</span>
              </p>
            </div>
            <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
              <p class="text-success text-xl">
                <i class="ion ion-ios-checkmark-done-outline"></i>
                <ion-icon name="checkmark-done-outline"></ion-icon>
              </p>
              <p class="d-flex flex-column text-right">
                <span class="font-weight-bold">
                  {{demandes_acceptes}}
                </span>
                <span class="text-muted">ACCEPTEES</span>
              </p>
            </div>
          <!-- /.d-flex -->
          <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
            <p class="text-warning text-xl">
              <i class="ion ion-ios-time-outline"></i>
            </p>
            <p class="d-flex flex-column text-right">
              <span class="font-weight-bold">
                {{demandes_en_examen}}
              </span>
              <span class="text-muted">EN examen</span>
            </p>
          </div>
          <!-- /.d-flex -->
          <div class="d-flex justify-content-between align-items-center mb-0">
            <p class="text-danger text-xl">
              <i class="ion ion-android-close"></i>
            </p>
            <p class="d-flex flex-column text-right">
              <span class="font-weight-bold">
                <i class="ion ion-android-close text-danger"></i> {{demandes_rejetes}}
              </span>
              <span class="text-muted">REJETEES</span>
            </p>
          </div>
          <!-- /.d-flex -->
        </div>
      </div>
    </div>
    <!-- /.col-md-6 -->
  </div>
{% endblock contents %}

{% block scripts %}
  <script>
    $(document).ready(function () {

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

      var mode = 'index'
      var intersect = true

      var $visitorsChart = $('#visitors-chart')
      // eslint-disable-next-line no-unused-vars
      var visitorsChart = new Chart($visitorsChart, {
        data: {
          labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
          datasets: [{
            type: 'line',
            data: [100, 120, 170, 167, 180, 177, 160],
            backgroundColor: 'transparent',
            borderColor: '#007bff',
            pointBorderColor: '#007bff',
            pointBackgroundColor: '#007bff',
            fill: false
            // pointHoverBackgroundColor: '#007bff',
            // pointHoverBorderColor    : '#007bff'
          }
          ]
        },
        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,
                suggestedMax: 200
              }, ticksStyle)
            }],
            xAxes: [{
              display: true,
              gridLines: {
                display: false
              },
              ticks: ticksStyle
            }]
          }
        }
      });
    });
  </script>
{% endblock scripts %}