<style>
    .table thead tr >th{
        background-color: #4c0870;
        color:#fff;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <input type="hidden" id="is_request" name="is_request" value="<?php echo $is_request ? 1 : 0;?>"/>
            <div class="panel-title"><?php print CommonLanguage::getMessage($title); ?></div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('customer') ?></label>
                    <input id="customer_id" type="hidden" class="full-width" name="customer_id" >
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('from_depot') ?></label>
                    <input id="from_depot_id" type="hidden" class="full-width" name="from_depot_id" >
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('to_depot') ?></label>
                    <input id="to_depot_id" type="hidden" class="full-width" name="to_depot_id" >
                </div>
<!--
                <div class="col-md-3">
                    <label>< ?php echo CommonLanguage::getMessage('Type') ?></label>
                    <select name="current_type" id="current_type" class="full-width" 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('transfer');?></option>
                    </select>
                </div>
-->
                <div class="col-md-2 <?php  echo $is_request ? 'hidden' : '';?>">
                    <label><?php echo CommonLanguage::getMessage('origin') ?></label>
                    <select name="current_origin" id="current_origin" class="full-width" data-init-plugin="select2">
                        <option value=""><?php  echo CommonLanguage::getMessage('select');?></option>
                        <option value="1"><?php  echo CommonLanguage::getMessage('ticketing');?></option>
                        <option value="2"><?php  echo CommonLanguage::getMessage('others');?></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="panel-body" >
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered stock" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center" style="width:5%" >#</th>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('product'); ?></th>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('UOM'); ?></th>
                                <th class="text-center"  ><?php print CommonLanguage::getMessage('From'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('To'); ?></th>
                                  <?php if ($is_request) { ?>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('status'); ?></th>
                                <?php } ?>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('Date'); ?></th>
                                <th class="text-center" ><?php print CommonLanguage::getMessage('quantity'); ?></th>
<!--                                <th class="text-center" >< ?php print CommonLanguage::getMessage('note'); ?></th>-->
                                <th class="text-center" ><?php print CommonLanguage::getMessage('customer'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        build_select2($("#customer_id"), "xhr/customerSearch");
        build_select2($("#from_depot_id"), "xhr/depotSearch");
        build_select2($("#to_depot_id"), "xhr/depotSearch");
        var data_session = get_storage_element(page_link);
        if (data_session.Date != '') {
            window.startDate = data_session.from_date;
            window.endDate = data_session.to_date;
            $("input[name=From_To_Date]").val(data_session.Date)
        }
        $('#customer_id,#current_origin,#from_depot_id,#to_depot_id').on('change',function(){
            change_table();
        });
        change_table()
        $("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'));
            change_table();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            change_table();
        });
    });

    function change_table() {
        var Data = {from_date: window.startDate,
                    to_date: window.endDate,
                    Date: $("input[name=From_To_Date]").val(),
                    customer_id: $("#customer_id").val(),
                    current_origin: $("#current_origin").val(),
                    from_depot_id: $("#from_depot_id").val(),
                    to_depot_id: $("#to_depot_id").val(),
                    is_request:$('#is_request').val() };
//        set_storage_element(page_link, Data)
        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4], 'StockAjax/request_transfer_details_report',Data);
    }
</script>