
<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;
    }
    .Customer,#TablePerCustomer,#SoldQuantiyPerCustomer,#SupplierInfo,#GraphPerCusotmer {
		
    }
	.HideMe{
        visibility:hidden;
		position:absolute;
		top:-1000px;
	}
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        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_report');?></h4>
            </div>
        </div>
        <div id="ViewMode">
            <div class="col-md-4">
                <span style="margin:0 13px"><?php print CommonLanguage::getMessage('Type');?>: </span>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="radio" name="ViewType" value="1" checked=""><?php print CommonLanguage::getMessage('Date');?>
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="ViewType" value="2"><?php print CommonLanguage::getMessage('customer');?>
                    </label>
                </div>
            </div>

            <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="col-md-4 pull-right Customer HideMe ">
                <div  class="form-group form-group-default input-group">
                    <label><?php print CommonLanguage::getMessage('customer');?></label>
                    <input type="text" id="search_supplier" class="form-control" placeholder="Search Cusotmer" >
                    <span class="input-group-addon primary"><i class="fa fa-user"></i></span>
                </div>
            </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('bar_chart_per_month');?></h5>
                            <div class="ibox-tools">
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="flot-chart"> 
                                <canvas id="barChart" height="226" width="485" 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('line_chart_per_year');?> </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-8 HideMe" id="GraphPerCusotmer" >

                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><?php print CommonLanguage::getMessage('line_chart');?> </h5>
                            <div class="ibox-tools">
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="flot-chart">
                                <canvas id="line-Chart" style="height:226px;width:485px"   ></canvas>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-4 bg-primary HideMe" id="SupplierInfo" style="margin-top: 58px;height: 305px;">
                    <input type="hidden" name="Customer_ID" required id="Customer_ID" />
                    <h4 style="color: #fff;border-bottom: 1px solid #FFF;border-bottom-style: dashed;"><?php print CommonLanguage::getMessage('customer_details');?></h4>
                    <div id="SupplierInfoContent"  >
                    </div>
                </div>

            </div>
            <div class="col-md-6" id="SoldQuantiyPerMonth">
                <label class="bold" > <?php print CommonLanguage::getMessage('sold_quantity_in');?><?php echo $monthName?> :</label> <span><?php echo (!$SoldQuantityPermonth ['Total_Quantity']?"-- --" :$SoldQuantityPermonth ['Total_Quantity']) ;?></span><br>
            </div>    
            <div class="clearfix"></div>
            <div class="panel-body col-md-12">
                <table class="table  table-bordered    table-hover demo-table-search HideMe" id="TablePerCustomer" >
                    <thead>
                        <tr>
                            <th class="text-center"  style="width:5%"> <?php print CommonLanguage::getMessage('Code');?></th>
                            <th class="text-center" ><?php print CommonLanguage::getMessage('product_name');?></th>
                            <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('available_quantity');?></th>
                            <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('sold_quantity');?></th>
                            <th class="text-center" style="width:10%" > <?php print CommonLanguage::getMessage('customer');?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class='v-align-middle text-center'><?php echo $Prodcut_Details[0]['Product_Code']?></td>
                            <td class='v-align-middle text-center'><?php echo $Prodcut_Details[0]['Product_Name']?></td>
                            <td class='v-align-middle text-center'><span><?php echo $AvailableQuantity ?> </span> </td>
                            <td class='v-align-middle text-center' id="TotalQuantity"><span></span></td>
                            <td class='v-align-middle text-center'id="CustomerName"> <span></span> </td>
                        </tr>  
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var CompanyLang = <?php echo json_encode(CommonLanguage::getMessage('company'));?>,
        EmailLang = <?php echo json_encode(CommonLanguage::getMessage('Email'));?>,
        PhoneLang = <?php echo json_encode(CommonLanguage::getMessage('Phone'));?>,
        AddressLang = <?php echo json_encode(CommonLanguage::getMessage('address'));?>,
        CountryLang = <?php echo json_encode(CommonLanguage::getMessage('country'));?>,
        work_phone = <?php echo json_encode(CommonLanguage::getMessage('work_phone'));?>,
        sold_quantity_in = <?php echo json_encode(CommonLanguage::getMessage('sold_quantity_in'));?>,
		Product_ID = <?php echo $Product_ID?>;

    $(function(){

        UpdateGraphDataPerYearMonth(<?php echo json_encode($arr);?>,false)
        UpdateGraphDataPerYear(<?php echo json_encode($arrYear);?>,false)
        UpdateGraphDataPerCustomerYear(<?php echo json_encode($arrCustomerPerYear);?>,false)
        
         
        
        $("#ViewMode label.btn").on("click",function(){
            setTimeout('switchcase()',10)
        })
        $("#search_supplier").autocomplete({
            source: 'xhr/ajaxCustomer',
            minLength: 2,
            select: function(event, ui){
                var Content = "";
                Content += "<strong>Name: </strong><span class='Name'>"+ui.item.Customer_Name+"</span>";
                Content += "<div style='margin-top: 5px;'><strong>"+CompanyLang+": </strong><span class='Company'>"+ui.item.Customer_Company+"</span></div>";
                Content += "<div style='margin-top: 5px;'><strong>"+EmailLang+": </strong><span class='Address'>"+ui.item.Customer_Email+"</span></div>";
                Content += "<div style='margin-top: 5px;'><strong>"+PhoneLang+": </strong><span class='Phone'>"+ui.item.Customer_Phone+"</span></div>";
                Content += "<div style='margin-top: 5px;'><strong>"+work_phone+": </strong><span class='Phone'>"+ui.item.Customer_Work_Phone+"</span></div>";
                Content += "<div style='margin-top: 5px;'><strong>"+AddressLang+": </strong><span class='Discount'>"+ui.item.Customer_Address+"</span></div>";
                Content += "<div style='margin-top: 5px;'><strong>"+CountryLang+": </strong><span class=''>"+ui.item.Country_Name+"</span></div>";
                $("#SupplierInfoContent").html(Content)
                $("#Supplier_ID-error").remove()
                $("#Customer_ID").removeClass("error").val(ui.item.Supplier_ID);

                var NewData={
                    Product_ID  :  Product_ID,
                    Customer_ID :  ui.item.Customer_ID
                };

                $.ajax({
                    url:'InventoryAjax/ReportProductAjax',
                    data:NewData,
                    method: 'GET',
                    dataType: 'Json',
                    complete:function(v1,v2){
                        if(v2 == "success"){
                            var CustomerData = (v1.responseJSON);
                            UpdateGraphDataPerCustomerYear(CustomerData,true);
                            var Quantity = (CustomerData.length-1);
                            Detail_Customer=CustomerData[Quantity];
                            CustomerName=Detail_Customer['Customer_Name'];
                            TotalQuantity=Detail_Customer['Sum_Product'];
                            $("#TotalQuantity").html(!TotalQuantity ? "--" : TotalQuantity);
                            $("#CustomerName").html(!CustomerName ? "--" : CustomerName);

                        }
                    }
                });
            }
        }).autocomplete("instance")._renderItem = function(ul,item){
            return $("<li>").html("<table cellspacing='0' cellpadding='0'><tr><td class='Column1'><i class='fa fa-file-o'></i></td><td><strong>"+item.Customer_Name + "</strong></td></tr></table>").appendTo(ul)
        }
        $("#search_supplier").autocomplete("instance")._resizeMenu = function( ul, items ) {
            this.menu.element.outerWidth($("#search_supplier").width() + parseFloat($("#search_supplier").css("padding-left")) + parseFloat($("#search_supplier").css("padding-right")) + 2);
        }




        $("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={
                Product_ID  :  $("#Product_ID").val(),
                ReportDate  : [moment($("#ReportDate").val()).format("YYYY"),moment($("#ReportDate").val()).format("MM"),moment($("#ReportDate").val()).format("DD")]
            };
            $.ajax({
                url:'InventoryAjax/ReportProductAjax',
                data:CurrentDate,
                method: 'GET',
                dataType: 'Json',
                complete:function(v1,v2){
                    if(v2 == "success"){
                        var Data = (v1.responseJSON);
                        $("#SoldQuantiyPerMonth").empty().append('<label class="bold" >'+sold_quantity_in+' '+moment($("#ReportDate").val()).format("MMMM")+' :</label> <span>'+(!Data['Total_Quantity'] ? "--" : Data['Total_Quantity'] )+'</span><br>');
                        UpdateGraphDataPerYearMonth(Data,true);
                        UpdateGraphDataPerYear(Data,true);
                    }
                }
            });
        })

    });


    /**
     * [[Line OF Chart]]
     * @param {Array[1,2,3,4]} GraphDataPerYear [[Dispaly The SoldQuantity of Product In line Chart Per Year]]
////     */
    function UpdateGraphDataPerYear(GraphDataPerYear,IsUpdate) {
        var lineData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"],
            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(IsUpdate){
            for(var x=0;x<12;x++){
                YearmyLineChart.datasets[0].points[x].value = GraphDataPerYear[x+31];
                YearmyLineChart.update();

            }
        }else{
  window.YearmyLineChart = new Chart(ctx, {
                type: 'line',
                data: lineData,
                options: lineOptions
            });
        }
    }
    /**
     * [[Bar OF Chart]]
     * @param {Array[1,2,3,4]} GraphDataPerYearMonth [[Dispaly The SoldQuantity of Product In line Chart Per Year & Month]]
//     */
    function UpdateGraphDataPerYearMonth(GraphDataPerYearMonth,IsUpdate) {
        var barData = {
            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 Second 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: GraphDataPerYearMonth
                }
            ]
        };
        var barOptions = {
            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("barChart").getContext("2d");
        if(IsUpdate){
            for(var x=0;x<31;x++){
                MonthmyLineChart.datasets[0].bars[x].value=GraphDataPerYearMonth[x];
                MonthmyLineChart.update();
            }
        }else{
 window.MonthmyLineChart = new Chart(ctx, {
                type: 'bar',
                data: barData,
                options: barOptions
            });
        }
    }


    function UpdateGraphDataPerCustomerYear(GraphDataPerCustomerYear,IsUpdate) {

        var lineData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"],

            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: GraphDataPerCustomerYear
                }
            ]
        };

        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("line-Chart").getContext("2d");
        if(IsUpdate){
            for(var x=0;x<12;x++){
                YearmyLineChartPerCustomer.datasets[0].points[x].value = GraphDataPerCustomerYear[x];
                YearmyLineChartPerCustomer.update();


            }
        }else{
       window.YearmyLineChartPerCustomer = new Chart(ctx, {
                type: 'line',
                data: lineData,
                options: lineOptions
            });
        }
    }
    function switchcase(){ 
        var CheckedValue =  parseInt($("#ViewMode input:checked").val());
        switch(CheckedValue){
            case 1:
                $("#GraphPerDate,.DatePicker,#SoldQuantiyPerMonth,#TablePerDate").removeClass("HideMe");
                $("#SupplierInfoContent,.Customer,#GraphPerCusotmer,#TablePerCustomer,#SupplierInfo").addClass("HideMe");
                break;
            case 2:
                $("#GraphPerDate,.DatePicker,#SoldQuantiyPerMonth,#TablePerDate").addClass("HideMe");
                $("#SupplierInfoContent,.Customer,#GraphPerCusotmer,#TablePerCustomer,#SupplierInfo").removeClass("HideMe");

                break;
        }

    }
</script>
