<?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'));
//$weeklytodt = strtotime("next sunday");
$date = date('Y-m-d');
$monno = date('m') ;
$monname = date('F') ;

?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

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

        <br>
        <br>
        <div class='col-lg-5 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 style='font-size: 25px;' name="month" class="form-control month " id="month"> 

                <?php
                echo "<option value='$monno' selected>$monname</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="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" style="margin-left: 20%;">
                <div class="chart-container">
                    <canvas id="myChart2" 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", WeeklyLowCustChartDateFunc);

              $("body").on("change", ".month", LowCustomerChart);
            

//            function PrevWeekChart() {
//                PrevNextWeekChart('P');
//            }
//
//            function NextWeekChart() {
//                PrevNextWeekChart('N');
//            }


            LowCustomerChart();
            function LowCustomerChart() {
                $('#myChart2').replaceWith('<canvas id="myChart2" style="position: relative; height:120vw;"></canvas>');
                var ctx2 = document.getElementById('myChart2').getContext('2d');
//                var weeklyfrmdt = $(".weeklyfrmdt").val();
//                var weeklytodt = $(".weeklytodt").val();
                var month = $('.month').val();
                var mondisp = $('.month option:selected').text();
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: "getnonperfcust.php",
                    data: {month: month},
                    success: function (response) {
                        var mcustname = [], mdno = [], srno = 0 ;
                        $.each(response, function () {
                            srno = srno + 1;
                            mcustname.push(this.custname + " - " + srno);
                            mdno.push(this.dno);
                        });
                        var data = {
                            labels: mcustname,
                            datasets: [{
                                    label: '',
                                    data: [mdno[0], mdno[1], mdno[2], mdno[3], mdno[4], mdno[5], mdno[6], mdno[7], mdno[8], mdno[9]],
                                    backgroundColor: [
                                        'rgb(234,67,53)',
                                        'rgb(255,165,0)',
                                        'rgb(228,127,202)',
                                        'rgb(140,103,88)',
                                        'rgb(181,181,181)',
                                        'rgb(0,186,247)',
                                        'rgb(0,0,139)',
                                        'rgb(254, 254, 0)',
                                        'rgb(192,202,51)',
                                        'rgb(52,168,83)'
                                    ],
                                    borderColor: [
                                        'rgba(234,67,53,1)',
                                        'rgba(255,165,0,1)',
                                        'rgba(228,127,202,1)',
                                        'rgb(140,103,88,1)',
                                        'rgba(181,181,181,1)',
                                        'rgba(0,186,247,1)',
                                        'rgba(0,0,139,1)',
                                        'rgba(254, 254, 0,1)',
                                        'rgba(192,202,51,1)',
                                        'rgba(52,168,83,1)'
                                    ],
                                    borderWidth: 1
                                }]
                        };
                        var chartOptions = {
                            responsive: true,
                            legend: {
                                position: "top"
                            },
                            title: {
                                display: true,
                                text: "10 - Low / Non Performing Customers",
                                fontSize: 25
                            },
                            scales: {
                                xAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'No. of Days From Last Challan',
                                            fontSize: 18
                                        }
                                    }],
                                yAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Customers',
                                            fontSize: 18
                                        }
                                    }]
                            }
                        }
                        var DailyBar = new Chart(ctx2, {
                            type: "horizontalBar",
                            data: data,
                            options: chartOptions
                        });
                    },
                    error: function (request, textStatus, errorThrown) {
                    }
                });
            }
        });
    </script>
    <?php include("includes/linksfoot.php"); ?>
</body>
</html>
