@extends('school.layouts.app')

@section('content')
<div class="mb-5">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div class="flex-1">
            <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">Confirmed Admissions</h1>
            <p class="text-sm text-slate-500">Official record of admitted students</p>
        </div>

        <div class="flex gap-3">
            <div class="bg-white px-4 py-2 rounded-xl border border-slate-200 shadow-sm flex items-center gap-3">
                <div class="w-8 h-8 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-user-check text-xs"></i>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase leading-none">Total</p>
                    <!-- ADD ID HERE -->
                    <p id="statTotal" class="text-sm font-extrabold text-slate-800">{{ $stats['total'] }}</p>
                </div>
            </div>
            <div class="bg-white px-4 py-2 rounded-xl border border-slate-200 shadow-sm flex items-center gap-3">
                <div class="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-calendar-day text-xs"></i>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase leading-none">Today</p>
                    <!-- ADD ID HERE -->
                    <p id="statToday" class="text-sm font-extrabold text-slate-800">{{ $stats['today'] }}</p>
                </div>
            </div>
        </div>


        <div class="flex-shrink-0">
            <a href="{{ route('school.admissions.registrations') }}" 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 Registrations
            </a>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 mb-4">
    <div class="flex flex-wrap lg:flex-nowrap items-center gap-3">
        <!-- Search: Reduced width -->
        <div class="relative w-full lg:w-64">
            <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, adm no..." class="w-full pl-8 pr-3 py-2 rounded-lg border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500">
        </div>

        <!-- Session Filter -->
        <select id="sessionFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white outline-none focus:ring-2 focus:ring-indigo-500 min-w-[130px]">
            <option value="">All Sessions</option>
            @foreach($sessions as $session)
                <option value="{{ $session->id }}" {{ $session->id == $selectedSessionId ? 'selected' : '' }}>
                    {{ $session->session_name }}
                </option>
            @endforeach
        </select>


        <!-- Class Filter -->
        <select id="classFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs bg-white outline-none focus:ring-2 focus:ring-indigo-500 min-w-[120px]">
            <option value="">All Classes</option>
            @foreach($classes as $val => $label)
                <option value="{{ $val }}">{{ $label }}</option>
            @endforeach
        </select>

        <!-- Joining Date Range -->
        <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">Joining:</span>
            <input type="date" id="joiningFrom" onclick="this.showPicker()" class="px-2 py-1 rounded border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
            <span class="text-xs text-slate-400">to</span>
            <input type="date" id="joiningTo" onclick="this.showPicker()" class="px-2 py-1 rounded border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
        </div>

        <!-- Fee Date Range -->
        <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">Fee Date:</span>
            <input type="date" id="feeFrom" onclick="this.showPicker()" class="px-2 py-1 rounded border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
            <span class="text-xs text-slate-400">to</span>
            <input type="date" id="feeTo" onclick="this.showPicker()" class="px-2 py-1 rounded border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
        </div>
    </div>
</div>


