<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <h4 class="bold"><?php print $title; ?> </h4>
        </div>
        <div class="panel-body">
            <input type="hidden" id="is_order" value="<?php echo $is_order ? 1 : 0; ?>" />
            <div class="row m-b-10 form-group">
                <div  class="col-md-1 ">
                    <label><?php print CommonLanguage::getMessage('invoice_nb'); ?></label>
                    <input id="report_post_list_nb"  type="text" class="full-width form-control"  />
                </div>
                <div  class="col-md-2 ">
                    <label><?php print CommonLanguage::getMessage('customer'); ?></label>
                    <input id="report_post_cust"  type="hidden" class="full-width"  />
                </div>
                <div  class="col-md-2 <?php echo (smc_session()['default_setting']['add_pos_customer'] != 0 && !$is_order) ? '' : 'hidden' ?>">
                    <label><?php print CommonLanguage::getMessage('road_customer'); ?></label>
                    <input id="report_post_pos_cust"  type="hidden" class="full-width"  />
                </div>
                <div  class="col-md-2 ">
                    <label><?php print CommonLanguage::getMessage('posponted_date'); ?></label>
                    <input id="report_post_date" name="report_post_date" class="form-control" autocomplete="off"/>
                </div>
                <div  class="col-md-2  ">
                    <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                    <input id="postponed_category_id" name="postponed_category_id" class="full-width" autocomplete="off" type="hidden"/>
                </div>
                <div  class="col-md-2 ">
                    <label><?php print CommonLanguage::getMessage('posponted_status') ?></label>
                    <select class="full-width" id="report_posponted_status_filter" data-init-plugin="select2">
                        <option value="" ><?php echo CommonLanguage::getMessage('select') ?></option>
                        <option value="1" ><?php echo CommonLanguage::getMessage('Request') ?></option>
                        <option value="2" ><?php echo CommonLanguage::getMessage('production_line') ?></option>
                        <option value="3" ><?php echo CommonLanguage::getMessage('production_done') ?></option>
                        <option value="4" ><?php echo CommonLanguage::getMessage('delivered') ?></option>
                        <option value="5" ><?php echo CommonLanguage::getMessage('on_request') ?></option>
                        <option value="6" ><?php echo CommonLanguage::getMessage('canceled') ?></option>

                    </select>
                </div>
                <div class="col-md-1 m-t-20 pull-right">
                    <div class="pull-right">
                        <a id="print_postponed_report" class="btn btn-danger" ><i class="fa fa-print"></i><?php echo CommonLanguage::getMessage('print'); ?></a>
                    </div>

                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('choose_branch') ?></label>
                    <input id="current_branch_id" type="hidden" class="full-width" name="current_branch_id" >
                </div> 
            </div>
            <div class="row">
                <div class="col-md-12" id="postponed_report_data">
                </div>
            </div>
        </div>
        <?php echo Forms::ModalLoader('postponed_report_loader'); ?>
    </div>
</div>
<script>
    var is_actual = <?php echo $is_actual ? "true" : "false"; ?>;
    $(function () {
        build_select2($("#report_post_cust"), "xhr/customerSearch");
        build_select2($("#postponed_category_id"), "xhr/catSearch", 1);
        build_select2($("#report_post_pos_cust"), "xhr/poscustomerSearch");
        build_select2($("#current_branch_id"), "xhr/CommonSearch?col_name=branch_name&col_id=branch_id&table=tbl_organization_branches");

        $("input[name=report_post_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')]
            }, allowEmpty: true,
            //            autoApply: true,
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        }, function (start, end, label) {
        });

        rebuild_post_report();
        $("#report_post_list_nb").on("keyup", function () {
            rebuild_post_report()
        });
        $('#report_post_cust,#report_posponted_status_filter,#postponed_category_id,#report_post_pos_cust,#current_branch_id').on('change', function () {
            rebuild_post_report()
        });
        $('input[name="report_post_date"]').on('apply.daterangepicker', function (ev, picker) {
            window.startPostponedDate = picker.startDate.format('YYYY-MM-DD'),
                    window.endPostponedDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            rebuild_post_report();
        });
        $('input[name="report_post_date"]').on('cancel.daterangepicker', function (ev, picker) {
            startPostponedDate = ''
            endPostponedDate = ''
            $(this).val('');
            rebuild_post_report();
        });
        $('#print_postponed_report').on('click', function () {
            var divToPrint = document.getElementById('postponed_report_data');
            var htmlToPrint = '<style>.table-bordered>thead>tr>th{border: 1px solid rgba(230,230,230,0.7)}.table-bordered>tbody>tr>td{border: 1px solid rgba(230,230,230,0.7)}.table{width:100%;border-spacing:0;border-collapse: collapse;}</style>' + divToPrint.outerHTML;
            newWin = window.open("");
            newWin.document.write(htmlToPrint);
            newWin.print();
            newWin.close();
        })
    });
    function rebuild_post_report() {
        var inv_data = {
            customer_id: $("#report_post_cust").val(),
            inv_list_nb: $("#report_post_list_nb").val(),
            category_id: $("#postponed_category_id").val(),
            postponed_date_from: window.startPostponedDate,
            postponed_date_to: window.endPostponedDate,
            pos_customer: $("#report_post_pos_cust").val(),
            is_actual: is_actual ? 1 : 0,
            posponted_status: $("#report_posponted_status_filter").val(),
            branch_id: $("#current_branch_id").val()
        }
        $('#postponed_report_data').empty()
        $('#postponed_report_loader').removeClass('hidden')
        $.ajax({
            url: $('#is_order').val() == 1 ? "InventoryAjax/get_postponed_order_report" : "POSAjax/get_postponed_report",
            data: inv_data,
            complete: function (v1, v2) {
                if (v2 == "success") {
                    var response = v1.responseText;
                    $('#postponed_report_data').html(response)
                    $('#postponed_report_loader').addClass('hidden')
                }
            }
        });
    }

</script>