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

@section('content')
<div class="space-y-6">

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Filter --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-5">
        <form method="GET" class="flex flex-wrap gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">My Classes</label>
                <select name="class_id" class="border border-gray-300 rounded-lg px-3 py-2.5 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 }}" max="{{ today()->toDateString() }}"
                       class="border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
            </div>
            <button type="submit" class="px-5 py-2.5 bg-primary-700 text-white rounded-lg hover:bg-primary-800 text-sm font-medium">
                <i class="fas fa-search mr-1"></i> Load
            </button>
        </form>
    </div>

    @if($classes->isEmpty())
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-12 text-center">
        <i class="fas fa-chalkboard text-4xl text-gray-300 mb-3 block"></i>
        <p class="text-gray-500">No classes assigned to you yet.</p>
        <p class="text-xs text-gray-400 mt-1">Contact the admin to assign subjects and classes.</p>
    </div>
    @endif

    @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 ring-1 ring-gray-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
                <h3 class="font-semibold text-gray-800">
                    <i class="fas fa-clipboard-check mr-2 text-gray-400"></i>
                    {{ $classes->firstWhere('id', $selectedClass)?->full_name }} — {{ \Carbon\Carbon::parse($date)->format('D, d M Y') }}
                </h3>
                <span class="text-sm text-gray-500">{{ $students->count() }} students</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase w-10">#</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Student</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Remarks</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($students as $i => $student)
                        @php $existing = $attendances->get($student->id); @endphp
                        <tr class="hover:bg-gray-50">
                            <td class="px-5 py-3 text-sm text-gray-500">{{ $i + 1 }}</td>
                            <td class="px-5 py-3">
                                <input type="hidden" name="attendance[{{ $i }}][student_id]" value="{{ $student->id }}">
                                <p class="text-sm font-medium text-gray-800">{{ $student->name }}</p>
                                <p class="text-xs text-gray-400">{{ $student->studentProfile?->roll_number ? 'Roll: '.$student->studentProfile->roll_number : '' }}</p>
                            </td>
                            <td class="px-5 py-3">
                                <div class="flex gap-2 flex-wrap">
                                    @foreach(['present' => ['✅','Present','green'], 'absent' => ['❌','Absent','red'], 'late' => ['⏰','Late','yellow'], 'excused' => ['📋','Excused','blue']] as $val => $meta)
                                    <label class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg border cursor-pointer text-xs font-medium transition
                                        {{ ($existing?->status ?? 'present') === $val ? 'bg-'.$meta[2].'-50 border-'.$meta[2].'-300 text-'.$meta[2].'-700' : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                        <input type="radio" name="attendance[{{ $i }}][status]" value="{{ $val }}"
                                            {{ ($existing?->status ?? 'present') === $val ? 'checked' : '' }}
                                            class="hidden peer">
                                        <span>{{ $meta[0] }} {{ $meta[1] }}</span>
                                    </label>
                                    @endforeach
                                </div>
                            </td>
                            <td class="px-5 py-3">
                                <input type="text" name="attendance[{{ $i }}][remarks]" value="{{ $existing?->remarks }}"
                                    class="border border-gray-200 rounded-lg px-3 py-1.5 text-sm w-full" placeholder="Optional">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-4 flex justify-end">
            <button type="submit" class="px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold shadow-sm text-sm">
                <i class="fas fa-save mr-1.5"></i> Save Attendance
            </button>
        </div>
    </form>
    @elseif($selectedClass)
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-12 text-center">
        <i class="fas fa-user-graduate text-4xl text-gray-300 mb-3 block"></i>
        <p class="text-gray-500">No students found in this class.</p>
    </div>
    @endif
</div>
@endsection