@extends('layouts.app')

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

@php
    $dayNames = [1 => 'Monday', 2 => 'Tuesday', 3 => 'Wednesday', 4 => 'Thursday', 5 => 'Friday', 6 => 'Saturday', 7 => 'Sunday'];
@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 Settings</h1>
                <p class="text-xs text-muted-foreground">Academic calendar, custom statuses and automated absence alerts.</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('register.sheet') }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Mark Register</a>
                <a href="{{ route('register.alerts') }}" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Alert Log</a>
            </div>
        </div>

        {{-- Calendar + alerts --}}
        <form method="post" action="{{ route('register.settings.save') }}" class="flex flex-col gap-4">
            @csrf
            <div class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-sm font-semibold">Academic Calendar</h2>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Working days (attendance allowed)</label>
                    <div class="flex flex-wrap gap-3">
                        @foreach ($dayNames as $num => $name)
                            <label class="inline-flex items-center gap-2 text-sm">
                                <input type="checkbox" name="working_days[]" value="{{ $num }}" class="rounded border-input"
                                       @checked(in_array($num, $workingDays, true))>
                                {{ $name }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="mt-4 flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Minimum attendance rate for risk flag (%)</label>
                    <input type="number" name="min_rate" min="0" max="100" step="0.1" value="{{ $minRate }}"
                           class="h-9 w-40 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
            </div>

            <div class="rounded-xl border border-border bg-card p-4">
                <h2 class="mb-3 text-sm font-semibold">Automated Absence Alerts</h2>
                <label class="mb-3 inline-flex items-center gap-2 text-sm">
                    <input type="checkbox" name="alert_enabled" value="1" class="rounded border-input" @checked($alertsEnabled)>
                    Send parent alerts automatically when a student is marked with an alert status
                </label>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Channel</label>
                        <select name="alert_channel" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            <option value="sms" @selected($alertChannel === 'sms')>SMS</option>
                            <option value="whatsapp" @selected($alertChannel === 'whatsapp')>WhatsApp</option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Placeholders</label>
                        <p class="text-xs text-muted-foreground">{student} {first_name} {admission_no} {class} {stream} {date} {status} {status_label}</p>
                    </div>
                </div>
                <div class="mt-4 flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Message template</label>
                    <textarea name="alert_template" rows="3" class="rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring">{{ $alertTemplate }}</textarea>
                </div>
            </div>

            <div>
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save Settings</button>
            </div>
        </form>

        {{-- Statuses --}}
        <div class="rounded-xl border border-border bg-card">
            <div class="border-b border-border px-4 py-3 text-sm font-semibold">Attendance Statuses</div>
            <div class="overflow-x-auto">
                <table class="w-full min-w-[720px] text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-4 py-2 font-medium">Code</th>
                            <th class="px-4 py-2 font-medium">Label</th>
                            <th class="px-4 py-2 font-medium">Category</th>
                            <th class="px-4 py-2 text-center font-medium">Counts Present</th>
                            <th class="px-4 py-2 text-center font-medium">In Rate</th>
                            <th class="px-4 py-2 text-center font-medium">Alerts</th>
                            <th class="px-4 py-2 text-center font-medium">Active</th>
                            <th class="px-4 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($statuses as $st)
                            <tr class="border-b last:border-0">
                                <td class="px-4 py-2 font-mono font-semibold">{{ $st->code }}</td>
                                <td class="px-4 py-2">{{ $st->label }}</td>
                                <td class="px-4 py-2 text-xs capitalize">{{ $st->category }}</td>
                                <td class="px-4 py-2 text-center">{{ $st->counts_present ? 'Yes' : '—' }}</td>
                                <td class="px-4 py-2 text-center">{{ $st->in_denominator ? 'Yes' : '—' }}</td>
                                <td class="px-4 py-2 text-center">{{ $st->triggers_alert ? 'Yes' : '—' }}</td>
                                <td class="px-4 py-2 text-center">
                                    <span class="rounded-full px-2 py-0.5 text-xs {{ $st->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-muted text-muted-foreground' }}">{{ $st->is_active ? 'Active' : 'Off' }}</span>
                                </td>
                                <td class="px-4 py-2">
                                    <div class="flex items-center justify-end gap-2">
                                        <form method="post" action="{{ route('register.statuses.toggle', $st) }}">
                                            @csrf @method('patch')
                                            <button class="text-xs text-primary hover:underline">{{ $st->is_active ? 'Deactivate' : 'Activate' }}</button>
                                        </form>
                                        <form method="post" action="{{ route('register.statuses.destroy', $st) }}" onsubmit="return confirm('Remove this status?');">
                                            @csrf @method('delete')
                                            <button class="text-xs text-destructive hover:underline">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <form method="post" action="{{ route('register.statuses.store') }}" class="flex flex-wrap items-end gap-3 border-t border-border p-4">
                @csrf
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Code</label>
                    <input name="code" maxlength="4" required class="h-9 w-20 rounded-lg border border-input bg-transparent px-3 text-sm uppercase outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Label</label>
                    <input name="label" required class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Category</label>
                    <select name="category" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach ($categories as $cat)
                            <option value="{{ $cat }}">{{ ucfirst($cat) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Colour</label>
                    <select name="color" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach ($colors as $clr)
                            <option value="{{ $clr }}">{{ ucfirst($clr) }}</option>
                        @endforeach
                    </select>
                </div>
                <label class="inline-flex items-center gap-2 text-xs"><input type="checkbox" name="counts_present" value="1" class="rounded border-input"> Counts present</label>
                <label class="inline-flex items-center gap-2 text-xs"><input type="checkbox" name="in_denominator" value="1" checked class="rounded border-input"> In rate</label>
                <label class="inline-flex items-center gap-2 text-xs"><input type="checkbox" name="triggers_alert" value="1" class="rounded border-input"> Triggers alert</label>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Add Status</button>
            </form>
        </div>

        {{-- Holidays --}}
        <div class="rounded-xl border border-border bg-card">
            <div class="border-b border-border px-4 py-3 text-sm font-semibold">Holidays &amp; School Closures</div>
            <div class="overflow-x-auto">
                <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">Name</th>
                            <th class="px-4 py-2 font-medium">Dates</th>
                            <th class="px-4 py-2 font-medium">Type</th>
                            <th class="px-4 py-2 font-medium">Notes</th>
                            <th class="px-4 py-2 text-right font-medium">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($holidays as $h)
                            <tr class="border-b last:border-0">
                                <td class="px-4 py-2 font-medium">{{ $h->name }}</td>
                                <td class="px-4 py-2 text-xs">{{ $h->range_label }}</td>
                                <td class="px-4 py-2 text-xs capitalize">{{ $h->type }}</td>
                                <td class="px-4 py-2 text-xs text-muted-foreground">{{ $h->notes }}</td>
                                <td class="px-4 py-2 text-right">
                                    <form method="post" action="{{ route('register.holidays.destroy', $h) }}" onsubmit="return confirm('Remove this holiday?');">
                                        @csrf @method('delete')
                                        <button class="text-xs text-destructive hover:underline">Remove</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-muted-foreground">No holidays added yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <form method="post" action="{{ route('register.holidays.store') }}" class="flex flex-wrap items-end gap-3 border-t border-border p-4">
                @csrf
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Name</label>
                    <input name="name" required class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Start</label>
                    <input type="date" name="start_date" required class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">End (optional)</label>
                    <input type="date" name="end_date" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Type</label>
                    <select name="type" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="holiday">Holiday</option>
                        <option value="closure">Closure</option>
                        <option value="event">Event</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Notes</label>
                    <input name="notes" 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">Add Holiday</button>
            </form>
        </div>
    </div>
@endsection