<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print $title ?></div>
            <div class="row form-group">
                <div class=" col-md-3 input-daterange" id="datepicker-range">
                    <label><?php print CommonLanguage::getMessage('range_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('from_depot'); ?></label>
                    <input id="from_depot" type="hidden" autocomplete="off" class="full-width" name="from_depot" >
                </div>
                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('to_depot'); ?></label>
                    <input id="to_depot" type="hidden" autocomplete="off" class="full-width" name="to_depot" >
                </div>
                <div class=" col-md-3">
                    <label><?php print CommonLanguage::getMessage('delivered'); ?>?</label>
                    <select id="type_filter" class="full-width" data-init-plugin="select2" >
                        <option value="0"><?php echo CommonLanguage::getMessage('All') ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('yes') ?></option>
                        <option value="2" selected><?php echo CommonLanguage::getMessage('no') ?></option>
                    </select>
                </div>

            </div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered stock" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th style="width:5%;"><?php print CommonLanguage::getMessage('transfer_nb') ?></th>
                            <th style="width:10%;"><?php print CommonLanguage::getMessage('from_depot') ?></th>
                            <th style="width:10%;"><?php print CommonLanguage::getMessage('to_depot') ?></th>
                            <th style="width:10%;"><?php print CommonLanguage::getMessage('Code') ?></th>
                            <th style="width:10%;"><?php print CommonLanguage::getMessage('Name') ?></th>
                            <th style="width:5%;"><?php print CommonLanguage::getMessage('quantity') ?></th>
                            <th style="width:5%;"><?php print CommonLanguage::getMessage('delivered_qty') ?></th>
                            <th style="width:5%;"><?php print CommonLanguage::getMessage('UOM') ?></th>
                            <th style="width:20%;"><?php print CommonLanguage::getMessage('note') ?></th>
                            <th style="width:20%;"><?php print CommonLanguage::getMessage('criteria') ?></th>

                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var title =<?php echo json_encode($title); ?>,
            startDate = '', endDate = '';
    $(function () {
        build_select2($("#from_depot,#to_depot"), "xhr/depotSearch");
        $("#category_id,#from_depot,#to_depot,#type_filter").on('change', function () {
            ActualAjax()
        });
//        $("input[name=From_To_Date]").daterangepicker({
//            locale: {
//                format: 'YYYY-MM-DD'
//            },
//            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')]
//            }
//        }, function (start, end, label) {
//            window.startDate = start.format("YYYY-MM-DD"),
//                    window.endDate = end.format("YYYY-MM-DD")
//            ActualAjax()
//        });
        $("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'));
            ActualAjax();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            ActualAjax();
        });
        ActualAjax();
    });
    function ActualAjax() {
        var current_data = {
            date_from: window.startDate,
            date_to: window.endDate,
            cat: $("#category_id").val(),
            from_depot: $('#from_depot').val(),
            to_depot: $('#to_depot').val(),
            type_filter: $("#type_filter").val()
        };
        RebuildDataTable(title, [0, 1, 2], 'StockAjax/transfered_delivered_items_ajax', current_data);
    }
</script>