@extends('layouts.app')

@section('title', 'Daily Register')

@php
    $colorMap = [
        'emerald' => ['border-emerald-600/40 bg-emerald-50 text-emerald-700', 'emerald'],
        'amber' => ['border-amber-500/40 bg-amber-50 text-amber-700', 'amber'],
        'sky' => ['border-sky-500/40 bg-sky-50 text-sky-700', 'sky'],
        'destructive' => ['border-destructive/40 bg-destructive/5 text-destructive', 'red'],
        'muted' => ['border-border bg-muted text-muted-foreground', 'gray'],
        'gray' => ['border-border bg-muted text-muted-foreground', 'gray'],
    ];
    $default = $statuses->firstWhere('code', 'P') ?? $statuses->first();
@endphp

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Daily Register</h1>
                <p class="text-xs text-muted-foreground">Mark the class register in seconds — bulk actions, then adjust only the exceptions.</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('register.analytics', ['class' => $class]) }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Analytics</a>
                <a href="{{ route('register.compliance') }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Unmarked Registers</a>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('register.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>
            </form>
        </div>

        @if ($nonSchoolDay)
            <div class="rounded-xl border border-amber-500/40 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                <strong>Non-school day:</strong> {{ $nonSchoolDay }}. Marking is blocked unless you tick the override below.
            </div>
        @endif

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

            <div class="mb-3 flex flex-wrap items-center gap-2">
                <span class="text-xs uppercase tracking-wide text-muted-foreground">Bulk mark all:</span>
                @foreach ($statuses as $st)
                    @php $cls = $colorMap[$st->color][0] ?? $colorMap['gray'][0]; @endphp
                    <button type="button" onclick="markAll('{{ $st->code }}')"
                            class="rounded-lg border px-3 py-1.5 text-xs font-medium hover:opacity-80 {{ $cls }}">
                        {{ $st->label }}
                    </button>
                @endforeach
            </div>

            <div class="overflow-x-auto rounded-xl border border-border bg-card">
                <table class="w-full min-w-[560px] 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 $current = data_get($records, $s->id.'.status', $default->code ?? '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 }}]" id="att-{{ $s->id }}" value="{{ $current }}">
                                    <div class="flex flex-wrap gap-1.5">
                                        @foreach ($statuses as $st)
                                            @php $cls = $colorMap[$st->color][0] ?? $colorMap['gray'][0]; @endphp
                                            <button type="button" data-id="{{ $s->id }}" data-code="{{ $st->code }}"
                                                    onclick="setStatus({{ $s->id }}, '{{ $st->code }}')"
                                                    class="att-btn rounded-full border px-2.5 py-1 text-xs font-medium {{ $cls }}">
                                                {{ $st->code }}
                                            </button>
                                        @endforeach
                                    </div>
                                </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 flex-wrap items-center gap-3">
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Register ({{ $students->count() }} students)</button>
                @if ($nonSchoolDay)
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="checkbox" name="override" value="1" class="rounded border-input">
                        Override non-school day
                    </label>
                @endif
                <a href="{{ route('register.sheet.print', ['class' => $class, 'stream' => $stream, 'date' => $date]) }}"
                   onclick="window.open(this.href,'print','width=1000,height=800');return false;"
                   class="rounded-lg border border-border px-4 py-2 text-sm hover:bg-accent">Print Register</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        const colorMap = @json(collect($colorMap)->map(fn ($v) => $v[0])->all());
        const neutral = 'border-border text-muted-foreground hover:bg-accent';

        function setStatus(id, code) {
            document.getElementById('att-' + id).value = code;
            document.querySelectorAll('.att-btn[data-id="' + id + '"]').forEach((b) => {
                b.className = 'att-btn rounded-full border px-2.5 py-1 text-xs font-medium ' +
                    (b.dataset.code === code ? (colorMap[statusColor(b.dataset.code)] || neutral) : neutral);
            });
        }

        function statusColor(code) {
            const map = @json($statuses->pluck('color', 'code')->all());
            return map[code] || 'gray';
        }

        function markAll(code) {
            document.querySelectorAll('.att-btn[data-id]').forEach((b) => {});
            document.querySelectorAll('input[id^="att-"]').forEach((inp) => {
                const id = inp.id.replace('att-', '');
                setStatus(id, code);
            });
        }

        document.querySelectorAll('input[id^="att-"]').forEach((inp) => {
            setStatus(inp.id.replace('att-', ''), inp.value);
        });
    </script>
@endpush