@extends('layouts.admin')

@section('title', 'Attendance Overview')

@section('content')
<div class="space-y-6">

    {{-- Page Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Attendance Overview</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Read-only view of session attendance across all classes.</p>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('admin.attendance.index') }}" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Academic Year</label>
            <select name="year_id" class="rp-select text-sm">
                @foreach($years as $year)
                    <option value="{{ $year->id }}" @selected($year->id == $selectedYearId)>{{ $year->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Class</label>
            <select name="class_id" class="rp-select text-sm">
                <option value="">All Classes</option>
                @foreach($classes as $class)
                    <option value="{{ $class->id }}" @selected($class->id == $selectedClassId)>{{ $class->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="rp-btn-primary text-sm px-4 py-2">Filter</button>
        @if($selectedClassId)
            <a href="{{ route('admin.attendance.index') }}" class="rp-btn-secondary text-sm px-4 py-2">Clear</a>
        @endif
    </form>

    {{-- KPI Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="rp-card p-5">
            <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide">Total Sessions</p>
            <p class="text-3xl font-bold text-slate-900 dark:text-white mt-1">{{ number_format($totalSessions) }}</p>
        </div>
        <div class="rp-card p-5">
            <p class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide">Total Joins Recorded</p>
            <p class="text-3xl font-bold text-primary-600 mt-1">{{ number_format($totalJoins) }}</p>
        </div>
    </div>

    {{-- Sessions Table --}}
    <div class="rp-card overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
            <h2 class="text-base font-semibold text-slate-900 dark:text-white">Recent Sessions</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-800/50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Date</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Class</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Subject</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Teacher</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Topic</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Attendees</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wide">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    @forelse($recentSessions as $session)
                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
                        <td class="px-4 py-3 text-slate-700 dark:text-slate-300 whitespace-nowrap">
                            {{ \Carbon\Carbon::parse($session->session_date)->format('M d, Y') }}
                        </td>
                        <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $session->class_name ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $session->subject_name ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-700 dark:text-slate-300">{{ $session->teacher_name ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-500 dark:text-slate-400 max-w-xs truncate">{{ $session->topic ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-400">
                                {{ $session->attendees }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            @php
                                $statusColor = match($session->status ?? 'scheduled') {
                                    'completed' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
                                    'live'      => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
                                    'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
                                    default     => 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400',
                                };
                            @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColor }}">
                                {{ ucfirst($session->status ?? 'scheduled') }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-slate-400 dark:text-slate-500">
                            No sessions found for the selected filters.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection