<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title">
                <h4 class="bold"><?php echo $title; ?> </h4>
            </div>

            <div class="row form-group">

                <div class=" col-md-2 " >
                    <label><?php print CommonLanguage::getMessage('From'); ?></label>
                    <input id="from_month" type="text" autocomplete="off" class="form-control" data-date-format="yyyy-mm" value="<?php echo($year . '-' . $month); ?>">
                </div>
                <div class=" col-md-2 " >
                    <label><?php print CommonLanguage::getMessage('To'); ?></label>
                    <input id="to_month" type="text" autocomplete="off" class="form-control" data-date-format="yyyy-mm" value="<?php echo($year . '-' . $month); ?>">
                </div>

                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('choose_supplier'); ?></label>
                    <input id="supplier_id" type="hidden"  class="full-width" name="supplier_id" >
                </div>
                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                    <input type="hidden" name="category_filter" id="category_filter" class="full-width"/>
                </div>
                <div class=" col-md-2 m-t-25 pull-right">
                    <button class="btn btn-primary pull-right" id="generate_report"><?php echo CommonLanguage::getMessage('generate_report') ?></button>
                </div>

            </div>


        </div>
        <div class="panel-body">
            <div class="row ">    
                <div class="col-md-12 table-responsive" id="MyTable" >
                    <table class="table table-bordered inventory" id="tableWithSearch" >
                        <thead>
                            <tr class="main-head2">
                                <th colspan="4"></th>
                            </tr>
                            <tr class="main-head1">
                                <th><?php echo CommonLanguage::getMessage('Code'); ?></th>
                                <th ><?php echo CommonLanguage::getMessage('Name'); ?></th>
                                <th ><?php echo CommonLanguage::getMessage('UOM'); ?></th>
                                <th ><?php echo CommonLanguage::getMessage('Stock_Quantity'); ?></th>
                            </tr>

                        </thead>
                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var ViewLang = <?php echo json_encode(CommonLanguage::getMessage('view')); ?>;
    var title = '<?php echo $title; ?>';
    var today = <?php echo json_encode($today) ?>;
    var is_actual = <?php echo json_encode($is_actual); ?>;
//    function ClckBtn(who) {
//        var name = $(who).attr('name');
//        if (name != 'all')
//            $('#is_day').val(1);
//        else
//            $('#is_day').val(0);
//    }
    $(function () {
//        var default_end_time = subtractFromTime(default_start_time, 1, 'seconds'),
//                twelve_hours = subtractFromTime(default_start_time, 12, 'hours');
        build_select2($("#supplier_id"), "xhr/supplierSearch");
        build_select2($("#category_filter"), "xhr/CommonSearch?col_name=Cat_Name&col_id=Cat_ID&table=tbl_product_cat");


        $("#from_month,#to_month").datepicker({autoclose: true,
            viewMode: "months",
            minViewMode: "months"})
//        ActualAjax()

        $("#generate_report").on("click", function () {
            ActualAjax();
        })
    });

    function ActualAjax() {
        var CurrentDate = {
            from_month: $("#from_month").val(),
            to_month: $("#to_month").val(),
            supplier_id: $("#supplier_id").val(),
            category_id: $("#category_filter").val(),
        };
        var resultList = [],
                date = new Date($("#from_month").val() + '-15 14:00:00'),
                endDate = new Date($("#to_month").val() + '-15 14:00:00'),
                monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var tr1 = '';
        var tr2 = '';
        var all_cols = [0, 1, 2, 3];
//        $("#tableWithSearch").DataTable().destroy();
        $.ajax({
            url: "InventoryAjax/forcast_sales_report_ajax",
            data: CurrentDate,
            dataType: 'json',
            complete: function (v1, v2) {
                $("#tableWithSearch").DataTable().destroy();
                var count = 1;
                $.each(v1.responseJSON[1], function (indx, value) {
                    tr1 += '<th class="dynamic-header-month">' + value['order_nb'] + '</th>';
                    count++;
                })
                tr1 += '<th class="dynamic-header-month">' + '<?php echo CommonLanguage::getMessage('total_ordered_qty') ?>' + '</th>';
                tr2 += '<th colspan="' + count + '" class="dynamic-header-month">' + '<?php echo CommonLanguage::getMessage('pending_orders') ?>' + '</th>';
                var count = 1;
                while (date <= endDate) {
                    var stringDate = monthNameList[date.getMonth()] + " " + date.getFullYear();
                    resultList.push(stringDate);
                    tr1 += '<th  class="dynamic-header-month">' + stringDate + '</th>';
                    date.setMonth(date.getMonth() + 1);
                    all_cols.push(all_cols.length);
                    count++;
                }
                tr2 += '<th colspan="' + count + '" class="dynamic-header-month">' + '<?php echo CommonLanguage::getMessage('sold_qty') ?>' + '</th>';
                tr1 += '<th  class="dynamic-header-month">' + '<?php echo CommonLanguage::getMessage('total_sold_qty') ?>' + '</th>';
                $("#tableWithSearch thead th.dynamic-header-month").remove();
                $(tr1).insertAfter($("#tableWithSearch thead .main-head1 th").last());
                $(tr2).insertAfter($("#tableWithSearch thead .main-head2 th").last());

                $("#tableWithSearch tbody").empty().html(v1.responseJSON[0])

                //
                var mnthly_sls_list_dt = RebuildDataTable(title, [], "", [], '#tableWithSearch', '', {hide_search_row: true});
                mnthly_sls_list_dt.columns().visible(true);
            }
        })

    }
</script>