<?php include 'header.php'; ?>
<?php error_reporting(0); ?>

<div class="container" style="background:#fff; position:relative; margin-top:42px">
    <div class="assignment-dashboard">
        <div class="row" style="padding-top:40px; padding-bottom:20px">

            &nbsp; Date: &nbsp;
            <input id="start_date" width="250" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <div id="show_end_date">
                <input id="end_date" width="250" />
            </div>

            <div class="border-right mt-3 canvasReport" id="chartContainer" style="height:370px; width:100%;">
            </div>

        </div>
    </div>
</div>

<!-- Datepicker -->
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet">

<!-- Chart -->
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script>
    var app = {}; // ✅ GLOBAL

    $(document).ready(function() {

        app.filter = {
            start_date: "",
            end_date: ""
        };

        function formatDate(date) {
            let y = date.getFullYear();
            let m = ("0" + (date.getMonth() + 1)).slice(-2);
            let d = ("0" + date.getDate()).slice(-2);
            return `${y}-${m}-${d}`;
        }

        let today = new Date();
        let last7days = new Date();
        last7days.setDate(today.getDate() - 7);

        app.filter.start_date = formatDate(last7days);
        app.filter.end_date = formatDate(today);

        // Start date
        $('#start_date').datepicker({
            uiLibrary: 'bootstrap4',
            format: 'yyyy-mm-dd',
            value: app.filter.start_date,
            maxDate: new Date()
        });

        // End date
        $('#end_date').datepicker({
            uiLibrary: 'bootstrap4',
            format: 'yyyy-mm-dd',
            value: app.filter.end_date,
            maxDate: new Date()
        });

        // Change event
        $('#end_date, #start_date').change(function() {
            let start = $('#start_date').val();
            let end = $('#end_date').val();

            if (start && end) {
                app.filter.start_date = start;
                app.filter.end_date = end;
                getReport(app.filter);
            }
        });

        // First load
        getReport(app.filter);
    });


    // ================= API CALL =================
    function getReport(filter) {
        $.ajax({
            url: "report_code.php",
            type: "POST",
            data: {
                filter: filter
            },
            dataType: "json",

            success: function(data) {

                if (data.chartData.length === 0) {
                    $("#chartContainer").html("<center>No Data Found</center>");
                    return;
                }

                data.chartData.forEach(function(item) {
                    item.x = new Date(item.label + "T00:00:00"); // ✅ FIX
                    delete item.label
                });

                app.reportChart(data);
            },

            error: function(xhr) {
                console.log("ERROR:", xhr.responseText);
            }
        });
    }


    // ================= CHART =================
    app.reportChart = function(data) {
        let name = data.chartData[0].user_name || "";

        let chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,

            axisX: {
                valueFormatString: "DD MMM YYYY",
                interval: 1,
                intervalType: "day"
            },

            axisY: {
                title: "Assignments"
            },

            data: [{
                type: "line",
                name: name,
                showInLegend: true,
                toolTipContent: "{x}<br/><b>{name}</b>: {y}",
                dataPoints: data.chartData
            }]
        });

        chart.render();
    };
</script>

<?php
$conn->close();
include 'footer.php';
?>