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

<!-- Override extrahead to add Chart.js -->
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .ranges li {
        list-style: none !important;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        var ctx = document.getElementById('chart').getContext('2d');

        // parse chart data
        var chartData = JSON.parse(document.getElementById('chartData').textContent);

        // Parse the dates to JS
        chartData.forEach((d) => {
            d.x = new Date(d.date).toJSON().slice(0, 10);
        });

        // Render the chart
        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [{
                    label: 'total requests',
                    data: chartData,
                    backgroundColor: '#5eb4ef',
                }, ],
            },
            options: {
                responsive: true,
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'day',
                            round: 'day',
                            displayFormats: {
                                day: 'MMM D',
                            },
                        },
                    }, ],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                        },
                    }, ],
                },
            },
        });

        function onDateChange(newStart, newEnd) {
            var formattedStart = newStart.format('YYYY-MM-D');
            var formattedEnd = newEnd.format('YYYY-MM-D');

            const res = fetch("/admin/rest_framework_tracking/apirequestlog/chart_data/?start_date=" + formattedStart + "&end_date=" + formattedEnd)
                .then(resp => resp.json())
                .then(resp => {
                    resp.forEach((d) => {
                        d.x = new Date(d.date);
                    });
                
                    chart.data.datasets[0].data = resp;
                    chart.update();
                })

            formatDateRangeInput(newStart, newEnd)
        }

        function formatDateRangeInput(newStart, newEnd) {
            document.querySelector('#daterangepicker span').innerHTML = newStart.format('MMMM D, YYYY') + ' - ' + newEnd.format('MMMM D, YYYY');
        }

        var start = chartData.length ? moment(chartData[chartData.length - 1].x) : moment();
        var end = moment();


        $('#daterangepicker').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'Lifetime': [chartData.length ? moment(chartData[chartData.length - 1].x) : moment(), moment()],
            }
        }, onDateChange);

        formatDateRangeInput(start, end);
    });
</script>

{{ chart_data|json_script:"chartData" }}

{% endblock %}

{% block content %}
<!-- Render The Date Range Picker -->
<div id="daterangepicker"
    style="margin-bottom: 10px; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: -moz-fit-content; width: fit-content;">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>
<!-- Render the chart -->
<div style="width: 80%;">
    <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="chart"></canvas>
</div>
<!-- Render the rest of the ChangeList view -->
{{ block.super }}
{% endblock %}