@extends('staff.layouts.app')

@section('content')
<div class="p-4 max-w-2xl mx-auto pb-24">

    {{-- ══ Header ═ --}}
    <div class="flex justify-between items-center mb-5">
        <div>
            <h1 class="text-xl font-black text-slate-800 tracking-tight">Homework</h1>
            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">Broadcasts & Assignments</p>
        </div>
         {{-- ✅ UNREAD BELL TOGGLE --}}
        <a href="{{ route('staff.homework.index', array_merge(['slug' => session('staff_school_slug')], request('status') ? ['status' => request('status')] : [], $showOnlyUnread ? [] : ['unread' => 1])) }}"
            class="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-wider border-2 transition-all shadow-sm
                {{ $showOnlyUnread ? 'bg-red-500 border-red-600 text-white shadow-red-200' : 'bg-white border-slate-200 text-slate-600 hover:border-red-300 hover:text-red-600' }}">
            <i class="fa-solid {{ $showOnlyUnread ? 'fa-bell' : 'fa-bell-slash' }}"></i>
            Unread
            @if($showOnlyUnread)<span class="bg-white text-red-600 text-[8px] font-black px-1.5 py-0.5 rounded-full">ON</span>@endif
        </a>
        <a href="{{ route('staff.homework.create', ['slug' => session('staff_school_slug')]) }}"
           class="w-11 h-11 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center shadow-lg shadow-orange-200 active:scale-90 transition-all border-2 border-white">
            <i class="fa-solid fa-plus text-sm"></i>
        </a>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-3 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
        <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="mb-3 bg-red-50 border border-red-200 text-red-700 text-xs font-bold px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
        <i class="fa-solid fa-circle-exclamation"></i> {{ session('error') }}
    </div>
    @endif

     {{-- ══ Status Tabs + UNREAD Toggle ══ --}}
    @php $showOnlyUnread = request()->boolean('unread'); @endphp
    <div class="flex items-center gap-3 mb-4">
        <div class="flex gap-2 overflow-x-auto pb-1 flex-1" style="-ms-overflow-style:none; scrollbar-width:none;">
            @php
                $currentStatus = request('status');
                $tabs = [
                    ['label' => 'All', 'value' => null],
                    ['label' => 'Pending', 'value' => 'pending'],
                    ['label' => 'Published', 'value' => 'published'],
                    ['label' => 'Rejected', 'value' => 'rejected'],
                ];
            @endphp
            @foreach($tabs as $tab)
                @php $isActive = $currentStatus === $tab['value']; @endphp
                <a href="{{ route('staff.homework.index', array_merge(['slug' => session('staff_school_slug')], $tab['value'] ? ['status' => $tab['value']] : [], $showOnlyUnread ? ['unread' => 1] : [])) }}"
                    class="px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-wider whitespace-nowrap transition-all shadow-sm flex items-center gap-1.5
                        {{ $isActive ? 'bg-slate-900 text-white shadow-slate-300' : 'bg-white text-slate-500 border border-slate-200' }}">
                    {{ $tab['label'] }}
                </a>
            @endforeach
        </div>
       
    </div>


    {{-- ══ REVIEWER FILTER BAR (Cascading Class → Section) ══ --}}
    @if($isReviewer)
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3 mb-4">
        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">
            <i class="fa-solid fa-filter text-orange-400 mr-1"></i> Advanced Filters
        </p>
        <form method="GET" action="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}" class="space-y-2">
            @if(request('status'))<input type="hidden" name="status" value="{{ request('status') }}">@endif
            @if(request('unread'))<input type="hidden" name="unread" value="1">@endif

                        {{-- ROW 1 : CLASS → SECTION + SUBJECT (cascading, inactive until class) --}}
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                <select name="class_id" id="filterClass" class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-orange-500/20 outline-none uppercase tracking-wider">
                    <option value="">All Classes</option>
                    @foreach($classes as $c)
                    <option value="{{ $c->id }}" {{ request('class_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                    @endforeach
                </select>

                <div id="filterSectionWrapper" class="transition-opacity {{ request('class_id') ? '' : 'opacity-50 pointer-events-none' }}">
                    <select name="section_id" id="filterSection" {{ request('class_id') ? '' : 'disabled' }} class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-orange-500/20 outline-none uppercase tracking-wider">
                        <option value="">All Sections</option>
                    </select>
                </div>

                <div id="filterSubjectWrapper" class="transition-opacity {{ request('class_id') ? '' : 'opacity-50 pointer-events-none' }}">
                    <select name="subject_id" id="filterSubject" {{ request('class_id') ? '' : 'disabled' }} class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-orange-500/20 outline-none uppercase tracking-wider">
                        <option value="">All Subjects</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-2">
                <select name="staff_id" class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-orange-500/20 outline-none uppercase tracking-wider">
                    <option value="">All Employees</option>
                    @foreach($staffMembers as $st)
                    <option value="{{ $st->id }}" {{ request('staff_id') == $st->id ? 'selected' : '' }}>{{ $st->staff_name }}</option>
                    @endforeach
                </select>
                <input type="date" name="date" value="{{ request('date') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-orange-500/20 outline-none uppercase tracking-wider">
            </div>

            <div class="flex gap-2 pt-1">
                <button type="submit" class="flex-1 bg-slate-900 text-white py-2 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md active:scale-95 transition-all">Apply Filters</button>
                <a href="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}" class="px-4 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-bold flex items-center justify-center uppercase">Clear</a>
            </div>
        </form>
    </div>
    @endif

    {{-- ══ Row-wise List ══ --}}
    <div class="space-y-3">
        @forelse($homeworks as $hw)
            @php $isUnread = ($hw->unread_replies ?? 0) > 0 || ($isReviewer && ($hw->is_new ?? 0)); @endphp
     <a href="{{ route('staff.homework.show', ['slug' => session('staff_school_slug'), 'id' => $hw->id]) }}"
         class="relative block bg-white rounded-2xl border shadow-sm hover:shadow-md transition-all p-4 active:scale-[0.98] group {{ $isUnread ? 'border-red-200 ring-2 ring-red-100' : 'border-slate-100' }}">
             {{-- ✅ Red Count / NEW Badge --}}
             @if($isUnread)
             <span class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md z-10">
                 @if(($hw->unread_replies ?? 0) > 0){{ $hw->unread_replies > 9 ? '9+' : $hw->unread_replies }}@else NEW @endif
             </span>
             @endif
                <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm
                    {{ $hw->status == 'published' ? 'bg-emerald-50 text-emerald-600' : ($hw->status == 'pending' ? 'bg-amber-50 text-amber-600' : 'bg-red-50 text-red-600') }}">
                    <i class="fa-solid {{ $hw->status == 'published' ? 'fa-check-circle' : ($hw->status == 'pending' ? 'fa-clock' : 'fa-circle-xmark') }} text-base"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between mb-1">
                        <h3 class="font-bold text-slate-800 text-sm truncate pr-2 group-hover:text-orange-600 transition-colors">
                            {{ $hw->title ?: 'Untitled Broadcast' }}
                                                     @if($isUnread)
                         <span class="ml-1 inline-block bg-red-500 text-white text-[8px] font-black px-1.5 py-0.5 rounded uppercase align-middle animate-pulse">New</span>
                         @endif
                        </h3>
                        <span class="text-[9px] text-slate-400 font-bold whitespace-nowrap">{{ \Carbon\Carbon::parse($hw->created_at)->format('d M, Y') }}</span>
                    </div>
                    <p class="text-[11px] text-slate-500 line-clamp-2 leading-relaxed mb-2.5">{{ $hw->message }}</p>
                    <div class="flex items-center gap-2 text-[9px] text-slate-400 font-semibold uppercase tracking-wide">
                        <div class="w-4 h-4 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-black text-[7px]">{{ substr($hw->staff_name, 0, 1) }}</div>
                        <span class="text-slate-600">{{ $hw->staff_name }}</span>
                        @if($hw->subject_name)
                            <span class="text-slate-300">•</span>
                            <span class="text-orange-600 font-bold">{{ $hw->subject_name }}</span>
                        @endif
                        @if($hw->attachment)
                        <span class="ml-auto w-5 h-5 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center">
                            <i class="fa-solid fa-paperclip text-[8px]"></i>
                        </span>
                        @endif
                    </div>
                </div>
                <div class="text-slate-300 group-hover:text-orange-500 group-hover:translate-x-1 transition-all self-center flex-shrink-0">
                    <i class="fa-solid fa-chevron-right text-xs"></i>
                </div>
            </div>
        </a>
        @empty
        <div class="py-20 text-center bg-white rounded-3xl border border-dashed border-slate-200">
            <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fa-solid fa-inbox text-2xl text-slate-300"></i>
            </div>
            <p class="text-slate-500 font-bold text-sm">No broadcasts found</p>
            <p class="text-slate-400 text-xs mt-1">Create a new assignment to get started.</p>
        </div>
        @endforelse
    </div>

    <div class="mt-6">{{ $homeworks->links() }}</div>
</div>

{{-- ✅ Cascading Section Filter (only sections of selected class) --}}
@if($isReviewer)
<script>
    const FILTER_SECTIONS = @json($sections ?? []);
    const FILTER_SUBJECTS = @json($subjects ?? []);
    const fClass   = document.getElementById('filterClass');
    const fSection = document.getElementById('filterSection');
    const fSubject = document.getElementById('filterSubject');
    const secWrap  = document.getElementById('filterSectionWrapper');
    const subWrap  = document.getElementById('filterSubjectWrapper');
    const keptSection = "{{ request('section_id') }}";
    const keptSubject = "{{ request('subject_id') }}";

    function populateFilterDropdowns(classId, keepSection, keepSubject) {
        const enabled = !!classId;

        fSection.innerHTML = '<option value="">All Sections</option>';
        fSubject.innerHTML = '<option value="">All Subjects</option>';

        if (enabled) {
            FILTER_SECTIONS.filter(s => String(s.class_id) === String(classId)).forEach(s => {
                const opt = document.createElement('option');
                opt.value = s.id; opt.textContent = s.name;
                if (keepSection && String(s.id) === String(keepSection)) opt.selected = true;
                fSection.appendChild(opt);
            });
            FILTER_SUBJECTS.filter(s => String(s.class_id) === String(classId)).forEach(s => {
                const opt = document.createElement('option');
                opt.value = s.id; opt.textContent = s.name;
                if (keepSubject && String(s.id) === String(keepSubject)) opt.selected = true;
                fSubject.appendChild(opt);
            });
        }

        fSection.disabled = !enabled;
        fSubject.disabled = !enabled;
        secWrap.classList.toggle('opacity-50', !enabled);
        secWrap.classList.toggle('pointer-events-none', !enabled);
        subWrap.classList.toggle('opacity-50', !enabled);
        subWrap.classList.toggle('pointer-events-none', !enabled);
    }

    populateFilterDropdowns(fClass.value, keptSection, keptSubject);
    fClass.addEventListener('change', () => populateFilterDropdowns(fClass.value, null, null));
</script>
@endif
@endsection