

<style>
    .report_details{
        background-color:#4c0870;
        color:#fff;
    }
    .datepicker thead tr .dow {
        color:#4c0870!important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870!important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870!important;
color:#ed9421 !important;    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870 !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870!important;
color:#ed9421 !important;    }
    .datepicker table tr td span:hover {
        background-color: #4c0870!important;
color:#ed9421 !important;        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870!important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .btn-group  .active{
        background-color:#4c0870!important;
        color:#fff;
    }


</style>

<script src="<?php echo JS_PATH; ?>Chart.min.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.tooltip.min.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.resize.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.spline.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.pie.js"></script>
<script src="<?php echo JS_PATH; ?>jquery.flot.time.js"></script>
<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>


<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <h4><?php print CommonLanguage::getMessage('product_summary');?></h4>
                <h4><?php // print CommonLanguage::getMessage('product_summary');?></h4>
            </div>
        </div>
        <div id="ViewMode">
            <div class="col-md-4 pull-right DatePicker">
                <div  class="form-group form-group-default input-group">
                    <label><?php print CommonLanguage::getMessage('Date');?></label>
                    <input id="ReportDate" name="ReportDate" class="form-control" data-date-format="yyyy-mm" value="<?php echo ($year).'/'.($monthName); ?>" />
                    <span class="input-group-addon primary"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
            <div class="panel-body" >
                <div class="col-md-12" id="GraphPerDate">
                    <div class="col-md-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>  <?php print CommonLanguage::getMessage('monthly_sales_by_qty');?> </h5>
                                <div class="ibox-tools">
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="flot-chart"> 
                                    <canvas id="barChart" style="width: 485px; height: 226px;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> <?php print CommonLanguage::getMessage('yearly_sales_by_qty');?> </h5>
                                <div ibox-tools=""></div>
                            </div>
                            <div class="ibox-content">
                                <div>
                                    <canvas id="YearChart" height="226" width="485" ></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-6" id="bchart">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> <?php print CommonLanguage::getMessage('sales_by_category');?> </h5>
                                <div ibox-tools=""></div>
                            </div>
                            <div class="ibox-content">
                                <div class="flot-chart">
                                    <canvas id="flotbarchart" style="width: 485px; height: 226px;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" id="chartpie">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> <?php print CommonLanguage::getMessage('six_month_sales');?> </h5>
                                <div ibox-tools=""></div>
                            </div>
                            <div class="ibox-content">
                                <div>
                                    <canvas id="doughnutChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
        </div>
    </div>
</div>


<script>
var labels = [<?php echo json_encode([
                  CommonLanguage::getMessage('January'),
                  CommonLanguage::getMessage('February'),
                  CommonLanguage::getMessage('March'),
                  CommonLanguage::getMessage('April'),
                  CommonLanguage::getMessage('May'),
                  CommonLanguage::getMessage('June'),
                  CommonLanguage::getMessage('July'),
                  CommonLanguage::getMessage('August'),
                  CommonLanguage::getMessage('September'),
                  CommonLanguage::getMessage('October'),
                  CommonLanguage::getMessage('November'),
                  CommonLanguage::getMessage('December')]);?>],
    halfLabel=[<?php echo json_encode([
                  CommonLanguage::getMessage('January').'-'.CommonLanguage::getMessage('June'),
                  CommonLanguage::getMessage('July').'-'.CommonLanguage::getMessage('December')]);?>],
    noresultLang = <?php echo json_encode(CommonLanguage::getMessage('no_result_to_view'));?>;
    UpdateGraphDataPerYearMonth(<?php echo json_encode($per_days);?>)
    UpdateGraphDataPerYear(<?php echo json_encode($per_months);?>)
    UpdateGraphSoldProduct(<?php echo json_encode($arrName);?>,<?php echo json_encode($arrVal);?>)
    UpdateGraph6monthsSales(<?php echo json_encode($result);?>)


    $(function(){
        $("body").addClass("NoSearch")
        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("#ReportDate").datepicker({autoclose:true,viewMode:'months',minViewMode:'months'}).on("changeDate",function(e){
            var CurrentDate={
                
                ReportDate:[moment($("#ReportDate").val()).format("YYYY"),moment($("#ReportDate").val()).format("MM"),moment($("#ReportDate").val()).format("DD")]
            };
            $.ajax({
                url:'InventoryAjax/ProductSummaryAjax',
                method:"GET",
                data:CurrentDate,
                dataType:"json",
                complete:function(v1,v2){
                    if(v2 == "success"){
                        var Data = (v1.responseJSON);
                        console.log(Data);
                        UpdateGraphDataPerYearMonth(Data[0]);
                        UpdateGraphDataPerYear(Data[1]);
                        UpdateGraphSoldProduct(Data[2],Data[3]);
                        UpdateGraph6monthsSales(Data[4]);
                    }
                }
            });
        })
    });


    ///////////////////first chart for months 

    function UpdateGraphDataPerYearMonth(DataM) {
        var barDataM = {
            labels: ["1", "2", "3", "4", "5", "6", "7","8","9","10","11", "12", "13", "14", "15", "16", "17","18","19","20","21", "22", "23", "24", "25", "26", "27","28","29","30","31"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(109, 92, 174,0.5)",
                    strokeColor: "rgba(109, 92, 174,0.8)",
                    highlightFill: "rgba(109, 92, 174,0.75)",
                    highlightStroke: "rgba(109, 92, 174,1)",
                    data:DataM
                }
            ]
        };
        var barOptionsM = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            barShowStroke: false,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            responsive: true
        }
        var ctx = document.getElementById("barChart").getContext("2d");
        if(window.MonthmyLineChartM){window.MonthmyLineChartM.destroy();}
        window.MonthmyLineChartM = new Chart(ctx).Bar(barDataM, barOptionsM);
    }


    ///////////////////second chart for years

    function UpdateGraphDataPerYear(GraphDataPerYear) {
        var lineData = {
            labels: labels[0],
            datasets: [
                {
                    label: "Total Quantity",
                    fillColor: "rgba(109, 92, 174,0.5)",
                    strokeColor: "rgba(109, 92, 174,1)",
                    pointColor: "rgba(109, 92, 174,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#4c0870",
                    data: GraphDataPerYear
                }
            ]
        };
        var lineOptions = {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true
        };
        var ctx = document.getElementById("YearChart").getContext("2d");
        if(window.YearmyLineChart){window.YearmyLineChart.destroy();}
        window.YearmyLineChart = new Chart(ctx).Line(lineData, lineOptions);
    }


    /////////////////// third chart  for sold product 

    function UpdateGraphSoldProduct(GetLabel,GetValue) {
        var barDataP = {    
            labels: GetLabel,
            datasets: [
                {
                    label: GetLabel,
                    fillColor: "rgba(109, 92, 174,0.5)",
                    strokeColor: "rgba(109, 92, 174,0.8)",
                    highlightFill: "rgba(109, 92, 174,0.75)",
                    highlightStroke: "rgba(109, 92, 174,1)",
                    data : GetValue
                }
            ]
        };
        var barOptionsP = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            barShowStroke: true,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            responsive: true
        };

        var ctx = document.getElementById("flotbarchart").getContext("2d");
        if(window.MonthmyLineChartp){window.MonthmyLineChartp.destroy();}
                if(GetValue == 0 && GetValue == 0 ){
                    $("#alertt").remove();
                    var text = $(" <div id='alertt'><span>"+noresultLang+" <span></div>");
                    text.insertAfter($("#bchart").find(".ibox-title").find("h5"));
                }else{
                    $("#alertt").hide();
        console.log(GetValue)
        window.MonthmyLineChartp = new Chart(ctx).Bar(barDataP, barOptionsP);
                }
    }

    ///////////////////fourth chart 6 months Sales

    function UpdateGraph6monthsSales(GetValue){
        var labels = halfLabel[0];
        var colors = ["#E6E6FA" ,"#b5b8cf"];
        var doughnutData = [
            {
                value: GetValue[0],
                color: colors[0],
                highlight: "#1ab394",
                label: labels[0]
            },
            {
                value: GetValue[1],
                color: colors[1],
                highlight: "#1ab394",
                label: labels[1]
            }
        ];
        var doughnutOptions = {
            segmentShowStroke: true,
            segmentStrokeColor: "#fff",
            segmentStrokeWidth: 0,
            percentageInnerCutout: 65, // This is 0 for Pie charts
            animationSteps: 100,
            animationEasing: "easeOutBounce",
            animateRotate: true,
            animateScale: false,
            responsive: true,
        };
        var ctx = document.getElementById("doughnutChart").getContext("2d");
        if(window.myDoughnutChart){window.myDoughnutChart.destroy();}
        if(GetValue[0] == 0 && GetValue[1] == 0 ){
            $("#alert").remove();
            var text = $(" <div id='alert'><span>No Result To View <span></div>");
            text.insertAfter($("#chartpie").find(".ibox-title").find("h5"));
        } 
        else{
            $("#alert").hide();
            window.myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
        }
    }

</script>
