
<style>
    .open>.dropdown-menu {
        display: block;
        width: 100%;
    }
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .table tbody tr td {
        color:#000;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .table-responsive {
        overflow-x: visible;
    }
    .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;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870   !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870  !important;
    }
    .datepicker table tr td span:hover {
        background-color: #4c0870  !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;
    }
    .b-r {
        border-left-width: 1px;
    }
    .bg-master-lighter {
        border:none;
        background-color:#fff;
        border-top:1px solid #ddd;  
    }
    .WidgetMenu{
        width:140px;
        text-align:center;
        border:1px solid #4c0870;
        padding-bottom:10px !important;
    }
    .WidgetMenu > .Mini{
        display:inline-block !important;
        color:#555;
        padding:0 !important;
    }
    .WidgetMenu > li:not(.Mini){
        display:block !important;
        padding:5px 0;
    }
    .WidgetMenu > li:not(.Caption) > a{
        padding: 3px 8px;
        line-height: normal;
        opacity:0.7;
    }
    .ReportSelector{font-size: 1.2em;}
    .WidgetMenu > .Caption:not(:first-child){
        margin-top:10px;
    }
    .WidgetMenu > .Caption{
        text-align:left;
        font-size: 14px;
        display: block !important;
        padding: 4px;
        text-indent:5px;
        line-height: normal !important;
        color:#ccc !important;
    }
    .WidgetMenu div > .Selected{
        background:#4c0870;
        color:#fff !important;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .dropdown a{
        color: #4c0870  !important;
    }
    .WidgetMenu div> .Selected >a{color:#fff !important;}
    .ForceShow{display:block}
    .ForceHide{display:none !important;}
    .HideMe{
        display:none !important;
        position:absolute;
        top:-1000px;
    }
    .HideGraph{
        visibility:hidden;
        position:absolute;
        top:20px;
    }
    #MyTable .list>li{
        cursor:pointer;
    }
    .alert-dismissible
    {
        margin-top:20px;
        margin-left:58px;
        border: 1px dashed #4c0870;
        background-color: #fff;
        color: #4E5E6A;
        font-size:16px;
        width: 50%;
    }
    body{
        overflow:auto
    }
</style>
<div class="wrapper">
    <div class="panel invoice">
        <div class="panel-body">
            <div class="row">
                <h1><?php print CommonLanguage::getMessage($title); ?></h1>
                <div class="col-md-12 input-group m-b">
                    <div class="col-md-3 ">
                        <div class="panel-controls">
                            <ul>
                                <li style="list-style:none;">
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-primary btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                            <span><strong><?php print CommonLanguage::getMessage('select_report_type'); ?></strong></span>
                                        </button>
                                        <ul class="dropdown-menu WidgetMenu" role="menu">
                                            <li class="Caption"><?php print CommonLanguage::getMessage('show'); ?></li>
                                            <div class="col-xs-12">
                                                <div class="col-xs-6">
                                                    <li data-val="1" class="Mini MShow Selected"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('sales'); ?></a></li>
                                                </div>
                                                <div class="col-xs-6">
                                                    <li data-val="2" class="Mini MShow"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('purchase'); ?></a></li>
                                                </div>
                                                <div class="col-xs-6">
                                                    <li data-val="3" class="Mini MShow"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('Transfers'); ?></a></li>
                                                </div>
                                            </div>
                                            <li class="Caption"><?php print CommonLanguage::getMessage('frequency'); ?></li>
                                            <div class="col-xs-12">
                                                <div class="col-xs-6">
                                                    <li data-val="1" class="Mini MFreq Selected"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('Daily'); ?></a></li>
                                                </div>
                                                <div class="col-xs-6">
                                                    <li data-val="3" class="Mini MFreq"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('monthly'); ?></a></li>
                                                </div>
                                                <div class="col-xs-6">
                                                    <li data-val="4" class="Mini MFreq"><a href="#" class="ReportSelector"><?php print CommonLanguage::getMessage('yearly'); ?></a></li>
                                                </div>
                                            </div>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <input class=" full-width " id="Material_Code"  type="hidden" />
                    </div>
                    <div id="Date_Group" class="form-group form-group-default input-group col-md-2 pull-right " >
                        <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                        <input id="Report_Date" name="Report_Date" class="form-control" data-date-format="yyyy-mm-dd" value="<?php echo($today); ?>" aria-required="true" aria-invalid="false">
                        <input id="Report_Month" name="Report_Month" class="form-control HideMe" data-date-format="yyyy-mm" value="<?php echo($year . '-' . $monthName); ?>" aria-required="true" aria-invalid="false">
                        <input id="Report_Year" name="Report_Year" class="form-control HideMe" data-date-format="yyyy" value="<?php echo($year); ?>" aria-required="true" aria-invalid="false">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
                <div class="col-md-12" id="MyTable" >
                    <div class ="alert alert-info alert-dismissible">
                        <?php print CommonLanguage::getMessage('select_item_report_setting'); ?>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-6 HideGraph" id= "MonthlyBarGraph">
                        <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 HideGraph" id= "YearlyBarGraph">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5><?php print CommonLanguage::getMessage('bar_chart_per_year'); ?> </h5>
                                <div class="ibox-tools">
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="flot-chart"> 
                                    <canvas id="YearlybarChart" height="226" width="485" style="width: 485px; height: 226px;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br>

            </div>
        </div>
    </div>
