<?php include 'header.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">
            <!-- <div 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" style="display: block;">
                   <input id="end_date" width="250"  />
                </div>
            <!-- </div> -->
            
            <div class="border-right mt-3 canvasReport" id="chartContainer" style="height: 370px; width: 100%; ">    
            </div>
        </div>
    </div>
</div>


<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript">

$(document).ready(function(){
    var app= {};
    app.filter = { start_date:"", end_date:"" };

    var curr = new Date();
    // var firstday = new Date(curr.setDate(curr.getDate() - curr.getDay()+6));
    var firstday = new Date();
    var lastday = new Date(curr.setDate(curr.getDate() - curr.getDay()));
   
    function formatDate(date) {
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 101).toString().substring(1);
        var day = (date.getDate() + 100).toString().substring(1);
        return year + "-" + month + "-" + day;
    }


    app.filter.start_date = formatDate(firstday);
    app.filter.end_date = formatDate(lastday);

    $('#start_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd',
        autoclose: true,
        value: formatDate(firstday),
        maxDate: formatDate(firstday),
    });
    $('#end_date').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy-mm-dd',
        autoclose: true,
        value: formatDate(lastday),
        maxDate: function () {
            return $('#start_date').val();
        }
    });

    $('#end_date').change(function() {
        var end_date = $(this).val(); 
        var start_date = $("#start_date").val(); 
        if(start_date!="" && end_date!="")
        {
            app.filter.start_date = start_date;
            app.filter.end_date = end_date;
            getReport(app.filter);
        }
    });

    getReport(app.filter);

});

getReport = function (filter)
{
    console.log(filter);
    $.ajax({
        url : "report_code.php",
        type: "POST", 
        data:{filter:filter},
        dataType:"json",
        success : function(data){
            for (var i = 0; i < data.chartData.length; i++) {
               data.chartData[i]['x'] = new Date(data.chartData[i]['label']);     
            }
            console.log(data);
            app.reportChart(data);
        },
        error : function(data) {

        }
    });
}

app.reportChart = function(data)
{
    var name ="";
    if(data.chartData!="")
    {
        name = data.chartData[0]['user_name'];
    }   
    

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true, 
        title: {
            text: ""
        },
        legend: {
            verticalAlign: "top",
            horizontalAlign: "center",
            dockInsidePlotArea: false,
            fontSize: 14,
        },
        axisX:{
            valueFormatString: "DD MMM YYYY",
            interval:2,
            intervalType: "day",
        },
        axisY: {
            title: "",
            titleFontColor: "#4F81BC",
            suffix: "",
        },
        data: 
        [
            {
                toolTipContent: "{label}<br/> <strong>{name}</strong> : <strong>{y}</strong>",
                indexLabelFontColor: "darkSlateGray",
                name: name,
                type: "line",
                yValueFormatString: "###",
                showInLegend: true,
                legendMarkerType: "square",
                color: "rgba(87, 87, 87)",
                xValueType: "{y}",
                dataPoints: data.chartData
            }
        ]
    });
    chart.render();
}
        
</script>
<?php 

$conn->close();


include 'footer.php';
?>