<?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">

        <div class="row">
            <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='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>
            </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>


        <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="myChart2" style="position: relative; height:120vw;"></canvas>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function () {
            $("body").on("change", ".month", MonthChartFunc);


            function MonthChartFunc() {
                TopItemChart('month');
            }



            TopItemChart('month');
            function TopItemChart(para) {
                $('#myChart2').replaceWith('<canvas id="myChart2" style="position: relative; height:120vw;"></canvas>');
                var ctx2 = document.getElementById('myChart2').getContext('2d');

                var mpara = para, lbltext;
                lbltext = "10 Slow Moving Items - Monthly";
                var month = $('.month').val();
                var mondisp = $('.month option:selected').text();

//                    url: "getmistopitemgrp.php",

                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: "getslowsellprod.php",
                    data: {month: month},
                    success: function (response) {

                        var mitemgrp = [], mqty = [];
                        $.each(response, function () {
                            mitemgrp.push(this.itemgrp);
                            mqty.push(this.qty);
                        });

                        var data = {
                            labels: [mitemgrp[0], mitemgrp[1], mitemgrp[2], mitemgrp[3], mitemgrp[4], mitemgrp[5], mitemgrp[6], mitemgrp[7], mitemgrp[8], mitemgrp[9] ],
                            datasets: [{
                                    label: 'Monthly',
                                    data: [mqty[0], mqty[1], mqty[2], mqty[3], mqty[4], mqty[5], mqty[6], mqty[7], mqty[8], mqty[9] ],
                                    backgroundColor: [
                                        'rgb(52,168,83)',
                                        'rgb(192,202,51)',
                                        'rgb(254, 254, 0)',
                                        'rgb(0,0,139)',
                                        'rgb(0,186,247)',
                                        'rgb(181,181,181)',
                                        'rgb(140,103,88)',
                                        'rgb(228,127,202)',
                                        'rgb(255,165,0)',
                                        'rgb(234,67,53)'
                                    ],
                                    borderColor: [
                                        'rgba(52,168,83,1)',
                                        'rgba(192,202,51,1)',
                                        'rgba(254, 254,0,1)',
                                        'rgba(0,0,139,1)',
                                        'rgba(0,186,247,1)',
                                        'rgba(181,181,181,1)',
                                        'rgba(140,103,88,1)',
                                        'rgba(228,127,202,1)',
                                        'rgba(255,165,0,1)',
                                        'rgba(234,67,53,1)'
                                    ],
                                    
                                    borderWidth: 1
                                }]
                        };

                        var chartOptions = {
                            responsive: true,
                            legend: {
                                position: "top"
                            },
                            title: {
                                display: true,
                                text: lbltext,
                                fontSize: 25
                            },
                            scales: {
                                yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: '10 Slow Moving Items',
                                            fontSize: 18
                                        }
                                    }],
                                xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Qty. For Month ' +  mondisp,
                                            fontSize: 18
                                        }
                                    }]
                            },
                            onClick: function (e, element) {
                            }
                        }
                        var DailyBar = new Chart(ctx2, {
                            type: "horizontalBar",
                            data: data,
                            options: chartOptions
                        });

//                        document.getElementById("myChart2").onclick = function (evt, element) {
//                            var activePoints = DailyBar.getElementsAtEvent(evt);
//
//                            //get the internal index of slice in pie chart
//                            var clickedElementindex = activePoints[0];
//
//                            //get specific label by index 
//                            var label = DailyBar.data.labels[clickedElementindex];
//
//                            //get value by index      
//                            var value = DailyBar.data.datasets[0].data[clickedElementindex];
//
//                            var location = 'mistopitemgrp_rep.php?&count=' + value + '&itemgrp=' + label +
//                                    '&fdate=' + weeklyfrmdt + '&tdate=' + weeklytodt + '&month=' + month + '&cancel=no';
//                            window.open(location, '_blank');
//
//
////                            alert(label + ": " + value + ':' + bartitle);
//                        };


//                        DailyBar.update();
                    },
                    error: function (request, textStatus, errorThrown) {
                    }
                });
            }
        });
    </script>
    <?php include("includes/linksfoot.php"); ?>
</body>
</html>
