@extends('school.layouts.app')

@section('content')
<!-- COMBINED HEADER & STATS ROW -->
<div class="mb-4">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        
        <!-- 1. Title Section -->
        <div class="shrink-0">
            <h1 class="text-xl font-bold text-slate-800 leading-tight">Admission Enquiries</h1>
            <p class="text-xs text-slate-500">Manage and track all admission enquiries</p>
        </div>

        <!-- 2. Stats Cards (Now in the middle) -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 flex-1 max-w-3xl">
            <div class="bg-white rounded-lg border border-slate-200 p-2 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-[9px] font-bold text-slate-400 uppercase">Total</p>
                    <p class="text-sm font-extrabold text-slate-800">{{ $stats['total'] }}</p>
                </div>
                <div class="w-7 h-7 bg-indigo-50 rounded-md flex items-center justify-center">
                    <i class="fa-solid fa-users text-indigo-600 text-[10px]"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg border border-slate-200 p-2 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-[9px] font-bold text-slate-400 uppercase">Today</p>
                    <p class="text-sm font-extrabold text-blue-600">{{ $stats['today'] }}</p>
                </div>
                <div class="w-7 h-7 bg-blue-50 rounded-md flex items-center justify-center">
                    <i class="fa-solid fa-calendar-day text-blue-600 text-[10px]"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg border border-slate-200 p-2 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-[9px] font-bold text-slate-400 uppercase">Pending</p>
                    <p class="text-sm font-extrabold text-amber-600">{{ $stats['new'] }}</p>
                </div>
                <div class="w-7 h-7 bg-amber-50 rounded-md flex items-center justify-center">
                    <i class="fa-solid fa-clock text-amber-600 text-[10px]"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg border border-slate-200 p-2 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-[9px] font-bold text-slate-400 uppercase">Admitted</p>
                    <p class="text-sm font-extrabold text-emerald-600">{{ $stats['admitted'] }}</p>
                </div>
                <div class="w-7 h-7 bg-emerald-50 rounded-md flex items-center justify-center">
                    <i class="fa-solid fa-check-circle text-emerald-600 text-[10px]"></i>
                </div>
            </div>
        </div>

        <!-- 3. Action Button -->
        <div class="shrink-0">
            <a href="{{ route('school.admissions.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-xl font-bold text-sm hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 whitespace-nowrap">
                <i class="fa-solid fa-plus"></i> New Enquiry
            </a>
        </div>
    </div>
</div>

