@extends('layouts.teacher-portal')
@section('title', 'Attendance History')
@section('header', 'Attendance History')

@section('content')
    <form method="GET" class="mb-5 flex flex-wrap items-end gap-3">
        <div>
            <label class="block text-xs font-semibold uppercase tracking-wide text-slate-400">Class</label>
            <select name="class_id" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @foreach ($classes as $option)
                    <option value="{{ $option->id }}" {{ $classId == $option->id ? 'selected' : '' }}>{{ $option->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-semibold uppercase tracking-wide text-slate-400">Month</label>
            <input type="month" name="month" value="{{ $month }}" class="mt-1 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
        </div>
        <button type="submit" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Show report</button>
    </form>

    <div class="mb-5 flex flex-wrap gap-3 text-sm">
        <span class="rounded-full bg-slate-100 px-3 py-1 text-slate-600">School days: <strong>{{ $schoolDays }}</strong></span>
        <span class="rounded-full bg-slate-100 px-3 py-1 text-slate-600">Students recorded: <strong>{{ $rows->count() }}</strong></span>
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-900/5">
        <table class="min-w-full divide-y divide-slate-100">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-6 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-400">Student</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-green-500">Present</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-red-500">Absent</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-amber-500">Late</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-blue-500">Excused</th>
                    <th class="px-6 py-3 text-center text-[11px] font-bold uppercase tracking-wider text-slate-400">Rate</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($rows as $row)
                    <tr class="hover:bg-slate-50">
                        <td class="px-6 py-3.5 text-sm font-medium text-slate-800">{{ $row->student?->full_name }}</td>
                        <td class="px-6 py-3.5 text-center text-sm font-semibold text-green-600">{{ $row->present }}</td>
                        <td class="px-6 py-3.5 text-center text-sm font-semibold text-red-500">{{ $row->absent }}</td>
                        <td class="px-6 py-3.5 text-center text-sm font-semibold text-amber-500">{{ $row->late }}</td>
                        <td class="px-6 py-3.5 text-center text-sm font-semibold text-blue-500">{{ $row->excused }}</td>
                        <td class="px-6 py-3.5 text-center text-sm font-bold {{ $row->rate >= 75 ? 'text-green-600' : ($row->rate >= 50 ? 'text-amber-500' : 'text-red-500') }}">{{ number_format($row->rate, 1) }}%</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">No attendance records for this period.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection