@extends('school.layouts.app')
@section('content')
<div class="p-6 lg:p-8 w-full">

    {{-- Header --}}
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-black text-slate-800 tracking-tight">Homework & Announcements</h1>
            <p class="text-sm text-slate-500 mt-1">Create, review and approve homework broadcasts for your school.</p>
        </div>
        <a href="{{ route('school.homework.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-indigo-200 transition-all flex items-center gap-2">
            <i class="fa-solid fa-plus"></i> New Homework
        </a>
    </div>

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

    {{-- Status Tabs + Unread Toggle --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 mb-6">
        <div class="flex flex-wrap items-center gap-3">
            {{-- Status Tabs --}}
            @php
                $currentStatus = request('status', 'pending');
                $tabs = [
                    ['label' => 'Pending', 'value' => 'pending'],
                    ['label' => 'Published', 'value' => 'published'],
                    ['label' => 'Rejected', 'value' => 'rejected'],
                    ['label' => 'All', 'value' => 'all'],
                ];
            @endphp
            @foreach($tabs as $tab)
                @php $isActive = $currentStatus === $tab['value']; @endphp
                <a href="{{ route('school.homework.index', array_merge(['status' => $tab['value']], request('unread') ? ['unread' => 1] : [])) }}"
                   class="px-4 py-2 rounded-lg text-xs font-bold transition-all {{ $isActive ? 'bg-slate-800 text-white shadow' : 'bg-slate-50 text-slate-500 border border-slate-200 hover:bg-slate-100' }}">
                    {{ $tab['label'] }}
                </a>
            @endforeach
            
            {{-- ✅ UNREAD FILTER TOGGLE (Separated with visual distinction) --}}
            <div class="ml-auto">
                <a href="{{ route('school.homework.index', array_merge(request()->except('unread'), $showOnlyUnread ? [] : ['unread' => 1])) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all border-2 {{ $showOnlyUnread ? 'bg-red-50 border-red-300 text-red-700 shadow-sm' : 'bg-white border-slate-200 text-slate-600 hover:border-red-200 hover:text-red-600' }}">
                    <i class="fa-solid {{ $showOnlyUnread ? 'fa-bell' : 'fa-bell-slash' }} text-xs"></i>
                    <span>Show Unread Only</span>
                    @if($showOnlyUnread)
                        <span class="bg-red-500 text-white text-[9px] font-black px-1.5 py-0.5 rounded-full">ON</span>
                    @endif
                </a>
            </div>
        </div>

        {{-- Advanced Filters --}}
        <form method="GET" action="{{ route('school.homework.index') }}" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3 mt-4 pt-4 border-t border-slate-100">
            @if(request('status'))<input type="hidden" name="status" value="{{ request('status') }}">@endif
            @if(request('unread'))<input type="hidden" name="unread" value="1">@endif
            
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-wider mb-1">Date</label>
                <input type="date" name="date" value="{{ request('date') }}" class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2 px-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-wider mb-1">Class</label>
                <select name="class_id" id="filterClass" class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2 px-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none">
                    <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>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-wider mb-1">Section</label>
                <select name="section_id" id="filterSection" {{ request('class_id') ? '' : 'disabled' }} class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2 px-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none {{ request('class_id') ? '' : 'opacity-50' }}">
                    <option value="">All Sections</option>
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-wider mb-1">Subject</label>
                <select name="subject_id" id="filterSubject" {{ request('class_id') ? '' : 'disabled' }} class="w-full bg-slate-50 border border-slate-200 rounded-lg py-2 px-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none {{ request('class_id') ? '' : 'opacity-50' }}">
                    <option value="">All Subjects</option>
                </select>
            </div>
            <div class="col-span-2 md:col-span-3 xl:col-span-2 flex items-end gap-2">
                <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-xs font-black uppercase tracking-wider shadow transition-colors">
                    <i class="fa-solid fa-filter mr-1"></i> Apply
                </button>
                <a href="{{ route('school.homework.index') }}" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg text-xs font-bold uppercase transition-colors">Clear</a>
            </div>
        </form>
    </div>

    {{-- Desktop Table --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Homework</th>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Subject</th>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Sender</th>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest">Date</th>
                        <th class="px-5 py-3.5 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($homeworks as $hw)
                    <tr class="hover:bg-slate-50/60 transition-colors {{ ($hw->unread_replies ?? 0) > 0 ? 'bg-red-50/30' : '' }}">
                        <td class="px-5 py-4">
                            <span class="px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider
                                {{ $hw->status == 'published' ? 'bg-emerald-100 text-emerald-700' : ($hw->status == 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                                {{ $hw->status }}
                            </span>
                        </td>
                        <td class="px-5 py-4 max-w-xs">
                            <p class="font-bold text-slate-800 text-sm truncate flex items-center gap-2">
                                {{ $hw->title ?: 'Untitled Broadcast' }}
                                @if(($hw->unread_replies ?? 0) > 0)
                                    <span class="bg-red-500 text-white text-[8px] font-black px-1.5 py-0.5 rounded uppercase animate-pulse">NEW</span>
                                @endif
                            </p>
                            <p class="text-xs text-slate-500 truncate mt-0.5">
                                {{ $hw->message }}
                                @if($hw->attachment) <i class="fa-solid fa-paperclip text-indigo-400 ml-1"></i> @endif
                            </p>
                        </td>
                        <td class="px-5 py-4 text-xs font-bold text-slate-600">{{ $hw->subject_name ?? 'General' }}</td>
                        <td class="px-5 py-4">
                            <p class="text-xs font-bold text-slate-700">{{ $hw->staff_name }}</p>
                            <p class="text-[10px] text-slate-400 uppercase">{{ $hw->designation }}</p>
                        </td>
                        <td class="px-5 py-4 text-xs font-bold text-slate-500 whitespace-nowrap">{{ \Carbon\Carbon::parse($hw->created_at)->format('d M, Y') }}</td>
                        <td class="px-5 py-4">
                            <div class="flex items-center justify-end gap-1.5">
                                {{-- ✅ UNREAD COUNT BADGE --}}
                                @if(($hw->unread_replies ?? 0) > 0)
                                <a href="{{ route('school.homework.show', $hw->id) }}" title="View Unread Messages"
                                   class="relative inline-flex items-center justify-center min-w-[28px] h-7 px-2 bg-red-500 text-white text-[10px] font-black rounded-lg shadow-md hover:bg-red-600 transition-colors">
                                    {{ $hw->unread_replies }}
                                    <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-400 rounded-full animate-ping"></span>
                                </a>
                                @endif
                                
                                <a href="{{ route('school.homework.show', $hw->id) }}" title="View"
                                   class="w-8 h-8 rounded-lg bg-slate-100 hover:bg-indigo-100 hover:text-indigo-600 text-slate-500 flex items-center justify-center transition-colors">
                                    <i class="fa-solid fa-eye text-xs"></i>
                                </a>
                                @if($hw->status == 'pending')
                                <form action="{{ route('school.homework.approve', $hw->id) }}" method="POST">@csrf @method('PATCH')
                                    <button title="Approve & Publish" class="w-8 h-8 rounded-lg bg-emerald-100 hover:bg-emerald-200 text-emerald-600 flex items-center justify-center transition-colors">
                                        <i class="fa-solid fa-check text-xs"></i>
                                    </button>
                                </form>
                                <form action="{{ route('school.homework.reject', $hw->id) }}" method="POST">@csrf @method('PATCH')
                                    <button title="Reject" class="w-8 h-8 rounded-lg bg-amber-100 hover:bg-amber-200 text-amber-600 flex items-center justify-center transition-colors">
                                        <i class="fa-solid fa-xmark text-xs"></i>
                                    </button>
                                </form>
                                @endif
                                <form action="{{ route('school.homework.destroy', $hw->id) }}" method="POST" onsubmit="return confirm('Delete this homework permanently?');">@csrf @method('DELETE')
                                    <button title="Delete" class="w-8 h-8 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 flex items-center justify-center transition-colors">
                                        <i class="fa-solid fa-trash text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-5 py-20 text-center">
                            <i class="fa-solid fa-inbox text-4xl text-slate-200 mb-3"></i>
                            <p class="text-slate-500 font-bold text-sm">No broadcasts found.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">{{ $homeworks->links() }}</div>
    </div>
</div>

{{-- Cascading Filter Script --}}
<script>
    const SECTIONS = @json($sections ?? []);
    const SUBJECTS = @json($subjects ?? []);
    const fClass = document.getElementById('filterClass');
    const fSection = document.getElementById('filterSection');
    const fSubject = document.getElementById('filterSubject');
    const keptSection = "{{ request('section_id') }}";
    const keptSubject = "{{ request('subject_id') }}";

    function populate(classId, keepSection, keepSubject) {
        const enabled = !!classId;
        fSection.innerHTML = '<option value="">All Sections</option>';
        fSubject.innerHTML = '<option value="">All Subjects</option>';
        if (enabled) {
            SECTIONS.filter(s => String(s.class_id) === String(classId)).forEach(s => {
                const o = document.createElement('option');
                o.value = s.id; o.textContent = s.name;
                if (keepSection && String(s.id) === String(keepSection)) o.selected = true;
                fSection.appendChild(o);
            });
            SUBJECTS.filter(s => String(s.class_id) === String(classId)).forEach(s => {
                const o = document.createElement('option');
                o.value = s.id; o.textContent = s.name;
                if (keepSubject && String(s.id) === String(keepSubject)) o.selected = true;
                fSubject.appendChild(o);
            });
        }
        fSection.disabled = !enabled;
        fSubject.disabled = !enabled;
        fSection.classList.toggle('opacity-50', !enabled);
        fSubject.classList.toggle('opacity-50', !enabled);
    }
    populate(fClass.value, keptSection, keptSubject);
    fClass.addEventListener('change', () => populate(fClass.value, null, null));
</script>
@endsection