@extends('school.layouts.app')

@section('content')
<!-- SweetAlert2 for 3D Alerts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- MAIN WRAPPER TO FIX SIDEBAR OVERLAP -->
<div id="pageContent" class="main-content-area p-4 md:p-6 min-h-screen bg-slate-50 transition-all duration-">
    
    <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">Staff Directory</h1>
                <p class="text-sm text-slate-500">Manage employees, designations, and assignments</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-indigo-100 text-indigo-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 Staff</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-green-100 text-green-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, Code, Email..." 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">
                <a href="{{ route('school.staff.create') }}" class="px-3 py-2 bg-indigo-600 text-white rounded-lg text-xs font-bold hover:bg-indigo-700 transition-all flex items-center gap-2 shadow-md">
                    <i class="fa-solid fa-plus"></i> Add Staff
                </a>
                <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">Department</label>
                    <select id="deptFilter" 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 Departments</option>
                        <option value="ADMIN">ADMIN</option>
                        <option value="ACADEMIC">ACADEMIC</option>
                        <option value="TRANSPORT">TRANSPORT</option>
                        <option value="HOUSE KEEPING">HOUSE KEEPING</option>
                        <option value="SUPPORTING STAFF">SUPPORTING STAFF</option>
                        <option value="OTHER STAFF">OTHER STAFF</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>
            <div class="max-h-[350px] overflow-y-auto space-y-2 mb-6 pr-2" id="columnList"></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">
            <table id="staffTable" class="w-full text-xs table-auto"></table>
        </div>
    </div>

    <!-- PHOTO POPUP MODAL -->
<div id="photoModal" class="hidden fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
    <div class="relative max-w-lg w-full">
        <button onclick="closePhoto()" class="absolute -top-12 right-0 text-white hover:text-red-500 transition-colors">
            <i class="fa-solid fa-xmark text-3xl"></i>
        </button>
        <img id="modalImg" src="" class="w-full h-auto rounded-2xl shadow-2xl border-4 border-white object-contain">
    </div>
</div>

<!-- ASSIGNMENTS VIEW MODAL -->
<div id="assignModal" class="hidden fixed inset-0 z-[200] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden">
        <div class="p-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
            <h3 class="font-bold text-slate-800">Staff Assignments</h3>
            <button onclick="closeAssignModal()" class="text-slate-400 hover:text-red-500"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div class="p-4 max-h-[400px] overflow-y-auto">
            <table class="w-full text-xs text-left">
                <thead class="text-slate-400 uppercase font-bold border-b border-slate-100">
                    <tr>
                        <th class="pb-2">Class</th>
                        <th class="pb-2">Section</th>
                    </tr>
                </thead>
                <tbody id="assignTableBody" class="divide-y divide-slate-50">
                    <!-- Data loaded via AJAX -->
                </tbody>
            </table>
        </div>
    </div>
</div>


</div> <!-- END MAIN WRAPPER -->

@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; }
    #staffTable { width: 100% !important; table-layout: auto !important; }
    #staffTable tbody td {
        padding: 10px 14px !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }
    .nowrap { white-space: nowrap !important; }
        /* Responsive Sidebar Spacing - FIXED VERSION */
    .main-content-area {
        margin-left: 0; 
        padding-top: 100px !important; /* Increased for mobile to clear header */
    }
    @media (min-width: 1024px) {
        .main-content-area {
            margin-left: 260px; 
            padding-top: 100px !important; /* Increased to 100px so title is clearly visible */
        }
        .sidebar-collapsed .main-content-area {
            margin-left: 80px; 
            padding-top: 100px !important;
        }
    }



    /* DataTables Pagination and Info Small Fonts */
    .dataTables_info {
        font-size: 10px !important;
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }
    .dataTables_paginate {
        font-size: 10px !important;
    }
    .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }


</style>
@endpush

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

