@extends('school.layouts.app')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<div class="flex flex-col gap-6">
    <!-- Header Section -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Bulk Broadcast Center</h2>
            <p class="text-slate-500 text-sm font-medium">Send urgent announcements to specific classes or the entire school instantly.</p>
        </div>
               <a href="{{ route('school.communication.broadcasts') }}" class="bg-slate-100 text-slate-600 px-4 py-2 rounded-lg text-xs font-bold flex items-center gap-2 hover:bg-slate-200 transition-all">
                    <i class="fa-solid fa-arrow-left"></i> Back to History
                </a>
    </div>

    <!-- Main Broadcast Card -->
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-100 bg-slate-50/50">
            <h3 class="font-bold text-slate-700 flex items-center gap-2">
                <i class="fa-solid fa-paper-plane text-indigo-600"></i> 
                Compose New Broadcast
            </h3>
        </div>

        <form action="{{ route('school.communication.sendBroadcast') }}" method="POST" class="p-8">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                
                <!-- COLUMN 1: CONTENT & ACTION -->
                <div class="flex flex-col gap-6">
                    <!-- Broadcast Message -->
                    <div class="flex flex-col gap-2">
                        <label class="block text-xs font-bold text-slate-500 uppercase">Broadcast Message</label>
                        <textarea name="message" rows="6" 
                            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... (e.g. Tomorrow is a holiday due to local festival)" required></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>
                        <div class="flex gap-3">
                            <label class="flex-1 cursor-pointer">
                                <input type="checkbox" name="channel[]" value="app" class="hidden peer" 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">
                                <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>
                    </div>

                    <!-- Send Button (Now inside Col 1) -->
                    <div class="flex flex-col items-center gap-3 pt-4">
                        <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-paper-plane"></i> Send Broadcast Now
                        </button>
                        <p class="text-[10px] text-slate-400 flex items-center gap-1">
                            <i class="fa-solid fa-circle-info"></i> This message will be delivered instantly.
                        </p>
                    </div>
                </div>

                <!-- COLUMN 2: TARGETING & CATEGORY -->
                <div class="flex flex-col gap-6">
                    
                    <!-- Category & Priority Row -->
                    <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">
                                <option value="General">General</option>
                                <option value="Academic">Academic</option>
                                <option value="Event">Event</option>
                                <option value="Urgent">Urgent</option>
                                <option value="Holiday">Holiday</option>
                            </select>
                        </div>
                        <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">
                           <option value="All" selected>All</option>
                            <option value="Teachers">Teachers</option>
                            <option value="Students">Students</option>
                            <option value="Parents">Parents</option>
                        </select>
                        <p class="text-[9px] text-slate-400 italic mt-1">Hold Ctrl (Cmd) for multiple selection</p>
                    </div>
                    </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="space-y-4 flex-1">
                            <div class="grid grid-cols-2 gap-4 flex-1">
                            <!-- LEFT: 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 }}">{{ $class->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- RIGHT: 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">
                                    <!-- Populated by JS -->
                                </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);
        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;
            sectionSelect.appendChild(option);
        });
    });
</script>

<script>
document.addEventListener('submit', function (e) {
    if (e.target.classList.contains('delete-form')) {
        e.preventDefault(); // Stop the form from submitting immediately
        const form = e.target;

        Swal.fire({
            title: 'Are you sure?',
            text: "This broadcast history record will be permanently deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#4f46e5', // Indigo 600
            cancelButtonColor: '#f43f5e', // Rose 500
            confirmButtonText: 'Yes, Delete it!',
            cancelButtonText: 'No, Keep it',
            background: '#ffffff',
            borderRadius: '20px',
            backdrop: `rgba(0,0,0,0.4)`,
            showClass: {
                popup: 'animate__animated animate__zoomIn' // 3D Zoom effect
            },
            hideClass: {
                popup: 'animate__animated animate__zoomOut'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, submit the form
                form.submit();
            }
        });
    }
});
</script>

@endsection