@extends('layouts.app')
@section('title', 'Attendance Report')
@section('page-title', 'Attendance Report')
@section('content')
<div class="space-y-6">
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <form method="GET" class="flex flex-wrap gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Class</label>
                <select name="class_id" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option value="">All Classes</option>
                    @foreach($classes ?? [] as $class)
                        <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">From</label>
                <input type="date" name="from_date" value="{{ request('from_date', now()->startOfMonth()->format('Y-m-d')) }}" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">To</label>
                <input type="date" name="to_date" value="{{ request('to_date', now()->format('Y-m-d')) }}" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm">Generate</button>
        </form>
    </div>
    @if(isset($report) && count($report) > 0)
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Student</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Present</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Absent</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Late</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Percentage</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($report as $row)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm font-medium">{{ $row['name'] ?? 'N/A' }}</td>
                    <td class="px-6 py-4 text-sm text-green-600">{{ $row['present'] ?? 0 }}</td>
                    <td class="px-6 py-4 text-sm text-red-600">{{ $row['absent'] ?? 0 }}</td>
                    <td class="px-6 py-4 text-sm text-yellow-600">{{ $row['late'] ?? 0 }}</td>
                    <td class="px-6 py-4 text-sm font-semibold">{{ number_format($row['percentage'] ?? 0, 1) }}%</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-100 text-center text-gray-500">Select filters and click Generate to view the report.</div>
    @endif
</div>
@endsection