<?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");
?>
<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>-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"></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>
        <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 () {

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

                        var local = [], deem = [], expo = [], other = [], lbltext = '';

                        lbltext = 'Monthly Challans - ';

                        var data = {
                            labels: ['Local', 'Deemed', 'Export', 'Other'],
                            datasets: [{
                                    label: '# of Votes',
                                    data: [response[0].local, response[0].deem, response[0].expo, response[0].other],
                                    backgroundColor: [
                                        'rgba(255, 99, 132, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(255, 206, 86, 0.2)',
                                        'rgba(75, 192, 192, 0.2)',
                                        'rgba(153, 102, 255, 0.2)',
                                        'rgba(255, 159, 64, 0.2)'
                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)',
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(255, 206, 86, 1)',
                                        'rgba(75, 192, 192, 1)',
                                        'rgba(153, 102, 255, 1)',
                                        'rgba(255, 159, 64, 1)'
                                    ],
                                    borderWidth: 1
                                }]
                        };

                        var chartOptions = {
                            responsive: true,
                            legend: {
                                position: "top"
                            },
                            title: {
                                display: true,
                                text: lbltext,
                                fontSize: 25
                            },
                            scales: {
                                yAxes: [{
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }]
                            },
                            onClick: function (e, element) {
                            }

                        }

                        var WeeklyBar = new Chart(ctx, {
                            type: "bar",
                            data: data,
                            options: chartOptions
                        });


//                        document.getElementById("myChart").onclick = function (evt, element) {
//                          console.log(1);
//                            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;
//                            console.log(bartitle);
//                            console.log(activePoints);
//                            if (firstPoint !== undefined) {
//                                var series = label.substr(0, 2), ctype = '';
//                                if (bartitle.toUpperCase() == 'Local'.toUpperCase()) {
//                                    ctype = 'L';
//                                } else if (bartitle.toUpperCase() == 'Deem'.toUpperCase()) {
//                                    ctype = 'D';
//                                } else if (bartitle.toUpperCase() == 'Export'.toUpperCase()) {
//                                    ctype = 'E';
//                                } else {
//                                    ctype = 'O';
//                                }
////                                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>
