@extends('school.layouts.app')

@section('content')
<div class="mb-5">
    <!-- TOP SECTION: Title, Stats, and Back Button in one row -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <!-- Title -->
        <div class="shrink-0">
            <h1 class="text-xl font-bold text-slate-800">Student Registrations</h1>
            <p class="text-sm text-slate-500">Manage all student registration records</p>
        </div>

        <!-- TOTAL COUNT TABS (Stats Cards) moved here -->
        <div id="statsContainer" class="grid grid-cols-2 md:grid-cols-4 gap-3 flex-grow max-w-4xl">
            <div class="bg-white rounded-xl border border-slate-200 p-2 px-3 shadow-sm">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total</p>
                        <p id="statTotal" class="text-lg font-extrabold text-slate-800">{{ $stats['total'] }}</p>
                    </div>
                    <div class="w-8 h-8 bg-indigo-50 rounded-lg flex items-center justify-center">
                        <i class="fa-solid fa-users text-indigo-600 text-xs"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-slate-200 p-2 px-3 shadow-sm">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending</p>
                        <p id="statPending" class="text-lg font-extrabold text-amber-600">{{ $stats['pending'] }}</p>
                    </div>
                    <div class="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
                        <i class="fa-solid fa-clock text-amber-600 text-xs"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-slate-200 p-2 px-3 shadow-sm">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Approved</p>
                        <p id="statApproved" class="text-lg font-extrabold text-emerald-600">{{ $stats['approved'] }}</p>
                    </div>
                    <div class="w-8 h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
                        <i class="fa-solid fa-check text-emerald-600 text-xs"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-slate-200 p-2 px-3 shadow-sm">
                <div class="flex items-center justify-between gap-2">
                    <div>
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Rejected</p>
                        <p id="statRejected" class="text-lg font-extrabold text-red-600">{{ $stats['rejected'] }}</p>
                    </div>
                    <div class="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
                        <i class="fa-solid fa-circle-xmark text-red-600 text-xs"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Back Button -->
        <div class="shrink-0">
            <a href="{{ route('school.admissions.index') }}" 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-arrow-left"></i> Back to Enquiries
            </a>
        </div>
    </div>
</div>

<!-- 🔍 UNIFIED FILTER BAR (All in one line) -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 mb-4">
    <div class="flex flex-wrap items-center gap-3">
        <!-- Search -->
        <div class="relative 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, reg no..." 
                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 }}">{{ $session->session_name }}</option>
            @endforeach
        </select>

        <!-- Dropdowns -->
        <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="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>

        <!-- Date Range (Inline) -->
        <div class="flex items-center gap-2 bg-slate-50 px-3 py-1 rounded-lg border border-slate-200">
            <span class="text-[10px] font-bold text-slate-400 uppercase">Date:</span>
            
            <!-- Added onclick and cursor-pointer -->
            <input type="date" id="dateFrom" onclick="this.showPicker()" 
                class="px-2 py-1 rounded 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 and cursor-pointer -->
            <input type="date" id="dateTo" onclick="this.showPicker()" 
                class="px-2 py-1 rounded border border-slate-200 text-xs focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
        </div>

        
        <!-- Actions -->
        <div class="flex gap-2 ml-auto">
            <button onclick="applyFilters()" class="px-4 py-2 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-2 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 Filter Tags -->
    <div id="activeFilters" class="hidden flex flex-wrap gap-1.5 items-center border-t border-slate-100 mt-3 pt-2">
        <span class="text-[10px] font-bold text-slate-400 uppercase mr-1">Active:</span>
    </div>
</div>

<!-- DataTable -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-x-auto">
    <table id="registrationsTable" 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">Reg. 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">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 class="divide-y divide-slate-100"></tbody>
    </table>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    /* New styles for soft-deleted rows */
    .row-deleted {
        opacity: 0.6 !important;
        background-color: #fff1f2 !important; /* Very light red bg */
    }
    .row-deleted td {
        color: #dc2626 !important; /* Red text */
        text-decoration: line-through !important; /* Strikethrough */
        text-decoration-color: #dc2626 !important;
    }
    /* Ensure the action buttons and status select don't look too weird, 
       or keep them red as per your preference */
    .row-deleted select, .row-deleted button {
        opacity: 0.8;
    }
</style>

