@extends('layouts.app')
@section('title', 'Attendance')
@section('page-title', 'Attendance')

@section('content')
<div class="space-y-6">
    {{-- Filter --}}
    <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="">Select Class</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ $selectedClass == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input type="date" name="date" value="{{ $date }}" 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">Load</button>
        </form>
    </div>

    @if($students->isNotEmpty())
    <form method="POST" action="{{ route('attendance.store') }}">
        @csrf
        <input type="hidden" name="class_id" value="{{ $selectedClass }}">
        <input type="hidden" name="date" value="{{ $date }}">

        <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">#</th>
                        <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">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Remarks</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($students as $i => $student)
                    @php $existing = $attendances->get($student->id); @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-3 text-sm">{{ $i + 1 }}</td>
                        <td class="px-6 py-3">
                            <input type="hidden" name="attendance[{{ $i }}][student_id]" value="{{ $student->id }}">
                            <p class="font-medium text-gray-800">{{ $student->name }}</p>
                            <p class="text-xs text-gray-500">{{ $student->studentProfile?->admission_number }}</p>
                        </td>
                        <td class="px-6 py-3">
                            <div class="flex gap-3">
                                @foreach(['present' => '✅', 'absent' => '❌', 'late' => '⏰', 'excused' => '📋'] as $val => $icon)
                                <label class="flex items-center gap-1 cursor-pointer">
                                    <input type="radio" name="attendance[{{ $i }}][status]" value="{{ $val }}"
                                        {{ ($existing?->status ?? 'present') === $val ? 'checked' : '' }}
                                        class="text-blue-600">
                                    <span class="text-sm">{{ $icon }} {{ ucfirst($val) }}</span>
                                </label>
                                @endforeach
                            </div>
                        </td>
                        <td class="px-6 py-3">
                            <input type="text" name="attendance[{{ $i }}][remarks]" value="{{ $existing?->remarks }}"
                                class="border border-gray-300 rounded px-2 py-1 text-sm w-full" placeholder="Optional">
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if(auth()->user()->isAdmin() || auth()->user()->isTeacher())
        <div class="mt-4 flex justify-end">
            <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                <i class="fas fa-save mr-2"></i>Save Attendance
            </button>
        </div>
        @endif
    </form>
    @endif
</div>
@endsection