<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-3 input-daterange" id="datepicker-range-invoice">
                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="From_To_Date" type="text" autocomplete="off" class="form-control" name="From_To_Date" >
                </div>
                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('production_template'); ?></label>
                    <input id="production_template_id" type="hidden"  class="full-width" name="production_template_id" >
                </div>
                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                    <input id="category_id" type="hidden"  class="full-width" name="category_id" >
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row ">    
                <div class="col-md-12 table-responsive" id="MyTable" >
                    <table class="table table-bordered maintenance-table" id="tableWithSearch" >
                        <thead>
                            <tr>

                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('Name'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('Date'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('quantity'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('product'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('production_quantity'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('template_quantity'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('diff'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
        build_select2($("#production_template_id"), "xhr/CommonSearch?col_id=template_id&col_name=template_name&table=tbl_production_template");
        build_select2($("#category_id"), "xhr/CommonSearch?col_id=Cat_ID&col_name=Cat_Name&table=tbl_product_cat");

        $("input[name=From_To_Date]").daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            startDate: moment(moment().format('YYYY-MM-DD')),
            endDate: moment(moment().add(1, 'days').format('YYYY-MM-DD')),
            ranges: {
                'Today': [moment(moment(new Date().getTime()).format('YYYY-MM-DD')),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD'))],
                'Yesterday': [moment(moment().subtract(1, 'days').format('YYYY-MM-DD')),
                    moment(moment().subtract(1, 'days').format('YYYY-MM-DD'))],
                'Last 7 Days': [moment(moment().subtract(6, 'days').format('YYYY-MM-DD')),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD'))],
                'Last 30 Days': [moment(moment().subtract(29, 'days').format('YYYY-MM-DD')),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD'))],
                'This Month': [moment(moment().startOf('month').format('YYYY-MM-DD')),
                    moment(moment().endOf('month').format('YYYY-MM-DD'))],
                'Last Month': [moment(moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD')),
                    moment(moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD'))]
            }
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD"),
                    window.endDate = end.format("YYYY-MM-DD")
            ActualAjax()
        });
        ActualAjax()
        $("#production_template_id,#category_id").on("change", function () {
            ActualAjax();
        })
    })
    function ActualAjax() {
        var From_To_Date = $("input[name=From_To_Date]").val().split(' - ');
        var CurrentDate = {
            From_Date: window.startDate ? window.startDate : From_To_Date[0],
            To_Date: window.endDate ? window.endDate : From_To_Date[1],
            production_template_id: $("#production_template_id").val(),
            category_id: $("#category_id").val()

        };

        RebuildDataTable($('.panel-title h4').html(), [0, 1, 2,3], "MaintenanceAjax/production_process_template_report", CurrentDate, '', [0, 1,2])

    }
</script>