@extends('layouts.school')
@section('title', 'Attendance Report')
@section('header', 'Attendance Report')
@section('content')
    <form method="GET" class="mb-6 flex flex-wrap gap-3">
        <div>
            <label class="block text-xs font-medium text-gray-700">Month</label>
            <input type="month" name="month" value="{{ $month }}" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-700">Class</label>
            <select name="class_id" class="mt-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                <option value="">All Classes</option>
                @foreach($classes as $class)
                    <option value="{{ $class->id }}" {{ $classId == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex items-end">
            <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Filter</button>
        </div>
    </form>

    <div class="mb-4 flex flex-wrap gap-3 text-sm">
        <span class="rounded-lg bg-white px-4 py-2 shadow-sm ring-1 ring-gray-900/5">School days recorded: <strong>{{ $schoolDays }}</strong></span>
        <span class="rounded-lg bg-white px-4 py-2 shadow-sm ring-1 ring-gray-900/5">Students: <strong>{{ $rows->count() }}</strong></span>
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Student</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Total</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Present</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Absent</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Late</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Excused/Sick</th>
                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Rate</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($rows as $record)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <p class="text-sm font-medium text-gray-900">{{ $record['student']->full_name }}</p>
                            <p class="text-xs text-gray-500">{{ $record['student']->admission_no }}</p>
                        </td>
                        <td class="px-6 py-4 text-center text-sm text-gray-600">{{ $record['total'] }}</td>
                        <td class="px-6 py-4 text-center text-sm font-medium text-green-600">{{ $record['present'] }}</td>
                        <td class="px-6 py-4 text-center text-sm font-medium text-red-600">{{ $record['absent'] }}</td>
                        <td class="px-6 py-4 text-center text-sm font-medium text-yellow-600">{{ $record['late'] }}</td>
                        <td class="px-6 py-4 text-center text-sm text-gray-600">{{ $record['excused'] }}</td>
                        <td class="px-6 py-4 text-center text-sm font-medium {{ $record['rate'] < 75 ? 'text-red-600' : 'text-gray-900' }}">
                            {{ $record['rate'] }}%
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-6 py-12 text-center text-sm text-gray-500">No attendance records for this period.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection