@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-pen text-xl"></i>
                </div>
                <div>
                    <h3 class="text-3xl font-black text-slate-800 tracking-tight">Edit Staff Member</h3>
                    <p class="text-slate-500 text-sm">Update professional details and class assignments.</p>
                </div>
            </div>
            <a href="{{ route('school.staff.index') }}" class="text-xs font-bold text-slate-500 bg-slate-50 px-4 py-2 rounded-xl border border-slate-200 hover:bg-slate-100 transition-all">
                <i class="fa-solid fa-arrow-left mr-1"></i> Back to List
            </a>
        </div>

        <form action="{{ route('school.staff.update', $staff->id) }}" method="POST" enctype="multipart/form-data" class="space-y-10">
            @csrf
            @method('PUT')
            <input type="hidden" name="session_id" value="{{ $current_session->id ?? '' }}">
            <input type="hidden" name="existing_photo" value="{{ $staff->photo }}">
            @if ($errors->any())
                <div class="p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded-xl shadow-sm">
                    <ul class="list-disc ml-5 text-sm">
                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                    </ul>
                </div>
            @endif

            <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', $staff->employee_code ?? '') }}" 
                                   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', $staff->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', $staff->gender ?? 'Male') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $staff->gender ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                                    <option value="Other" {{ old('gender', $staff->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', $staff->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', $staff->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', $staff->marital_status ?? 'Single') == 'Single' ? 'selected' : '' }}>Single</option>
                                <option value="Married" {{ old('marital_status', $staff->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', $staff->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', $staff->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', $staff->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', $staff->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', $staff->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</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">
                        </div>
                        <div id="husband_field" style="{{ old('marital_status', $staff->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', $staff->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-28 h-28 rounded-full bg-slate-200 mb-4 overflow-hidden border-4 border-white shadow-lg">
                                <img id="preview-img" src="{{ ($staff->photo ?? null) ? asset('storage/'.$staff->photo) : '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> Update Photo
                            </button>
                            <input type="hidden" name="cropped_image" id="cropped_image">
                        </div>
                        <br/><br/><br/><br/>
                        <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', $staff->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', $staff->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', $staff->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>

            <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', $staff->address ?? '') }}</textarea>
                @error('address') <span class="text-[10px] text-red-500 mt-1 font-medium">{{ $message }}</span> @enderror
            </div>

            <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>

                <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>

                <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">Update 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>
    const allClasses = @json($classes);
    const assignedSectionsByClass = @json($assignedSectionsByClass ?? []);
    let classSectionsCache = {};
    let selectedSectionsMap = {};
    let existingRowIds = new Set();

    $(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');
    }

    // --- LOAD SECTIONS VIA AJAX WITH PROMISE ---
    function fetchSections(classIds) {
        return new Promise((resolve, reject) => {
            if (!classIds || classIds.length === 0) {
                resolve([]);
                return;
            }
            // Check cache first
            let missingClassIds = [];
            let cachedData = [];
            classIds.forEach(cid => {
                if (classSectionsCache[cid]) {
                    cachedData = cachedData.concat(classSectionsCache[cid]);
                } else {
                    missingClassIds.push(cid);
                }
            });
            
            if (missingClassIds.length === 0) {
                resolve(cachedData);
                return;
            }

            $.ajax({
                url: "{{ route('school.staff.getSections', ['classId' => ':id']) }}".replace(':id', 'bulk'),
                method: 'GET',
                data: { class_ids: missingClassIds },
                success: function(data) {
                    // Cache by class
                    data.forEach(sec => {
                        if (!classSectionsCache[sec.class_id]) {
                            classSectionsCache[sec.class_id] = [];
                        }
                        if (!classSectionsCache[sec.class_id].find(s => s.id === sec.id)) {
                            classSectionsCache[sec.class_id].push(sec);
                        }
                    });
                    resolve(cachedData.concat(data));
                },
                error: reject
            });
        });
    }

    // --- REFRESH MAP OF ALL SELECTED SECTIONS ---
    function refreshSelectedMap() {
        selectedSectionsMap = {};
        
        // From BULK
        const bulkSectionIds = $('#bulk-sections').val() || [];
        bulkSectionIds.forEach(sid => {
            const sidNum = parseInt(sid);
            for (let cid in classSectionsCache) {
                if (classSectionsCache[cid].find(s => s.id === sidNum)) {
                    if (!selectedSectionsMap[cid]) selectedSectionsMap[cid] = [];
                    selectedSectionsMap[cid].push(sidNum);
                    break;
                }
            }
        });

        // From SPECIFIC rows
        $('#assignments-list .row-group').each(function() {
            const sectionSelect = $(this).find('select.section-select');
            const classSelect = $(this).find('select.class-select');
            const selectedClassIds = classSelect.val() || [];
            
            selectedClassIds.forEach(cid => {
                if (!selectedSectionsMap[cid]) selectedSectionsMap[cid] = [];
            });
            
            const sectionIds = sectionSelect.val() || [];
            sectionIds.forEach(sid => {
                const sidNum = parseInt(sid);
                const opt = sectionSelect.find('option[value="' + sid + '"]');
                const cid = opt.data('class-id');
                if (cid && !selectedSectionsMap[cid].includes(sidNum)) {
                    selectedSectionsMap[cid].push(sidNum);
                }
            });
        });
    }

    // --- GET AVAILABLE CLASSES (hide fully used classes) ---
    function getAvailableClasses() {
        refreshSelectedMap();
        let available = [];
        allClasses.forEach(cls => {
            const cid = cls.id.toString();
            const totalSecs = classSectionsCache[cls.id] ? classSectionsCache[cls.id].length : 999;
            const usedSecs = selectedSectionsMap[cid] ? selectedSectionsMap[cid].length : 0;
            if (usedSecs < totalSecs) {
                available.push(cls);
            }
        });
        return available;
    }

    // --- BUILD CLASS OPTIONS DROPDOWN ---
    function buildClassOptions(selectedClassIds = []) {
        let options = '';
        const available = getAvailableClasses();
        
        // Always include currently selected classes even if "full"
        allClasses.forEach(cls => {
            const isSelected = selectedClassIds.includes(cls.id.toString()) || selectedClassIds.includes(cls.id);
            const isAvailable = available.find(c => c.id === cls.id);
            if (isSelected || isAvailable) {
                const sel = isSelected ? 'selected' : '';
                options += '<option value="' + cls.id + '" ' + sel + '>' + cls.name + '</option>';
            }
        });
        return options || '<option value="" disabled>No classes available</option>';
    }

    // --- ADD NEW CLASS ROW (for both new and existing) ---
    function addClassRow(classId, preSelectedSectionIds) {
        const rowId = 'row_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
        existingRowIds.add(rowId);

        // Build HTML first
        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="' + 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 w-6 h-6 flex items-center justify-center">' +
                    '<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="onClassChange(\'' + rowId + '\')" 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">' +
                    buildClassOptions(classId ? [classId] : []) +
                '</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">' +
                    '<option value="">Select Classes First</option>' +
                '</select>' +
            '</div>' +
        '</div>';
        
        $('#assignments-list').append(html);

        // If pre-populating, select class and load sections
        if (classId) {
            const row = $('#' + rowId);
            row.find('select.class-select').val([classId]);
            loadSectionsForRow(rowId, [classId], preSelectedSectionIds);
        }
    }

    // --- WHEN CLASS CHANGES IN A ROW ---
    function onClassChange(rowId) {
        const row = $('#' + rowId);
        const classSelect = row.find('select.class-select');
        const selectedClasses = classSelect.val() || [];
        loadSectionsForRow(rowId, selectedClasses, []);
    }

    // --- LOAD SECTIONS FOR A ROW ---
    function loadSectionsForRow(rowId, classIds, preSelectedSectionIds) {
        const sectionSelect = $('#' + rowId + ' select.section-select');
        
        if (!classIds || classIds.length === 0) {
            sectionSelect.html('<option value="">Select Classes First</option>');
            return;
        }

        sectionSelect.html('<option value="" disabled>Loading sections...</option>');

        fetchSections(classIds).then(function(data) {
            refreshSelectedMap();
            
            let options = '';
            let currentClassId = null;
            
            data.forEach(function(sec) {
                const secId = parseInt(sec.id);
                const secClassId = sec.class_id.toString();
                
                // Check if this section is taken by another row
                const alreadySelected = selectedSectionsMap[secClassId] || [];
                const isPreSelected = preSelectedSectionIds.includes(sec.id) || preSelectedSectionIds.includes(sec.id.toString());
                const isTakenElsewhere = alreadySelected.includes(secId) && !isPreSelected;
                
                if (isTakenElsewhere) return;
                
                // Group header
                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 = isPreSelected ? '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>');
        }).catch(function() {
            sectionSelect.html('<option value="" disabled>Error loading sections</option>');
        });
    }

    // --- REMOVE ROW (FIXED) ---
    function removeRow(rowId) {
        existingRowIds.delete(rowId);
        $('#' + rowId).remove();
        refreshAllRows();
    }

    // --- REFRESH ALL ROWS WHEN ONE IS REMOVED ---
    function refreshAllRows() {
        refreshSelectedMap();
        
        $('#assignments-list .row-group').each(function() {
            const row = $(this);
            const rowId = row.attr('id');
            const classSelect = row.find('select.class-select');
            const sectionSelect = row.find('select.section-select');
            const selectedClasses = classSelect.val() || [];
            const currentSelectedSections = sectionSelect.val() || [];
            
            // Refresh class options
            classSelect.html(buildClassOptions(selectedClasses));
            classSelect.val(selectedClasses);
            
            // Refresh section options
            if (selectedClasses.length > 0) {
                fetchSections(selectedClasses).then(function(data) {
                    let options = '';
                    let currentClassId = null;
                    
                    data.forEach(function(sec) {
                        const secId = parseInt(sec.id);
                        const secClassId = sec.class_id.toString();
                        const alreadySelected = selectedSectionsMap[secClassId] || [];
                        
                        const isCurrentlySelected = currentSelectedSections.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>');
                });
            }
        });
    }

    // --- PRE-POPULATE EXISTING ASSIGNMENTS ---
    function populateExistingAssignments() {
        const classIds = Object.keys(assignedSectionsByClass);
        if (classIds.length === 0) return;
        
        // Fetch all needed sections first
        Promise.all(classIds.map(cid => fetchSections([parseInt(cid)]))).then(() => {
            classIds.forEach(classId => {
                const sectionIds = assignedSectionsByClass[classId];
                addClassRow(parseInt(classId), sectionIds);
            });
        });
    }

    // --- BULK SECTIONS CHANGE HANDLER ---
    $('#bulk-sections').on('change', function() {
        refreshSelectedMap();
    });

    function loadBulkSections() {
        const selectedClasses = $('#bulk-classes').val();
        if(!selectedClasses || selectedClasses.length === 0) {
            $('#bulk-sections').html('<option value="">Select Classes First</option>');
            return;
        }
        fetchSections(selectedClasses).then(function(data) {
            let options = '';
            data.forEach(function(sec) { 
                options += '<option value="' + sec.id + '">' + sec.name + '</option>';
            });
            $('#bulk-sections').html(options);
        });
    }

    $(document).ready(() => {
        toggleHusbandField();
        
        // Pre-fetch all class sections
        const allClassIds = allClasses.map(c => c.id);
        fetchSections(allClassIds).then(() => {
            populateExistingAssignments();
        });
    });
</script>

@endsection