@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')

    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('attendance/admin.attendance_entry_log')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('attendance/admin.attendance_entry_log')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <!-- Filters -->
     
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0"></h2>
                    
                </div>
            </div>
        </div>
        <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
            <div class="mb-1 breadcrumb-right">
                <div class="dropdown">
                    <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                        type="button"><i data-feather='filter'></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas-end-example">
        <form method="get">
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body my-auto mx-0 flex-grow-0">

                    <div class="row">
                        <div class="col-sm-12 mt-1">
                            <input type="hidden" name="search" placeholder="Search" id="SearchFilter" class="form-control" value="{{ request()->input('search') }}">
                            <label class="form-label" for="date_range">Date range</label>
                            <input type="text" id="date_range" name="date_range" value="{{$dateRange}}" class="form-control daterangebg"> {!! $errors->first('date_range', '<label class="control-label error" for="date_range">:message</label>')!!}


                            <label class="form-label mt-2" for="area_id">{{trans('master/master.location')}}</label>
                            <select class="form-control mb-2 select2" name="location_id[]" id="location_id" onchange="getsubLocations(this,'sublocations')" multiple>
                                {{-- @foreach($locations as $location)
                                    <option value="{{$location->id}}" @if(in_array($location->id, request()->input('location_id',[]))) selected @endif>{{$location->name}}
                                    </option>
                                @endforeach --}}
                            </select>
                            <label class="form-label mt-2" for="area_id">{{trans('master/master.sub_location')}}</label>
                            <select class="form-control mb-2 select2" name="sub_location_id[]" id="sub_location_id" multiple>
                                {{-- @foreach($subLocations as $subLocation)
                                    <option value="{{$subLocation->id}}"  @if(in_array($subLocation->id, request()->input('sub_location_id',[]))) selected @endif>{{$subLocation->name}}
                                    </option>
                                @endforeach --}}
                            </select>

                            <label class="form-label mt-2" for="department_id">Department</label>
                            <select class="form-control mb-2 select2" name="department_id[]" id="department_id" multiple>
                                @foreach($departments as $department)
                                    <option value="{{$department->id}}" @if(in_array($department->id, request()->input('department_id',[]))) selected @endif>
                                        {{$department->name}}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="sub_department_id"> Sub Department</label>
                            <select class="form-control mb-2 select2" name="sub_department_id[]" id="sub_department_id" multiple>
                                @foreach($subDepartments as $subDepartment)
                                    <option value="{{$subDepartment->id}}"  @if(in_array($subDepartment->id, request()->input('sub_department_id',[]))) selected @endif>
                                        {{$subDepartment->name}}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="designation_id">Designation</label>
                            <select class="form-control mb-2 select2" name="designation_id[]" id="designation_id" multiple>
                                @foreach($designations as $designation)
                                    <option value="{{$designation->id}}"  @if(in_array($designation->id, request()->input('designation_id',[]))) selected @endif>
                                        {{$designation->name}}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2">Employee Type</label>
                            @if(Auth::user()->is_contractor==0)
                            <select class="form-control select2" id="employee_type" name="employee_type[]" onchange="getEmployeeByType(this)" multiple>
                                @foreach($employeeTypes as $empType)
                                    <option value="{{$empType}}" @if (in_array($empType, request()->input('employee_type',[]))) selected @endif>
                                        {{$empType}}
                                    </option>
                                @endforeach
                            </select>
                            @else
                            <select class="form-control select2" id="employee_type" name="employee_type[]" onchange="getEmployeeByType(this)" multiple>
                                <option value="{{$employeeType}}" selected>
                                    {{$employeeType}}
                                </option>
                            </select>
                            @endif

                            <label class="form-label mt-2" for="area_id">{{trans('master/master.employees')}}</label>
                            <select class="form-control mb-2 select2" id="employee_id" name="employee_id[]" multiple>
                                <option value="">Select Employee</option>
                                {{-- Rest will be set by JS --}}
                            </select>

                            <label class="form-label mt-2" for="device_id">Device</label>
                            <select class="form-control mb-2 select2" name="device_id[]" id="device_id" multiple>
                                @foreach($devices as $device)
                                    <option value="{{$device->id}}"  @if(in_array($device->id, request()->input('device_id',[]))) selected @endif>
                                        {{$device->name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center" id="filterSubmitBtn" data-bs-dismiss="offcanvas" aria-label="Close"><i
                        data-feather='search' class="me-2"></i> {{trans('common/common.search')}}</button>
            
                </div>
            </div>
        </form>
    </div>
    
    <!-- // Filters // -->

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <div class="head-label">
                            <h6 class="mb-0">Attendance Listing</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="form-label-group me-2">
                                        <input type="text" name="search" placeholder="Search" id="search" class="form-control" value="{{ request()->input('search') }}" onchange="putInFilters()">
                                </div>
                                <a class="dt-button buttons-excel me-2" target="_blank"
                                    href="/attendance-summary/export?{!! request()->getQueryString() !!}"
                                    style="display: initial;"><button type="button"
                                        class="btn btn-success waves-effect waves-float waves-light">
                                        <span> Export </span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        <table class="table table-responsive dataTable" id="organization">
                            <thead>
                                <th>{{trans('common/common.id')}}</th>
                                <th>{{trans('attendance/admin.employee_code')}}</th>
                                <th>{{trans('attendance/admin.employee_name')}}</th>
                                <th>{{trans('master/master.department')}}</th>
                                <th>{{trans('master/master.designation')}}</th>
                                <th>{{trans('master/master.device_name')}}</th>
                                <th>{{trans('master/master.device_use')}}</th>
                                <th>{{trans('device.brand_name')}}</th>
                                <th>{{trans('device.product_name')}}</th>
                                <th>{{trans('attendance/admin.sub_location')}}</th>
                                <th>{{trans('attendance/admin.punch_time')}}</th>
                                <th>{{trans('attendance/admin.recorded_at')}}</th>
                                <th>{{trans('attendance/admin.status')}}</th>
                                <th>{{trans('attendance/admin.employee_status')}}</th>
                                <th>{{trans('attendance/admin.remarks')}}</th>
                            </thead>
                            <tbody>
                                @foreach ($data as $attendance)
                                    <tr>
                                        <td>
                                            @if (isset($_GET['page']) && $_GET['page'] > 0)
                                                {{ ($_GET['page'] - 1) * 10 + $loop->iteration }}
                                            @else
                                                {{ $loop->iteration }}
                                            @endif
                                        </td>
                                        <td>{{ @$attendance->employee->employee_code }}</td>
                                        <td>{{ @$attendance->employee->name }}</td>
                                        <td>{{ @$attendance->employee->department->name }}</td>
                                        <td>{{ @$attendance->employee->designation->name }}</td>
                                        <td>{{ @$attendance->device->name }}</td>
                                        <td>{{ @$attendance->device->device_use }}</td>
                                        <td>{{ @$attendance->device->brand_name }}</td>
                                        <td>{{ @$attendance->device->product_name }}</td>
                                        <td>{{ @$attendance->subLocation->name }}</td>
                                        <td>{{ @$attendance->attendance_datetime }}</td>
                                        <td>{{ @$attendance->created_at }}</td>
                                        <td>{{ @$attendance->status }}</td>
                                        <td>{{ @$attendance->employee->status }}</td>
                                        <td>{{ @$attendance->remark }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $data->appends($request->except('page'))->links('pagination::bootstrap-4') }}

                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
 

<script>
     var subLocations = $('#sub_location_id').val(); 

        $(document).ready(function() {

            $('#location_id').show();
            $('#location_id').select2();
            $('#sub_location_id').show();
            $('#sub_location_id').select2();
            $('#department_id').show();
            $('#department_id').select2();
            $('#sub_department_id').show();
            $('#sub_department_id').select2();
            $('#designation_id').show();
            $('#designation_id').select2();
            $('#employee_id').show();
            $('#employee_id').select2();
            $('#employee_type').show();
            $('#employee_type').select2();
            $('#device_id').show();
            $('#device_id').select2();
           

            if ($('#location_id').val()) {
                getsubLocations();
            }
        });
    
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });  

        $(document).ready(function(){
            $(function() {
                $('input[name="date_range"]').daterangepicker({
                    opens: 'left',
                    startDate: moment().format('MM/DD/YYYY'),
                    endDate:  moment().format('MM/DD/YYYY'),
                }, function(start, end, label) {
                    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                }).val("{{$dateRange}}");
            });
            // callDt();
        })     
        

    function getUrl() {
        return "{{ route('attendance-log-summary') }}"
    }

    function attendanceFilter() {
        $("#organization").DataTable().destroy();
        callDt();
    }

        $(document).ready(function(){
            if ($('#location_id').val()) {
                getsubLocations();
            }
            // callDt();
        })

        function getsubLocations(th) {
            var locationId = $('#location_id').val();
            
            var subLocationId = "";

            var data = {
                location_id: locationId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/location/sub-locations',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        selectbox = '<label for="sub_location_id">Sub Location</label>';
                        selectbox += '<div class="form-label-group"><select name="sub_location_id[]" class="form-control select2" id="sub_location_id" multiple>';
                        $.each(data, function(i, item) {
                            if (subLocations.includes(i)) {
                                selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                            } else {
                                selectbox += '<option value="' + i + '">' + item + '</option>';
                            }
                        });
                        selectbox += '</select></div>';
                    }
                    $('#sub_location_id').html(selectbox);
                    $("#sub_location_id").select2({
                        multiple: true
                    });
                }
            });
            
        }

    var selectedEmployeeIds = JSON.parse('{!! json_encode($employeeIds) !!}');

    function getEmployeeByType (select) {
        var url = "{{ route('employees-by-type') }}?employee_type=" + employee_type;
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    op = '';
                    for (var i = 0; i < data.length; i++) {
                        op += '<option value="' + data[i].id + '">' + data[i].name + '(' + data[i]
                            .employee_code + ')</option>';
                    }
                    $('#employee_id').html(op);
                }
        });
    }

    $('#employee_id, #employee_type').change(function () {
        selectedEmployeeIds = [];
        $('#employee_id').find(':selected').each(function (key, option) {
            selectedEmployeeIds.push($(option).val());
        })
    }); 

    function putInFilters() {
        var search = $('#search').val();
        $('#SearchFilter').val(search);
        $('#filterSubmitBtn').click();
    }

    $(document).ready(function() {
            var selectedEmployeeIds = JSON.parse('{!! json_encode($employeeIds) !!}');

            function initializeSelect2(selector, preSelectedIds, url, flag) {
                $(selector).select2({
                    multiple: true,
                    ajax: {
                        url: url,
                        dataType: 'json',
                        data: function(params) {
                            return {
                                alias: '{{ $organization->alias }}',
                                exclude_user_id: '',
                                has_contractor_employees: true,
                                employee_type: $('#employee_type').val(),
                                search: params.term,
                                is_manager: flag,
                                only_current_organization: true
                            };
                        },
                        processResults: function(data) {
                            console.log('data', data)
                            return {
                                results: $.map(data.data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name + ' (' + (item.employee_code || '') +
                                            ')' +
                                            ' (' + item.email + ')',
                                    };
                                })
                            };
                        },
                        cache: true
                    },
                    placeholder: 'Search with name',
                    minimumInputLength: 1,
                    allowClear: true
                });

                function loadPreSelectedOptions() {
                    if (preSelectedIds.length > 0) {
                        $.ajax({
                            url: url,
                            data: {
                                alias: '{{ $organization->alias }}',
                                employee_ids: preSelectedIds
                            },
                            success: function(data) {
                                data.data.forEach(function(item) {
                                    var option = new Option(
                                        item.name + ' (' + (item.employee_code || '') +
                                        ')' +
                                        ' (' + item.email + ')', item.id, true, true
                                    );
                                    $(selector).append(option).trigger('change');
                                });
                            }
                        });
                    }
                }

                loadPreSelectedOptions();
            }

            // Initialize Select2 for employee_id and manager_id
            initializeSelect2('#employee_id', selectedEmployeeIds, '/ajax/hod-list', 0);
        });

</script>

@endpush