<?php
ob_start();
require("includes/check_auth_user.php");
require("includes/dbconnect.php");
include('includes/function.php');

$formname = 'Dashboard For Challan';

$admin = $_SESSION["admin_" . $dbname];
$zdb = $_SESSION["zdbyear_" . $dbname];
mysqli_select_db($conn, $zdb);
include("includes/linkshead.php");

$weeklyfrmdt = date('Y-m-d', strtotime('monday last week'));
$weeklytodt = date('Y-m-d', strtotime('sunday last week'));
$todaydate = date('Y-m-d');
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script>

</head>
<body style="background: white;">
    <div class="container-fluid">
        <div class="row">

            <div class='col-lg-3 col-md-3 col-sm-12 col-xs-12 pad'>
            </div>
            <div class='col-lg-2 col-md-2 col-sm-12 col-xs-12 pad'>
                <select name="month" class="form-control month" id="month">
                    <option value=""></option>
                    <option value="01" id="1">January</option>
                    <option value="02" id="2">February</option>
                    <option value="03" id="3">March</option>
                    <option value="04" id="4">April</option>
                    <option value="05" id="5">May</option>
                    <option value="06" id="6">June</option>
                    <option value="07" id="7">July</option>
                    <option value="08" id="8">August</option>
                    <option value="09" id="9">September</option>
                    <option value="10" id="10">October</option>
                    <option value="11" id="11">November</option>
                    <option value="12" id="12">December</option>
                </select>
            </div>

            <div class='col-lg-1 col-md-1 col-sm-12 col-xs-12 pad text-right'>
                <i class="fa fa-caret-left weeklyfrmdtbtn" aria-hidden="true"  style="color: #1B1B1B;font-size: 35px;"></i>
            </div>
            <div class='col-lg-1 col-md-1 col-sm-12 col-xs-12 pad'  style="width: 10%;">
                <input type='date' class='form-control weeklyfrmdt' name='weeklyfrmdt' id="weeklyfrmdt" value='<?php echo $weeklyfrmdt ?>'>
            </div>
            <div class='col-lg-2 col-md-2 col-sm-12 col-xs-12 pad'  style="width: 10%;">
                <input type='date' class='form-control weeklytodt weeklyfrmdtbtn' name='weeklytodt' id="weeklytodt" value='<?php echo $weeklytodt; ?>' readonly tabindex="-1">
            </div>
            <div class='col-lg-1 col-md-1 col-sm-12 col-xs-12 pad' >
                <a><i class="fa fa-caret-right weeklytodtbtn" aria-hidden="true"  style="color: #1B1B1B;font-size: 35px;"></i></a>
            </div>

            <!-- <div class='col-lg-2 col-md-2 col-sm-12 col-xs-12 pad'  style="width: 10%;">
                <input type='date' class='form-control todaydate todaydatebtn' name='todaydate' id="todaydate" value=''>
            </div> -->
            <!-- <div class='col-lg-1 col-md-1 col-sm-12 col-xs-12 pad' >
                <a><i class="fa fa-caret-right todaydatebtn" aria-hidden="true"  style="color: #1B1B1B;font-size: 35px;"></i></a>
            </div> -->


        </div>
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <div class="chart-container">
                    <canvas id="myChart" style="position: relative; height:120vw;"></canvas>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function () {
            $("body").on("click", ".weeklyfrmdtbtn", PrevWeekChart);
            $("body").on("click", ".weeklytodtbtn", NextWeekChart);
            $("body").on("blur", ".weeklyfrmdt", WeeklyChartDateFunc);
            $("body").on("change", ".month", MonthChartFunc);
            // $("body").on("blur", ".todaydate", todaydateFunc);
            function MonthChartFunc() {
                WeeklyChart('month');
            }

            function PrevWeekChart() {
                PrevNextWeekChart('P');
            }

            function NextWeekChart() {
                PrevNextWeekChart('N');
            }


            function WeeklyChartDateFunc() {

                var wfrmdate = new Date($(".weeklyfrmdt").val());
                if (wfrmdate.getDay() !== 1) {
                    alert("Date is not Monday");
                    var curr = new Date();
                    var firstday = new Date(curr.setDate(curr.getDate() - curr.getDay()));
                    var formattedDate = firstday.getFullYear() + "-" + (firstday.getMonth() + 1) + "-" + firstday.getDate();
                    $(".weeklyfrmdt").val(formattedDate);
                } else {
                    var dt = wfrmdate;
                    var ndt1 = dt.setDate(dt.getDate() + 6);
                    var ndt = new Date(ndt1);
                    var dd = String(ndt.getDate()).padStart(2, '0');
                    var mm = String(ndt.getMonth() + 1).padStart(2, '0'); //January is 0!
                    var yyyy = ndt.getFullYear();
                    var today = yyyy + '-' + mm + '-' + dd;
                    $(".weeklytodt").val(today);
                    WeeklyChart();
                }
            }

            function PrevNextWeekChart(para) {
                var dt = new Date($(".weeklyfrmdt").val());
                var mpara = para;
                if (mpara == 'P')
                    var ndt1 = dt.setDate(dt.getDate() - 7);
                else {
                    var ndt1 = dt.setDate(dt.getDate() + 7);
                }
                var ndt = new Date(ndt1);
                var dd = String(ndt.getDate()).padStart(2, '0');
                var mm = String(ndt.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = ndt.getFullYear();
                var today = yyyy + '-' + mm + '-' + dd;
                $(".weeklyfrmdt").val(today);
                WeeklyChartDateFunc();
            }

            // function todaydateFunc(){
            //     WeeklyChart();
            // }

            WeeklyChart();
            function WeeklyChart(para) {
                $('#myChart').replaceWith('<canvas id="myChart" style="position: relative; height:120vw;"></canvas>');
                var ctx = document.getElementById('myChart').getContext('2d');
                var mpara = para, lbltext;
                if (mpara == 'month') {
                } else {
                    $(".month").val('').trigger('change');
                }
                var month = $('.month').val();
                var weeklyfrmdt = $(".weeklyfrmdt").val();
                var weeklytodt = $(".weeklytodt").val();
                var todaydate = $(".todaydate").val();
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: "getweeklysale.php",
                    data: {weeklyfrmdt: weeklyfrmdt, weeklytodt: weeklytodt, month: month , todaydate: todaydate},
                    success: function (response) {

                        var series = [], saleamt = [];
                        $.each(response, function () {
                            series.push(this.series);
                            saleamt.push(this.saleamt);
                        });
                        if ($('.month').val() !== '') {
                            lbltext = 'Monthly Sale'  ;
                        } else {
                            lbltext = 'Weekly Sale' ;
                        }


                        var data = {
                            labels: series,
                            datasets: [
                                {
                                    label: "Sale Amount",
                                    backgroundColor: "rgb(52,168,83)",
                                    borderColor: "rgb(52,168,83)",
                                    fill: false,
                                    borderWidth: 1,
                                    barThickness: 40,
                                    data: saleamt
                                }
                            ]
                        };
                        var chartOptions = {
                            responsive: true,
                            legend: {
                                position: "top"
                            },
                            title: {
                                display: true,
                                text: lbltext,
                                fontSize: 25
                            },
                            scales: {
                                yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Sale Amount',
                                            fontSize: 18
                                        }
                                    }],
                                xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Series',
                                            fontSize: 18
                                        }
                                    }]
                            },
                            onClick: function (e, element) {
                            }
                        }
                        var WeeklyBar = new Chart(ctx, {
                            type: "bar",
                            data: data,
                            options: chartOptions
                        });

