@extends('school.layouts.app')
@section('content')
<style>
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #4f46e5; }
input:checked + .slider:before { transform: translateX(20px); }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>

@php
    // Extract pre-selected IDs for Edit Mode
    $selectedClassIds = $targets->pluck('class_id')->filter()->unique()->values()->toArray();
    $selectedSectionIds = $targets->pluck('section_id')->filter()->unique()->values()->toArray();
@endphp

<div class="flex flex-col gap-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Edit Notice</h2>
            <p class="text-slate-500 text-sm font-medium">Update the details and targeting of your announcement.</p>
        </div>
        <a href="{{ route('school.communication.notices') }}" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-2">
            <i class="fa-solid fa-arrow-left"></i> Back to Board
        </a>
    </div>

    <!-- Main Form Card -->
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <form action="{{ route('school.communication.updateNotice', $notice->id) }}" method="POST" enctype="multipart/form-data" class="p-8">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                <!-- LEFT COLUMN: Content -->
                <div class="lg:col-span-3 space-y-6">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Notice Title</label>
                        <input type="text" name="title" value="{{ $notice->title }}" class="w-full px-4 py-2.5 text-sm rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Content</label>
                        <textarea name="content" rows="8" class="w-full px-4 py-2.5 text-sm rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none transition-all resize-none" required>{{ $notice->content }}</textarea>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Update Attachment</label>
                        <input type="file" name="attachment" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 file:cursor-pointer">
                        @if($notice->attachment)
                            <div class="mt-2 flex items-center gap-2 text-xs text-indigo-600 font-medium bg-indigo-50 p-2 rounded-lg w-fit">
                                <i class="fa-solid fa-circle-info"></i> Current file: 
                                <a href="{{ asset('storage/'.$notice->attachment) }}" target="_blank" class="underline hover:text-indigo-800">View/Download</a>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- RIGHT COLUMN: Targeting & Settings -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Category</label>
                            <select name="category" class="w-full px-3 py-2.5 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 bg-white">
                                @foreach(['General', 'Academic', 'Event', 'Urgent', 'Holiday'] as $cat)
                                    <option value="{{ $cat }}" {{ $notice->category == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Audience</label>
                            @php $selectedAudience = explode(',', $notice->target_audience); @endphp
                            <select id="targetAudience_edit"
                                        name="target_audience"
                                        class="w-full px-3 py-2.5 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 bg-white">

                                    <option value="All"
                                        {{ $notice->target_audience == 'All' ? 'selected' : '' }}>
                                        All
                                    </option>

                                    <option value="Students"
                                        {{ $notice->target_audience == 'Students' ? 'selected' : '' }}>
                                        Students
                                    </option>

                                    <option value="Teachers"
                                        {{ $notice->target_audience == 'Teachers' ? 'selected' : '' }}>
                                        Teachers
                                    </option>

                                </select>
                        </div>
                    </div>

                    <!-- PREMIUM MULTI-SELECT: CLASSES (EDIT MODE) -->
                    <div class="relative custom-multi-wrapper" id="classSelectWrapper_edit">
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Target Classes</label>
                        <div id="classBox_edit"
     onclick="toggleDropdown('classDropdown_edit')"
     class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 focus-within:ring-2 focus-within:ring-indigo-500 outline-none bg-white cursor-pointer flex flex-wrap gap-1.5 min-h-[42px] items-center transition-all">
                            <span id="classPlaceholder_edit" class="text-slate-400 text-xs">Select Classes...</span>
                            <div id="classTags_edit" class="flex flex-wrap gap-1.5"></div>
                            <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px] pointer-events-none"></i>
                        </div>
                        <div id="classDropdown_edit" class="hidden custom-multi-dropdown absolute z-50 w-full mt-2 bg-white border border-slate-200 rounded-2xl shadow-2xl overflow-hidden">
                            <div class="p-2 border-b border-slate-100 bg-slate-50/50">
                                <div class="relative">
                                    <input type="text" id="classSearch_edit" placeholder="Search classes..." class="w-full pl-8 pr-3 py-2 text-xs rounded-lg border border-slate-200 outline-none focus:ring-1 focus:ring-indigo-500 bg-white" onclick="event.stopPropagation()" oninput="filterOptions('class', 'edit')">
                                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]"></i>
                                </div>
                            </div>
                            <div class="max-h-52 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                                <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-indigo-50 cursor-pointer text-xs font-bold text-indigo-600 border-b border-slate-100 mb-1 pb-2">
                                    <input type="checkbox" id="selectAllClasses_edit" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" onchange="toggleAll('class', 'edit', this)">
                                    Select All Classes
                                </label>
                                @foreach($classes as $class)
                                    <label class="class-option class-option-edit flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-50 cursor-pointer text-xs text-slate-700 transition-colors" data-name="{{ strtolower($class->name) }}">
                                        <input type="checkbox" name="selected_classes[]" value="{{ $class->id }}" class="class-checkbox class-checkbox-edit rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" {{ in_array($class->id, $selectedClassIds) ? 'checked' : '' }} onchange="updateTags('class', 'edit')">
                                        <span class="select-text">{{ $class->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- PREMIUM MULTI-SELECT: SECTIONS (EDIT MODE) -->
                    <div class="relative custom-multi-wrapper" id="sectionSelectWrapper_edit">
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1 tracking-wider">Target Sections</label>
                        <div id="sectionBox_edit"
     class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 focus-within:ring-2 focus-within:ring-indigo-500 outline-none bg-white cursor-pointer flex flex-wrap gap-1.5 min-h-[42px] items-center transition-all"
     onclick="toggleDropdown('sectionDropdown_edit')">
                            <span id="sectionPlaceholder_edit" class="text-slate-400 text-xs">Select Sections...</span>
                            <div id="sectionTags_edit" class="flex flex-wrap gap-1.5"></div>
                            <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px] pointer-events-none"></i>
                        </div>
                        <div id="sectionDropdown_edit" class="hidden custom-multi-dropdown absolute z-50 w-full mt-2 bg-white border border-slate-200 rounded-2xl shadow-2xl overflow-hidden">
                            <div class="p-2 border-b border-slate-100 bg-slate-50/50">
                                <div class="relative">
                                    <input type="text" id="sectionSearch_edit" placeholder="Search sections..." class="w-full pl-8 pr-3 py-2 text-xs rounded-lg border border-slate-200 outline-none focus:ring-1 focus:ring-indigo-500 bg-white" onclick="event.stopPropagation()" oninput="filterOptions('section', 'edit')">
                                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]"></i>
                                </div>
                            </div>
                            <div class="max-h-52 overflow-y-auto p-2 space-y-1 custom-scrollbar">
                                <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-indigo-50 cursor-pointer text-xs font-bold text-indigo-600 border-b border-slate-100 mb-1 pb-2">
                                    <input type="checkbox" id="selectAllSections_edit" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" onchange="toggleAll('section', 'edit', this)">
                                    Select All Sections
                                </label>
                                @foreach($sections as $section)
                                    <label class="section-option section-option-edit flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-50 cursor-pointer text-xs text-slate-700 transition-colors" data-name="{{ strtolower($section->name) }}" data-class-id="{{ $section->class_id }}">
                                        <input type="checkbox" name="selected_sections[]" value="{{ $section->id }}" class="section-checkbox section-checkbox-edit rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" {{ in_array($section->id, $selectedSectionIds) ? 'checked' : '' }} onchange="updateTags('section', 'edit')">
                                        <span class="select-text">{{ $section->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Visibility Settings -->
                    <div class="bg-slate-50 p-5 rounded-2xl space-y-4 border border-slate-100">
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-medium text-slate-700">Show as Pop-up/Banner</span>
                            <label class="switch"><input type="checkbox" name="is_popup" {{ $notice->is_popup ? 'checked' : '' }}><span class="slider"></span></label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-medium text-slate-700">Pin to Top</span>
                            <label class="switch"><input type="checkbox" name="is_pinned" id="pinToggle_edit" {{ $notice->is_pinned ? 'checked' : '' }}><span class="slider"></span></label>
                        </div>
                        <div id="pinDateDiv_edit" class="{{ $notice->is_pinned ? '' : 'hidden' }} transition-all">
                            <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Pin Until Date</label>
                            <input type="date" name="pinned_until" value="{{ $notice->pinned_until }}" class="w-full px-3 py-2 text-xs rounded-lg border border-slate-200 outline-none focus:ring-1 focus:ring-indigo-500">
                        </div>
                    </div>
                    
                    <!-- Save Button -->
                    <div class="flex justify-end pt-4">
                        <button type="submit" class="px-10 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all flex items-center gap-2">
                            <i class="fa-solid fa-check"></i> Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
// --- PREMIUM MULTI-SELECT LOGIC (EDIT MODE) ---
function toggleDropdown(id) {
    const dropdown = document.getElementById(id);
    const isHidden = dropdown.classList.contains('hidden');
    document.querySelectorAll('.custom-multi-dropdown').forEach(d => d.classList.add('hidden'));
    if(isHidden) dropdown.classList.remove('hidden');
}

window.addEventListener('click', function(e) {
    if (!e.target.closest('.custom-multi-wrapper')) {
        document.querySelectorAll('.custom-multi-dropdown').forEach(d => d.classList.add('hidden'));
    }
});

function updateTags(type, prefix) {
    const checkboxes = document.querySelectorAll(`.${type}-checkbox-${prefix}`);
    const tagsContainer = document.getElementById(`${type}Tags_${prefix}`);
    const placeholder = document.getElementById(`${type}Placeholder_${prefix}`);
    const selectAll = document.getElementById(`selectAll${type.charAt(0).toUpperCase() + type.slice(1)}_${prefix}`);
    
    tagsContainer.innerHTML = '';
    let checkedCount = 0;
    
    checkboxes.forEach(cb => {
        if (cb.checked) {
            checkedCount++;
            const label = cb.closest('label').querySelector('.select-text').innerText.trim();
            const tag = document.createElement('span');
            tag.className = 'bg-indigo-100 text-indigo-700 text-[10px] font-bold px-2 py-1 rounded-md flex items-center gap-1.5 shadow-sm';
            tag.innerHTML = `${label} <i class="fa-solid fa-xmark cursor-pointer hover:text-indigo-900 text-[8px] opacity-70 hover:opacity-100"></i>`;
            tag.querySelector('i').addEventListener('click', (e) => {
                e.stopPropagation();
                cb.checked = false;
                updateTags(type, prefix);
            });
            tagsContainer.appendChild(tag);
        }
    });
    
    placeholder.style.display = checkedCount === 0 ? 'inline' : 'none';
    if(selectAll) selectAll.checked = checkedCount === checkboxes.length && checkboxes.length > 0;
    
    if(type === 'class') updateSections(prefix);
}

function toggleAll(type, prefix, el) {
    const checkboxes = document.querySelectorAll(`.${type}-checkbox-${prefix}`);
    checkboxes.forEach(cb => {
        if(cb.closest('label').style.display !== 'none') cb.checked = el.checked;
    });
    updateTags(type, prefix);
}

function filterOptions(type, prefix) {
    const searchInput = document.getElementById(`${type}Search_${prefix}`);
    const searchTerm = searchInput.value.toLowerCase();
    const options = document.querySelectorAll(`.${type}-option-${prefix}`);
    
    options.forEach(opt => {
        const name = opt.getAttribute('data-name');
        opt.style.display = name.includes(searchTerm) ? 'flex' : 'none';
    });
}

function updateSections(prefix) {
    const selectedClassIds = Array.from(document.querySelectorAll(`.class-checkbox-${prefix}:checked`)).map(cb => cb.value);
    const sectionOptions = document.querySelectorAll(`.section-option-${prefix}`);
    const totalClasses = document.querySelectorAll(`.class-checkbox-${prefix}`).length;
    const allClassesChecked = selectedClassIds.length === totalClasses;
    
    sectionOptions.forEach(opt => {
        const sectionClassId = opt.getAttribute('data-class-id');
        if (allClassesChecked || selectedClassIds.length === 0 || selectedClassIds.includes(sectionClassId)) {
            opt.style.display = 'flex';
        } else {
            opt.style.display = 'none';
            const cb = opt.querySelector('input');
            if(cb && cb.checked) cb.checked = false;
        }
    });
    updateTags('section', prefix);
}

// --- INITIALIZATION & EXISTING LOGIC ---
document.addEventListener('DOMContentLoaded', function() {


const pinToggle = document.getElementById('pinToggle_edit');
const pinDateDiv = document.getElementById('pinDateDiv_edit');
pinToggle.addEventListener('change', function() {
    const dateInput = pinDateDiv.querySelector('input');
    if(this.checked) { pinDateDiv.classList.remove('hidden'); dateInput.setAttribute('required', 'required'); } 
    else { pinDateDiv.classList.add('hidden'); dateInput.removeAttribute('required'); }
});

const audienceEdit = document.getElementById('targetAudience_edit');

function toggleStudentTargetFieldsEdit() {

    const isStudent = audienceEdit.value === "Students";

    // Classes
    const classBox = document.getElementById('classBox_edit');
    const classDropdown = document.getElementById('classDropdown_edit');
    const classCheckboxes = document.querySelectorAll('.class-checkbox-edit');

    // Sections
    const sectionBox = document.getElementById('sectionBox_edit');
    const sectionDropdown = document.getElementById('sectionDropdown_edit');
    const sectionCheckboxes = document.querySelectorAll('.section-checkbox-edit');

    if (isStudent) {

        if (classBox)
            classBox.classList.remove('opacity-50','pointer-events-none','bg-slate-100');

        if (sectionBox)
            sectionBox.classList.remove('opacity-50','pointer-events-none','bg-slate-100');

        classCheckboxes.forEach(cb => cb.disabled = false);
        sectionCheckboxes.forEach(cb => cb.disabled = false);

    } else {

        if (classBox)
            classBox.classList.add('opacity-50','pointer-events-none','bg-slate-100');

        if (sectionBox)
            sectionBox.classList.add('opacity-50','pointer-events-none','bg-slate-100');

        classDropdown.classList.add('hidden');
        sectionDropdown.classList.add('hidden');

        classCheckboxes.forEach(cb => {
            cb.checked = false;
            cb.disabled = true;
        });

        sectionCheckboxes.forEach(cb => {
            cb.checked = false;
            cb.disabled = true;
        });

        updateTags('class', 'edit');
        updateTags('section', 'edit');
    }
}

audienceEdit.addEventListener('change', toggleStudentTargetFieldsEdit);
toggleStudentTargetFieldsEdit();
// initialize tags
updateTags('class', 'edit');
updateTags('section', 'edit');

}); // DOMContentLoaded
</script>
@endsection