<!-- 🔍 UNIFIED FILTER BAR -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 mb-3">
    <div class="flex flex-col gap-2">
        <!-- Row 1: Main Filters -->
        <div class="flex flex-wrap gap-2 items-center">
            <!-- Global Search -->
            <div class="relative flex-1 min-w-[200px] max-w-sm">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                <input type="text" id="globalSearch" placeholder="Search name, contact, email..." 
                    class="w-full pl-8 pr-3 py-2 rounded-lg border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 outline-none">
            </div>

            
           <select id="sessionFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-indigo-500 outline-none min-w-[130px]">
                <option value="">All Sessions</option>
                @foreach($sessions as $session)
                    <option value="{{ $session->id }}" {{ $selectedSessionId == $session->id ? 'selected' : '' }}>
                        {{ $session->session_name }}
                    </option>
                @endforeach
            </select>
            
            <!-- Quick Filters -->
            <select id="classFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-indigo-500 outline-none min-w-[120px]">
                <option value="">All Classes</option>
                @foreach($classes as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
            
            <select id="statusFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-indigo-500 outline-none min-w-[120px]">
                <option value="">All Status</option>
                @foreach($statuses as $status)
                    <option value="{{ $status }}">{{ $status }}</option>
                @endforeach
            </select>
            
            <select id="sourceFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-indigo-500 outline-none min-w-[120px]">
                <option value="">All Sources</option>
                @foreach($sources as $source)
                    <option value="{{ $source }}">{{ $source }}</option>
                @endforeach
            </select>
            
            <select id="genderFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white focus:ring-2 focus:ring-indigo-500 outline-none min-w-[100px]">
                <option value="">All Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
            


        </div>
        
       <!-- Row 2: Date Range + Actions -->
        <div class="flex flex-wrap gap-2 items-center justify-between border-t border-slate-100 pt-3">
            <div class="flex gap-2 items-center">
                <span class="text-xs font-bold text-slate-400 uppercase">Date Range</span>
                
                <!-- Added onclick="this.showPicker()" here -->
                <input type="date" id="dateFrom" onclick="this.showPicker()" 
                    class="px-3 py-1.5 rounded-lg border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                
                <span class="text-xs text-slate-400">to</span>
                
                <!-- Added onclick="this.showPicker()" here -->
                <input type="date" id="dateTo" onclick="this.showPicker()" 
                    class="px-3 py-1.5 rounded-lg border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                
                <!-- Quick Date Presets -->
                <button onclick="setDateRange('today')" class="px-2 py-1 rounded-md text-[10px] font-bold bg-slate-100 text-slate-600 hover:bg-indigo-100 hover:text-indigo-600 transition-all">Today</button>
                <button onclick="setDateRange('week')" class="px-2 py-1 rounded-md text-[10px] font-bold bg-slate-100 text-slate-600 hover:bg-indigo-100 hover:text-indigo-600 transition-all">This Week</button>
                <button onclick="setDateRange('month')" class="px-2 py-1 rounded-md text-[10px] font-bold bg-slate-100 text-slate-600 hover:bg-indigo-100 hover:text-indigo-600 transition-all">This Month</button>
            </div>
            
            <div class="flex gap-2">
                <button onclick="applyFilters()" class="px-4 py-1.5 bg-indigo-600 text-white rounded-lg text-xs font-bold hover:bg-indigo-700 transition-all shadow-sm">
                    <i class="fa-solid fa-filter mr-1"></i> Apply
                </button>
                <button onclick="resetFilters()" class="px-4 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-bold hover:bg-slate-50 transition-all">
                    <i class="fa-solid fa-rotate-left mr-1"></i> Reset
                </button>
            </div>
        </div>

        <!-- Active Filters Tags -->
        <div id="activeFilters" class="hidden flex flex-wrap gap-1.5 items-center border-t border-slate-100 pt-2">
            <span class="text-[10px] font-bold text-slate-400 uppercase mr-1">Active:</span>
            <!-- Tags will be injected here by JS -->
        </div>
    </div>
</div>

<!-- DataTable -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-x-auto">
    <table id="enquiriesTable" class="w-full text-xs">
        <thead class="bg-slate-50 border-b border-slate-200">
            <tr>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Sr. No.</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Enquiry No.</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Student</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Class</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Gender</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Contact</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Source</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Status</th>
                <th class="px-3 py-2.5 text-left font-bold text-slate-500 uppercase tracking-wider">Date</th>
                <th class="px-3 py-2.5 text-center font-bold text-slate-500 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<!-- Document Preview Modal -->
<div id="docModal" class="fixed inset-0 z-50 hidden bg-slate-900/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl">
        <div class="p-4 flex justify-between items-center border-b border-slate-100">
            <h3 class="font-bold text-slate-800">Student Documents</h3>
            <button onclick="closeDocModal()" class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 hover:text-red-500 transition-all flex items-center justify-center">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="p-4 space-y-6 max-h-[80vh] overflow-y-auto">
            <!-- Student Photo Slot -->
            <div id="photoSlot" class="hidden">
                <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Student Photograph</p>
                <img id="photoPreviewImg" src="" class="w-full rounded-lg shadow-sm border border-slate-200" alt="Student Photo">
            </div>
            <!-- Scanned Document Slot -->
            <div id="docSlot" class="hidden">
                <p class="text-[10px] font-bold text-slate-400 uppercase mb-2">Scanned Document</p>
                <img id="docPreviewImg" src="" class="w-full rounded-lg shadow-sm border border-slate-200" alt="Document">
            </div>
        </div>
    </div>
</div>



<!-- Professional Follow-up Modal -->
<div id="followUpModal" class="fixed inset-0 z-[60] hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden shadow-2xl border border-slate-200">
        <div class="p-4 flex justify-between items-center border-b border-slate-100 bg-slate-50">
            <h3 class="font-bold text-slate-800 flex items-center gap-2">
                <i class="fa-solid fa-clock-rotate-left text-indigo-600"></i> Follow-up Management
            </h3>
            <button onclick="closeFollowUpModal()" class="w-6 h-6 rounded-full hover:bg-red-100 text-slate-400 hover:text-red-500 transition-all flex items-center justify-center">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="p-6 space-y-4">
            <input type="hidden" id="followUpId">
            
            <!-- Form Section -->
            <div id="followUpFormSection" class="space-y-4">
                <div>
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Follow-up Date</label>
                    <input type="date" id="followUpDate" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Remarks</label>
                    <textarea id="followUpRemarks" rows="3" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter discussion details..."></textarea>
                </div>
                <div class="flex justify-between gap-2 pt-2">
                    <button onclick="viewFollowUpHistory()" class="px-4 py-2 text-indigo-600 text-xs font-bold hover:bg-indigo-50 rounded-lg transition-all border border-indigo-100">
                        <i class="fa-solid fa-list mr-1"></i> View History
                    </button>
                    <div class="flex gap-2">
                        <button onclick="closeFollowUpModal()" class="px-4 py-2 text-slate-500 text-xs font-bold hover:bg-slate-100 rounded-lg transition-all">Cancel</button>
                        <button onclick="submitFollowUp()" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-lg hover:bg-indigo-700 transition-all shadow-md">Save Follow-up</button>
                    </div>
                </div>
            </div>

            <!-- History Section -->
            <div id="followUpHistorySection" class="hidden space-y-3">
                <div class="flex items-center justify-between mb-2">
                    <h4 class="text-xs font-bold text-slate-500 uppercase">Past Interactions</h4>
                    <div class="flex gap-2">
                        <button onclick="printFollowUpHistory()" class="text-[10px] text-emerald-600 font-bold hover:underline">
                            <i class="fa-solid fa-print mr-1"></i> Print
                        </button>
                        <button onclick="toggleFollowUpView('form')" class="text-[10px] text-indigo-600 font-bold hover:underline">Back to Add New</button>
                    </div>
                </div>
                <div id="historyContainer" class="max-h-60 overflow-y-auto space-y-2 pr-2"></div>
            </div>

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

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    /* BIG TOAST ALERTS */
    .swal2-toast-custom {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        padding: 1.2rem 2rem !important;
        min-width: 320px !important;
    }
    .swal2-toast-custom .swal2-title {
        font-size: 1.3rem !important;
        font-weight: 900 !important;
    }
    .swal2-toast-custom .swal2-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    /* Move close button outside/top-right of the image */
    .swal2-photo-popup {
        padding-top: 2.5rem !important; /* Make room for close button above image */
    }
    .swal2-close-btn-outside {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 2rem !important;
        height: 2rem !important;
        background: #ef4444 !important; /* Red background */
        color: white !important;
        border-radius: 9999px !important;
        font-size: 1.2rem !important;
        line-height: 2rem !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    .swal2-close-btn-outside:hover {
        background: #dc2626 !important; /* Darker red on hover */
        transform: scale(1.1) !important;
    }
    /* Forcing the strike-through and red color on all cells of a deleted row */
    .row-deleted, 
    .row-deleted td {
        text-decoration: line-through !important;
        color: #ef4444 !important; /* Tailwind Red-500 */
        background-color: #fef2f2 !important; /* Light Red BG */
        opacity: 0.7;
    }

    /* Ensure that even the status badge inside a deleted row looks faded/red */
    .row-deleted .status-select, 
    .row-deleted span {
        color: #ef4444 !important;
        border-color: #fca5a5 !important;
        background-color: #fee2e2 !important;
    }


</style>
<style>
    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        padding: 0.35rem 0.6rem;
        border-radius: 0.5rem;
        border: 1px solid #e2e8f0;
        font-size: 0.75rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.3rem 0.6rem !important;
        border-radius: 0.5rem !important;
        margin: 0 0.125rem !important;
        border: none !important;
        font-size: 0.75rem !important;
        color: #475569 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #6366f1 !important;
        color: white !important;
        font-weight: bold !important;
    }
    .dataTables_wrapper .dataTables_info { font-size: 0.75rem; color: #64748b; padding-top: 0.5rem; }
    #enquiriesTable tbody tr:hover { background-color: #f8fafc; }
    .status-select { 
        appearance: none; 
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); 
        background-repeat: no-repeat; 
        background-position: right 0.4rem center; 
        background-size: 0.8rem; 
        padding-right: 1.5rem; 
    }
    .filter-tag {
        @apply inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-200;
    }
    .filter-tag button {
        @apply hover:text-red-500 transition-colors;
    }
    .row-rejected {
        background-color: #fee2e2 !important; /* Light Red */
    }
    .row-rejected td {
        background-color: #fee2e2 !important;
    }
    
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

<script>
    
    const currentSessionId = "{{ $sessions->where('is_current', 1)->first()->id ?? '' }}";
    let table;
    const filterLabels = {
        classFilter: 'Class',
        statusFilter: 'Status',
        sourceFilter: 'Source',
        genderFilter: 'Gender',
        sessionFilter: 'Session',
        dateFrom: 'From',
        dateTo: 'To'
    };

    $(document).ready(function() {

                // ✅ FIX: Dynamic Success Toast (Prevents Browser Cache/BFCache issue)
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                },
                willClose: () => {
                    Swal.resumeTimer()
                }
            });
        @endif

        table = $('#enquiriesTable').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: false, 
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            order: [[8, 'desc']],
            ajax: {
                url: "{{ route('school.admissions.index') }}",
                type: "GET",
                
                data: function(d) {
                    d.search.value = $('#globalSearch').val();
                    d.class_filter = $('#classFilter').val();
                    d.status_filter = $('#statusFilter').val();
                    d.source_filter = $('#sourceFilter').val();
                    d.gender_filter = $('#genderFilter').val();
                    d.session_filter = $('#sessionFilter').val();
                    d.date_from = $('#dateFrom').val();
                    d.date_to = $('#dateTo').val();
                },
                // ADD THIS ERROR HANDLER BELOW
                error: function (xhr, error, code) {
                    console.log("DataTables Error: ", xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Data Load Error',
                        text: 'The server returned an error. Please check the browser console (F12) for details.',
                        timer: 3000
                    });
                }
            },

                    columns: [
                    { 
                        data: null, 
                        width: '20px', 
                        className: 'text-center', 
                        orderable: false, 
                        render: (d, t, r, meta) => `<span class="text-slate-500 text-[10px] font-medium">${meta.row + 1}</span>` 
                    },
                    { 
                        data: 'enquiry_number', 
                        width: '100px',
                        render: d => `<span class="font-mono text-[11px] font-bold text-slate-600">${d}</span>` 
                    },
                    { 
                        data: 'student_name', 
                        width: '200px',
                        render: (d, t, r) => {
                            const photoUrl = r.student_photo ? `/storage/${r.student_photo}` : null;
                            const avatarContent = photoUrl 
                                ? `<img src="${photoUrl}" class="w-full h-full object-cover block">` 
                                : `<span class="text-[10px] font-bold text-indigo-600">${d.charAt(0).toUpperCase()}</span>`;

                            return `<div class="flex items-center gap-2">
                                <div class="w-7 h-7 rounded-full bg-indigo-100 flex items-center justify-center overflow-hidden border border-indigo-200 cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all" 
                                    onclick="viewStudentPhoto('${photoUrl}')">
                                    ${avatarContent}
                                </div>
                                <div class="flex flex-col">
                                    <p class="font-bold text-slate-800 text-xs">${d}</p>
                                    <p class="text-[10px] text-slate-400">${r.father_name ? 'F/O ' + r.father_name : ''}</p>
                                </div>
                            </div>`;
                        } 
                    },
                    { 
                        data: 'seeking_class', 
                        width: '40px', 
                        render: d => `
                            <div class="flex flex-col items-center justify-center py-1">
                                <i class="fa-solid fa-graduation-cap text-indigo-500 text-[10px] mb-0.5"></i>
                                <span class="text-[10px] font-bold text-slate-700 uppercase">${d}</span>
                            </div>` 
                    },
                    { 
                        data: 'gender', 
                        width: '60px', 
                        render: d => { const icons = {'Male':'fa-mars','Female':'fa-venus','Other':'fa-genderless'}; const colors = {'Male':'text-blue-500','Female':'text-pink-500','Other':'text-slate-500'}; return d ? `<i class="fa-solid ${icons[d]} ${colors[d]} text-xs"></i> <span class="text-[10px]">${d}</span>` : '-'; }
                    },
                    { 
                        data: 'contact_number',
                        width: '80px', 
                        render: (d, t, r) => {
                            return `<div class="text-[11px] max-w-[80px] overflow-hidden">
                                <p class="font-medium text-slate-700 truncate" title="${d}">
                                    <i class="fa-solid fa-phone text-[8px] text-slate-400 mr-1"></i>${d}
                                </p>
                                ${r.email ? `<p class="text-slate-400 text-[10px] truncate" title="${r.email}"><i class="fa-solid fa-envelope text-[8px] mr-1"></i>${r.email}</p>` : ''}
                            </div>`;
                        } 
                    },
                    { 
                        data: 'enquiry_source', 
                        width: '80px', 
                        render: d => { const colors = {'Social Media':'bg-pink-50 text-pink-700 border-pink-200','Referral':'bg-emerald-50 text-emerald-700 border-emerald-200','Walk-in':'bg-amber-50 text-amber-700 border-amber-200','Advertisement':'bg-purple-50 text-purple-700 border-purple-200','Website':'bg-blue-50 text-blue-700 border-blue-200','Other':'bg-slate-50 text-slate-700 border-slate-200'}; return `<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border ${colors[d]||colors['Other']}">${d}</span>`; }
                    },
                    { 
                    data: 'status', 
                    width: '80px', 
                    orderable: false, 
                    render: (d, t, r) => {
                        const colorMap = {
                            'New': 'border-blue-300 text-blue-700 bg-blue-50',
                            'Registered': 'border-indigo-300 text-indigo-700 bg-indigo-50',
                            'Admitted': 'border-emerald-300 text-emerald-700 bg-emerald-50',
                            'Follow-up': 'border-purple-300 text-purple-700 bg-purple-50',
                            'Rejected': 'border-red-300 text-red-700 bg-red-50'
                        };

                        // Determine base status for coloring
                        let baseStatus = 'New';
                        if (d) {
                            const lowerD = d.toLowerCase();
                            if (lowerD.includes('registered')) baseStatus = 'Registered';
                            else if (lowerD.includes('admitted')) baseStatus = 'Admitted';
                            else if (lowerD.includes('rejected')) baseStatus = 'Rejected';
                            else if (lowerD.includes('follow-up')) baseStatus = 'Follow-up';
                            else if (lowerD.includes('new')) baseStatus = 'New';
                        }
                        
                        const colorClass = colorMap[baseStatus] || colorMap['New'];
                        const isDisabled = (baseStatus === 'Registered' || baseStatus === 'Admitted' || r.is_deleted == 1) ? 'disabled' : '';
                        const currentDbValue = d || 'New';

                        // ✅ FIX: Build options dynamically to avoid duplicates
                        const options = [
                            { value: 'New', label: 'New' },
                            { value: 'Registered', label: 'Registration' },
                            { value: 'Admitted', label: 'Direct Admission' },
                            { value: 'Rejected', label: 'Rejected' },
                            { value: 'Follow-up', label: 'Add Follow-up' }
                        ];

                        // Build options HTML, skipping the one that matches current value
                        let optionsHtml = `<option value="${currentDbValue}" selected>${currentDbValue}</option>`;
                        
                        options.forEach(opt => {
                            // Skip if this option's value matches current DB value (prevents duplicate)
                            if (opt.value !== currentDbValue) {
                                optionsHtml += `<option value="${opt.value}">${opt.label}</option>`;
                            }
                        });

                        return `<select ${isDisabled} onchange="handleEnquiryStatusChange(${r.id}, this.value)" 
                            class="status-select w-full px-2 py-1 rounded-lg text-[10px] font-bold border ${colorClass} ${r.is_deleted == 1 ? 'opacity-50 cursor-not-allowed' : ''} focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                            ${optionsHtml}
                        </select>`;
                    }
                },
                    { 
                        data: 'created_at', 
                        width: '60px', 
                        render: (d, t, r) => `<div class="text-[11px]"><p class="font-medium text-slate-700">${d}</p><p class="text-slate-400 text-[10px]">${r.created_at_human}</p></div>` 
                    },
                    { 
                        data: null, 
                        width: '100px', 
                        orderable: false, 
                        className: 'text-center', 
                        render: (d, t, r) => {
                            const canEdit = (r.is_deleted == 0 && r.status !== 'Registered' && r.status !== 'Admitted');
                            const canDelete = (r.status && !['Registered', 'Admitted', 'Rejected'].includes(r.status) && !r.status.includes('Follow-up') && r.is_deleted == 0);

                            return `<div class="flex items-center justify-center gap-1">
                                <a href="{{ url('school/admissions') }}/${r.id}/print" target="_blank" class="w-7 h-7 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-600 hover:text-white transition-all flex items-center justify-center" title="Print">
                                    <i class="fa-solid fa-print text-[10px]"></i>
                                </a>
                                ${canEdit 
                                    ? `<a href="{{ url('school/admissions') }}/${r.id}/edit" class="w-7 h-7 rounded-lg bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white transition-all flex items-center justify-center" title="Edit">
                                        <i class="fa-solid fa-pen-to-square text-[10px]"></i>
                                    </a>` 
                                    : `<button disabled class="w-7 h-7 rounded-lg bg-slate-100 text-slate-300 cursor-not-allowed flex items-center justify-center" title="Cannot edit registered/admitted students"><i class="fa-solid fa-pen-to-square text-[10px]"></i></button>`
                                }
                                ${(r.has_document || r.student_photo) ? `<button onclick="showDocument('${r.document_path || ''}', '${r.student_photo || ''}')" class="w-7 h-7 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white transition-all flex items-center justify-center" title="Documents"><i class="fa-solid fa-file-image text-[10px]"></i></button>` : ''}
                                ${canDelete 
                                    ? `<button onclick="deleteEnquiry(${r.id})" class="w-7 h-7 rounded-lg bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-all flex items-center justify-center" title="Delete">
                                        <i class="fa-solid fa-trash text-[10px]"></i>
                                    </button>` 
                                    : `<button disabled class="w-7 h-7 rounded-lg bg-slate-100 text-slate-300 cursor-not-allowed flex items-center justify-center" title="Only New enquiries can be deleted"><i class="fa-solid fa-trash text-[10px]"></i></button>`
                                }
                            </div>`;
                        } 
                    }
                ],

            createdRow: function(row, data, dataIndex) {
                if (data.status === 'Rejected') {
                    $(row).addClass('row-rejected');
                }
                if (data.is_deleted == 1) {
                    $(row).addClass('row-deleted');
                }
            },



            language: {
                search: "", searchPlaceholder: "Search...",
                lengthMenu: "_MENU_",
                info: "_START_-_END_ of _TOTAL_",
                infoEmpty: "No records", infoFiltered: "",
                paginate: { first: '«', last: '»', next: '›', previous: '‹' }
            },
            dom: '<"flex items-center justify-between px-3 pt-3"l><"px-3"rt><"flex items-center justify-between px-3 py-2 border-t border-slate-200"ip>'
        });

        // Real-time search on Enter key
        $('#globalSearch').on('keyup', function(e) {
            if (e.key === 'Enter') {
                applyFilters();
            }
        });

        // Auto-apply on filter change (optional - remove if you want manual Apply only)
        $('#classFilter, #statusFilter, #sourceFilter, #genderFilter, #sessionFilter, #dateFrom, #dateTo').on('change', function() {
            applyFilters();
        });

        // Also add this for real-time global search (triggers as you type)
        $('#globalSearch').on('input', function() {
            applyFilters();
        });
         applyFilters(); 
    });

    function setDateRange(preset) {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0');
        const dd = String(today.getDate()).padStart(2, '0');
        
        $('#dateTo').val(`${yyyy}-${mm}-${dd}`);
        
        if (preset === 'today') {
            $('#dateFrom').val(`${yyyy}-${mm}-${dd}`);
        } else if (preset === 'week') {
            const startOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
            $('#dateFrom').val(`${startOfWeek.getFullYear()}-${String(startOfWeek.getMonth()+1).padStart(2,'0')}-${String(startOfWeek.getDate()).padStart(2,'0')}`);
        } else if (preset === 'month') {
            $('#dateFrom').val(`${yyyy}-${mm}-01`);
        }
    }

    function applyFilters() {
        const sessionVal = $('#sessionFilter').val();
        const currentUrlParams = new URLSearchParams(window.location.search);
        
        // Check if the session value has changed from what's currently in the URL
        const existingSession = currentUrlParams.get('session_filter');

        if (sessionVal !== existingSession) {
            // ✅ IMPORTANT: Always SET the parameter, even if it's an empty string.
            // This tells the controller: "The user explicitly chose a session (or All Sessions)"
            currentUrlParams.set('session_filter', sessionVal);
            
            // Reload the page to update the PHP Stats Bars
            window.location.href = window.location.pathname + '?' + currentUrlParams.toString();
            return; 
        }

        // Otherwise, just reload the DataTable for other filters (Class, Status, etc.)
        table.ajax.reload();
        updateActiveFilterTags();
    }



    function resetFilters() {
        $('#globalSearch, #classFilter, #statusFilter, #sourceFilter, #genderFilter, #sessionFilter, #dateFrom, #dateTo').val('');
        table.ajax.reload();
        $('#activeFilters').addClass('hidden').empty();
    }

    function updateActiveFilterTags() {
    const container = $('#activeFilters');
    container.empty().removeClass('hidden');
    
    const filters = [
        { id: 'classFilter', label: 'Class' },
        { id: 'statusFilter', label: 'Status' },
        { id: 'sourceFilter', label: 'Source' },
        { id: 'genderFilter', label: 'Gender' },
        { id: 'sessionFilter', label: 'Session' },
        { id: 'dateFrom', label: 'From', prefix: 'From: ' },
        { id: 'dateTo', label: 'To', prefix: 'To: ' }
    ];

    let hasActive = false;
    
    filters.forEach(f => {
        const element = $(`#${f.id}`);
        const val = element.val();
        
        if (val) {
            hasActive = true;
            
            // FIX: If it's the session filter, get the TEXT (Name) instead of the VALUE (ID)
            let displayVal = val;
            if (f.id === 'sessionFilter') {
                displayVal = element.find('option:selected').text();
            } else if (f.prefix) {
                displayVal = `${f.prefix}${val}`;
            }

            const tag = $(`<span class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-200">
                ${f.label}: ${displayVal}
                <button onclick="clearFilter('${f.id}')" class="hover:text-red-500 transition-colors"><i class="fa-solid fa-xmark"></i></button>
            </span>`);
            container.append(tag);
        }
    });

    const searchVal = $('#globalSearch').val();
    if (searchVal) {
        hasActive = true;
        container.append(`<span class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-200">
            Search: "${searchVal}" <button onclick="$('#globalSearch').val(''); applyFilters();" class="hover:text-red-500 transition-colors"><i class="fa-solid fa-xmark"></i></button>
        </span>`);
    }

    if (!hasActive) container.addClass('hidden');
}

    function clearFilter(filterId) {
        $(`#${filterId}`).val('');
        applyFilters();
    }

    function handleEnquiryStatusChange(id, status) {
        if (status === 'Registered') {
            ERPAlert.confirm('Auto Register?', 'This will create a registration record automatically.', () => {
                updateStatusBackend(id, status);
            });
        } 
        else if (status === 'Admitted') {
            ERPAlert.confirm('Direct Admission?', 'We will create the registration and take you to the final confirmation page.', () => {
                updateStatusBackend(id, status);
            });
        } 
        else if (status === 'Rejected') {
            ERPAlert.confirm('Mark as Rejected?', 'The record will be marked as Rejected.', () => {
                updateStatusBackend(id, status);
            });
        } 
        else if (status === 'Follow-up') {
            openFollowUpModal(id);
        } 
        else {
            updateStatusBackend(id, status);
        }
    }


    function openFollowUpModal(id) {
        document.getElementById('followUpId').value = id;
        document.getElementById('followUpDate').value = new Date().toISOString().split('T')[0];
        document.getElementById('followUpRemarks').value = ''; // <--- CLEAR PREVIOUS REMARKS
        document.getElementById('historyContainer').innerHTML = ''; // Clear history list
        document.getElementById('followUpModal').classList.remove('hidden');
    }


    function closeFollowUpModal() {
        document.getElementById('followUpModal').classList.add('hidden');
        table.ajax.reload(null, false);
    }

    function submitFollowUp() {
            const id = document.getElementById('followUpId').value;
            const date = document.getElementById('followUpDate').value;
            const remarks = document.getElementById('followUpRemarks').value;

            if(!date || !remarks) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Please fill both date and remarks',
                    customClass: { popup: 'swal2-toast-custom' }
                });
                return;
            }

            fetch(`{{ url('school/admissions') }}/${id}/follow-up`, {
                method: 'POST',
                headers: { 
                    'X-CSRF-TOKEN': '{{ csrf_token() }}', 
                    'Content-Type': 'application/json', 
                    'Accept': 'application/json' 
                },
                body: JSON.stringify({ 
                    follow_up_date: date, 
                    remarks: remarks 
                })
            })
            .then(async r => {
                const data = await r.json();
                if (!r.ok) {
                    throw new Error(data.message || 'Server Error');
                }
                return data;
            })
            .then(data => {
                if (data.success) {
                    // ✅ BIG FONT TOAST
                    Swal.fire({
                        icon: 'success',
                        title: 'Follow-up Saved Successfully!',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        customClass: { popup: 'swal2-toast-custom' }
                    });
                    closeFollowUpModal();
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'Follow-up Error',
                    text: error.message,
                    customClass: { popup: 'swal2-toast-custom' }
                });
            });
        }

    function updateStatusBackend(id, status) {
        fetch(`{{ url('school/admissions') }}/${id}/status-update`, { 
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ status })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    // ✅ BIG FONT TOAST
                    Swal.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        customClass: { popup: 'swal2-toast-custom' }
                    });
                    table.ajax.reload(null, false);
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Update Failed',
                    text: data.message,
                    customClass: { popup: 'swal2-toast-custom' }
                });
                table.ajax.reload(null, false);
            }
        })
        .catch(() => {
            Swal.fire({
                icon: 'error',
                title: 'Server Error',
                text: 'Failed to update status',
                customClass: { popup: 'swal2-toast-custom' }
            });
        });
    }

    function showDocument(docPath, photoPath) {
        // Handle Document
        if (docPath) {
            document.getElementById('docPreviewImg').src = `/storage/${docPath}`;
            document.getElementById('docSlot').classList.remove('hidden');
        } else {
            document.getElementById('docSlot').classList.add('hidden');
        }

        // Handle Student Photo
        if (photoPath) {
            document.getElementById('photoPreviewImg').src = `/storage/${photoPath}`;
            document.getElementById('photoSlot').classList.remove('hidden');
        } else {
            document.getElementById('photoSlot').classList.add('hidden');
        }

        document.getElementById('docModal').classList.remove('hidden');
    }

    function closeDocModal() { 
        document.getElementById('docModal').classList.add('hidden'); 
        // Reset images to prevent flicker when opening next student
        document.getElementById('docPreviewImg').src = '';
        document.getElementById('photoPreviewImg').src = '';
    }

    function deleteEnquiry(id) {
        ERPAlert.confirm('Delete Enquiry?', 'This enquiry will be permanently deleted!', () => {
            fetch(`{{ url('school/admissions') }}/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // ✅ BIG FONT TOAST
                    Swal.fire({
                        icon: 'success',
                        title: 'Deleted!',
                        text: 'The record has been removed.',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        customClass: { popup: 'swal2-toast-custom' }
                    });
                    table.ajax.reload(null, false);
                }
            });
        });
    }

    document.getElementById('docModal').addEventListener('click', e => { if (e.target === e.currentTarget) closeDocModal(); });

    function toggleFollowUpView(view) {
    if(view === 'history') {
        document.getElementById('followUpFormSection').classList.add('hidden');
        document.getElementById('followUpHistorySection').classList.remove('hidden');
    } else {
        document.getElementById('followUpFormSection').classList.remove('hidden');
        document.getElementById('followUpHistorySection').classList.add('hidden');
    }
}

function viewFollowUpHistory() {
    const id = document.getElementById('followUpId').value;
    const container = document.getElementById('historyContainer');
    
    container.innerHTML = '<div class="text-center py-4 text-slate-400 text-xs">Loading history...</div>';
    toggleFollowUpView('history');

    fetch(`{{ url('school/admissions') }}/${id}/follow-ups`)
    .then(r => r.json())
    .then(data => {
        if(data.success && data.data.length > 0) {
            let html = '';
            data.data.forEach(item => {
                html += `
                <div class="p-3 bg-slate-50 border border-slate-200 rounded-lg">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-[10px] font-bold text-indigo-600">${item.follow_up_date}</span>
                        <span class="text-[9px] text-slate-400">${item.created_at}</span>
                    </div>
                    <p class="text-xs text-slate-700">${item.remarks}</p>
                </div>`;
            });
            container.innerHTML = html;
        } else {
            container.innerHTML = '<div class="text-center py-4 text-slate-400 text-xs">No previous follow-ups found.</div>';
        }
    })
    .catch(() => {
        container.innerHTML = '<div class="text-center py-4 text-red-400 text-xs">Error loading history.</div>';
    });
}

function printFollowUpHistory() {
    const id = document.getElementById('followUpId').value;
    window.open(`{{ url('school/admissions') }}/${id}/follow-up-print`, '_blank');
}

function viewStudentPhoto(url) {
    if (!url || url === "") {
        Swal.fire({
            icon: 'info',
            title: 'No Photo Available',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            customClass: { popup: 'swal2-toast-custom' }
        });
        return;
    }

    Swal.fire({
        imageUrl: url,
        imageAlt: 'Student Photo',
        imageWidth: 400,
        imageHeight: 400,
        imageClass: 'rounded-xl shadow-lg object-cover',
        showConfirmButton: false,
        showCloseButton: true,
        width: 'auto',
        background: '#f8fafc',
        customClass: {
            closeButton: 'swal2-close-btn-outside',
            popup: 'swal2-photo-popup'
        }
    });
}

</script>
@endpush