@extends('school.layouts.app')

@section('content')
<style>
    /* Professional Toggle Switch for consistency */
    .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); }
</style>

<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 Broadcast</h2>
            <p class="text-slate-500 text-sm font-medium">Update the details of your broadcast announcement.</p>
        </div>
        <a href="{{ route('school.communication.broadcasts') }}" class="bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-2 rounded-lg text-xs font-bold transition-all">
            <i class="fa-solid fa-arrow-left mr-1"></i> Back to History
        </a>
    </div>

    <!-- Main Edit Card -->
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <form action="{{ route('school.communication.updateBroadcast', $broadcast->id) }}" method="POST" class="p-8">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                
                <!-- LEFT COLUMN: Content & Channels -->
                <div class="flex flex-col gap-6">
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Broadcast Message</label>
                        <textarea name="message" rows="10" 
                            class="w-full px-4 py-3 text-sm rounded-2xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all placeholder:text-slate-300" 
                            placeholder="Write your announcement here..." required>{{ $broadcast->message }}</textarea>
                    </div>

                    <!-- Delivery Channels -->
                    <div class="bg-slate-50 p-5 rounded-2xl border border-slate-100">
                        <p class="text-[10px] font-bold text-slate-400 uppercase mb-3">Delivery Channels</p>
                        @php 
                            $channels = json_decode($broadcast->channels, true) ?? []; 
                        @endphp
                        <div class="flex gap-3">
                            <label class="flex-1 cursor-pointer">
                                <input type="checkbox" name="channel[]" value="app" class="hidden peer" {{ in_array('app', $channels) ? 'checked' : '' }}>
                                <div class="flex items-center justify-center gap-2 p-3 rounded-xl border-2 border-slate-100 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 transition-all text-sm font-medium text-slate-600 peer-checked:text-indigo-600">
                                    <i class="fa-solid fa-bell"></i> App Push
                                </div>
                            </label>
                            <label class="flex-1 cursor-pointer">
                                <input type="checkbox" name="channel[]" value="email" class="hidden peer" {{ in_array('email', $channels) ? 'checked' : '' }}>
                                <div class="flex items-center justify-center gap-2 p-3 rounded-xl border-2 border-slate-100 peer-checked:border-indigo-600 peer-checked:bg-indigo-50 transition-all text-sm font-medium text-slate-600 peer-checked:text-indigo-600">
                                    <i class="fa-solid fa-envelope"></i> Email
                                </div>
                            </label>
                        </div>
                        
                        <!-- Footer Actions -->
                        <div class="flex justify-end pt-8 border-t border-slate-100 mt-8">
                            <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-2xl text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all flex items-center justify-center gap-2">
                                <i class="fa-solid fa-save"></i> Save Changes
                            </button>
                        </div>
                    </div>
                </div>

                <!-- RIGHT COLUMN: Targeting & Settings -->
                <div class="flex flex-col gap-6">
                    <!-- Category & Priority -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Category</label>
                            <select name="category" class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                                @foreach(['General', 'Academic', 'Event', 'Urgent', 'Holiday'] as $cat)
                                    <option value="{{ $cat }}" {{ $broadcast->category == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Priority</label>
                            <select name="priority" class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                                @foreach(['Normal', 'High', 'Critical'] as $pri)
                                    <option value="{{ $pri }}" {{ $broadcast->priority == $pri ? 'selected' : '' }}>{{ $pri }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Target Audience -->
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Target Audience</label>
                        <select name="target_audience[]" multiple class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all h-24">
                            @php $selectedAudience = explode(',', $broadcast->target_audience); @endphp
                            @foreach(['All', 'Teachers', 'Students', 'Parents'] as $aud)
                                <option value="{{ $aud }}" {{ in_array($aud, $selectedAudience) ? 'selected' : '' }}>{{ $aud }}</option>
                            @endforeach
                        </select>
                        <p class="text-[9px] text-slate-400 italic mt-1">Hold Ctrl (Cmd) for multiple selection</p>
                    </div>

                    <!-- Target Groups Box -->
                    <div class="bg-indigo-50/50 p-5 rounded-2xl border border-indigo-100 flex-1 flex flex-col">
                        <div class="flex items-center gap-2 mb-4">
                            <i class="fa-solid fa-graduation-cap text-indigo-600 text-xs"></i>
                            <span class="text-xs font-bold text-indigo-800 uppercase">Target Groups</span>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 flex-1">
                            <!-- Classes -->
                            <div>
                                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Select Classes</label>
                                <select name="selected_classes[]" id="classSelect" multiple class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none h-32 focus:ring-2 focus:ring-indigo-500">
                                    @foreach($classes as $class)
                                        <option value="{{ $class->id }}" {{ $targets->where('class_id', $class->id)->first() ? 'selected' : '' }}>{{ $class->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Sections -->
                            <div>
                                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Select Sections</label>
                                <select name="selected_sections[]" id="sectionSelect" multiple class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none h-32 focus:ring-2 focus:ring-indigo-500">
                                    @foreach($sections as $section)
                                        <option value="{{ $section->id }}" {{ $targets->where('section_id', $section->id)->first() ? 'selected' : '' }}>{{ $section->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <p class="text-[9px] text-indigo-400 italic mt-4 text-center">Leave empty for "All Classes & Sections"</p>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>

<script>
    const sectionsData = @json($sections);
    const classSelect = document.getElementById('classSelect');
    const sectionSelect = document.getElementById('sectionSelect');

    classSelect.addEventListener('change', function() {
        const selectedClasses = Array.from(this.selectedOptions).map(opt => opt.value);
        
        // Store currently selected sections so they don't disappear during filter
        const currentSelected = Array.from(sectionSelect.selectedOptions).map(opt => opt.value);
        
        sectionSelect.innerHTML = '';

        const filteredSections = sectionsData.filter(sec => selectedClasses.includes(sec.class_id?.toString()));

        filteredSections.forEach(sec => {
            const option = document.createElement('option');
            option.value = sec.id;
            option.textContent = sec.name;
            if(currentSelected.includes(sec.id.toString())) {
                option.selected = true;
            }
            sectionSelect.appendChild(option);
        });
    });

    // Trigger filter on page load to hide irrelevant sections based on existing target classes
    document.addEventListener('DOMContentLoaded', function() {
        classSelect.dispatchEvent(new Event('change'));
    });
</script>
@endsection