@extends('staff.layouts.app')
@section('title', 'Create 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">Create New Notice</h1>
            <p class="text-xs text-slate-500 mt-0.5">Publish an announcement to staff or specific classes.</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 -->
    <form action="{{ route('staff.notice.store', ['slug' => session('staff_school_slug')]) }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5">
        @csrf

        <!-- 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') }}" required placeholder="e.g., Half-Day Holiday Tomorrow" 
                       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">
                    <option value="General" {{ old('category') == 'General' ? 'selected' : '' }}>General</option>
                    <option value="Urgent" {{ old('category') == 'Urgent' ? 'selected' : '' }}>Urgent</option>
                    <option value="Holiday" {{ old('category') == 'Holiday' ? 'selected' : '' }}>Holiday</option>
                    <option value="Exam" {{ old('category') == 'Exam' ? 'selected' : '' }}>Exam</option>
                    <option value="Meeting" {{ old('category') == 'Meeting' ? 'selected' : '' }}>Meeting</option>
                    <option value="Other" {{ old('category') == 'Other' ? 'selected' : '' }}>Other</option>
                </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 placeholder="Write the detailed announcement here..." 
                      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') }}</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" 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" 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="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', [])) ? '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">
                        <option value="" disabled>Select classes first to see sections</option>
                    </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 --}}
                <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>
                
                <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" onchange="togglePinnedUntil(this.checked)" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500 border-slate-300">
                    <span class="text-[12px] font-bold text-slate-700">Pin to Top of List</span>
                </label>
                <div id="pinned-until-wrapper" class="hidden">
                    <label class="text-[10px] text-slate-400 uppercase font-bold mb-1.5 block">Unpin Date</label>
                    <input type="date" name="pinned_until" 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" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500 border-slate-300">
                    <span class="text-[12px] font-bold text-slate-700">Show as Popup</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-paper-plane mr-1"></i> Publish 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 data passed from controller (for client-side filtering)
const allSections = @json($sections);
const allClasses = @json($classes);

function toggleTargets(show) {
    const el = document.getElementById('specific-targets');
    if (show) {
        el.classList.remove('hidden');
        filterSectionsByClass(); // Refresh sections when shown
    } 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 = '';
    }
}

// ✅ NEW: Filter sections based on selected classes
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
    const selectedClassIds = Array.from(classSelect.selectedOptions)
        .map(opt => opt.value);
    
    // Clear current sections
    sectionSelect.innerHTML = '';
    
    if (selectedClassIds.length === 0) {
        // No classes selected - show all sections grouped by class
        allSections.forEach(s => {
            const className = allClasses.find(c => c.id == s.class_id)?.name || 'Class ' + s.class_id;
            const opt = document.createElement('option');
            opt.value = s.id;
            opt.textContent = s.name + ' — ' + className;
            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(s.class_id.toString()));
        
        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 sections by class for better UX
            selectedClassIds.forEach(classId => {
                const classSections = filtered.filter(s => s.class_id.toString() === classId);
                if (classSections.length === 0) return;
                
                const className = allClasses.find(c => 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;
                    sectionSelect.appendChild(opt);
                });
            });
            hint.textContent = filtered.length + ' section(s) available for ' + selectedClassIds.length + ' class(es)';
        }
    }
}

// ✅ Initialize on page load (in case old() values exist)
document.addEventListener('DOMContentLoaded', function() {
    filterSectionsByClass();
});
</script>
@endsection