{% extends "base.html" %}
{% load humanize %}
{% load static i18n %}

{% block content %}
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Tableau de Bord</h1>
        <form method="get" id="filterForm">
            <select class="form-select" id="filterRegion" name="region_filter">
                <option value="">Région</option>
                {% for region in regions %}
                <option value="{{ region.id }}" {% if region.id|stringformat:"s" == selected_region %}selected{% endif %}>{{ region.name }}</option>
                {% endfor %}
            </select>
        </form>
        <a href="{% url 'admin:adhesion_member_changelist' %}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                class="fas fa-users fa-sm text-white-50"></i> Membres</a>
                
                <script>
                document.getElementById('filterRegion').addEventListener('change', function() {
                    document.getElementById('filterForm').submit();
                });
                </script>
                
    </div>

    <!-- Content Row -->
    <div class="row">

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Nombre de Membre</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{members|intcomma|default:0}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Nombre de Part</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{parts|intcomma|default:0}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Montant Total Souscrits</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{amountSouscription|intcomma|default:0}} FCFA</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Montant Total Adhésions</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{amountAdhesion|intcomma|default:0}} FCFA</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
                    <!-- Content Row -->

                    <div class="row">

                        <!-- Area Chart -->
                        <div class="col-xl-8 col-lg-7">
                            <div class="card shadow mb-4">
                                <!-- Card Header - Dropdown -->
                                <div
                                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">EVOLUTION DU MONTANT DES SOUSCRIPTIONS</h6>
                                </div>
                                <!-- Card Body -->
                                <div class="card-body">
                                    <div class="chart-area">
                                        <canvas id="myAreaChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pie Chart -->
                        <div class="col-xl-4 col-lg-5">
                            <div class="card shadow mb-4">
                                <!-- Card Header - Dropdown -->
                                <div
                                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">SOUSCRIPTIONS PAR RÉGION</h6>
                                </div>
                                <!-- Card Body -->
                                <div class="card-body">
                                    <div id="mapid" style="height: 320px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <script>
                        var dates = {{ dates|safe }};
                        var daily_sums_running = {{ daily_sums_running|safe }};
                        </script>
                    <script src="{% static 'js/chart-evolution.js' %}"></script>

                    <!-- place project specific Javascript in this file -->
                    <script defer src="{% static 'js/project.js' %}"></script>
    <script>
        var dataForMap = {{ data_for_map|safe }};

        fetch('/static/maps/regions.json')
        .then(response => response.json())
        .then(geojsonData => {
            var map = L.map('mapid').setView([12.257, -1.557], 6);
    
            // Define a function to get the color based on the montant total
            function getColor(d) {
                return d >= 1000000000 ? '#00441b' :
                    d >= 100000000  ? '#006d2c' :
                    d >= 10000000   ? '#238b45' :
                    d >= 1000000    ? '#41ae76' :
                    d >= 100000     ? '#66c2a4' :
                    d >= 10000      ? '#99d8c9' :
                    '#ffffff';
            }
            function grade_format(d) {
                return d >= 1000000000 ? '1Mrd' :
                    d >= 100000000  ? '100Mio' :
                    d >= 10000000   ? '10Mio' :
                    d >= 1000000    ? '1Mio' :
                    d >= 100000     ? '100&nbsp;000' :
                    d >= 10000      ? '10&nbsp;000' :
                    '0';
            }
    
            // Define a function to set the style of the GeoJSON features
            function style(feature) {
                var total = 0;
                for (var i = 0; i < dataForMap.length; i++) {
                    if (dataForMap[i].region_code == feature.properties.CODE) {
                        total = dataForMap[i].total_montant;
                        break;
                    }
                }
                return {
                    fillColor: getColor(total),
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }
    
            // Use the GeoJSON data to create the map layers
            L.geoJSON(geojsonData, {
                style: style
            }).addTo(map);

            var legend = L.control({position: 'bottomright'});

            legend.onAdd = function (map) {
                var div = L.DomUtil.create('div', 'info legend'),
                    grades = [0, 10000, 100000, 1000000, 10000000, 100000000, 1000000000], // these are the break points for your colors
                    labels = [];

                // loop through our density intervals and generate a label with a colored square for each interval
                for (var i = 0; i < grades.length; i++) {
                    div.innerHTML +=
                        '<i style="margin-left: 8px; background:' + getColor(grades[i] + 1) + '">&nbsp;&nbsp;&nbsp;</i> ' +
                        grade_format(grades[i]) + (grades[i + 1]? '&nbsp;&ndash;&nbsp;' + grade_format(grades[i + 1]) : '+');
                }

                return div;
            };

            legend.addTo(map);
        });
    </script>
</div>
    <!-- Page level custom scripts -->
<style>
    .info.legend.leaflet-control  {
        margin-left: 50%;
        margin-bottom: 0;
    }
</style>
{% endblock content %}