@extends('layouts.app')

@section('title', 'Absence Alerts')

@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">Absence Alerts</h1>
                <p class="text-xs text-muted-foreground">Automated parent notifications triggered the moment a student is marked absent.</p>
            </div>
            <a href="{{ route('register.settings') }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Alert Settings</a>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('register.alerts') }}" 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">Status</label>
                    <select name="status" 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 ($statuses as $st)
                            <option value="{{ $st->code }}" @selected($statusFilter === $st->code)>{{ $st->code }} — {{ $st->label }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            </form>
        </div>

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <table class="w-full min-w-[640px] text-sm">
                <thead>
                    <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                        <th class="px-4 py-2 font-medium">Date</th>
                        <th class="px-4 py-2 font-medium">Student</th>
                        <th class="px-4 py-2 font-medium">Parent</th>
                        <th class="px-4 py-2 font-medium">Phone</th>
                        <th class="px-4 py-2 font-medium">Channel</th>
                        <th class="px-4 py-2 font-medium">Status</th>
                        <th class="px-4 py-2 font-medium">Message</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($alerts as $a)
                        <tr class="border-b last:border-0 align-top">
                            <td class="whitespace-nowrap px-4 py-2 text-xs">{{ $a->date?->format('d M Y') }}</td>
                            <td class="px-4 py-2">
                                <span class="font-medium">{{ $a->student?->full_name ?? '—' }}</span>
                                <span class="block font-mono text-[11px] text-muted-foreground">{{ $a->student?->admission_no }}</span>
                            </td>
                            <td class="px-4 py-2 text-xs">{{ $a->student ? \App\Support\Register::parentName($a->student) : '—' }}</td>
                            <td class="px-4 py-2 font-mono text-xs">{{ $a->phone }}</td>
                            <td class="px-4 py-2 text-xs uppercase">{{ $a->channel }}</td>
                            <td class="px-4 py-2 text-xs">
                                <span class="rounded-full bg-muted px-2 py-0.5 font-medium">{{ $a->status }}</span>
                            </td>
                            <td class="px-4 py-2 text-xs text-muted-foreground">{{ \Illuminate\Support\Str::limit($a->message, 90) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-4 py-10 text-center text-sm text-muted-foreground">No absence alerts sent yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div>{{ $alerts->links() }}</div>
    </div>
@endsection