@extends('school.layouts.app')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">

<style>
    .uppercase-input { text-transform: uppercase; }
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
</style>

<div class="p-6 max-w-7xl mx-auto">
    <div class="bg-white rounded-[2rem] border border-slate-200 shadow-xl p-8">
        <div class="flex justify-between items-center mb-10">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-200">
                    <i class="fa-solid fa-user-plus text-xl"></i>
                </div>
                <div>
                    <h3 class="text-3xl font-black text-slate-800 tracking-tight">Staff Registration</h3>
                    <p class="text-slate-500 text-sm">Onboard new staff with precise rights and details.</p>
                </div>
            </div>
            <a href="{{ route('school.staff.designations') }}" class="text-xs font-bold text-indigo-600 bg-indigo-50 px-4 py-2 rounded-xl border border-indigo-100 hover:bg-indigo-100 transition-all">
                <i class="fa-solid fa-gear mr-1"></i> Designation Setup
            </a>
        </div>

        <!-- Validation Error Summary -->
        @if ($errors->any())
            <div class="mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl shadow-sm">
                <div class="flex items-center gap-3 mb-2">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <span class="font-bold">Please correct the following errors:</span>
                </div>
                <ul class="list-disc ml-8 text-sm space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


        <form action="{{ route('school.staff.store') }}" method="POST" enctype="multipart/form-data" class="space-y-10">
            @csrf
            <!-- FIX: Added Hidden Session ID Field to stop the SQL Error -->
            <input type="hidden" name="session_id" value="{{ $current_session->id }}">
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                
                <!-- COLUMN 1: PERSONAL -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-4 border-b pb-2">
                        <i class="fa-solid fa-id-card text-indigo-600"></i>
                        <h4 class="font-bold text-slate-700 uppercase text-xs tracking-widest">Identification</h4>
                    </div>
                    <div class="space-y-4">
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Employee Code <span class="text-red-500">*</span></label>
                            <input type="text" name="employee_code" value="{{ old('employee_code', $nextCode) }}" 
                                class="uppercase-input w-full px-4 py-2.5 rounded-xl border {{ $errors->has('employee_code') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('employee_code') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="staff_name" value="{{ old('staff_name') }}" 
                                class="uppercase-input w-full px-4 py-2.5 rounded-xl border {{ $errors->has('staff_name') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('staff_name') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col">
                                <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Gender</label>
                                <select name="gender" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                    <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div>
                            <div class="flex flex-col">
                                <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Blood Group</label>
                                <select name="blood_group" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                                    <option value="">Select</option>
                                    @foreach(['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'] as $bg) 
                                        <option value="{{ $bg }}" {{ old('blood_group') == $bg ? 'selected' : '' }}>{{ $bg }}</option> 
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Date of Birth <span class="text-red-500">*</span></label>
                            <input type="date" name="dob" value="{{ old('dob') }}" 
                                class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('dob') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('dob') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Marital Status</label>
                            <select name="marital_status" id="marital_status" onchange="toggleHusbandField()" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                                <option value="Single" {{ old('marital_status') == 'Single' ? 'selected' : '' }}>Single</option>
                                <option value="Married" {{ old('marital_status') == 'Married' ? 'selected' : '' }}>Married</option>
                            </select>
                        </div>
                        
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Father's Name</label>
                            <input type="text" name="father_name" value="{{ old('father_name') }}" class="uppercase-input w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                        </div>
                    </div>
                </div>

                <!-- COLUMN 2: PROFESSIONAL -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-4 border-b pb-2">
                        <i class="fa-solid fa-briefcase text-indigo-600"></i>
                        <h4 class="font-bold text-slate-700 uppercase text-xs tracking-widest">Professional</h4>
                    </div>
                    <div class="space-y-4">
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Designation <span class="text-red-500">*</span></label>
                            <select name="designation" class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('designation') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                                <option value="">Select Designation</option>
                                @foreach($designations as $d) <option value="{{ $d->name }}" {{ old('designation') == $d->name ? 'selected' : '' }}>{{ $d->name }}</option> @endforeach
                            </select>
                            @error('designation') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Department <span class="text-red-500">*</span></label>
                            <select name="department" class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('department') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                                <option value="">Select Department</option>
                                @foreach($departments as $d)
                                    <option value="{{ $d->name }}" {{ old('department') == $d->name ? 'selected' : '' }}>{{ $d->name }}</option>
                                @endforeach
                            </select>
                            @error('department') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Joining Date <span class="text-red-500">*</span></label>
                            <input type="date" name="joining_date" value="{{ old('joining_date') }}" 
                                class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('joining_date') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('joining_date') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Email Address <span class="text-red-500">*</span></label>
                            <input type="email" name="email" value="{{ old('email') }}" class="uppercase-input w-full px-4 py-2.5 rounded-xl border {{ $errors->has('email') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('email') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Password <span class="text-red-500">*</span></label>
                            <input type="text" name="password" value="staff123" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                        </div>
                        <div id="husband_field" style="{{ old('marital_status') == 'Married' ? '' : 'display:none' }}" class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Husband Name</label>
                            <input type="text" name="husband_name" value="{{ old('husband_name') }}" class="uppercase-input w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                        </div>
                    </div>
                </div>

                <!-- COLUMN 3: MEDIA & PHONE -->
                <div class="space-y-6">
                    <div class="flex items-center gap-2 mb-4 border-b pb-2">
                        <i class="fa-solid fa-phone text-indigo-600"></i>
                        <h4 class="font-bold text-slate-700 uppercase text-xs tracking-widest">Contact & Media</h4>
                    </div>
                    <div class="space-y-4">
                        <div class="flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-3xl p-6 bg-slate-50 mb-6">
                            <div id="photo-preview" class="w-36 h-36 rounded-full bg-slate-200 mb-4 overflow-hidden border-4 border-white shadow-lg">
                                <img id="preview-img" src="https://via.placeholder.com/150" class="w-full h-full object-cover">
                            </div>
                            <input type="file" id="photo-input" class="hidden" accept="image/*" onchange="handlePhotoUpload(this)">
                            <button type="button" onclick="document.getElementById('photo-input').click()" class="text-xs font-bold text-indigo-600 hover:underline">
                                <i class="fa-solid fa-camera mr-1"></i> Upload Photo
                            </button>
                            <input type="hidden" name="cropped_image" id="cropped_image">
                        </div>
                        
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Primary Phone <span class="text-red-500">*</span></label>
                            <input type="text" name="phone" value="{{ old('phone') }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
                                class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('phone') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('phone') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Alternate Phone</label>
                            <input type="text" name="alt_phone" value="{{ old('alt_phone') }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
                                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-[11px] font-bold text-slate-500 uppercase mb-1 block">Family Contact <span class="text-red-500">*</span></label>
                            <input type="text" name="family_contact" value="{{ old('family_contact') }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
                                class="w-full px-4 py-2.5 rounded-xl border {{ $errors->has('family_contact') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" required>
                            @error('family_contact') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- SYMMETRY FIX: ADDRESS BOX -->
            <div class="bg-slate-50 p-6 rounded-3xl border border-slate-100">
                <div class="flex items-center gap-2 mb-3">
                    <i class="fa-solid fa-location-dot text-indigo-600"></i>
                    <h4 class="text-xs font-black text-slate-700 uppercase tracking-widest">Full Residential Address<span class="text-red-500">*</span></h4>
                </div>
                <textarea name="address" rows="2" class="uppercase-input w-full px-4 py-3 rounded-xl border {{ $errors->has('address') ? 'border-red-500 ring-1 ring-red-500' : 'border-slate-200' }} outline-none focus:ring-2 focus:ring-indigo-500 transition-all" placeholder="House No, Street, City, State..." required>{{ old('address') }}</textarea>
                @error('address') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
            </div>

            <!-- CLASS/SECTION ASSIGNMENT -->
            <div class="bg-slate-50 rounded-[2rem] p-8 border border-slate-100">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-2">
                        <i class="fa-solid fa-layer-group text-indigo-600"></i>
                        <h4 class="text-sm font-black text-slate-700 uppercase tracking-widest">Class & Section Rights</h4>
                    </div>
                </div>

                <!-- BULK ASSIGNMENT CARD -->
                <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex flex-col">
                        <label class="text-[11px] font-bold text-slate-500 uppercase mb-2 block">1. Select Multiple Classes (Hold CTRL)</label>
                        <select id="bulk-classes" name="bulk_classes[]" multiple onchange="loadBulkSections()" class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 h-40 custom-scrollbar">
                            @foreach($classes as $c) <option value="{{ $c->id }}">{{ $c->name }}</option> @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col">
                        <label class="text-[11px] font-bold text-slate-500 uppercase mb-2 block">2. Select Required Sections (Hold CTRL)</label>
                        <select id="bulk-sections" name="bulk_sections[]" multiple class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 h-40 custom-scrollbar">
                            <option value="">Select Classes First</option>
                        </select>
                    </div>
                </div>

                <!-- SPECIFIC ASSIGNMENT ROWS -->
                 
                <div id="assignments-list" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
                <div class="flex items-center justify-between mb-4">
                    <h5 class="text-xs font-bold text-slate-400 uppercase">Custom Specific Mapping</h5>
                    <button type="button" onclick="addClassRow()" class="bg-indigo-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-indigo-700 shadow-md transition-all">
                        <i class="fa-solid fa-plus mr-1"></i> Add Specific Class Group
                    </button>
                </div>
            </div>

            <div class="flex justify-end gap-4 pt-6 border-t border-slate-100">
                <a href="{{ route('school.staff.index') }}" class="px-6 py-3 text-sm font-bold text-slate-500 hover:text-slate-700">Cancel</a>
                <button type="submit" class="px-10 py-3 bg-indigo-600 text-white rounded-2xl text-sm font-bold hover:bg-indigo-700 shadow-xl transition-all active:scale-95">Save Staff Member</button>
            </div>
        </form>

    </div>
