@forelse($attendances as $attendance)
    <tr>
        <td>{{ $attendance->employee?->employee_id_no }}</td>
        <td>{{ $attendance->employee->full_name ?? 'N/A' }}</td>
        <td>{{ $attendance->in_at }}</td>
        <td>{{ $attendance->out_at }}</td>
        <td>{{ number_format($attendance->working_hours, 2) }}</td>
        <td>{{ $attendance->creator?->name ?? 'N/A' }}</td>
        <td>{{ $attendance->updater?->name ?? 'N/A' }}</td>
        <td class="text-right text-nowrap justify-content-end pr-0"
            style="display: table-cell !important;text-align: right !important;">
            @can('update_attendance_management')
                <button type="button" class="btn btn-icon btn-info mr-1 mb-1 edit-attendance-btn" 
                    data-id="{{ $attendance->id }}"
                    data-bs-toggle="modal" 
                    data-bs-target="#editAttendanceModal">
                    <i class="bx bx-pencil"></i>
                </button>
            @endcan
            @can('delete_attendance_management')
                <button type="button" class="btn btn-icon btn-danger mr-1 mb-1" data-bs-toggle="modal"
                    data-bs-target="#attendanceModel-{{ $attendance->id }}"><i class="bx bx-trash"></i></button>
            @endcan
        </td>
    </tr>
    <div class="modal fade" id="attendanceModel-{{ $attendance->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <h3>Warning</h3>
                    <p class="mt-3">Are you sure you want to delete this attendance?</p>
                    <p class="text-danger text-center"><strong>This action cannot be
                            undone!</strong></p>
                    <a href="{{ route('attendance.destroy', ['id' => $attendance->id]) }}"
                        class="btn btn-danger me-3">Delete Attendance</a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@empty
    <tr>
        <td colspan="8" class="text-center">No attendance records</td>
    </tr>
@endforelse