@extends('layouts.app')

@section('title', 'Student Attendance')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Attendance Sheet</h1>
                <p class="text-xs text-muted-foreground">Mark daily registers per class — P (present) / A (absent), defaults to Present</p>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('students.attendance-sheet') }}" class="flex flex-wrap items-end gap-3 p-3">
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Class</label>
                    <select name="class" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Models\Student::FORMS as $f)
                            <option value="{{ $f }}" @selected($class === $f)>{{ $f }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Stream</label>
                    <select name="stream" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="">All</option>
                        @foreach (\App\Models\Student::STREAMS as $st)
                            <option value="{{ $st }}" @selected($stream === $st)>Stream {{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Date</label>
                    <input type="date" name="date" value="{{ $date }}" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Load Register</button>
                <button type="button" onclick="markAll(true)" class="h-9 rounded-lg border border-border px-3 text-sm hover:bg-accent">All Present</button>
            </form>
        </div>

        <form method="post" action="{{ route('students.attendance-save') }}">
            @csrf
            <input type="hidden" name="date" value="{{ $date }}">
            <input type="hidden" name="class" value="{{ $class }}">

            <div class="rounded-xl border border-border bg-card">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2 font-medium">Adm No</th>
                            <th class="px-3 py-2 font-medium">Student</th>
                            <th class="px-3 py-2 font-medium">Stream</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($students as $s)
                            @php $status = $records[$s->id] ?? 'P'; @endphp
                            <tr class="border-b last:border-0">
                                <td class="px-3 py-2 font-mono text-xs">{{ $s->admission_no }}</td>
                                <td class="px-3 py-2 font-medium">{{ $s->full_name }}</td>
                                <td class="px-3 py-2">{{ $s->stream }}</td>
                                <td class="px-3 py-2">
                                    <input type="hidden" name="attendance[{{ $s->id }}]" class="att-hidden" value="{{ $status }}">
                                    <label class="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs cursor-pointer {{ $status === 'P' ? 'border-emerald-600/40 bg-emerald-50 text-emerald-700' : 'border-destructive/40 bg-destructive/5 text-destructive' }}">
                                        <input type="checkbox" class="att-check" data-id="{{ $s->id }}" {{ $status === 'P' ? 'checked' : '' }}>
                                        <span class="att-label">{{ $status }}</span>
                                    </label>
                                </td>
                            </tr>
                        @endforeach
                        @if ($students->isEmpty())
                            <tr><td colspan="4" class="px-3 py-10 text-center text-sm text-muted-foreground">No students in this class.</td></tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <div class="mt-3 flex items-center gap-2">
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Attendance ({{ $students->count() }} students)</button>
                <a href="{{ route('students.attendance-report', ['class' => $class]) }}" class="rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">View Report</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        function paint(c, isP) {
            const lbl = c.closest('label');
            c.closest('td').querySelector('.att-hidden').value = isP ? 'P' : 'A';
            lbl.querySelector('.att-label').textContent = isP ? 'P' : 'A';
            lbl.className = 'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs cursor-pointer ' +
                (isP
                    ? 'border-emerald-600/40 bg-emerald-50 text-emerald-700'
                    : 'border-destructive/40 bg-destructive/5 text-destructive');
        }

        document.querySelectorAll('.att-check').forEach((c) => {
            c.addEventListener('change', function () { paint(this, this.checked); });
        });

        function markAll(v) {
            document.querySelectorAll('.att-check').forEach((c) => {
                c.checked = v;
                paint(c, v);
            });
        }
    </script>
@endpush