@foreach ($employees as $attendance)
    <tr>
        <!-- Username -->
        <td>{{ $attendance['user']['username'] }}</td>
        <td>{{ $attendance['user']['mobile'] ?? 'N/A' }}</td>

        <!-- Attendance Date, In time, and Out time -->
        @php
            $todayAttendance = ''; // Get the first attendance for today
            $inTimeAttendance = '';

        @endphp
        @if ($attendance->attendances->isNotEmpty())
            <!-- Show today's attendance status -->
            @php
                $todayAttendance = collect($attendance->attendances)
                    ->where('attendance_type', '1')
                    ->sortBy('attendance_time')
                    ->first();
            @endphp
        @endif
        <td>
            <input type="hidden" name="date"
                value="{{ $attendance['attendance_date'] ? date('Y-m-d', strtotime($attendance['attendance_date'])) : date('Y-m-d') }}">
            <input type="hidden" name="attandance_id"
                value="{{ $todayAttendance && $todayAttendance->id ? $todayAttendance->id : '' }}">
            <input type="hidden" name="user_id" value="{{ $attendance['user']['id'] }}">
            <input type="hidden" name="attendance_type" value="1">
            <input type="time" class="form-control set-time-ajax" name="inTime"
                value="{{ $todayAttendance->attendance_time ?? '' }}">


        </td>
        @if ($attendance->attendances->isNotEmpty())
            <!-- Show today's attendance status -->
            @php
                $todayAttendance = collect($attendance->attendances)
                    ->where('attendance_type', '2')
                    ->sortByDesc('attendance_time')
                    ->first();
            @endphp
        @endif
        <td>
            <input type="hidden" name="date"
                value="{{ $attendance['attendance_date'] ? date('Y-m-d', strtotime($attendance['attendance_date'])) : date('Y-m-d') }}">
            <input type="hidden" name="attandance_id"
                value="{{ $todayAttendance && $todayAttendance->id ? $todayAttendance->id : '' }}">
            <input type="hidden" name="user_id" value="{{ $attendance['user']['id'] }}">
            <input type="hidden" name="attendance_type" value="2">
            <input type="time" class="form-control set-time-ajax" name="ouTime"
                value="{{ $todayAttendance->attendance_time ?? '' }}">

        </td>

        <td>
            <input type="radio" name="attendance[{{ $attendance['user']['id'] }}]" value="present"
                data-user-id="{{ $attendance['user']['id'] }}" data-status="present" class="attendance-radio"
                {{ isset($attendance['attendances'][0]) ? 'checked' : '' }}>
            Present
        </td>
        <td>
            <input type="radio" name="attendance[{{ $attendance['user']['id'] }}]" value="absent"
                data-user-id="{{ $attendance['user']['id'] }}" data-status="absent" class="attendance-radio"
                {{ !isset($attendance['attendances'][0]) ? 'checked' : '' }}>
            Absent
        </td>


    </tr>
@endforeach


<script>
    $(document).ready(function() {
        $(".set-time-ajax").on("input", function() {
            let input_ele = $(this);
            let parent = $(this).parent();
            let attendance_date = $(this).closest('.tab-pane').find('[name="attendance_date"]').val();
            let user_id = parent.find('[name="user_id"]').val();
            let attandance_id = parent.find('[name="attandance_id"]').val();
            let attendance_type = parent.find('[name="attendance_type"]').val();
            let data = {
                "user_id": user_id,
                "attendance_id": attandance_id,
                "attendance_date": attendance_date,
                "attendance_type_id": 1,
                "attendance_type": attendance_type,
                'attendance_time': input_ele.val(),
            }

            $.ajax({
                url: "{{ route('hrm.user_attendances.updateAttendanceNoValidation') }}",
                method: "PUT",
                data: data,
                success: function(result) {
                    console.log(result);
                    toastr.success(result.message)

                },
                error: function(error) {
                    console.log(error);
                    toastr.error(result.message)
                }
            })
        })

        // Detect when a radio button is selected
        // $('input[type="radio"].attendance-radio').on('change', function() {
        //     var user_id = $(this).data('user-id'); // Get student ID from data attribute
        //     var status = $(this).data('status'); // Get status (present, late, absent)
        //     var attendanceDate =
        //         '{{ request('attendance_date') ?? now()->format('Y-m-d') }}'; // Use the date from the form

        //     // Dynamically set the attendance type based on status
        //     var attendanceTypeId = getAttendanceTypeId(
        //         status); // Function to get the correct attendance type ID

        //     // Send an AJAX request to update the attendance
        //     $.ajax({
        //         url: '{{ route('hrm.user_attendances.updateAttendance') }}', // Adjust route if needed
        //         type: 'POST',
        //         data: {
        //             user_id: user_id, // Student ID
        //             attendance_status: '2', // Attendance status
        //             attendance_date: attendanceDate, // Date of attendance
        //             attendance_type_id: attendanceTypeId, // Dynamically set attendance type ID
        //             _token: '{{ csrf_token() }}', // CSRF token for security
        //         },
        //         success: function(response) {
        //             if (response.success) {
        //                 console.log(response
        //                     .message); // Display success message in the console
        //                 toastr.success(response
        //                     .message); // Optionally, show an alert with success message
        //                 console.log(response.attendance); // Log the updated attendance data
        //             } else {
        //                 console.log('Failed to update attendance');
        //                 toastr.error('Failed to update attendance');
        //                 // Optionally, show an alert for failure
        //             }
        //         },
        //         error: function(xhr, status, error) {
        //             console.log('Error: ' + error);
        //             toastr.info('An error occurred while updating the attendance.');
        //             // Show alert on error
        //         }
        //     });
        // });

        // Function to return the attendance type ID based on status
        function getAttendanceTypeId(status) {
            switch (status) {
                case 'present':
                    return 1; // "1" for Present
                case 'late':
                    return 4; // "4" for Late
                case 'absent':
                    return 2; // "2" for Absent
                default:
                    return 1; // Default to "Present" if status is invalid
            }
        }
    })
</script>