<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .table tbody tr td {
        color:#000;
    }
</style>

<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('end_shift_report') ?></div>
            
            <div class="row form-group">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('users'); ?></label>
                    <select  id="users"  class="full-width Account_Code " data-init-plugin="select2">
                        <option value="0"><?php echo CommonLanguage::getMessage('All'); ?></option>
                        <?php foreach ($users as $user): ?>
                        <option value="<?php echo $user['User_ID']; ?>"><?php echo $user['User_Name']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('range_from'); ?></label>
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" name="From_Date" id="From_Date" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
                <div class="col-md-3">
                    <label><?php print CommonLanguage::getMessage('range_to'); ?></label>
                    <div class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" name="To_Date" id="To_Date" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('type'); ?></label>
                    <select  id="report_type"  class="full-width report_type " data-init-plugin="select2">
                        <option value="0"><?php echo CommonLanguage::getMessage('end_of_shift'); ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('end_of_day'); ?></option>
                       
                    </select>
                </div>
            </div>
        </div>
        
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered inventory" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th><?php print CommonLanguage::getMessage('username') ?></th>
                            <th><?php print CommonLanguage::getMessage('From') ?></th>
                            <th><?php print CommonLanguage::getMessage('To') ?></th>
                            <th><?php print CommonLanguage::getMessage('net_invoices') ?></th>
                            <th><?php print CommonLanguage::getMessage('net_returns') ?></th>
                            <th><?php print CommonLanguage::getMessage('total_cash') ?></th>
                            <th><?php print CommonLanguage::getMessage('Action') ?></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var act_title = <?php echo json_encode(CommonLanguage::getMessage('end_shift_report')); ?>;
    var today = <?php echo json_encode($current_today) ?>;
    var is_actual = 0;
    $(function () {
        $("#users,#report_type").on("change", function () {
            rebuild_table()

        });

        $("#datetimepicker1").datetimepicker({
            format: 'YYYY-MM-DD hh:mm:ss a'
        });
        $('#datetimepicker1').data("DateTimePicker").date(moment(new Date().getTime() /*-  60 * 60 * 24 * 1000*/).format('YYYY-MM-DD'/* hh:mm:ss a'*/) + ' 12:00:00 am');
        $("#datetimepicker2").datetimepicker({
            useCurrent: false,
            format: 'YYYY-MM-DD hh:mm:ss a'
        })
        $('#datetimepicker2').data("DateTimePicker").date(moment(new Date()).format('YYYY-MM-DD') + ' 11:59:59 pm');
        rebuild_table()

        $("#datetimepicker1").on("dp.change", function (e) {
            $("#datetimepicker2").data("DateTimePicker").minDate(e.date);
            var current_date = new Date(moment(e.date /*-  60 * 60 * 24 * 1000*/).format('YYYY-MM-DD'/* hh:mm:ss a'*/) + ' 11:59:59 pm');
            $("#datetimepicker2").data("DateTimePicker").date(current_date)
            rebuild_table()

        });
        $("#datetimepicker2").on("dp.change", function (e) {
            rebuild_table()
        })

        $("#tableWithSearch").on("click", ".print_end_shift", function () {
            var type = $(this).attr("data-type");
            if(type==0)
                myurl = "Inventory/pos_view_end_shift/" + $(this).attr("data-id")+'&is_actual='+is_actual;
            else
                myurl = "Inventory/pos_view_end_day?shift_id=" + $(this).attr("data-id");
            printExternal(myurl)
        })

    })

    function rebuild_table() {
        RebuildDataTable(act_title, [0, 1, 2, 3, 4], "InventoryAjax/end_of_shift_report",
                         {user: $("#users").val(),
                             From_Date: $("#From_Date").val(),
                             To_Date: $("#To_Date").val(),is_actual:is_actual,
                         type:$("#report_type").val()})
    }
</script>