//                         document.getElementById("myChart").onclick = function (evt, element) {
//                             var activePoints = WeeklyBar.getElementsAtEvent(evt);
//                             var firstPoint = activePoints[0];
//                             var label = WeeklyBar.data.labels[firstPoint._index];
//                             var value = WeeklyBar.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
//                             var bartitle = activePoints[0]._model.datasetLabel;
// //                            alert(bartitle);
//                             console.log(activePoints);
//                             if (firstPoint !== undefined) {
//                                 var series = label.substr(0, 2), ctype = '';
//                                 if (bartitle.toUpperCase() == 'Cash'.toUpperCase()) {
//                                     ctype = 'Y';
//                                 } else if (bartitle.toUpperCase() == 'Credit'.toUpperCase()) {
//                                     ctype = 'N';
//                                 } else {
//                                     ctype = 'CR';
//                                 }
//                                 var location = 'mischal_rep.php?series=' + series + '&count=' + value +
//                                         '&ctype=' + ctype + '&fdate=' + weeklyfrmdt +
//                                         '&tdate=' + weeklytodt + '&month=' + month + '&cancel=no';
//                                 window.open(location, '_blank');

//                             }
// //                            alert(label + ": " + value + ':' + bartitle);
//                         };

                    },
                    error: function (request, textStatus, errorThrown) {
                    }
                });

            }
        });
    </script>
    <?php include("includes/linksfoot.php"); ?>
</body>
</html>
