<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">
                <div class=" col-md-3 " >
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="From_To_Date" type="text" class="form-control full-width" name="From_To_Date" autocomplete="off">
                </div> 
                <div class=" col-md-3 <?php echo $type ==1 ? '' : 'hidden' ?>" >
                    <label><?php print CommonLanguage::getMessage('Expiry_Date'); ?></label>
                    <input id="From_To_ExDate" type="text" class="form-control full-width" name="From_To_ExDate" autocomplete="off">
                </div> 
                <div  class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Category') ?></label>
                    <input class=" full-width " id="category_filter"  type="hidden" />
                </div>
                <div  class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('product') ?></label>
                    <input class=" full-width " id="product_filter"  type="hidden" />
                </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>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('Code'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('product'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('quantity'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage($type==1 ? 'Expiry' : ($type==2 ? 'lot' : 'serial')); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var type=<?php echo json_encode($type);?>;
    $(function(){
        build_select2($("#category_filter"), "xhr/catSearch")
        build_select2($("#product_filter"), "xhr/productSearch")
       $("input[name=From_To_Date]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }, locale: {
                cancelLabel: 'Clear'
            }, allowEmpty: false,
            autoUpdateInput: false
        });

        $("input[name=From_To_Date]").on('apply.daterangepicker', function (ev, picker) {
            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                    window.endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            ChangeTable();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            ChangeTable();
        });
       $("input[name=From_To_ExDate]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }, locale: {
                cancelLabel: 'Clear'
            }, allowEmpty: false,
            autoUpdateInput: false
        });

        $("input[name=From_To_ExDate]").on('apply.daterangepicker', function (ev, picker) {
            window.exstartDate = picker.startDate.format('YYYY-MM-DD'),
                    window.exendDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            ChangeTable();
        });
        $("input[name=From_To_ExDate]").on('cancel.daterangepicker', function (ev, picker) {
            window.exstartDate = ''
            window.exendDate = ''
            $(this).val('');
            ChangeTable();
        });
        ChangeTable();
        $("#category_filter,#product_filter").on("change", function () {
            ChangeTable()
        });
    });
    function ChangeTable() {
        var CurrentDate = {
            from_date: window.startDate,
            to_date: window.endDate,
            ex_from: window.exstartDate,
            ex_to: window.exendDate,
            cat_id: $("#category_filter").val(),
            product_id: $("#product_filter").val(),
            type:type
        };
        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4, 5, 6], "InventoryAjax/ExpiryDateReport", CurrentDate);

    }
</script>