<style>
    /* 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;
    }
</style>
<style>
    .row-rejected {
        background-color: #fee2e2 !important; /* Light Red */
    }
    .row-rejected td {
        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; }
    #registrationsTable tbody tr:hover { background-color: #f8fafc; }
    /* Allow general cells to wrap so the table fits the screen */
    #registrationsTable td { 
        white-space: normal !important; 
        word-break: break-word;
    }

    /* Force ONLY these specific columns to stay on one line */
    .nowrap { 
        white-space: nowrap !important; 
    }

    .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; 
    }
</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;

    $(document).ready(function() {
        if (currentSessionId) {
            $('#sessionFilter').val(currentSessionId);
        }

        table = $('#registrationsTable').DataTable({
            processing: true,
            serverSide: true,
            autoWidth: false,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            order: [[7, 'desc']],
            ajax: {
                url: "{{ route('school.admissions.registrations') }}",
                type: "GET",
                data: function(d) {
                    d.search.value = $('#globalSearch').val();
                    d.class_filter = $('#classFilter').val();
                    d.status_filter = $('#statusFilter').val();
                    d.session_filter = $('#sessionFilter').val();
                    d.gender_filter = $('#genderFilter').val();
                    d.date_from = $('#dateFrom').val();
                    d.date_to = $('#dateTo').val();
                }
            },
            columns: [
                { 
                    data: null, width: '40px', className: 'text-center nowrap',
                    render: (d, t, r, meta) => `<span class="text-slate-500 text-[10px] font-medium">${meta.row + 1}</span>` 
                }, 
                { 
                    data: 'registration_no', width: 'auto', className: 'nowrap', 
                    render: d => `<span class="font-mono text-[10px] font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded border border-indigo-100">${d}</span>` 
                }, 
                { 
                    data: 'student_name', 
                    render: (d, t, r) => {
                        let photoUrl = r.student_photo ? `/storage/${r.student_photo}` : "";
                        let photoHtml = r.student_photo 
                            ? `<img src="${photoUrl}" onclick="viewStudentPhoto('${photoUrl}')" class="w-7 h-7 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all">` 
                            : `<div class="w-7 h-7 rounded-full bg-emerald-100 flex items-center justify-center text-[10px] font-bold text-emerald-600">${d.charAt(0).toUpperCase()}</div>`;
                        return `<div class="flex items-center gap-2">${photoHtml}<div><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', 
                    render: d => `<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-slate-100 text-slate-700 border border-slate-200"><i class="fa-solid fa-graduation-cap mr-1 text-[8px]"></i>${d}</span>` 
                }, 
                { 
                    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', 
                    render: (d, t, r) => `<div class="text-[11px]"><p class="font-medium text-slate-700"><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]"><i class="fa-solid fa-envelope text-[8px] mr-1"></i>${r.email}</p>` : ''}</div>` 
                }, 
                { 
                    data: 'status', width: 'auto', orderable: false, className: 'nowrap',
                    render: (d, t, r) => {
                        const colorMap = {
                            'Pending': 'border-amber-300 text-amber-700 bg-amber-50',
                            'Approved': 'border-emerald-300 text-emerald-700 bg-emerald-50',
                            'Rejected': 'border-red-300 text-red-700 bg-red-50'
                        };
                        const colorClass = colorMap[d] || 'border-slate-300 text-slate-700 bg-slate-50';
                        const isDisabled = (d === 'Approved' || r.is_deleted == 1) ? 'disabled' : '';

                        return `<select ${isDisabled} onchange="handleStatusChange(${r.id}, this.value)" class="status-select w-full px-2 py-1 rounded-lg text-[10px] font-bold border ${colorClass} focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                            <option value="Pending" ${d==='Pending'?'selected':''}>Pending</option>
                            <option value="Approved" ${d==='Approved'?'selected':''}>Approved</option>
                            <option value="Rejected" ${d==='Rejected'?'selected':''}>Rejected</option>
                        </select>`;
                    }
                }, 
                { 
                    data: 'registration_date', width: 'auto', className: 'nowrap',
                    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.registration_date_human}</p></div>` 
                }, 
                { 
                    data: null, width: 'auto', orderable: false, className: 'text-center nowrap',
                    render: (d, t, r) => `<div class="flex items-center justify-center gap-1">
                        ${r.status === 'Approved'
                            ? `<button onclick="printRegistration(${r.id})" 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></button>`
                            : `<button class="w-7 h-7 rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed flex items-center justify-center" title="Only APPROVED admissions can be printed" disabled><i class="fa-solid fa-print text-[10px]"></i></button>`
                        }
                        <!-- EDIT BUTTON -->
                        ${r.status === 'Pending' && r.is_deleted == 0
                            ? `<a href="${'{{ url('school/registrations/edit') }}/' + r.id}" 
                                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 Registration">
                                <i class="fa-solid fa-pen-to-square text-[10px]"></i>
                            </a>`
                            : `<button 
                                class="w-7 h-7 rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed flex items-center justify-center" 
                                title="Only PENDING registrations can be edited" 
                                disabled>
                                <i class="fa-solid fa-pen-to-square text-[10px]"></i>
                            </button>`
                        }
                        ${(r.is_deleted == 1 || r.status === 'Approved') 
                            ? `<button class="w-7 h-7 rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed flex items-center justify-center" 
                                title="${r.status === 'Approved' ? 'Approved admissions cannot be deleted' : 'Already Deleted'}" 
                                disabled>
                                <i class="fa-solid fa-trash text-[10px]"></i>
                            </button>` 
                            : `<button onclick="deleteRegistration(${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>`
                        }
                    </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>'
        });

        $('#globalSearch').on('input', function() { applyFilters(); });
        $('#classFilter, #statusFilter, #sessionFilter, #genderFilter, #dateFrom, #dateTo').on('change', function() { 
            applyFilters(); 
        });
    });

    function handleStatusChange(id, status) {
        if (status === 'Approved') {
            window.location.href = `{{ url('school/admissions/confirm') }}/${id}`;
        } else if (status === 'Rejected') {
            ERPAlert.confirm('Mark as Rejected?', 'This registration will be marked as Rejected', () => {
                updateStatusBackend(id, status);
            });
        } else {
            updateStatusBackend(id, status);
        }
    }

    function updateStatusBackend(id, status) {
        fetch(`{{ url('school/registrations') }}/${id}/status`, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                ERPAlert.toast('Status Updated Successfully!');
                table.ajax.reload(null, false);
            } else {
                ERPAlert.error('Update Failed', data.message);
            }
        })
        .catch(error => ERPAlert.error('Server Error', 'Failed to update status'));
    }

    function applyFilters() { 
        table.ajax.reload(); 
        updateActiveFilterTags(); 
        updateStats(); // ✅ NEW: Update top count tabs
    }

    // ✅ NEW: Function to fetch updated stats via AJAX
    function updateStats() {
        const sessionId = $('#sessionFilter').val();
        
        $.ajax({
            url: "{{ route('school.admissions.registrations') }}",
            type: "GET",
            data: {
                session_filter: sessionId,
                fetch_stats: true
            },
            success: function(response) {
                if (response.success && response.stats) {
                    // Animate the numbers
                    animateValue('statTotal', parseInt($('#statTotal').text()), response.stats.total, 500);
                    animateValue('statPending', parseInt($('#statPending').text()), response.stats.pending, 500);
                    animateValue('statApproved', parseInt($('#statApproved').text()), response.stats.approved, 500);
                    animateValue('statRejected', parseInt($('#statRejected').text()), response.stats.rejected, 500);
                }
            },
            error: function() {
                console.error('Failed to update stats');
            }
        });
    }

    // ✅ NEW: Helper function to animate number changes
    function animateValue(id, start, end, duration) {
        if (start === end) return;
        const range = end - start;
        const minTimer = 50;
        let stepTime = Math.abs(Math.floor(duration / range));
        stepTime = Math.max(stepTime, minTimer);
        let startTime = new Date().getTime();
        let endTime = startTime + duration;
        let timer;
    
        function run() {
            let now = new Date().getTime();
            let remaining = Math.max((endTime - now) / duration, 0);
            let value = Math.round(end - (remaining * range));
            document.getElementById(id).textContent = value;
            if (value == end) {
                clearInterval(timer);
            }
        }
        
        timer = setInterval(run, stepTime);
        run();
    }
    function resetFilters() {
        $('#globalSearch, #classFilter, #statusFilter, #sessionFilter, #genderFilter, #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: 'sessionFilter', label: 'Session' }, { id: 'genderFilter', label: 'Gender' }, { 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;
                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 printRegistration(id) { window.open(`{{ url('school/admissions/print') }}/${id}`, '_blank'); }

    function deleteRegistration(id) {
        ERPAlert.confirm('Delete Registration?', 'The registration will be marked as deleted and the student enquiry will be marked as NEW again.', () => {
            // Change this line to use the exact route path
            fetch(`{{ url('school/registrations') }}/${id}`, { 
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    ERPAlert.success('Deleted!', data.message);
                    table.ajax.reload(null, false);
                } else {
                    ERPAlert.error('Error', data.message);
                }
            });
        });
    }


    function viewStudentPhoto(url) {
        if (!url) 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