</div>

<!-- Cropper Modal -->
<div id="cropper-modal" class="fixed inset-0 z-50 hidden bg-black/80 backdrop-blur-sm items-center justify-center p-4">
    <div class="bg-white rounded-3xl p-4 max-w-lg w-full shadow-2xl">
        <div class="max-h-[60vh] overflow-hidden rounded-2xl bg-slate-100">
            <img id="cropper-image" src="" style="max-width: 100%;">
        </div>
        <div class="flex justify-end gap-3 mt-6">
            <button onclick="closeCropper()" class="px-4 py-2 text-sm font-bold text-slate-500">Cancel</button>
            <button onclick="cropAndSave()" class="px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-md">Crop & Save</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script>
    // --- STORE ALL CLASS/SECTION DATA FOR SMART FILTERING ---
    const allClasses = @json($classes);
    // Structure: { classId: [sectionId1, sectionId2, ...] }
    let selectedSectionsMap = {};

    $(document).on('input', '.uppercase-input', function() {
        this.value = this.value.toUpperCase();
    });

    let cropper;
    function handlePhotoUpload(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#cropper-image').attr('src', e.target.result);
                $('#cropper-modal').removeClass('hidden').addClass('flex');
                if(cropper) cropper.destroy();
                cropper = new Cropper(document.getElementById('cropper-image'), {
                    aspectRatio: 1,
                    viewMode: 1
                });
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function closeCropper() { $('#cropper-modal').addClass('hidden').removeClass('flex'); }

    function cropAndSave() {
        const canvas = cropper.getCroppedCanvas({ width: 300, height: 300 });
        const dataUrl = canvas.toDataURL('image/png');
        $('#cropped_image').val(dataUrl);
        $('#preview-img').attr('src', dataUrl);
        closeCropper();
    }

    function toggleHusbandField() {
        const status = $('#marital_status').val();
        $('#husband_field').toggle(status === 'Married');
    }

    // --- BULK CLASS LOGIC ---
    function loadBulkSections() {
        const selectedClasses = $('#bulk-classes').val();
        if(!selectedClasses || selectedClasses.length === 0) {
            $('#bulk-sections').html('<option value="">Select Classes First</option>');
            return;
        }

        $.ajax({
            url: "{{ route('school.staff.getSections', ['classId' => ':id']) }}".replace(':id', 'bulk'), 
            method: 'GET',
            data: { class_ids: selectedClasses },
            success: function(data) {
                let options = '';
                data.forEach(sec => { 
                    options += `<option value="${sec.id}">${sec.name}</option>`;
                });
                $('#bulk-sections').html(options);
            }
        });
    }

    // --- RECALCULATE SELECTED SECTIONS MAP FROM ALL GROUPS ---
    function recalcSelectedMap() {
        selectedSectionsMap = {};
        
        // 1. Collect from BULK section
        const bulkClassIds = $('#bulk-classes').val() || [];
        const bulkSectionIds = $('#bulk-sections').val() || [];
        
        bulkClassIds.forEach(classId => {
            if (!selectedSectionsMap[classId]) selectedSectionsMap[classId] = [];
        });
        // For bulk, we need to know which sections belong to which class
        // We'll fetch sections per class and store them
        bulkSectionIds.forEach(secId => {
            // We need to know which class this section belongs to
            // We'll handle this after AJAX in loadBulkSections by storing in a data attribute
        });

        // 2. Collect from SPECIFIC rows
        $('#assignments-list .row-group').each(function() {
            const classSelect = $(this).find('select.class-select');
            const sectionSelect = $(this).find('select.section-select');
            
            const classIds = classSelect.val() || [];
            const sectionIds = sectionSelect.val() || [];
            
            classIds.forEach(classId => {
                if (!selectedSectionsMap[classId]) selectedSectionsMap[classId] = [];
            });
            
            sectionIds.forEach(secId => {
                // Find which class this section belongs to
                const classId = $(this).find(`option[value="${secId}"]`).data('class-id');
                if (classId && !selectedSectionsMap[classId].includes(parseInt(secId))) {
                    selectedSectionsMap[classId].push(parseInt(secId));
                }
            });
        });
    }

    // --- GET ALL SECTIONS FOR A CLASS (cached) ---
    let classSectionsCache = {};
    function getClassSections(classId, callback) {
        if (classSectionsCache[classId]) {
            callback(classSectionsCache[classId]);
            return;
        }
        $.ajax({
            url: "{{ route('school.staff.getSections', ['classId' => ':id']) }}".replace(':id', classId),
            method: 'GET',
            data: { class_ids: [classId] },
            success: function(data) {
                classSectionsCache[classId] = data;
                callback(data);
            }
        });
    }

    // --- ADD SPECIFIC CLASS GROUP WITH SMART FILTERING ---
    function addClassRow() {
        const rowId = Date.now();
        
        // First, recalculate what's already selected
        refreshSelectedMap();
        
        // Build class options with smart filtering
        let classOptions = '';
        let availableClassesCount = 0;
        
        allClasses.forEach(cls => {
            const clsId = cls.id.toString();
            const alreadySelected = selectedSectionsMap[clsId] || [];
            
            // Check if this class has any available sections left
            getClassSections(cls.id, function(sections) {
                // This is async, so we'll build the row first and populate after
            });
            
            // For now, show all classes - we'll filter sections in the section dropdown
            classOptions += `<option value="${cls.id}">${cls.name}</option>`;
            availableClassesCount++;
        });

        let html = `
            <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-col gap-3 transition-all hover:border-indigo-300 row-group" id="row_${rowId}" data-row-id="${rowId}">
                <div class="flex justify-between items-center">
                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Custom Map Group</span>
                    <button type="button" onclick="removeRow(${rowId})" class="text-red-400 hover:text-red-600"><i class="fa-solid fa-circle-xmark"></i></button>
                </div>
                <div class="flex flex-col">
                    <label class="text-[10px] font-bold text-slate-400 uppercase mb-1">Select Classes (Hold CTRL)</label>
                    <select name="custom_classes[${rowId}]" multiple onchange="loadSmartSections(${rowId}, this)" class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 h-20 custom-scrollbar class-select" data-row-id="${rowId}">
                        ${buildSmartClassOptions()}
                    </select>
                </div>
                <div class="flex flex-col">
                    <label class="text-[10px] font-bold text-slate-400 uppercase mb-1">Select Sections (Hold CTRL)</label>
                    <select name="selected_sections[${rowId}][]" multiple class="w-full px-3 py-2 text-sm rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500 h-24 custom-scrollbar section-select" data-row-id="${rowId}">
                        <option value="">Select Classes First</option>
                    </select>
                </div>
            </div>`;
        
        $('#assignments-list').append(html);
    }

    // --- BUILD CLASS OPTIONS: HIDE CLASSES WITH ALL SECTIONS TAKEN ---
    function buildSmartClassOptions() {
        refreshSelectedMap();
        let options = '';
        
        allClasses.forEach(cls => {
            const clsId = cls.id.toString();
            const alreadySelectedSecs = selectedSectionsMap[clsId] || [];
            
            // We need to know total sections for this class
            // For now, we'll check asynchronously and update
            // But to keep it simple, we'll show the class and filter sections
            
            // Check if ALL sections of this class are already selected
            // We'll do a quick check: if we have sections cached
            if (classSectionsCache[cls.id]) {
                const totalSecs = classSectionsCache[cls.id].length;
                if (alreadySelectedSecs.length >= totalSecs && totalSecs > 0) {
                    return; // Skip this class - all sections taken
                }
            }
            
            options += `<option value="${cls.id}">${cls.name}</option>`;
        });
        
        return options || '<option value="" disabled>No classes available</option>';
    }

    // --- REFRESH THE MAP OF SELECTED SECTIONS ---
    function refreshSelectedMap() {
        selectedSectionsMap = {};
        
        // From BULK
        const bulkClassIds = $('#bulk-classes').val() || [];
        const bulkSectionIds = $('#bulk-sections').val() || [];
        
        // Store bulk sections by class
        if (bulkSectionIds.length > 0) {
            // We need to know which class each bulk section belongs to
            // Use cached data if available
            bulkClassIds.forEach(clsId => {
                if (classSectionsCache[clsId]) {
                    const secs = classSectionsCache[clsId].filter(s => bulkSectionIds.includes(s.id.toString()));
                    if (secs.length > 0) {
                        selectedSectionsMap[clsId] = secs.map(s => s.id);
                    }
                }
            });
        }

        // From SPECIFIC rows
        $('#assignments-list .row-group').each(function() {
            const rowId = $(this).data('row-id');
            const classSelect = $(this).find('select.class-select');
            const sectionSelect = $(this).find('select.section-select');
            
            const classIds = classSelect.val() || [];
            const sectionIds = sectionSelect.val() || [];
            
            classIds.forEach(clsId => {
                if (!selectedSectionsMap[clsId]) selectedSectionsMap[clsId] = [];
            });
            
            // For each selected section, find its class and add to map
            sectionIds.forEach(secId => {
                const secIdNum = parseInt(secId);
                // Find which class this section belongs to by checking the options
                const option = sectionSelect.find(`option[value="${secId}"]`);
                const classId = option.data('class-id');
                if (classId && !selectedSectionsMap[classId].includes(secIdNum)) {
                    selectedSectionsMap[classId].push(secIdNum);
                }
            });
        });
    }

    // --- LOAD SECTIONS WITH SMART FILTERING (hide already selected) ---
    function loadSmartSections(rowId, element) {
        const selectedClasses = $(element).val();
        const sectionSelect = $(`#row_${rowId} select.section-select`);
        
        if(!selectedClasses || selectedClasses.length === 0) {
            sectionSelect.html('<option value="">Select Classes First</option>');
            return;
        }

        $.ajax({
            url: "{{ route('school.staff.getSections', ['classId' => ':id']) }}".replace(':id', 'specific'),
            method: 'GET',
            data: { class_ids: selectedClasses },
            success: function(data) {
                // Cache sections by class
                data.forEach(sec => {
                    if (!classSectionsCache[sec.class_id]) {
                        classSectionsCache[sec.class_id] = [];
                    }
                    // Add if not already in cache
                    if (!classSectionsCache[sec.class_id].find(s => s.id === sec.id)) {
                        classSectionsCache[sec.class_id].push(sec);
                    }
                });
                
                refreshSelectedMap();
                
                let options = '';
                let currentClassId = null;
                
                data.forEach(sec => {
                    const secId = parseInt(sec.id);
                    const secClassId = sec.class_id.toString();
                    
                    // Skip if this section is already selected in another group
                    const alreadySelected = selectedSectionsMap[secClassId] || [];
                    if (alreadySelected.includes(secId)) {
                        return; // Hide this section - already taken
                    }
                    
                    // Add group header if class changed
                    if (secClassId !== currentClassId) {
                        if (currentClassId !== null) options += `</optgroup>`;
                        const clsName = allClasses.find(c => c.id == secClassId)?.name || 'Class';
                        options += `<optgroup label="${clsName}">`;
                        currentClassId = secClassId;
                    }
                    
                    options += `<option value="${sec.id}" data-class-id="${secClassId}">${sec.name}</option>`;
                });
                
                if (currentClassId !== null) options += `</optgroup>`;
                
                sectionSelect.html(options || '<option value="" disabled>No available sections</option>');
            }
        });
    }

    function removeRow(id) { 
        $(`#row_${id}`).remove(); 
        // Refresh all section dropdowns to show newly available sections
        refreshAllSectionDropdowns();
    }

    // --- REFRESH ALL DROPDOWNS WHEN A ROW IS REMOVED ---
    function refreshAllSectionDropdowns() {
        refreshSelectedMap();
        
        $('#assignments-list .row-group').each(function() {
            const rowId = $(this).data('row-id');
            const classSelect = $(this).find('select.class-select');
            const sectionSelect = $(this).find('select.section-select');
            const selectedClasses = classSelect.val();
            
            if (selectedClasses && selectedClasses.length > 0) {
                // Re-fetch and re-filter sections
                $.ajax({
                    url: "{{ route('school.staff.getSections', ['classId' => ':id']) }}".replace(':id', 'specific'),
                    method: 'GET',
                    data: { class_ids: selectedClasses },
                    success: function(data) {
                        let options = '';
                        let currentClassId = null;
                        const currentSelected = sectionSelect.val() || [];
                        
                        data.forEach(sec => {
                            const secId = parseInt(sec.id);
                            const secClassId = sec.class_id.toString();
                            const alreadySelected = selectedSectionsMap[secClassId] || [];
                            
                            // Keep if: not selected elsewhere OR currently selected in this dropdown
                            const isCurrentlySelected = currentSelected.includes(sec.id.toString());
                            const isTakenElsewhere = alreadySelected.includes(secId) && !isCurrentlySelected;
                            
                            if (isTakenElsewhere) return;
                            
                            if (secClassId !== currentClassId) {
                                if (currentClassId !== null) options += `</optgroup>`;
                                const clsName = allClasses.find(c => c.id == secClassId)?.name || 'Class';
                                options += `<optgroup label="${clsName}">`;
                                currentClassId = secClassId;
                            }
                            
                            const selectedAttr = isCurrentlySelected ? 'selected' : '';
                            options += `<option value="${sec.id}" data-class-id="${secClassId}" ${selectedAttr}>${sec.name}</option>`;
                        });
                        
                        if (currentClassId !== null) options += `</optgroup>`;
                        sectionSelect.html(options || '<option value="" disabled>No available sections</option>');
                    }
                });
            }
        });
        
        // Also refresh the "Add Class Row" button's available classes
        // (Already handled when clicked)
    }

    // --- ALSO UPDATE BULK SECTIONS CACHE ---
    $('#bulk-sections').on('change', function() {
        // When bulk sections change, refresh map
        refreshSelectedMap();
    });

    $(document).ready(() => {
        toggleHusbandField();
        
        // Pre-populate cache for all classes
        allClasses.forEach(cls => {
            getClassSections(cls.id, function(){});
        });
    });
</script>
@endsection