{{-- attendance modal --}}
<div class="modal bg-body fade" tabindex="-1" id="kt_modal_1" data-focus="false">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content shadow-none">
            <div class="modal-header">
                <h5 class="modal-title">My Attendance</h5>
            </div>

            <div class="modal-body">

                <div class="row my-5">
                    <div class="col-md-2"></div>
                    <div class="col-md-3">
                        <label for="" class="form-label">Select User</label>
                        <input style="display:none" type="password" name="pass" />

                        <select class="form-select" id="hr_attendance_user_select" autocomplete="off">
                            <option value=''>Select The User</option>
                            @php
                                $active_users = App\Models\User::where('IsActive', 1)
                                    ->whereIn('roleID', [18, 19, 20, 21, 22, 23, 24, 25, 26, 27,29])
                                    ->orderBy('FullName', 'asc')
                                    ->get();
                            @endphp
                            @foreach ($active_users as $user)
                                <option value="{{ $user->UserID }}">{{ $user->FullName }}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="col-md-3">
                        <input type="hidden" id="attendance_start_date_search" />
                        <input type="hidden" id="attendance_end_date_search" />
                        <label for="" class="form-label">Select date and time</label>
                        <input class="form-control form-control-solid" placeholder="Pick date & time"
                            id="user_attednace_search_flat_picker" />

                    </div>
                    <div class="col-md-2" style="margin-top: 26px;">
                        <button type="button" id="user_attendance_select_search_button"
                            class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise fs-1"></i></button>
                    </div>
                    <div class="col-md-2"></div>
                </div>


                <div class="row">
                    <table id="attendance_table" class="table  table-striped table-row-bordered px-5">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">User Name</th>
                                <th scope="col">Attendance Date</th>
                                <th scope="col">Day</th>
                                <th scope="col" style="width:50px">Time In</th>
                                <th scope="col" style="width:50px">Time Out</th>
                                <th scope="col">Total Time</th>
                                <th scope="col">Status</th>
                                <th>Comment</th>
                            </tr>
                        </thead>

                        <tbody id="attendace_table_body">

                            @foreach ($attendances as $attendance)
                                <tr>
                                    <td><input type="hidden" class="user_attendance_id"
                                        value="{{ $attendance->AttendanceID }}" />{{ $attendance->user->FullName }}
                                    </td>
                                    <td>{{ date('d-m-Y', strtotime($attendance->AttendanceDate)) }}</td>
                                    <td>{{ date('l', strtotime($attendance->AttendanceDate)) }} </td>
                                    <td>
                                        <input type="datetime-local" style="width:180px"
                                            value="@if ($attendance->TimeIN == null) @else{{ date('Y-m-d H:i:s', strtotime($attendance->TimeIN)) }} @endif"
                                            class="form-control user_attendance_timein">
                                    </td>
                                    <td>
                                        <input type="datetime-local" style="width:180px"
                                            value="@if ($attendance->TimeOUT == null) @else{{ date('Y-m-d H:i:s', strtotime($attendance->TimeOUT)) }} @endif"
                                            class="form-control user_attendance_timeout">
                                    </td>

                                    <td>
                                        <input type="text" style="width:75px"
                                            class="form-control user_attendance_total_time"
                                            value=" {{ $attendance->TotalTime }} ">
                                    </td>

                                    <td>{!! hr_attendance_status($attendance->Status) !!}</td>
                                    <td><input type="text" value="{{ $attendance->Comment }}"
                                            class="attendance_comment_input form-control" /></td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                    <div class="d-flex align-items-center justify-content-end">
                        <input type="button" class="btn btn-primary text-center" value="Save"
                            onclick="hr_attendance_save()" />
                    </div>

                    <div class='px-4'>
                        <h2 style='text-align:center'>STATUS COUNT
                        </h2>
                        <div class="row table-repsonsive">

                            <table class="table table-row-dashed table-row-gray-300 gy-7">
                                <thead class="bg-secondary">
                                    <tr>
                                        <th style="    padding-left: 25px;width:75% !important">STATUS</th>
                                        <th>COUNT</th>
                                    </tr>
                                </thead>
                                <tbody id="table_group_count">
                                    @foreach ($Group as $a)
                                        <tr>
                                            @php
                                                $color = DB::table('gcp_statuses')
                                                    ->where('Sno', $a->Status)
                                                    ->first();
                                            @endphp
                                            <td
                                                style="font-size: 18px; color: white; padding-left: 25px;background-color:{{ $color->Color }};font-weight:bold">
                                                {{ $color->Status }}</td>
                                            <td>{{ $a->total }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>

</div>

{{-- attendance modal ended --}}
<script>
    $("#hr_attendance_user_select").select2({
        dropdownParent: $('#kt_modal_1 .modal-content')
    });

    $("#user_attednace_search_flat_picker").flatpickr({
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        altFormat: "Y-m-d",
        mode: "range",

        onClose: function(selectedDates, dateStr, instance) {

            var dateStart = instance.formatDate(selectedDates[0], "Y-m-d");
            var dateEnd = instance.formatDate(selectedDates[1], "Y-m-d");

            $('#attendance_start_date_search').val(dateStart);
            $('#attendance_end_date_search').val(dateEnd);

        }
    });

    $('#kt_modal_1').on('shown.bs.modal', function () {
        let today = new Date().toISOString().split('T')[0];
        $('#attendance_start_date_search').val(today);
        $('#attendance_end_date_search').val(today);

        $('#user_attendance_select_search_button').trigger('click');
    });

    $('#user_attendance_select_search_button').click(function() {
        show_loader();
        let start_date = $('#attendance_start_date_search').val();
        let end_date = $('#attendance_end_date_search').val();
        let user_id = $('#hr_attendance_user_select').val();
        $.ajax({
            url: '/hr-attendance-search',
            type: 'POST',
            data: {
                'start_date': start_date,
                'end_date': end_date,
                'user_id': user_id

            },
            success: function(response) {
                // Hide loader
                // $("#attendance_table").destroy();

                $('#attendace_table_body').empty();
                $('#attendace_table_body').append(response.data);
                $('#table_group_count').empty();
                $('#table_group_count').append(response.group_data);
                hide_loader();
            },
            error: function(xhr) {
                // Hide loader
                console.log(xhr);


            }
        });

    });

    function hr_attendance_save() {
        let start_date = $('#attendance_start_date_search').val();
        let end_date = $('#attendance_end_date_search').val();
        let user_id = $('#hr_attendance_user_select').val();
        const attendance_id_array = [];
        const time_in_array = [];
        const time_out_array = [];
        const total_time_array = [];
        const status_array = [];
        const comments_array = [];

        $('.user_attendance_id').each(function() {
            attendance_id_array.push($(this).val());
        });

        $('.user_attendance_timein').each(function() {
            time_in_array.push($(this).val());
        });

        $('.user_attendance_timeout').each(function() {
            time_out_array.push($(this).val());
        });

        $('.user_attendance_total_time').each(function() {
            total_time_array.push($(this).val());
        });

        $('.attendance_comment_input').each(function() {
            comments_array.push($(this).val());
        });
        $('.hr_attendance_status_select').each(function() {
            status_array.push($(this).val());
        });

        $.ajax({
            url: 'hr-attendance-update',
            method: 'POST',
            data: {
                'time_in': time_in_array,
                'user_attendance_id': attendance_id_array,
                'time_out': time_out_array,
                'total_time': total_time_array,
                'status': status_array,
                'comment': comments_array,

                'start_date': start_date,
                'end_date': end_date,
                'user_id': user_id
            },
            success: function(response) {
                $('#attendace_table_body').empty();
                $('#attendace_table_body').append(response.data);
                $('#table_group_count').empty();
                $('#table_group_count').append(response.group_data);


                swal.fire({
                    title: "Success",
                    text: "Attendance Updated Successfully",
                    icon: "success",
                });

            },
            error: function(xhr, status, error) {
                console.log(error);

            }
        });
    }
</script>