<div class="wrapper">
    <div class="panel ">
        <div class="panel-body">
            <h3><?php print CommonLanguage::getMessage('att_location_details'); ?></h3>
            <div id="alertdiv"></div>
            <div class="row form-group">
                <div class="col-md-12">
                    <div class="col-md-3">
                        <label><?php echo CommonLanguage::getMessage('Date') ?></label><span class="red-star">*</span>
                        <div class="input-group  col-md-12 " >
                            <input id="From_To_Date" type="text" autocomplete="off" class="form-control" name="From_To_Date" >
                        </div> 
                    </div>
                    <div class="col-md-3">
                        <label><?php echo CommonLanguage::getMessage('location') ?></label><span class="red-star">*</span>
                        <div class="input-group  col-md-12 " >
                            <input id="location" type="hidden"  class="full-width" name="location" >
                        </div> 
                    </div>
                    <div class="col-md-3" >
                        <label><?php echo CommonLanguage::getMessage('employee') ?></label><span class="red-star">*</span>
                        <div class="input-group  col-md-12 " >
                            <input id="employee" type="hidden"  class="full-width" name="employee" >
                        </div> 
                    </div>
                    <div class="col-md-3" >
                        <label><?php echo CommonLanguage::getMessage('departments') ?></label>
                        <input type="hidden" id="department_id" class="full-width department_id" name="department_id" />
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered hrm" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('employee') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('location') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('From') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('To') ?></th>
                                <th class="text-center"><?php echo CommonLanguage::getMessage('hours') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th>
                                <div class="text-center">
                                    <span id="total_hours_duration"></span>
                                </div>
                            </th>
                        </tfoot>
                    </table>
                </div>
            </div>    
        </div>
    </div>
</div>
<script>
    var info_lang = <?php echo json_encode(CommonLanguage::getMessage('info')); ?>,
        title = <?php echo json_encode(CommonLanguage::getMessage('att_location_report')); ?>,
            startDate =<?php echo json_encode($today); ?>, endDate =<?php echo json_encode($today); ?>,
                today = <?php echo json_encode($today) ?>;
                $(function () {
                    build_table()
                    build_select2($('#department_id'), 'HRMAjax/searchDepartment');
                    build_select2($('#employee'), 'xhr/employeeSearch?is_actual=1');
                    build_select2($("#location"), "xhr/CommonSearch?col_id=Location_ID&col_name=Location_Name&table=tbl_employee_location")
                    $("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: true,
                    }, function (start, end, label) {
                        window.startDate = start.format("YYYY-MM-DD"),
                            window.endDate = end.format("YYYY-MM-DD")
                    });
                    $("input[name=From_To_Date],#employee,#location,#department_id").on("change", function () {
                        build_table()
                    })
                });
    function build_table() {
        var data = {
            from_date: (window.startDate ? window.startDate : today),
            to_date: (window.endDate ? window.endDate : today),
            location:$("#location").val(),
            employee:$("#employee").val(),
            dep_id:$('#department_id').val()
        }
        $.ajax({
            url: 'HRMAjax/att_location_details_total_hours',
            data: data,
            complete: function (v1, v2) {
                if (v2 == 'success') {
                    var response =v1.responseText;
                    $("#total_hours_duration").html(response);
                    RebuildDataTable(title, [0], 'HRMAjax/att_location_details_ajax', data)
                }
            }
        });

    }
</script>