@extends('layouts.app')

@section('title', 'Notices')

@php
    $tone = [
        'General' => 'bg-slate-500/15 text-slate-600',
        'Academic' => 'bg-sky-500/15 text-sky-700',
        'Events' => 'bg-indigo-500/15 text-indigo-700',
        'Emergency' => 'bg-red-500/15 text-red-700',
        'Policy' => 'bg-amber-500/15 text-amber-700',
    ];
@endphp

@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">Notices</h1>
                <p class="text-xs text-muted-foreground">School-wide communications — announcements, reminders, events</p>
            </div>
            <div class="flex items-center gap-2 text-sm">
                <a href="{{ route('notices.index') }}" class="rounded-lg border px-3 py-2 {{ ! $showArchived ? 'border-primary bg-primary/5 text-primary' : 'border-border hover:bg-accent' }}">Active</a>
                <a href="{{ route('notices.index', ['archive' => 1]) }}" class="rounded-lg border px-3 py-2 {{ $showArchived ? 'border-primary bg-primary/5 text-primary' : 'border-border hover:bg-accent' }}">Archive</a>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-3">
            <div class="flex flex-col gap-4 lg:col-span-2">
                @foreach ($notices as $n)
                    <article class="rounded-xl border border-border bg-card p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="rounded-full px-2.5 py-0.5 text-[10px] font-medium {{ $tone[$n->category] ?? 'bg-slate-500/15 text-slate-600' }}">{{ $n->category }}</span>
                                @if ($n->priority === 'High')
                                    <span class="rounded-full bg-amber-500/15 px-2.5 py-0.5 text-[10px] font-medium text-amber-700">High priority</span>
                                @elseif ($n->priority === 'Urgent')
                                    <span class="rounded-full bg-red-500/15 px-2.5 py-0.5 text-[10px] font-medium text-red-700">Urgent</span>
                                @endif
                                @if ($n->audience && $n->audience !== 'All')
                                    <span class="rounded-full border border-border px-2.5 py-0.5 text-[10px] text-muted-foreground">{{ $n->audience }}</span>
                                @endif
                                @if ($n->pinned)
                                    <span class="rounded-full bg-primary/10 px-2.5 py-0.5 text-[10px] font-medium text-primary">Pinned</span>
                                @endif
                            </div>
                            <div class="flex shrink-0 items-center gap-1">
                                @if (! $showArchived)
                                    <form method="post" action="{{ route('notices.pin', $n) }}">
                                        @csrf
                                        <button title="{{ $n->pinned ? 'Unpin' : 'Pin to top' }}" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">{{ $n->pinned ? 'Unpin' : 'Pin' }}</button>
                                    </form>
                                @endif
                                <form method="post" action="{{ route('notices.archive', $n) }}">
                                    @csrf
                                    <button class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">
                                        {{ $n->status === 'Archived' ? 'Restore' : 'Archive' }}
                                    </button>
                                </form>
                                @if ($showArchived)
                                    <form method="post" action="{{ route('notices.destroy', $n) }}" onsubmit="return confirm('Delete this notice permanently?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/5">Delete</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                        <h2 class="mt-2 text-sm font-semibold">{{ $n->title }}</h2>
                        <p class="mt-1 whitespace-pre-line text-sm text-muted-foreground">{{ $n->body }}</p>
                        <div class="mt-3 flex items-center gap-3 border-t border-border/60 pt-2 text-xs text-muted-foreground">
                            <span class="font-medium text-foreground">{{ $n->author }}</span>
                            <span>{{ $n->author_role }}</span>
                            <span class="ml-auto">{{ $n->notice_date->format('d M Y') }}@if ($n->expires) · expires {{ $n->expires->format('d M Y') }}@endif</span>
                        </div>
                    </article>
                @endforeach

                <div>{{ $notices->links() }}</div>
            </div>

            <div class="rounded-xl border border-border bg-card">
                <form method="post" action="{{ route('notices.store') }}" class="flex flex-col gap-3 p-4">
                    @csrf
                    <h2 class="text-sm font-semibold">Publish Notice</h2>
                    <x-field label="Title" required>
                        <x-input name="title" value="{{ old('title') }}" required />
                    </x-field>
                    <x-field label="Body" required>
                        <textarea name="body" rows="4" required class="w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring">{{ old('body') }}</textarea>
                    </x-field>
                    <div class="grid grid-cols-2 gap-3">
                        <x-field label="Category">
                            <select name="category" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                @foreach (\App\Models\Notice::CATEGORIES as $c)
                                    <option value="{{ $c }}">{{ $c }}</option>
                                @endforeach
                            </select>
                        </x-field>
                        <x-field label="Audience">
                            <select name="audience" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                @foreach (\App\Models\Notice::AUDIENCES as $a)
                                    <option value="{{ $a }}">{{ $a }}</option>
                                @endforeach
                            </select>
                        </x-field>
                        <x-field label="Priority">
                            <select name="priority" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                @foreach (\App\Models\Notice::PRIORITIES as $p)
                                    <option value="{{ $p }}">{{ $p }}</option>
                                @endforeach
                            </select>
                        </x-field>
                        <x-field label="Status">
                            <select name="status" class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                <option value="Published">Published</option>
                                <option value="Draft">Draft</option>
                            </select>
                        </x-field>
                        <x-field label="Notice date" required>
                            <x-input type="date" name="notice_date" value="{{ old('notice_date', now()->toDateString()) }}" required />
                        </x-field>
                        <x-field label="Expires">
                            <x-input type="date" name="expires" value="{{ old('expires') }}" />
                        </x-field>
                    </div>
                    <label class="flex items-center gap-2 text-sm">
                        <input type="checkbox" name="pinned" value="1" class="size-4"> Pin to top
                    </label>
                    <button class="mt-1 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Publish Notice</button>
                </form>
            </div>
        </div>
    </div>
@endsection