<script>
    const columnDefinitions = [
        { index: 100, label: 'Sr.No.', data: null, orderable: false, searchable: false, width: '50px', className: 'text-center', render: (data, type, row, meta) => `<span class="font-mono font-bold text-slate-500">${meta.row + meta.settings._iDisplayStart + 1}</span>` },
        { index: 0, label: 'Emp Code', data: 'employee_code', render: d => `<span class="font-mono font-bold text-indigo-600">${d}</span>` },
        { index: 1, label: 'Staff Name', data: 'staff_name', width: '250px', render: (d, t, r) => {
            let photoUrl = r.photo ? `/storage/${r.photo}` : "";
            let photoHtml = r.photo 
                ? `<img src="${photoUrl}" onclick="openPhoto('${photoUrl}')" class="w-7 h-7 rounded-full object-cover cursor-pointer transition-all duration-200 hover:ring-2 hover:ring-indigo-500 hover:scale-110">` 
                : `<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 whitespace-nowrap pr-4">${photoHtml} <span class="font-bold text-slate-800">${d}</span></div>`;
        }},

        { index: 2, label: 'Designation', data: 'designation' },
        { index: 3, label: 'Department', data: 'department' },
        { index: 4, label: 'Phone', data: 'phone', render: d => `<span class="font-mono text-slate-600">${d}</span>` },
        { index: 5, label: 'Email', data: 'email' },
        { index: 6, label: 'Gender', data: 'gender' },
        { index: 7, label: 'Blood Group', data: 'blood_group' },
        { index: 8, label: 'DOB', data: 'dob' },
        { index: 9, label: 'Joining Date', data: 'joining_date' },
        { index: 10, label: 'Address', data: 'address', render: d => `<span class="text-slate-500 truncate max-w-xs block">${d}</span>` },
        { 
            index: 11, 
            label: 'Actions',  
            data: null, 
            orderable: false, 
            render: (d, t, r) => {
                return `
                    <div class="flex items-center justify-center gap-2">
                        <button onclick="viewAssignments(${r.id})" 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 Assignments">
                            <i class="fa-solid fa-eye text-xs"></i>
                        </button>
                        <a href="{{ url('school/staff') }}/${r.id}/edit" 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 Staff">
                            <i class="fa-solid fa-pen-to-square text-xs"></i>
                        </a>
                        <button onclick="confirmDelete(${r.id})" class="w-8 h-8 rounded-lg bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-all flex items-center justify-center" title="Delete Staff">
                            <i class="fa-solid fa-trash text-xs"></i>
                        </button>
                    </div>`;
            }
        }
    ];

    let selectionSequence = [];
    let dataTableInstance = null;

    $(document).ready(function() {
        const savedSeq = localStorage.getItem('staff_selection_seq');
        if (savedSeq) selectionSequence = JSON.parse(savedSeq);
        initTable();
        $('#globalSearch').on('keyup', function() { dataTableInstance.ajax.reload(); });

        $('#selectAllCols').on('change', function() {
            if($(this).is(':checked')) {
                selectionSequence = columnDefinitions.map(col => col.index);
            } else {
                selectionSequence = [];
            }
            renderColumnList();
            updateOrderDisplay();
        });
    });

    function initTable() {
        if ($.fn.DataTable.isDataTable('#staffTable')) { $('#staffTable').DataTable().destroy(); }
        $('#staffTable').empty();

        let sortedCols = selectionSequence.length > 0 ? selectionSequence.map(idx => columnDefinitions.find(c => c.index === idx)).filter(Boolean) : [...columnDefinitions];

        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>`;
        $('#staffTable').html(headerHtml + `<tbody class="divide-y divide-slate-100"></tbody>`);

        dataTableInstance = $('#staffTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: true,
            ajax: {
                url: "{{ route('school.staff.data') }}",
                data: function(d) {
                    d.department = $('#deptFilter').val();
                    d.gender = $('#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(); toggleFilterPanel(); }
    function resetFilters() {
        $('#deptFilter, #genderFilter').val('');
        $('#globalSearch').val('');
        dataTableInstance.ajax.reload();
        toggleFilterPanel();
    }

    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;
            html += `
                <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 p-2 bg-slate-50 rounded-lg border border-slate-100">
                    <input type="checkbox" data-index="${col.index}" ${isVisible ? 'checked' : ''} class="col-toggle rounded text-indigo-600">
                    <div class="text-sm font-medium text-slate-700 truncate">${col.label}</div>
                    <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">${orderIdx !== -1 ? (orderIdx + 1) : '-'}</span>
                </div>`;
        });
        $('#columnList').html(html);
    }

    $(document).on('change', '.col-toggle', function() {
        const idx = $(this).data('index');
        if ($(this).is(':checked')) { selectionSequence.push(idx); } 
        else { selectionSequence = selectionSequence.filter(item => item !== idx); }
        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('staff_selection_seq', JSON.stringify(selectionSequence));
        initTable();
        toggleColumnModal();
    }

    function confirmDelete(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#4f46e5',
            cancelButtonColor: '#ef4444',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, keep it',
            background: '#ffffff',
            backdrop: `rgba(0,0,123,0.4)`,
            customClass: {
                popup: 'rounded-3xl shadow-2xl'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.post("{{ url('school/staff') }}/" + id, {
                    _token: "{{ csrf_token() }}",
                    _method: 'DELETE'
                }, function(response) {
                    Swal.fire('Deleted!', 'Staff has been removed.', 'success');
                    dataTableInstance.ajax.reload();
                });
            }
        });
    }

    function openPhoto(url) {
        document.getElementById('modalImg').src = url;
        document.getElementById('photoModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden'; // Stop page scroll
    }

    function closePhoto() {
        document.getElementById('photoModal').classList.add('hidden');
        document.body.style.overflow = 'auto'; // Restore page scroll
    }

    function viewAssignments(staffId) {
        const body = $('#assignTableBody');
        body.html('<tr><td colspan="2" class="py-4 text-center text-slate-400">Loading...</td></tr>');
        $('#assignModal').removeClass('hidden');

        // We use the route helper to ensure the URL is perfect
        $.get("{{ url('school/staff') }}/" + staffId + "/assignments", function(data) {
            if(!data || data.length === 0) {
                body.html('<tr><td colspan="2" class="py-4 text-center text-slate-500">No classes assigned to this staff.</td></tr>');
                return;
            }
            let html = '';
            data.forEach(item => {
                html += `<tr class="hover:bg-slate-50"><td class="py-2 font-medium text-slate-700">${item.class_name}</td><td class="py-2 text-slate-600">${item.section_name}</td></tr>`;
            });
            body.html(html);
        }).fail(function(xhr) {
            console.log(xhr.responseText); // This will print the real error in Browser Console (F12)
            body.html('<tr><td colspan="2" class="py-4 text-center text-red-500">Error loading data. Please check if route is added in web.php</td></tr>');
        });
    }


    function closeAssignModal() {
        $('#assignModal').addClass('hidden');
    }


</script>
@endpush