<!-- DataTable Container -->
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table id="admissionsTable" class="w-full text-xs table-auto">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-left">
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Adm No</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Student</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Father's Name</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Contact</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Class</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Section</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Joining Date</th>
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Fee App. Date</th> 
                    <!-- NEW COLUMN ADDED HERE -->
                    <th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors">Confirmed Date</th>
                    <th class="px-3 py-3 text-center font-bold text-slate-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>


            <tbody class="divide-y divide-slate-100"></tbody>
        </table>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<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>
    /* --- CUSTOM LENGTH DROPDOWN STYLE --- */
    .dataTables_wrapper .dataTables_length {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
    }
    .dataTables_wrapper .dataTables_length select { 
        padding: 4px 8px; 
        border-radius: 6px; 
        border: 1px solid #e2e8f0; 
        font-size: 11px; 
        outline: none;
        cursor: pointer;
    }

    /* --- SORTING ICON FIX --- */
    table.dataTable thead th.sorting:before,
    table.dataTable thead th.sorting:after {
        content: '⏶'; position: absolute; right: 8px; opacity: 0.3; font-size: 10px; color: #64748b;
    }
    table.dataTable thead th.sorting_asc:before { content: '⏚'; opacity: 1; color: #6366f1; }
    table.dataTable thead th.sorting_desc:after { content: '⏛'; opacity: 1; color: #6366f1; }
    #admissionsTable thead th { position: relative !important; padding-right: 20px !important; }
    
    #admissionsTable { width: 100% !important; table-layout: auto !important; }
    .nowrap { white-space: nowrap !important; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        let table = $('#admissionsTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: true,
            order: [[8, 'desc']], // This sorts by the "Confirmed Date" column descending
            autoWidth: false,
            lengthMenu: [[25, 50, 100], [25, 50, 100]],

            pageLength: 25,
            ajax: {
                url: "{{ route('school.admissions.list') }}",
                data: function(d) {
                    d.class_filter = $('#classFilter').val();
                    d.session_filter = $('#sessionFilter').val();
                    d.joining_from = $('#joiningFrom').val(); // <--- Must match Controller
                    d.joining_to = $('#joiningTo').val();     // <--- Must match Controller
                    d.fee_from = $('#feeFrom').val();         // <--- Must match Controller
                    d.fee_to = $('#feeTo').val();             // <--- Must match Controller
                    d.search.value = $('#globalSearch').val();
                }
            },

            columns: [
                { 
                    data: 'admission_no', 
                    className: 'nowrap', 
                    defaultContent: '', 
                    render: d => `<span class="font-mono font-bold text-indigo-600">${d}</span>` 
                },
                { 
                    data: 'student_name', 
                    defaultContent: '',
                    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-slate-100 flex items-center justify-center text-[10px] font-bold text-slate-400">${(d || 'S').charAt(0).toUpperCase()}</div>`;
                        return `<div class="flex items-center gap-2">${photoHtml} <span class="font-bold text-slate-800">${d}</span></div>`;
                    }
                },
                { data: 'father_name', defaultContent: '', render: d => `<span class="text-slate-600">${d}</span>` },
                { data: 'contact_number', defaultContent: '', render: d => `<span class="font-mono text-slate-600">${d}</span>` },
                { data: 'seeking_class', defaultContent: '' },
                { data: 'section', defaultContent: '' },
                { data: 'joining_date', className: 'nowrap', defaultContent: '' },
                { data: 'fee_applicable_date', className: 'nowrap', defaultContent: '' },
                { data: 'confirmed_at', className: 'nowrap', defaultContent: '', render: d => `<span class="text-slate-500">${d}</span>` },
                { 
                    data: null, 
                    className: 'text-center nowrap',
                    orderable: false,
                    defaultContent: '',
                    render: (d, t, r) => {
                        const showUrl = "{{ url('school/admissions/student') }}/" + r.id;
                        const editUrl = "{{ url('school/admissions/edit-confirm') }}/" + r.registration_id;
                        return `<div class="flex items-center justify-center gap-2">
                            <a href="${showUrl}" class="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center" title="View Profile"><i class="fa-solid fa-eye text-xs"></i></a>
                            <a href="${editUrl}" class="w-8 h-8 rounded-lg bg-amber-50 text-amber-600 hover:bg-amber-600 hover:text-white transition-all flex items-center justify-center" title="Edit Admission"><i class="fa-solid fa-pen-to-square text-xs"></i></a>
                            <button onclick="printAdmission(${r.registration_id})" class="w-8 h-8 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-600 hover:text-white transition-all flex items-center justify-center" title="Print Confirmation"><i class="fa-solid fa-print text-xs"></i></button>
                        </div>`;
                    }
                }
            ],
            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, #classFilter, #sessionFilter, #joiningFrom, #joiningTo, #feeFrom, #feeTo').on('change keyup', function() {
            table.ajax.reload();
            
            // If session filter is changed, update the top stats
            if (this.id === 'sessionFilter') {
                updateStats();
            }
        });
    });

    // ✅ NEW: Function to fetch updated stats without refreshing page
    function updateStats() {
        const sessionId = $('#sessionFilter').val();
        
        $.ajax({
            url: "{{ route('school.admissions.list') }}",
            type: "GET",
            data: {
                session_filter: sessionId,
                fetch_stats: true // This tells the controller to return stats JSON
            },
            success: function(response) {
                if (response.success && response.stats) {
                    // Update the numbers in the top tabs
                    $('#statTotal').text(response.stats.total);
                    $('#statToday').text(response.stats.today);
                }
            },
            error: function() {
                console.error('Failed to update stats');
            }
        });
    }

    // FIXED PRINT FUNCTION: Using the URL that worked in register_index.blade.php
    function printAdmission(regId) {
        window.open("{{ url('school/admissions/print') }}/" + regId, '_blank');
    }

    function viewStudentPhoto(url) {
        if (!url || url === "") {
            ERPAlert.toast('No Photo Available', 'info');
            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'
            }
        });
    }

    function printAdmission(regId) {
        // This creates the correct URL: .../school/admissions/print/13
        window.open("{{ url('school/admissions/print') }}/" + regId, '_blank');
    }

</script>
@endpush