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

$formname = 'Dashboard For Daily Sale';

$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");
$thismonval = date("m");
$thismonname = date("F");
$thisyear = date("Y");
?>
<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-4 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">
                    <?php echo "<option value='$thismonval'>$thismonname</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-2 col-md-2 col-sm-12 col-xs-12 pad'>
            <input type='text' class='form-control year' name='year' id="year" value='<?php echo $thisyear?>'>
            </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("change", ".month, .year", DailyChart);

            DailyChart();
            function DailyChart() {

                $('#myChart2').replaceWith('<canvas id="myChart2" style="position: relative; height:150vw;"></canvas>');
                var ctx2 = document.getElementById('myChart').getContext('2d');
                var month = $('.month').val();
                var year = $('.year').val();

                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: "getdailysale.php",
                    data: {month:month,year:year},
                    success: function (response) {
                        var day = [],saleamt = [];
                        $.each(response, function () {
                            
                            day.push(this.day);
                            saleamt.push(this.saleamt);
                        });
                        var lbltext = "Daily Sales";
                        var data = {
                            labels: day,
                            datasets: [
                                {
                                    label: "ZUBY",
                                    backgroundColor: "rgb(52,168,83)",
                                    borderColor: "rgb(52,168,83)",
                                    borderWidth: 1,
                                    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: 'Total Sales',
                                            fontSize: 20
                                        }
                                    }],
                                xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Days',
                                            fontSize: 20
                                        }
                                    }]
                            },
                            onClick: function (e, element) {
                            }
                        }
                        var DailyBar = new Chart(ctx2, {
                            type: "bar",
                            data: data,
                            options: chartOptions
                        });
                    },
                    error: function (request, textStatus, errorThrown) {
                    }
                });
            }


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