<x-app-layout>

<x-module-hero
    title="Session Attendance"
    description="{{ $session->session_name }}"
    icon="fa-clipboard-check">

    <x-slot name="backButton">
        <a href="{{ route('training.sessions.show', $session) }}"
           class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Session
        </a>
    </x-slot>

    <x-slot name="tabs">
        <a href="{{ route('training.sessions.index') }}" class="module-hero-tab">
            <i class="fas fa-list"></i> All Sessions
        </a>
        <a href="{{ route('training.sessions.show', $session) }}" class="module-hero-tab">
            <i class="fas fa-eye"></i> Session Details
        </a>
        <span class="module-hero-tab active-tab">
            <i class="fas fa-clipboard-check"></i> Attendance
        </span>
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Session Info Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-sm font-bold text-gray-800">{{ $session->session_date->format('M d, Y') }}</div>
            <div class="text-xs text-gray-500 mt-1">Date</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-sm font-bold text-gray-800">
                {{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }} – {{ \Carbon\Carbon::parse($session->end_time)->format('g:i A') }}
            </div>
            <div class="text-xs text-gray-500 mt-1">Time</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-sm font-bold text-gray-800">{{ ucfirst($session->session_type) }}</div>
            <div class="text-xs text-gray-500 mt-1">Type</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-sm font-bold text-green-600">{{ $statistics['attendance_rate'] }}%</div>
            <div class="text-xs text-gray-500 mt-1">Attendance Rate</div>
        </div>
    </div>

    {{-- Statistics Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-gray-800">{{ $statistics['total_participants'] }}</p>
            <p class="text-xs text-gray-500 mt-1">Total Participants</p>
        </div>
        <div class="bg-green-50 rounded-lg border border-green-200 p-4 text-center">
            <p class="text-2xl font-bold text-green-700">{{ $statistics['present'] }}</p>
            <p class="text-xs text-green-600 mt-1">Present</p>
        </div>
        <div class="bg-yellow-50 rounded-lg border border-yellow-200 p-4 text-center">
            <p class="text-2xl font-bold text-yellow-700">{{ $statistics['late'] }}</p>
            <p class="text-xs text-yellow-600 mt-1">Late</p>
        </div>
        <div class="bg-red-50 rounded-lg border border-red-200 p-4 text-center">
            <p class="text-2xl font-bold text-red-700">{{ $statistics['absent'] }}</p>
            <p class="text-xs text-red-600 mt-1">Absent</p>
        </div>
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-gray-700">{{ $statistics['not_recorded'] }}</p>
            <p class="text-xs text-gray-500 mt-1">Not Recorded</p>
        </div>
    </div>

    {{-- Attendance Form --}}
    <form action="{{ route('training.sessions.attendance.store', $session) }}" method="POST">
        @csrf

        {{-- Bulk Actions --}}
        @can('manage training attendance')
            <div class="bg-white rounded-lg border border-gray-200 p-4 mb-4 flex flex-wrap items-center gap-3">
                <span class="text-sm font-medium text-gray-700">Bulk Actions:</span>
                <button type="button" onclick="markAllPresent()"
                        class="btn-action-approve">
                    <i class="fas fa-check-double"></i> Mark All Present
                </button>
                <button type="button" onclick="markAllAbsent()"
                        class="btn-action-reject">
                    <i class="fas fa-times"></i> Mark All Absent
                </button>
                <button type="submit"
                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white rounded bg-blue-600 hover:bg-blue-700 transition-colors">
                    <i class="fas fa-save"></i> Save Attendance
                </button>
            </div>
        @endcan

        {{-- Participants Table --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full table-zebra">
                    <thead>
                        <tr>
                            <th class="th-col-1 px-4 py-3 text-left w-10">
                                <input type="checkbox" id="select-all"
                                       class="rounded border-gray-300 text-green-600 focus:ring-green-500"
                                       onchange="toggleSelectAll(this)">
                            </th>
                            <th class="th-col-2 px-4 py-3 text-left">Participant</th>
                            <th class="th-col-3 px-4 py-3 text-left">Status</th>
                            <th class="th-col-4 px-4 py-3 text-left">Check In</th>
                            <th class="th-col-5 px-4 py-3 text-left">Check Out</th>
                            <th class="th-col-6 px-4 py-3 text-left">Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($participants as $participant)
                            @php
                                $attendanceRecord = $participant->attendance ?? null;
                                $currentStatus = $attendanceRecord?->attendance_status ?? 'absent';
                            @endphp
                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                <td class="px-4 py-3">
                                    <input type="checkbox" name="selected_users[]" value="{{ $participant->user_id }}"
                                           class="participant-checkbox rounded border-gray-300 text-green-600 focus:ring-green-500">
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                            <span class="text-green-700 font-medium text-xs">
                                                {{ Str::substr($participant->user->name, 0, 1) }}
                                            </span>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-900 text-sm">{{ $participant->user->name }}</p>
                                            <p class="text-xs text-gray-500">{{ $participant->user->email }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <input type="hidden" name="attendance[{{ $participant->user_id }}][user_id]" value="{{ $participant->user_id }}">
                                    <select name="attendance[{{ $participant->user_id }}][status]"
                                            class="status-select px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                                        <option value="present" {{ $currentStatus === 'present' ? 'selected' : '' }}>Present</option>
                                        <option value="absent" {{ $currentStatus === 'absent' ? 'selected' : '' }}>Absent</option>
                                        <option value="late" {{ $currentStatus === 'late' ? 'selected' : '' }}>Late</option>
                                    </select>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-500">
                                    @if($attendanceRecord?->check_in_time)
                                        {{ $attendanceRecord->check_in_time->format('H:i:s') }}
                                    @else
                                        <span class="text-gray-400">--:--:--</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-500">
                                    @if($attendanceRecord?->check_out_time)
                                        {{ $attendanceRecord->check_out_time->format('H:i:s') }}
                                    @else
                                        <span class="text-gray-400">--:--:--</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <input type="text" name="attendance[{{ $participant->user_id }}][notes]"
                                           value="{{ $attendanceRecord?->notes }}"
                                           placeholder="Add notes..."
                                           class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                                </td>
                            </tr>
                        @empty
                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                                    <i class="fas fa-users text-4xl mb-3 text-gray-300 block"></i>
                                    No participants registered for this session.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>

</x-app-layout>

@push('scripts')
<script>
    function toggleSelectAll(checkbox) {
        document.querySelectorAll('.participant-checkbox').forEach(cb => cb.checked = checkbox.checked);
    }
    function markAllPresent() {
        document.querySelectorAll('.status-select').forEach(select => select.value = 'present');
    }
    function markAllAbsent() {
        document.querySelectorAll('.status-select').forEach(select => select.value = 'absent');
    }
</script>
@endpush
