@extends('school.layouts.app')

@section('content')
{{-- 1. REQUIRED CDNS FOR THE WARNING ALERT --}}
<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 lg:flex-row justify-between items-start lg:items-center gap-4">
        <div class="flex flex-col">
            <h2 class="text-2xl font-bold text-slate-800">Broadcast History</h2>
            <p class="text-slate-500 text-sm font-medium">Review and manage all previous broadcast announcements.</p>
        </div>

        <div class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
            <!-- Filter Form -->
            <form action="{{ route('school.communication.broadcasts') }}" method="GET" class="flex flex-col sm:flex-row gap-3 items-end">
                <!-- Search -->
                <div class="relative w-full sm:w-64">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search broadcasts..." 
                        class="pl-9 pr-4 py-2 text-sm rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none w-full">
                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                </div>

                <!-- Date Filter -->
                <div class="relative w-full sm:w-40">
                    <select name="date_filter" id="dateFilter" onchange="toggleCustomDates()" 
                        class="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none appearance-none cursor-pointer bg-white">
                        <option value="">All Dates</option>
                        <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>Today</option>
                        <option value="week" {{ request('date_filter') == 'week' ? 'selected' : '' }}>This Week</option>
                        <option value="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Date</option>
                    </select>
                    <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>

                <!-- Custom Date Range -->
                <div id="customDateRange" class="{{ request('date_filter') == 'custom' ? '' : 'hidden' }} flex flex-col sm:flex-row gap-2 transition-all">
                    <div class="relative">
                        <label class="absolute -top-4 left-0 text-[9px] font-bold text-slate-400 uppercase">From</label>
                        <input type="date" name="from_date" value="{{ request('from_date') }}" class="px-3 py-2 text-sm rounded-xl border border-slate-200 outline-none">
                    </div>
                    <div class="relative">
                        <label class="absolute -top-4 left-0 text-[9px] font-bold text-slate-400 uppercase">To</label>
                        <input type="date" name="to_date" value="{{ request('to_date') }}" class="px-3 py-2 text-sm rounded-xl border border-slate-200 outline-none">
                    </div>
                </div>

                <button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-lg text-xs font-bold transition-all shadow-sm">
                    Filter
                </button>
            </form>

            <a href="{{ route('school.communication.broadcast') }}" 
                class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all shadow-sm whitespace-nowrap">
                <i class="fa-solid fa-plus"></i> Compose New
            </a>
        </div>
    </div>


    <!-- History Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($history as $item)
            <div class="bg-white border border-slate-200 p-5 rounded-3xl shadow-sm hover:shadow-md transition-all group relative">
                <!-- Category Badge -->
                <div class="flex justify-between items-start mb-4">
                    <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider 
                        {{ $item->category == 'Urgent' ? 'bg-red-100 text-red-600' : 'bg-indigo-100 text-indigo-600' }}">
                        {{ $item->category }}
                    </span>
                    <span class="text-slate-400 text-xs font-medium">
                        <i class="fa-regular fa-clock mr-1"></i> {{ \Carbon\Carbon::parse($item->created_at)->format('d M, Y H:i') }}
                    </span>
                </div>

                <!-- Priority Label -->
                <div class="flex items-center gap-2 mb-3">
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded border 
                        {{ $item->priority == 'Critical' ? 'border-red-300 text-red-500 bg-red-50' : ($item->priority == 'High' ? 'border-orange-300 text-orange-500 bg-orange-50' : 'border-slate-200 text-slate-500 bg-slate-50') }}">
                        {{ $item->priority }} Priority
                    </span>
                </div>

                <!-- Message -->
                <p class="text-slate-600 text-sm line-clamp-4 mb-4 leading-relaxed">
                    {{ $item->message }}
                </p>

                <!-- Footer -->
                <div class="flex items-center justify-between pt-4 border-t border-slate-50">
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-slate-400 flex items-center gap-1">
                            <i class="fa-solid fa-users"></i> {{ $item->target_audience }}
                        </span>
                    </div>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('school.communication.viewBroadcast', $item->id) }}" title="View" class="text-slate-400 hover:text-indigo-600 transition-colors"><i class="fa-solid fa-eye text-xs"></i></a>
                        <a href="{{ route('school.communication.editBroadcast', $item->id) }}" title="Edit" class="text-slate-400 hover:text-indigo-600 transition-colors"><i class="fa-solid fa-pen-to-square text-xs"></i></a>
                        {{-- The class 'delete-form' is what the JavaScript looks for --}}
                        <form action="{{ route('school.communication.deleteBroadcast', $item->id) }}" method="POST" class="delete-form">
                            @csrf @method('DELETE')
                            <button title="Delete" class="text-slate-400 hover:text-red-600 transition-colors"><i class="fa-solid fa-trash-can text-xs"></i></button>
                        </form>
                    </div>
                </div>

            </div>
        @empty
            <div class="col-span-full text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
                <i class="fa-solid fa-paper-plane text-4xl text-slate-300 mb-3"></i>
                <p class="text-slate-500 text-sm">No broadcast history found.</p>
            </div>
        @endforelse
    </div>
</div>

{{-- 2. THE JAVASCRIPT TO INTERCEPT DELETE AND SHOW THE 3D WARNING --}}
<script>

        function toggleCustomDates() {
        const filter = document.getElementById('dateFilter').value;
        const customDiv = document.getElementById('customDateRange');
        if (filter === 'custom') {
            customDiv.classList.remove('hidden');
        } else {
            customDiv.classList.add('hidden');
        }
    }

    document.querySelector('form[action*="broadcasts"]').addEventListener('submit', function(e) {
        const filter = document.getElementById('dateFilter').value;
        if (filter === 'custom') {
            const fromDate = document.getElementsByName('from_date')[0].value;
            const toDate = document.getElementsByName('to_date')[0].value;

            if (fromDate && toDate && fromDate > toDate) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Date Range',
                    text: 'The "To Date" cannot be earlier than the "From Date".',
                    confirmButtonColor: '#4f46e5',
                    borderRadius: '20px'
                });
            }
        }
    });

document.addEventListener('submit', function (e) {
    if (e.target.classList.contains('delete-form')) {
        e.preventDefault(); // STOP the form from deleting 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) {
                // Only if the user clicks "Yes", we submit the form
                form.submit();
            }
        });
    }
});
</script>
@endsection