@extends('layouts.admin')
@section('title', 'Notices')
@section('page-title', 'Notice Management')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- Create Form --}}
    <div class="lg:col-span-2">
        <div class="card p-6 rounded-xl">
            <h3 class="text-white font-bold mb-5">Create Notice</h3>
            <form method="POST" action="{{ route('admin.notices.store') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Title *</label>
                    <input type="text" name="title" value="{{ old('title') }}" required placeholder="Notice title"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                    @error('title')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Content *</label>
                    <textarea name="content" rows="4" required placeholder="Notice content..."
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500 resize-none">{{ old('content') }}</textarea>
                    @error('content')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Type</label>
                    <select name="type" required class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                        <option value="info" {{ old('type') === 'info' ? 'selected' : '' }}>ℹ️ Info (Blue)</option>
                        <option value="warning" {{ old('type') === 'warning' ? 'selected' : '' }}>⚠️ Warning (Yellow)</option>
                        <option value="danger" {{ old('type') === 'danger' ? 'selected' : '' }}>🚨 Danger (Red)</option>
                    </select>
                </div>
                <button type="submit" class="w-full btn-primary py-3 font-bold">Create Notice</button>
            </form>
        </div>
    </div>

    {{-- Notices List --}}
    <div class="lg:col-span-3 space-y-3">
        @forelse($notices as $notice)
        <div class="card rounded-xl overflow-hidden border {{ $notice->type === 'danger' ? 'border-red-500/30' : ($notice->type === 'warning' ? 'border-yellow-500/30' : 'border-blue-500/30') }}">
            <div class="p-4">
                <div class="flex items-start justify-between gap-4 mb-2">
                    <div class="flex items-center gap-2">
                        <span class="text-lg">{{ $notice->type === 'danger' ? '🚨' : ($notice->type === 'warning' ? '⚠️' : 'ℹ️') }}</span>
                        <p class="text-white font-semibold">{{ $notice->title }}</p>
                        <span class="badge {{ $notice->is_active ? 'badge-success' : 'badge-secondary' }} text-xs">{{ $notice->is_active ? 'Active' : 'Inactive' }}</span>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <form method="POST" action="{{ route('admin.notices.toggle', $notice) }}" class="inline">
                            @csrf
                            <button type="submit" class="text-xs px-2 py-1 rounded-lg {{ $notice->is_active ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400' }} hover:opacity-80 transition">
                                {{ $notice->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.notices.destroy', $notice) }}" class="inline">
                            @csrf @method('DELETE')
                            <button type="button" data-confirm="Delete this notice?" class="text-xs bg-red-600/20 text-red-400 hover:bg-red-600/40 px-2 py-1 rounded-lg transition">Delete</button>
                        </form>
                    </div>
                </div>
                <p class="text-slate-400 text-sm">{{ $notice->content }}</p>
                <p class="text-slate-600 text-xs mt-2">{{ $notice->created_at->diffForHumans() }}</p>
            </div>
        </div>
        @empty
        <div class="card rounded-xl p-10 text-center text-slate-500">No notices yet. Create one!</div>
        @endforelse
        <div class="mt-4">{{ $notices->links() }}</div>
    </div>
</div>
@endsection