{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block subtitle %} {{ request.user }} {% endblock %}

{% block content %}

    <div class="row">
        <div class="col-sm-3">
            <div class="card mini-stats-wid">
                <div class="card-body">
                    <div class="media">
                        <div class="mr-3 align-self-center">
                            <i class="bx bx-user-check h2 text-primary mb-0"></i>
                        </div>
                        <div class="media-body">
                            <p class="text-muted mb-2">Registartions</p>
                            <h5 class="mb-0">
                                00
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card mini-stats-wid">
                <div class="card-body">
                    <div class="media">
                        <div class="mr-3 align-self-center">
                            <i class="bx bx-import h2 text-success mb-0"></i>
                        </div>
                        <div class="media-body">
                            <p class="text-muted mb-2">YEAR</p>
                            <h5 class="mb-0">
                                $ 00 <span
                                    class="font-size-14 text-muted">(00)</span>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card mini-stats-wid">
                <div class="card-body">
                    <div class="media">
                        <div class="mr-3 align-self-center">
                            <i class="bx bx-export h2 text-danger mb-0"></i>
                        </div>
                        <div class="media-body">
                            <p class="text-muted mb-2">Month</p>
                            <h5 class="mb-0">
                                $ 00 <span
                                    class="font-size-14 text-muted">(00)</span>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card mini-stats-wid">
                <div class="card-body">
                    <div class="media">
                        <div class="mr-3 align-self-center">
                            <i class="bx bxl-telegram h2 text-primary mb-0"></i>
                        </div>
                        <div class="media-body">
                            <p class="text-muted mb-2">Day</p>
                            <h5 class="mb-0">
                                $ 00 <span
                                    class="font-size-14 text-muted">(00)</span>
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">2022 Statistics</h4>
                    <div id="chart_year_months">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">2022 Registrations</h4>
                    <div id="chart_year_months_registrations">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Today's Record</h4>

                    <div class="text-center">
                        <div class="mb-4">
                            <i class="bx bx-chart text-primary display-4"></i>
                        </div>
                        <h3>1,456</h3>
                        <p>Registrations</p>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table table-centered table-nowrap">
                            <tbody>
                            <tr>
                                <td style="width: 30%">
                                    <p class="mb-0">A</p>
                                </td>
                                <td style="width: 25%">
                                    <h5 class="mb-0">1,456</h5></td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-primary rounded" role="progressbar"
                                             style="width: 94%" aria-valuenow="94" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">B</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,123</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-success rounded" role="progressbar"
                                             style="width: 82%" aria-valuenow="82" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">C</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,026</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-warning rounded" role="progressbar"
                                             style="width: 70%" aria-valuenow="70" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Yesterday's Record</h4>

                    <div class="text-center">
                        <div class="mb-4">
                            <i class="bx bx-chart text-primary display-4"></i>
                        </div>
                        <h3>1,456</h3>
                        <p>Registrations</p>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table table-centered table-nowrap">
                            <tbody>
                            <tr>
                                <td style="width: 30%">
                                    <p class="mb-0">A</p>
                                </td>
                                <td style="width: 25%">
                                    <h5 class="mb-0">1,456</h5></td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-primary rounded" role="progressbar"
                                             style="width: 94%" aria-valuenow="94" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">B</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,123</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-success rounded" role="progressbar"
                                             style="width: 82%" aria-valuenow="82" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">C</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,026</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-warning rounded" role="progressbar"
                                             style="width: 70%" aria-valuenow="70" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Month Record</h4>

                    <div class="text-center">
                        <div class="mb-4">
                            <i class="bx bx-chart text-primary display-4"></i>
                        </div>
                        <h3>1,456</h3>
                        <p>Registrations</p>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table table-centered table-nowrap">
                            <tbody>
                            <tr>
                                <td style="width: 30%">
                                    <p class="mb-0">A</p>
                                </td>
                                <td style="width: 25%">
                                    <h5 class="mb-0">1,456</h5></td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-primary rounded" role="progressbar"
                                             style="width: 94%" aria-valuenow="94" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">B</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,123</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-success rounded" role="progressbar"
                                             style="width: 82%" aria-valuenow="82" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p class="mb-0">C</p>
                                </td>
                                <td>
                                    <h5 class="mb-0">1,026</h5>
                                </td>
                                <td>
                                    <div class="progress bg-transparent progress-sm">
                                        <div class="progress-bar bg-warning rounded" role="progressbar"
                                             style="width: 70%" aria-valuenow="70" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Month Statistics</h4>
                    <div id="chart_month_dates">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Month Registrations</h4>
                    <div id="chart_month_days_registrations">
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
{% endblock %}

{% block js_code %}
    <script>
        var options_year_months = {
            series: [{
                name: 'A',
                data: [31, 40, 28, 51, 42, 109, 100, 51, 42, 109, 100, 101]
            }, {
                name: 'B',
                data: [11, 32, 45, 32, 34, 52, 32, 45, 32, 34, 52, 41]
            }, {
                name: 'C',
                data: [12, 40, 100, 62, 74, 82, 91, 100, 40, 55, 62, 74]
            }],
            chart: {
                height: 225,
                type: 'area'
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'number',
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            }
        };
        var options_month_dates = {
            series: [{
                name: 'A',
                data: [31, 40, 28, 51, 42, 109, 100, 51, 42, 109, 31, 40, 28, 51, 42, 109, 100, 51, 42, 109, 31, 40, 28, 51, 42, 109, 100, 51]
            }, {
                name: 'B',
                data: [11, 32, 45, 32, 34, 52, 32, 45, 32, 34, 11, 32, 45, 32, 34, 52, 32, 45, 32, 34, 11, 32, 45, 32, 34, 52, 32, 45]
            }, {
                name: 'C',
                data: [12, 40, 100, 62, 74, 82, 91, 100, 40, 55, 62, 74, 12, 40, 100, 62, 74, 82, 91, 100, 40, 55, 62, 74, 12, 40, 100, 62]
            }],
            chart: {
                height: 225,
                type: 'area'
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'number',
                categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
            }
        };

        var options_year_months_registrations = {
            series: [{
                name: 'A',
                data: [100, 40, 28, 51, 42, 109, 100, 40, 28, 42, 109, 100]
            }],
            chart: {
                type: 'area',
                stacked: false,
                height: 200,
                zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: true
                },
                toolbar: {
                    autoSelected: 'zoom'
                }
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                },
            },
            xaxis: {
                type: 'number',
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            }
        };
        var options_month_days_registrations = {
            series: [{
                name: 'B',
                data: [1, 22, 23, 24, 25, 36, 17, 23, 29, 31, 11, 33, 13, 24, 25, 36, 34, 18, 19, 18, 9, 22, 21, 42, 2, 3, 10, 2]
            }],
            chart: {
                type: 'area',
                stacked: false,
                height: 200,
                zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: true
                },
                toolbar: {
                    autoSelected: 'zoom'
                }
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                },
            },
            xaxis: {
                type: 'number',
                categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
            }
        };

        var chart_year_months = new ApexCharts(document.querySelector("#chart_year_months"), options_year_months);
        var chart_month_dates = new ApexCharts(document.querySelector("#chart_month_dates"), options_month_dates);
        var chart_year_months_registrations = new ApexCharts(document.querySelector("#chart_year_months_registrations"), options_year_months_registrations);
        var chart_month_days_registrations = new ApexCharts(document.querySelector("#chart_month_days_registrations"), options_month_days_registrations);

        chart_year_months.render();
        chart_month_dates.render();
        chart_year_months_registrations.render();
        chart_month_days_registrations.render();

    </script>
{% endblock %}