@extends('staff.layouts.app')
@section('title', 'Edit Notice')
@section('content')
<div class="max-w-3xl mx-auto px-4 py-6 pb-24">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-extrabold text-slate-800">Edit Notice</h1>
            <p class="text-xs text-slate-500 mt-0.5">Update the announcement details below.</p>
        </div>
        <a href="{{ route('staff.notice.list', ['slug' => session('staff_school_slug')]) }}" class="text-xs font-bold text-slate-500 hover:text-slate-700 flex items-center gap-1">
            <i class="fa-solid fa-arrow-left"></i> Back to List
        </a>
    </div>

    <form action="{{ route('staff.notice.update', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5">
        @csrf
        @method('PUT')

        <!-- Title & Category -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="md:col-span-2">
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Notice Title</label>
                <input type="text" name="title" value="{{ old('title', $notice->title) }}" required 
                       class="w-full px-3 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
            </div>
            <div>
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Category</label>
                <select name="category" required class="w-full px-3 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
                    @foreach(['General','Urgent','Holiday','Exam','Meeting','Other'] as $cat)
                        <option value="{{ $cat }}" {{ old('category', $notice->category) == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Content -->
        <div>
            <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Notice Content</label>
            <textarea name="content" rows="5" required 
                      class="w-full px-3 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all resize-none">{{ old('content', $notice->content) }}</textarea>
        </div>

        <!-- Target Audience -->
        <div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
            <label class="text-[10px] text-slate-400 uppercase font-bold mb-3 block">Target Audience</label>
            <div class="flex gap-6 mb-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="target_type" value="all" {{ old('target_type', $targetType) == 'all' ? 'checked' : '' }} onchange="toggleTargets(false)" class="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-slate-300">
                    <span class="text-sm font-bold text-slate-700">All Staff & Teachers</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="target_type" value="specific" {{ old('target_type', $targetType) == 'specific' ? 'checked' : '' }} onchange="toggleTargets(true)" class="w-4 h-4 text-indigo-600 focus:ring-indigo-500 border-slate-300">
                    <span class="text-sm font-bold text-slate-700">Specific Classes / Sections</span>
                </label>
            </div>

            <div id="specific-targets" class="{{ old('target_type', $targetType) == 'specific' ? '' : 'hidden' }} grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Select Classes</label>
                    <select name="class_ids[]" id="class_ids_select" multiple onchange="filterSectionsByClass()" class="w-full px-3 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none bg-white h-32">
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ in_array($class->id, old('class_ids', $targetClassIds)) ? 'selected' : '' }}>{{ $class->name }}</option>
                        @endforeach
                    </select>
                    <p class="text-[10px] text-slate-400 mt-1">Hold Ctrl/Cmd to select multiple</p>
                </div>
                <div>
                    <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">
                        Select Sections <span class="text-slate-300 normal-case font-normal">(filtered by class)</span>
                    </label>
                    <select name="section_ids[]" id="section_ids_select" multiple class="w-full px-3 py-2.5 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none bg-white h-32">
                        {{-- Options populated by JavaScript --}}
                    </select>
                    <p class="text-[10px] text-slate-400 mt-1" id="section-hint">Sections will appear after selecting classes</p>
                </div>
            </div>
        </div>

        <!-- Attachment & Options -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Attachment (Optional)</label>
                
                {{-- ✅ FIX #4: Clean "Choose File" button with no filename text --}}
                <label class="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-bold rounded-xl cursor-pointer transition-all border border-indigo-100">
                    <i class="fa-solid fa-upload"></i>
                    <span id="file-label-text">Choose File</span>
                    <input type="file" name="attachment" id="attachment-input" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.webp,.gif" class="hidden" onchange="updateFileName(this)">
                </label>
                
                @if($notice->attachment)
                <div class="mt-2 p-2 bg-slate-50 rounded-lg border border-slate-100 flex items-center gap-2">
                    <i class="fa-solid fa-paperclip text-slate-400 text-xs"></i>
                    <span class="text-[11px] text-slate-600 truncate">Current: {{ basename($notice->attachment) }}</span>
                    <span class="text-[10px] text-slate-400">(upload new to replace)</span>
                </div>
                @endif
                
                <p class="text-[10px] text-slate-400 mt-1">Max 10MB. Images auto-compressed.</p>
            </div>
            <div class="space-y-3 pt-2">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_pinned" value="1" {{ old('is_pinned', $notice->is_pinned) ? 'checked' : '' }} onchange="togglePinnedUntil(this.checked)" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500 border-slate-300">
                    <span class="text-sm font-bold text-slate-700">Pin to Top of List</span>
                </label>
                <div id="pinned-until-wrapper" class="{{ old('is_pinned', $notice->is_pinned) ? '' : 'hidden' }}">
                    <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Unpin Date</label>
                    <input type="date" name="pinned_until" value="{{ old('pinned_until', $notice->pinned_until ? \Carbon\Carbon::parse($notice->pinned_until)->format('Y-m-d') : '') }}" class="w-full px-3 py-2 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none">
                </div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_popup" value="1" {{ old('is_popup', $notice->is_popup) ? 'checked' : '' }} class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500 border-slate-300">
                    <span class="text-sm font-bold text-slate-700">Show as Popup on Login</span>
                </label>
            </div>
        </div>

        <!-- Submit -->
        <div class="pt-4 border-t border-slate-100 flex gap-3">
            <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold py-3 rounded-xl transition-all active:scale-95 shadow-sm shadow-indigo-200">
                <i class="fa-solid fa-save mr-1"></i> Update Notice
            </button>
            <a href="{{ route('staff.notice.list', ['slug' => session('staff_school_slug')]) }}" class="px-6 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-bold py-3 rounded-xl transition-all text-center">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
// ✅ All sections & classes data for client-side filtering
const allSections = @json($sections);
const allClasses = @json($classes);

// ✅ Previously saved section IDs (for edit form) - converted to strings for reliable comparison
const savedSectionIds = @json(old('section_ids', $targetSectionIds)).map(String);

function toggleTargets(show) {
    const el = document.getElementById('specific-targets');
    if (show) {
        el.classList.remove('hidden');
        filterSectionsByClass();
    } else {
        el.classList.add('hidden');
    }
}

function togglePinnedUntil(show) {
    const el = document.getElementById('pinned-until-wrapper');
    if (show) {
        el.classList.remove('hidden');
    } else {
        el.classList.add('hidden');
        el.querySelector('input').value = '';
    }
}

// ✅ Filter sections based on selected classes (preserves saved selections)
function filterSectionsByClass() {
    const classSelect = document.getElementById('class_ids_select');
    const sectionSelect = document.getElementById('section_ids_select');
    const hint = document.getElementById('section-hint');

    // Get selected class IDs as strings
    const selectedClassIds = Array.from(classSelect.selectedOptions).map(opt => String(opt.value));

    sectionSelect.innerHTML = '';

    if (selectedClassIds.length === 0) {
        // No classes selected - show all sections
        allSections.forEach(s => {
            const className = allClasses.find(c => String(c.id) === String(s.class_id))?.name || 'Class ' + s.class_id;
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = s.name + ' — ' + className;
            
            // ✅ Restore previously saved selection
            if (savedSectionIds.includes(String(s.id))) {
                opt.selected = true;
            }
            sectionSelect.appendChild(opt);
        });
        hint.textContent = 'Showing all sections (select classes to filter)';
    } else {
        // Filter sections by selected classes
        const filtered = allSections.filter(s => selectedClassIds.includes(String(s.class_id)));

        if (filtered.length === 0) {
            const opt = document.createElement('option');
            opt.disabled = true;
            opt.textContent = 'No sections for selected classes';
            sectionSelect.appendChild(opt);
            hint.textContent = 'No sections found for selected classes';
        } else {
            // Group by class for better UX
            selectedClassIds.forEach(classId => {
                const classSections = filtered.filter(s => String(s.class_id) === classId);
                if (classSections.length === 0) return;

                const className = allClasses.find(c => String(c.id) === classId)?.name || 'Class ' + classId;

                // Add class header (disabled option as group label)
                const header = document.createElement('option');
                header.disabled = true;
                header.textContent = '── ' + className + ' ──';
                header.className = 'text-[10px] font-bold text-indigo-600 bg-indigo-50';
                sectionSelect.appendChild(header);

                // Add sections under this class
                classSections.forEach(s => {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    opt.textContent = '  ' + s.name;
                    
                    // ✅ Restore previously saved selection
                    if (savedSectionIds.includes(String(s.id))) {
                        opt.selected = true;
                    }
                    sectionSelect.appendChild(opt);
                });
            });
            hint.textContent = filtered.length + ' section(s) available for ' + selectedClassIds.length + ' class(es)';
        }
    }
}

// ✅ Initialize on load (restores saved selections for edit form)
document.addEventListener('DOMContentLoaded', function() {
    filterSectionsByClass();
});
</script>
@endsection