<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 input-daterange" id="datepicker-range-invoice">
                            <label><?php print CommonLanguage::getMessage('range_date'); ?></label>
                            <input id="From_To_Date_Created" type="text" autocomplete="off" class="form-control" name="From_To_Date_Created" >
                        </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-2">
                    <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                    <input id="category_id" type="hidden"  class="full-width" name="category_id" >
                </div>
                <div class=" col-md-2">
                    <label><?php print CommonLanguage::getMessage('type'); ?></label>
                    <select name="production_type_id" id="production_type_id" class="full-width" data-init-plugin="select2">
                        <option value="-"><?php  echo CommonLanguage::getMessage('raw_material');?></option>
                        <option value="+" selected><?php  echo CommonLanguage::getMessage('produced_items');?></option>
                    </select>
                </div>
                <div class="col-md-2 m-t-10">
                    <input type="checkbox" id="is_group_by" name="is_group_by" checked/>
                    <label><?php print CommonLanguage::getMessage('group_by_product'); ?></label>
                </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('quantity'); ?></th>
                                <th class="text-center" style="width:5%" ><?php print CommonLanguage::getMessage('UOM'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var today = <?php echo json_encode(date('Y-m-d'));?>;
    $(function () {
        new Switchery($("#is_group_by").get(0), {color: $.Pages.getColor("success")});
        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");
  var default_end_time = subtractFromTime(default_start_time, 1, 'seconds'),
                twelve_hours = subtractFromTime(default_start_time, 12, 'hours');
                
 $("input[name=From_To_Date_Created]").daterangepicker({
            timePicker: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss',
                cancelLabel: 'Clear'
            },
//            startDateinvoice: moment(moment().format('YYYY-MM-DD') + ' ' + default_start_time),
            startDateinvoice: moment(moment().add(1, 'days').format('YYYY-MM-DD') + ' ' + default_end_time),
            ranges: {
                'Today': [moment(moment(new Date().getTime()).format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD') + ' ' + default_end_time)],
                'Yesterday': [moment(moment().subtract(1, 'days').format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment().subtract(1, 'days').format('YYYY-MM-DD') + ' ' + default_end_time)],
                'Last 7 Days': [moment(moment().subtract(6, 'days').format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD') + ' ' + default_end_time)],
                'Last 30 Days': [moment(moment().subtract(29, 'days').format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment(new Date().getTime()).format('YYYY-MM-DD') + ' ' + default_end_time)],
                'This Month': [moment(moment().startOf('month').format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment().endOf('month').format('YYYY-MM-DD') + ' ' + default_end_time)],
                'Last Month': [moment(moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD') + ' ' + default_start_time),
                    moment(moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD') + ' ' + default_end_time)]
            } ,
          
        }, function (start, end, label) {
            //            window.startDate = start.format("YYYY-MM-DD HH:mm:ss"),
            //                    window.endDate = end.format("YYYY-MM-DD HH:mm:ss")
            //            ActualAjax()
        });
        $('input[name=From_To_Date_Created]').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
            ActualAjax()
        });
        $('input[name=From_To_Date_Created]').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
            ActualAjax();
        });


        $("input[name=From_To_Date]").daterangepicker({
            locale: {
                cancelLabel: 'Clear'
            },
            allowEmpty: false,
//            autoUpdateInput: false,
            startDate: today,
            endDate: today,
//            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")
        });
         $('input[name=From_To_Date]').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            ActualAjax()
        });
        $('input[name=From_To_Date]').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
            ActualAjax();
        });
        ActualAjax()
        $("#is_group_by,#production_type_id,#production_template_id,#category_id").on("change", function () {
            ActualAjax();
        })
    })
    function ActualAjax() {
        var From_To_Date = $("input[name=From_To_Date]").val().split(' - ');
         var date_from_to_value = $("input[name=From_To_Date_Created]").val().split(' - ');
        var CurrentDate = {
            From_Date: window.startDate ? window.startDate : From_To_Date[0],
            To_Date: window.endDate ? window.endDate : From_To_Date[1],
            From_Date_Created: window.startDateinvoice ? window.startDateinvoice : date_from_to_value[0],
            To_Date_Created: window.endDateinvoice ? window.endDateinvoice : date_from_to_value[1],
            production_template_id: $("#production_template_id").val(),
            category_id: $("#category_id").val(),
            production_type_id: $("#production_type_id").val(),
            is_group_by :$("#is_group_by").is(":checked") ? 1 :0
        };

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

    }
</script>