</div>
<script>
    var reportOfLang = <?php echo json_encode(CommonLanguage::getMessage('report_of')); ?>,
        FromLang = <?php echo json_encode(CommonLanguage::getMessage('From')); ?>,
            ToLang = <?php echo json_encode(CommonLanguage::getMessage('To')); ?>,
                QtyLang = <?php echo json_encode(CommonLanguage::getMessage('quantity')); ?>,
                    customerLang = <?php echo json_encode(CommonLanguage::getMessage('customer')); ?>,
                        discountLang = <?php echo json_encode(CommonLanguage::getMessage('discount')); ?>,
                            totalPriceLang = <?php echo json_encode(CommonLanguage::getMessage('total_price')); ?>,
                                selected_available = <?php echo json_encode(CommonLanguage::getMessage('selected_available')); ?>,
                                    is_actual = <?php echo $is_actual;?>;
                                    $(function () {
                                        build_select2($("#Material_Code"), "xhr/productSearch")

                                        //Setting Daily datepicker
                                        $("#Report_Date").datepicker({autoclose: true})
                                        //Setting Monthly datepicker
                                        $("#Report_Month").datepicker({autoclose: true,
                                                                       viewMode: "months",
                                                                       minViewMode: "months"})
                                        //Setting Yearly datepicker
                                        $("#Report_Year").datepicker({autoclose: true,
                                                                      viewMode: "years",
                                                                      minViewMode: "years"})


                                        /***********************************The main box or report of Item******************************************************/
                                        //Type & Frequency
                                        //on click the data below must change using ajax
                                        //only one click is enough to trigger the ajax 
                                        //li:not(.Caption) is not to select and click the title inside the box
                                        /*Frequency: 1-Daily
         2-Weekly
         3-Monthly
         4-Yearly
         */
                                        $(".WidgetMenu >div li:not(.Caption)").on("click", function (e) {
                                            e.preventDefault();

                                            var me = $(this),
                                                RFreq = me.parent().find("li.MFreq").eq(me.index(e)).attr("data-val"),
                                                RType = me.parent().find("li.MShow").eq(me.index(e)).attr("data-val");
                                            // freq Condition for Daily with id 1
                                            if (RFreq == 1) {
                                                $("#Report_Date").removeClass("HideMe")//to show daily datepicker
                                                $("#Report_Month,#Report_Year").addClass("HideMe")//to hide monthly datepicker
                                            } else//freq Condition for monthly with id 3
                                                if (RFreq == 3) {
                                                    $("#Report_Date,#Report_Year").addClass("HideMe")//to hide daily datepicker
                                                    $("#Report_Month").removeClass("HideMe")//to show monthly datepicker
                                                } else//freq condition for yearly with id 4
                                                    if (RFreq == 4) {
                                                        $("#Report_Date,#Report_Month").addClass("HideMe")//to hide daily datepicker
                                                        $("#Report_Year").removeClass("HideMe")//to show yearly datepicker
                                                    }
                                            me.parent().addClass("ForceHide")//to close main box of report of items
                                            var MyClass = me.hasClass("MShow") ? "MShow" : "MFreq";//to differeniate if the click is on frequency or report type
                                            me.parents("div").find("li." + MyClass).removeClass("Selected")//to remove the selection from the previous selected value
                                            me.parent().find("li").eq(me.index(e)).addClass("Selected")//to make the clicked value selected
                                            me.parent().removeClass("ForceHide");//to remove class ForceHide which close the main box

                                            if (RFreq == 1 || RFreq == 3 || RFreq == 4) {
                                                var curType = $(">.MShow.Selected", $(".WidgetMenu >div li:not(.Caption)").parent()).attr("data-val");
                                                if (curType == 1 || curType == 2) {
                                                    applyAjaxReport();//to return data on selection of frequency or report type
                                                } else
                                                    if (curType == 3) {
                                                        applyTransferReport();
                                                    }

                                            }
                                            if (RType == 1 || RType == 2) {
                                                applyAjaxReport();//to return data on selection of frequency or report type
                                            } else
                                                if (RType == 3) {
                                                    applyTransferReport();
                                                }

                                        })
                                        //End of on click of the main box container
                                        /**********************************************************************Begining of onChange datepicker*************************************/
                                        $("#Report_Date,#Report_Month,#Report_Year").on("changeDate", function (e) {
                                            applyAjaxReport();//Rebuild table based on selected date
                                        })//End of onChange datepicker

                                        /************************onChange of Category Select and Product or Material Code to call ajax and return data****************************/
                                        $("#Material_Code").on("change", function () {
                                            var curType = $(">.MShow.Selected", $(".WidgetMenu >div li:not(.Caption)").parent()).attr("data-val");
                                            if (curType == 1 || curType == 2) {
                                                applyAjaxReport();
                                            } else
                                                if (curType == 3) {
                                                    applyTransferReport();
                                                }
                                        });//End of onChange of Selects
                                    })
    function applyAjaxReport() {

        var me = $(".WidgetMenu div> li:not(.Caption)");
        var freq =$(">.MFreq.Selected", me.parent()).attr("data-val");
        var DateArr = {
            Material_Code: $("#Material_Code").val(),
            freq: freq,
            type: $(">.MShow.Selected", me.parent()).attr("data-val"),
            actual : is_actual
        };
        var freqName = $(">.MFreq.Selected a", me.parent()).html(),
            reportType = $(">.MShow.Selected a", me.parent()).html(),
            prodName = $("#s2id_Material_Code a span").eq(0).html(),
            title = freqName + " " + reportType + " " + reportOfLang + " " + prodName;

        MyCurrentDate(freq);
        DateArr.Report_Date = window.MyDate;
        $("#MyTable").empty();
        var table = " <div><h4>" + title + "</h4></div> <table class='table' id='ReportTable' >"
        table += "<thead><tr>"
        table += "<th class='text-center' style='width:10%'>" + customerLang + "</th>"
        table += "<th class='text-center' style='width:10%' > " + QtyLang + "</th>"
        table += "<th class='text-center' style='width:10%'>" + discountLang + "</th>"
        table += "<th class='text-center' style='width:10%' >" + totalPriceLang + "</th>"
        table += "</tr></thead><tbody></tbody></table>";
        table = $(table)
        $("#MyTable").append(table)
        RebuildDataTable(title,[0,1,2,3],'InventoryAjax/ItemMovementAjax',DateArr,'#ReportTable')
    }




    function applyTransferReport() {



        var me = $(".WidgetMenu div> li:not(.Caption)");
        var freq =$(">.MFreq.Selected", me.parent()).attr("data-val");
        var DateArr = {
            Material_Code: $("#Material_Code").val(),
            freq: freq
        };
        var freqName = $(">.MFreq.Selected a", me.parent()).html(),
            reportType = $(">.MShow.Selected a", me.parent()).html(),
            prodName = $("#s2id_Material_Code a span").eq(0).html(),
            title=freqName + " " + reportType + " " + reportOfLang + " " + prodName;
        MyCurrentDate(freq);
        DateArr.Report_Date = window.MyDate;
        $("#MyTable").empty();

        var table = " <div><h4>" + title + "</h4></div> <table class='table' id='ReportTable' >"
        table += "<thead><tr>"
        table += "<th class='text-center' style='width:10%'>" + FromLang + "</th>"
        table += "<th class='text-center' style='width:10%' > " + ToLang + "</th>"
        table += "<th class='text-center' style='width:10%'>" + QtyLang + "</th>"
        table += "</tr></thead><tbody></tbody></table>";
        table = $(table)
        $("#MyTable").append(table)
        RebuildDataTable(title,[0,1,2,3],'StockAjax/StockDashboardRequest',DateArr,'#ReportTable')
    }
    function MyCurrentDate(freq) {
        var MyDate;

        if (freq == 1) {
            window.MyDate = $("#Report_Date").val()
        } else
            if (freq == 3) {
                window.MyDate = [moment($("#Report_Month").val()).format("YYYY"), moment($("#Report_Month").val()).format("MM"), moment($("#Report_Month").val()).format("DD")]
            } else
                if (freq == 4) {
                    window.MyDate = [moment($("#Report_Year").val()).format("YYYY"), moment($("#Report_Year").val()).format("MM"), moment($("#Report_Year").val()).format("DD")]
                }
    }

</script>
