@extends('staff.layouts.app')
@section('content')
<div class="flex flex-col gap-6 pb-6">
   <!-- Header -->
    <div class="flex flex-row justify-between items-center gap-3 px-4 py-3">
        <div class="min-w-0">
            <h2 class="text-lg md:text-2xl font-bold text-slate-800 truncate">Notice Board</h2>
            <p class="text-slate-500 text-xs md:text-sm font-medium truncate">Official school announcements.</p>
        </div>
        <div class="flex gap-2 flex-shrink-0">
            @if(isset($isPrincipalOrCoord) && $isPrincipalOrCoord)
            <a href="{{ route('staff.notice.create', ['slug' => session('staff_school_slug')]) }}" 
            class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 shadow-sm whitespace-nowrap">
                <i class="fa-solid fa-plus"></i> New
            </a>
            @endif
            <a href="{{ route('staff.dashboard', ['slug' => session('staff_school_slug')]) }}" 
            class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 whitespace-nowrap">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>
    <!-- Search & Filter Form -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm mx-4">
        <form action="{{ route('staff.notice.list', ['slug' => session('staff_school_slug')]) }}" method="GET" class="space-y-4">
            <div class="flex flex-col sm:flex-row gap-4 items-end">
                <div class="flex-1 w-full">
                    <label class="block text-[8px] font-bold text-slate-400 uppercase mb-1.5 tracking-wider">Search Notice</label>
                    <div class="relative">
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by title or content..." class="w-full pl-10 pr-4 py-1.5 text-sm rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                        <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                    </div>
                </div>
                <div class="flex gap-2 flex-shrink-0 w-full sm:w-auto">
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center gap-1.5 whitespace-nowrap flex-1 sm:flex-none">
                        <i class="fa-solid fa-filter"></i> Filter
                    </button>
                    <a href="{{ route('staff.notice.list', ['slug' => session('staff_school_slug')]) }}" class="bg-slate-100 hover:bg-slate-200 text-slate-600 px-4 py-2.5 rounded-xl text-xs font-bold transition-all flex items-center justify-center flex-shrink-0" title="Clear Filters">
                        <i class="fa-solid fa-rotate-right"></i>
                    </a>
                </div>
            </div>
            <div class="flex flex-wrap gap-2 items-end border-t border-slate-100 pt-4">
                <div class="w-32">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1.5 tracking-wider">From Date</label>
                    <input type="date" name="from_date" value="{{ request('from_date') }}" class="w-full px-2 py-2 text-xs rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                </div>
                <div class="w-32">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1.5 tracking-wider">To Date</label>
                    <input type="date" name="to_date" value="{{ request('to_date') }}" class="w-full px-2 py-2 text-xs rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                </div>
            </div>
        </form>
        @if ($errors->has('from_date'))
            <div class="mt-4 p-3 bg-red-50 border border-red-100 rounded-xl text-red-600 text-xs font-medium flex items-center gap-2 animate-pulse">
                <i class="fa-solid fa-circle-exclamation"></i> {{ $errors->first('from_date') }}
            </div>
        @endif
    </div>

    <!-- Notices List -->
    <div class="space-y-4 px-4">
        @forelse($notices as $notice)
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all {{ $notice->is_pinned ? 'ring-2 ring-indigo-100 border-indigo-200' : '' }}">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $notice->category == 'Urgent' ? 'bg-red-100 text-red-600' : 'bg-indigo-100 text-indigo-600' }}">{{ $notice->category }}</span>
                    @if(empty($notice->is_read))
                    <span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">New</span>
                    @endif
                    @if($notice->is_pinned)
                    <span class="bg-indigo-50 text-indigo-600 px-2 py-1 rounded-full text-[10px] font-bold uppercase flex items-center gap-1"><i class="fa-solid fa-pin text-[8px]"></i> Pinned</span>
                    @endif
                </div>
                <span class="text-slate-400 text-[11px] font-medium flex items-center gap-1"><i class="fa-regular fa-calendar-days"></i> {{ \Carbon\Carbon::parse($notice->published_at)->format('d M, Y') }}</span>
            </div>

            <a href="{{ route('staff.notice.view', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}">
                <h3 class="font-bold text-slate-800 text-base mb-2 hover:text-indigo-600 transition-colors">{{ $notice->title }}</h3>
                <p class="text-slate-500 text-sm line-clamp-2 leading-relaxed mb-4">{{ $notice->content }}</p>
            </a>

            <div class="flex items-center justify-between pt-3 border-t border-slate-100">
                <div class="flex items-center gap-3">
                    <a href="{{ route('staff.notice.view', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}" class="text-xs text-slate-400 font-medium hover:text-indigo-600">Tap to read full notice</a>
                    @if($notice->attachment)
                    <span class="text-indigo-500 text-xs font-bold flex items-center gap-1"><i class="fa-solid fa-paperclip"></i> Attachment</span>
                    @endif
                </div>

                {{-- ✅ EDIT & DELETE BUTTONS (Role-based) --}}
                <div class="flex items-center gap-2">
                    @if(isset($isPrincipalOrCoord) && $isPrincipalOrCoord)
                    <a href="{{ route('staff.notice.edit', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}" 
                       class="w-8 h-8 rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-600 flex items-center justify-center transition-all" title="Edit Notice">
                        <i class="fa-solid fa-pen-to-square text-xs"></i>
                    </a>
                    @endif

                    @if(isset($isPrincipalOnly) && $isPrincipalOnly)
                    <form action="{{ route('staff.notice.destroy', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this notice? This cannot be undone.');" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-8 h-8 rounded-lg bg-red-50 hover:bg-red-100 text-red-600 flex items-center justify-center transition-all" title="Delete Notice">
                            <i class="fa-solid fa-trash text-xs"></i>
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
            <i class="fa-solid fa-bullhorn text-4xl text-slate-300 mb-3"></i>
            <p class="text-slate-500 text-sm">No notices found matching your criteria.</p>
        </div>
        @endforelse
    </div>

    @if($notices->hasPages())
    <div class="mt-6 px-4">
        {{ $notices->appends(request()->query())->links() }}
    </div>
    @endif
</div>
<br/><br/>
@endsection