@extends('layouts.school')

@section('title', 'Attendance Report')
@section('header', 'Attendance Report')

@section('content')
    <form method="GET" class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end">
        <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700">Class</label>
            <select name="class_id" class="mt-1 block w-full 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 $c)
                    <option value="{{ $c->id }}" {{ ($classId ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">From</label>
            <input type="date" name="from" value="{{ $from }}" class="mt-1 block w-full 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-sm font-medium text-gray-700">To</label>
            <input type="date" name="to" value="{{ $to }}" class="mt-1 block w-full 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>
        <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Filter</button>
    </form>

    <div class="mb-6 grid grid-cols-4 gap-4">
        <div class="rounded-xl bg-white p-4 text-center shadow-sm ring-1 ring-gray-900/5">
            <p class="text-2xl font-bold text-gray-900">{{ $summary['total'] }}</p>
            <p class="text-xs text-gray-500">Total Records</p>
        </div>
        <div class="rounded-xl bg-green-50 p-4 text-center shadow-sm ring-1 ring-green-200">
            <p class="text-2xl font-bold text-green-700">{{ $summary['present'] }}</p>
            <p class="text-xs text-green-600">Present</p>
        </div>
        <div class="rounded-xl bg-red-50 p-4 text-center shadow-sm ring-1 ring-red-200">
            <p class="text-2xl font-bold text-red-700">{{ $summary['absent'] }}</p>
            <p class="text-xs text-red-600">Absent</p>
        </div>
        <div class="rounded-xl bg-amber-50 p-4 text-center shadow-sm ring-1 ring-amber-200">
            <p class="text-2xl font-bold text-amber-700">{{ $summary['late'] }}</p>
            <p class="text-xs text-amber-600">Late</p>
        </div>
    </div>

    @if($summary['total'] > 0)
        <div class="mb-6">
            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                <span>Overall Attendance Rate</span>
                <span class="font-medium">{{ $summary['total'] > 0 ? round(($summary['present'] / $summary['total']) * 100, 1) : 0 }}%</span>
            </div>
            <div class="h-3 rounded-full bg-gray-200">
                <div class="h-3 rounded-full bg-green-500" style="width: {{ $summary['total'] > 0 ? round(($summary['present'] / $summary['total']) * 100) : 0 }}%"></div>
            </div>
        </div>
    @endif

    <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">Date</th>
                    <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-left text-xs font-semibold text-gray-500 uppercase">Class</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Time In</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($records as $record)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-3 text-sm text-gray-600">{{ $record->date->format('d M Y') }}</td>
                        <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $record->student?->full_name ?? '—' }}</td>
                        <td class="px-6 py-3 text-sm text-gray-600">{{ $record->classroom?->name ?? '—' }}</td>
                        <td class="px-6 py-3">
                            @php
                                $sColors = ['present' => 'bg-green-50 text-green-700', 'absent' => 'bg-red-50 text-red-700', 'late' => 'bg-amber-50 text-amber-700'];
                            @endphp
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $sColors[$record->status] ?? 'bg-gray-50 text-gray-700' }}">{{ ucfirst($record->status) }}</span>
                        </td>
                        <td class="px-6 py-3 text-sm text-gray-500">{{ $record->time_in ?? '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-6 py-12 text-center text-sm text-gray-500">No attendance records found.</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="border-t border-gray-200 px-6 py-3">{{ $records->links() }}</div>
    </div>
@endsection