@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">Student Profiles</h1>
            <p class="text-sm text-slate-500">Comprehensive directory of all 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-blue-100 text-blue-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-users text-xs"></i>
                </div>
                <div >
                    <p class="text-[10px] font-bold text-slate-400 uppercase leading-none">Total Students</p>
                    <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">Added Today</p>
                    <p id="statToday" class="text-sm font-extrabold text-slate-800">{{ $stats['today'] }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Top Action 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">
        <div class="relative w-full lg:w-80">
            <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 by Name, Adm No, Father..." 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>

        <div class="flex items-center gap-2 ml-auto">
            <button onclick="toggleFilterPanel()" class="px-3 py-2 bg-slate-50 text-slate-600 rounded-lg border border-slate-200 text-xs font-bold hover:bg-slate-100 transition-all flex items-center gap-2">
                <i class="fa-solid fa-filter"></i> Filters
            </button>
            <button onclick="toggleColumnModal()" class="px-3 py-2 bg-slate-50 text-slate-600 rounded-lg border border-slate-200 text-xs font-bold hover:bg-slate-100 transition-all flex items-center gap-2">
                <i class="fa-solid fa-columns"></i> Customize View
            </button>
        </div>
    </div>
</div>

<!-- SIDE FILTER PANEL -->
<div id="filterPanel" class="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-[100] transition-transform duration-300 translate-x-full border-l border-slate-200">
    <div class="p-5 h-full flex flex-col">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-slate-800">Advanced Filters</h3>
            <button onclick="toggleFilterPanel()" class="text-slate-400 hover:text-red-500"><i class="fa-solid fa-xmark text-xl"></i></button>
        </div>
        <div class="space-y-4 flex-1 overflow-y-auto">
            <div class="flex flex-col gap-1">
                <label class="text-[11px] font-bold text-slate-400 uppercase">Academic Session</label>
                <select id="sessionFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Sessions</option>
                    @foreach($sessions as $session)
                        <option value="{{ $session->id }}" {{ $session->id == $selectedSessionId ? 'selected' : '' }}>{{ $session->session_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1">
                <label class="text-[11px] font-bold text-slate-400 uppercase">Class</label>
                <select id="classFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Classes</option>
                    @foreach($classes as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1">
                <label class="text-[11px] font-bold text-slate-400 uppercase">Section</label>
                <select id="sectionFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Sections</option>
                </select>
            </div>

            <div class="flex flex-col gap-1">
                <label class="text-[11px] font-bold text-slate-400 uppercase">Gender</label>
                <select id="genderFilter" class="px-3 py-2 rounded-lg border border-slate-200 text-xs outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Genders</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
            </div>
        </div>
        <div class="pt-4 border-t border-slate-100 flex gap-2">
            <button onclick="resetFilters()" class="flex-1 py-2 text-xs font-bold text-slate-500 hover:text-slate-700">Reset</button>
            <button onclick="applyFilters()" class="flex-1 py-2 bg-indigo-600 text-white rounded-lg text-xs font-bold hover:bg-indigo-700 shadow-md">Apply</button>
        </div>
    </div>
</div>

<!-- COLUMN CUSTOMIZER MODAL -->
<div id="colModal" class="hidden fixed inset-0 z-[110] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm">
    <div class="bg-white w-96 rounded-2xl shadow-2xl p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-slate-800">Customize Display</h3>
            <button onclick="toggleColumnModal()" class="text-slate-400 hover:text-slate-600"><i class="fa-solid fa-xmark"></i></button>
        </div>
        
        <div class="flex items-center justify-between mb-4">
            <p class="text-xs text-slate-500">Manage your table columns</p>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" id="selectAllCols" class="rounded text-indigo-600">
                <span class="text-xs font-bold text-indigo-600">Select All</span>
            </label>
        </div>
        
        <!-- Fixed Height Scroll Area -->
        <div class="max-h-[350px] overflow-y-auto space-y-2 mb-6 pr-2" id="columnList">
            <!-- Injected by JS -->
        </div>

        <button onclick="saveColumnSettings()" class="w-full py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700 shadow-md">Save Preferences</button>
    </div>
</div>


<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <!-- Keep the table empty. JS will inject the correct headers based on saved preferences -->
    <table id="studentsTable" class="w-full text-xs table-auto"></table>

    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<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; }
    #studentsTable { width: 100% !important; table-layout: auto !important; }
    .nowrap { white-space: nowrap !important; }
    
    /* Fix photo columns width */
    #studentsTable th, #studentsTable td { vertical-align: middle; }
    
    /* Smaller pagination info text */
    .dataTables_wrapper .dataTables_info {
        font-size: 11px !important;
        color: #64748b;
        padding-top: 8px;
    }
    
    /* Smaller pagination buttons */
    .dataTables_wrapper .dataTables_paginate {
        font-size: 11px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
</style>
@endpush

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

<script>
    // All possible columns with their data and render logic
       const columnDefinitions = [
        { 
            index: 25, 
            label: 'Sr.No.', 
            data: null, 
            orderable: false, 
            searchable: false,
            width: '50px',
            className: 'text-center',
            render: (data, type, row, meta) => {
                return `<span class="font-mono font-bold text-slate-500">${meta.row + meta.settings._iDisplayStart + 1}</span>`;
            }
        },
        
        { index: 16, label: 'Academic Session', data: 'session_name' },
        { index: 0, label: 'Admission Number', data: 'admission_no', render: d => `<span class="font-mono font-bold text-indigo-600">${d}</span>` },
        { index: 1, label: 'Student (Name & Photo)', 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-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>`;
        }},
        { index: 6, label: 'Class', data: 'seeking_class' },
        { index: 7, label: 'Section', data: 'section' },
        { index: 2, label: "Father's Name", data: 'father_name', render: d => `<span class="text-slate-600">${d}</span>` },
        { index: 3, label: "Mother's Name", data: 'mother_name', render: d => `<span class="text-slate-600">${d}</span>` },
        { index: 13, label: 'Father Photo', data: 'father_photo', className: 'text-center', width: '60px', render: (d) => d ? `<img src="/storage/${d}" onclick="viewStudentPhoto('/storage/${d}')" class="w-8 h-8 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all mx-auto">` : `<span class="text-slate-300">-</span>` },
        { index: 14, label: 'Mother Photo', data: 'mother_photo', className: 'text-center', width: '60px', render: (d) => d ? `<img src="/storage/${d}" onclick="viewStudentPhoto('/storage/${d}')" class="w-8 h-8 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all mx-auto">` : `<span class="text-slate-300">-</span>` },
       
        { index: 4, label: 'Contact Number', data: 'contact_number', render: d => `<span class="font-mono text-slate-600">${d}</span>` },
        { index: 5, label: 'Email', data: 'email', render: d => `<span class="text-slate-600">${d}</span>` },
       
        { index: 8, label: 'Gender', data: 'gender' },
        { index: 9, label: 'Blood Group', data: 'blood_group' },
        { index: 10, label: 'Category', data: 'category' },
        { index: 11, label: 'Aadhaar Number', data: 'aadhaar_no' },
        { index: 12, label: 'Joining Date', data: 'joining_date' },
              { index: 15, label: 'Created Date', data: 'confirmed_at', render: d => `<span class="text-slate-500">${d}</span>` },
        // --- ADDED MISSING COLUMNS BELOW ---
        { index: 17, label: 'User ID', data: 'user_id' },
        { index: 18, label: 'Date of Birth', data: 'dob' },
        { index: 19, label: 'Nationality', data: 'nationality' },
        { index: 20, label: 'Father Profession', data: 'father_profession' },
        { index: 21, label: 'Mother Profession', data: 'mother_profession' },
        { index: 22, label: 'Fee Applicable Date', data: 'fee_applicable_date' },
        // --- ACTIONS COLUMN (Updated to remove View Icon) ---
        { 
            index: 24, 
            label: 'Actions',  
            data: null, 
            orderable: false, 
            render: (d, t, r) => {
                const editUrl = "{{ url('school/students') }}/" + r.id + "/edit";
                return `
                    <div class="flex items-center justify-center gap-2">
                        <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 Student">
                            <i class="fa-solid fa-pen-to-square text-xs"></i>
                        </a>
                    </div>`;
            }
        }
    ];


    let selectionSequence = [];
    let dataTableInstance = null;

    $(document).ready(function() {
        const savedSeq = localStorage.getItem('student_selection_seq');
        if (savedSeq) selectionSequence = JSON.parse(savedSeq);
        
        initTable();

        $('#classFilter').on('change', function() {
            const classId = $(this).val();
            const $sectionDropdown = $('#sectionFilter');
            $sectionDropdown.html('<option value="">Loading...</option>');
            $.ajax({
                url: "{{ route('school.students.get_sections') }}",
                type: "GET",
                data: { class_id: classId },
                success: function(data) {
                    let options = '<option value="">All Sections</option>';
                    $.each(data, function(val, label) { options += `<option value="${val}">${label}</option>`; });
                    $sectionDropdown.html(options);
                }
            });
        });

        $('#globalSearch').on('keyup', function() { dataTableInstance.ajax.reload(); });
    });

    function initTable() {
        // 1. Destroy DataTable instance and completely clear the table HTML
        if ($.fn.DataTable.isDataTable('#studentsTable')) {
            $('#studentsTable').DataTable().destroy();
        }
        $('#studentsTable').empty(); // Clear everything inside <table>

        // 2. Determine which columns to show based on saved sequence
        let sortedCols = [];
        if (selectionSequence && selectionSequence.length > 0) {
            selectionSequence.forEach(index => {
                const col = columnDefinitions.find(c => c.index === index);
                if (col) sortedCols.push(col);
            });
        }

        // Default to all columns if none selected
        if (sortedCols.length === 0) {
            sortedCols = [...columnDefinitions];
        }

        // 3. Dynamically build THEAD and TBODY
        let headerHtml = `<thead class="bg-slate-50 border-b border-slate-200"><tr class="text-left">`;
        sortedCols.forEach(col => {
            headerHtml += `<th class="px-3 py-3 font-bold text-slate-500 uppercase tracking-wider cursor-pointer">${col.label}</th>`;
        });
        headerHtml += `</tr></thead>`;
        
        $('#studentsTable').html(headerHtml + `<tbody class="divide-y divide-slate-100"></tbody>`);

        // 4. Initialize DataTable
        dataTableInstance = $('#studentsTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: true,
             order: [[1, 'desc']],
            autoWidth: false,
            lengthMenu: [[25, 50, 100], [25, 50, 100]],
            pageLength: 25,
            ajax: {
                url: "{{ route('school.students.index') }}",
                data: function(d) {
                    d.class_filter = $('#classFilter').val();
                    d.session_filter = $('#sessionFilter').val();
                    d.section_filter = $('#sectionFilter').val();
                    d.gender_filter = $('#genderFilter').val();
                    d.search.value = $('#globalSearch').val();
                }
            },
                       columns: sortedCols.map(col => ({
                data: col.data,
                render: col.render,
                orderable: col.orderable !== false,
                searchable: col.searchable !== false,
                className: col.className || '',
                width: col.width || ''
            })),
            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>'
        });
    }

    function toggleFilterPanel() { $('#filterPanel').toggleClass('translate-x-full'); }
    function applyFilters() { dataTableInstance.ajax.reload(); updateStats(); toggleFilterPanel(); }
    function resetFilters() {
        $('#classFilter, #sessionFilter, #sectionFilter, #genderFilter').val('');
        $('#globalSearch').val('');
        dataTableInstance.ajax.reload();
        toggleFilterPanel();
    }
    function updateStats() {
        const sessionId = $('#sessionFilter').val();
        $.ajax({
            url: "{{ route('school.students.index') }}",
            type: "GET",
            data: { session_filter: sessionId, fetch_stats: true },
            success: function(response) {
                if (response.success) {
                    $('#statTotal').text(response.stats.total);
                    $('#statToday').text(response.stats.today);
                }
            }
        });
    }

    // --- FIXED COLUMN CUSTOMIZER LOGIC ---

    function toggleColumnModal() {
        $('#colModal').toggleClass('hidden');
        if(!$('#colModal').hasClass('hidden')) renderColumnList();
    }

    function renderColumnList() {
        let html = '';
        columnDefinitions.forEach(col => {
            const orderIdx = selectionSequence.indexOf(col.index);
            const isVisible = orderIdx !== -1;
            const orderNum = isVisible ? (orderIdx + 1) : '-';

            // Using a grid layout to force one line: [Checkbox] [Label] [Order]
            html += `
                <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 p-2 bg-slate-50 rounded-lg border border-slate-100">
                    <div class="flex items-center">
                        <input type="checkbox" data-index="${col.index}" ${isVisible ? 'checked' : ''} class="col-toggle rounded text-indigo-600">
                    </div>
                    <div class="text-sm font-medium text-slate-700 truncate">${col.label}</div>
                    <div class="flex items-center gap-2 ml-2">
                        <span class="text-[10px] font-bold text-slate-400 uppercase">Order</span>
                        <span data-order-display="${col.index}" class="order-badge px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs font-bold min-w-[24px] text-center">
                            ${orderNum}
                        </span>
                    </div>
                </div>
            `;
        });
        $('#columnList').html(html);
    }

    $(document).on('change', '.col-toggle', function() {
        const idx = $(this).data('index');
        const isChecked = $(this).is(':checked');
        if (isChecked) { selectionSequence.push(idx); } 
        else { selectionSequence = selectionSequence.filter(item => item !== idx); }
        updateOrderDisplay();
        const total = $('.col-toggle').length;
        const checked = $('.col-toggle:checked').length;
        $('#selectAllCols').prop('checked', total === checked);
    });

    $(document).on('change', '#selectAllCols', function() {
        const isChecked = $(this).is(':checked');
        $('.col-toggle').prop('checked', isChecked);
        selectionSequence = isChecked ? columnDefinitions.map(c => c.index) : [];
        updateOrderDisplay();
    });

    function updateOrderDisplay() {
        columnDefinitions.forEach(col => {
            const orderIdx = selectionSequence.indexOf(col.index);
            $(`.order-badge[data-order-display="${col.index}"]`).text(orderIdx !== -1 ? (orderIdx + 1) : '-');
        });
    }

    function saveColumnSettings() {
        localStorage.setItem('student_selection_seq', JSON.stringify(selectionSequence));
        initTable(); // Rebuild table to actually move columns physically
        toggleColumnModal();
    }

    function viewStudentPhoto(url) {
        Swal.fire({
            imageUrl: url, imageAlt: 'Photo', imageWidth: 400, imageHeight: 400,
            imageClass: 'rounded-xl shadow-lg object-cover', showConfirmButton: false,
            showCloseButton: true, width: 'auto', background: '#f8fafc',
        });
    }
</script>

@endpush