{{--
    Student Assignment Filter Component
    Usage: @include('dashboard.tasks.assign-students-filter')
    Requires: $students collection with fields: id, first_name, last_name, type, quarter, roles
    Emits:    <input name="student_ids[]"> hidden fields on confirm
--}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
    .sc-card {
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 1.25rem;
        background: #fff;
        margin-bottom: 1rem;
    }

    .sc-head {
        border-bottom: 1px solid #eef2f7;
        margin-bottom: 1rem;
        padding-bottom: 0.85rem;
    }

    .sc-title { font-size: 0.95rem; font-weight: 700; color: #111827; margin: 0 0 0.2rem; }
    .sc-sub   { font-size: 0.85rem; color: #6b7280; margin: 0; }

    .sc-steps {
        display: flex;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 1.25rem;
    }

    .sc-step {
        flex: 1;
        padding: 0.55rem 0.5rem;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        color: #9ca3af;
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        transition: background 0.15s, color 0.15s;
    }

    .sc-step:last-child   { border-right: none; }
    .sc-step.sc-active    { background: #eef2ff; color: #4338ca; }
    .sc-step.sc-done      { background: #f0fdf4; color: #166534; }

    .sc-panel             { display: none; }
    .sc-panel.sc-visible  { display: block; }

    .sc-label {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
    }

    .sc-chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

    .sc-chip {
        padding: 0.38rem 0.9rem;
        border-radius: 20px;
        border: 1px solid #dbe2ea;
        background: #f9fafb;
        font-size: 0.82rem;
        color: #6b7280;
        cursor: pointer;
        transition: 0.15s;
        user-select: none;
    }

    .sc-chip:hover              { border-color: #a5b4fc; color: #4338ca; }
    .sc-chip.sc-selected        { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
    .sc-chip.sc-opt             { border-style: dashed; }
    .sc-chip.sc-opt.sc-selected { background: #f0fdf4; border-color: #86efac; color: #166534; border-style: dashed; }

    .sc-search {
        width: 100%;
        box-sizing: border-box;
        padding: 0.6rem 0.85rem;
        border: 1px solid #dbe2ea;
        border-radius: 10px;
        background: #f9fafb;
        color: #111827;
        font-size: 0.88rem;
        transition: 0.2s;
    }

    .sc-search:focus {
        outline: none;
        border-color: #a5b4fc;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    }

    .sc-list {
        max-height: 240px;
        overflow-y: auto;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-top: 0.5rem;
        background: #fff;
    }

    .sc-list-item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.85rem;
        cursor: pointer;
        transition: background 0.1s;
        font-size: 0.88rem;
        color: #111827;
        border-bottom: 1px solid #f3f4f6;
    }

    .sc-list-item:last-child { border-bottom: none; }
    .sc-list-item:hover      { background: #f9fafb; }
    .sc-list-item.sc-checked { background: #eef2ff; }

    .sc-checkbox {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.12s;
        pointer-events: none;
    }

    .sc-checkbox.sc-on         { background: #4f46e5; border-color: #4f46e5; }
    .sc-check-icon             { display: none; color: #fff; font-size: 10px; line-height: 1; }
    .sc-checkbox.sc-on .sc-check-icon { display: block; }

    .sc-item-name { flex: 1; }
    .sc-item-meta { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; }

    .sc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; min-height: 24px; }

    .sc-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: #eef2ff;
        color: #4338ca;
        border-radius: 20px;
        padding: 0.22rem 0.7rem;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .sc-tag-x       { cursor: pointer; font-size: 1rem; color: #6366f1; line-height: 1; }
    .sc-tag-x:hover { color: #dc2626; }

    .sc-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .sc-count { font-size: 0.82rem; color: #6b7280; }

    .sc-btn {
        padding: 0.5rem 1.15rem;
        border-radius: 10px;
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid #dbe2ea;
        background: #f9fafb;
        color: #374151;
        transition: 0.15s;
    }

    .sc-btn:hover              { background: #f3f4f6; }
    .sc-btn.sc-primary         { background: #4f46e5; color: #fff; border-color: #4f46e5; }
    .sc-btn.sc-primary:hover   { background: #4338ca; }
    .sc-btn.sc-primary:disabled{ opacity: 0.45; cursor: not-allowed; }

    .sc-empty   { padding: 1.2rem; text-align: center; color: #9ca3af; font-size: 0.85rem; }
    .sc-divider { height: 1px; background: #f3f4f6; margin: 0.85rem 0; }

    .sc-row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .sc-badge {
        font-size: 0.72rem;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 0.12rem 0.5rem;
        color: #6b7280;
    }

    .sc-select-all       { font-size: 0.78rem; color: #4f46e5; cursor: pointer; margin-left: auto; }
    .sc-select-all:hover { text-decoration: underline; }

    .sc-summary-card  { border: 1px solid #c7d2fe; border-radius: 16px; padding: 1.25rem; background: #f8faff; }
    .sc-summary-title { font-size: 0.88rem; font-weight: 700; color: #4338ca; margin: 0; }
</style>

<div id="sc-assign-root">

    <div class="sc-card" id="sc-main-card">
        <div class="sc-head">
            <p class="sc-title">Task Mentions</p>
            <p class="sc-sub">Filter students step by step, then pick from the results.</p>
        </div>

        <div class="sc-steps">
            <div class="sc-step sc-active" data-step="1">1. Type</div>
            <div class="sc-step"           data-step="2">2. Quarter</div>
            <div class="sc-step"           data-step="3">3. Roles</div>
            <div class="sc-step"           data-step="4">4. Select</div>
        </div>

        <div class="sc-panel sc-visible" id="sc-panel-1">
            <span class="sc-label">Student type <span class="text-danger">*</span></span>
            <div class="sc-chip-group" id="sc-type-chips">
                <div class="sc-chip"             data-val="current">Current</div>
                <div class="sc-chip"             data-val="frozen">Frozen</div>
                <div class="sc-chip"             data-val="previous">Previous</div>
                <div class="sc-chip"             data-val="complaint_stopped">Complaint-stopped</div>
            </div>
            <div class="sc-footer">
                <span class="sc-count" id="sc-type-count">0 selected</span>
                <button type="button" class="sc-btn sc-primary" onclick="scGoFromTypeStep()">Next </button>
            </div>
        </div>

        <div class="sc-panel" id="sc-panel-2">
            <span class="sc-label">Quarter</span>
            <div class="sc-chip-group" id="sc-quarter-chips">
                <div class="sc-chip sc-selected" data-val="all">All quarters</div>
                <div class="sc-chip"             data-val="q1">Q1</div>
                <div class="sc-chip"             data-val="q2">Q2</div>
                <div class="sc-chip"             data-val="q3">Q3</div>
                <div class="sc-chip"             data-val="q4">Q4</div>
            </div>
            <div style="margin-top: 0.75rem;">
                <label class="sc-label" for="sc-quarter-year">Year</label>
                <input
                    type="number"
                    id="sc-quarter-year"
                    class="sc-search"
                    min="2000"
                    max="2100"
                    step="1"
                    value="{{ now()->year }}"
                    placeholder="Select year"
                >
            </div>
            <div class="sc-footer">
                <button type="button" class="sc-btn" onclick="scGoStep(1)"> Back</button>
                <button type="button" class="sc-btn sc-primary" onclick="scGoStep(3)">Next </button>
            </div>
        </div>


        <div class="sc-panel" id="sc-panel-3">
            <span class="sc-label">Optional roles</span>
            <div class="row">
                <div class="col-md-4">
                    <div class="primary_input">
                        <label class="primary_input_label" for="leader_id">
                            Team Leaders
                        </label>
                        <select
                            class="form-select select2 sc-role-select"
                            multiple
                            name="leader_id[]"
                            id="leader_id"
                            data-placeholder="Select leaders"
                            style="width: 100%;"
                        >
                            <option value="" disabled>select admins</option>
                            @foreach($data['team_leaders'] as $teamleader)
                                <option value="{{ $teamleader->id }}" {{ in_array($teamleader->id, old('leader_id', [])) ? 'selected' : '' }}>
                                    {{ $teamleader->full_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="primary_input">
                        <label class="primary_input_label" for="retention_admin_id">
                            Leader
                        </label>
                        <select
                            name="retention_admin_id[]"
                            id="retention_admin_id"
                            multiple
                            class="form-select select2 sc-role-select"
                            data-placeholder="Select admins"
                            style="width: 100%;"
                        >
                            <option value="" disabled>select admin</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="primary_input">
                        <label class="primary_input_label" for="instructor">
                            Instructor
                        </label>
                        <select
                            name="instructor[]"
                            id="instructor"
                            multiple
                            class="form-select select2 sc-role-select"
                            data-placeholder="Select instructors"
                            style="width: 100%;"
                        >
                            <option value="" disabled>select instructors</option>
                            @foreach($data['teachers'] as $teacher)
                                <option value="{{ $teacher->id }}" {{ in_array($teacher->id, old('instructor', [])) ? 'selected' : '' }}>
                                    {{ $teacher->full_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="sc-divider"></div>

            <div id="sc-initial-selection" class="sc-summary-card" style="display:none; margin-bottom:0.85rem;">
                <div class="sc-row" style="margin-bottom:0.45rem">
                    <p class="sc-summary-title" style="margin:0">Currently assigned</p>
                    <span class="sc-badge" id="sc-initial-selection-count"></span>
                </div>
                <div class="sc-tags" id="sc-initial-selection-tags"></div>
            </div>

            <p style="font-size:0.8rem;color:#9ca3af;margin:0 0 0.5rem">
                Leave unselected to include students of any role.
            </p>

            <div class="sc-footer">
                <button type="button" class="sc-btn" onclick="scGoBackFromRoles()">Back</button>
                <button type="button" class="sc-btn sc-primary" id="filter_btn">Apply filters</button>
            </div>
        </div>


        <div class="sc-panel" id="sc-panel-4">
            <div class="sc-row" style="margin-bottom:0.65rem">
                <span class="sc-label" style="margin:0">Results</span>
                <span class="sc-badge" id="sc-result-badge">—</span>
                <span class="sc-select-all" onclick="scSelectAll()">Select all</span>
            </div>

            <input
                type="text"
                class="sc-search"
                placeholder="Search by name"
                id="sc-search"
                oninput="scSearchList(this.value)">

            <div class="sc-list" id="sc-list">
                <div class="sc-empty" id="sc-empty-msg">Apply filters to load students.</div>
            </div>

            {{-- Selected name tags --}}
            <div class="sc-tags" id="sc-tags"></div>

            <div class="sc-footer">
                <button type="button" class="sc-btn" onclick="scGoStep(3)"> Back</button>
                <span class="sc-count" id="sc-sel-count">0 selected</span>
                <button type="button" class="sc-btn sc-primary" id="sc-confirm-btn" onclick="scConfirm()" disabled>
                    Confirm
                </button>
            </div>
        </div>
    </div>

    <div id="sc-summary" style="display:none">
        <div class="sc-summary-card">
            <div class="sc-row" style="margin-bottom:0.6rem">
                <p class="sc-summary-title" style="margin:0">Assigned students</p>
                <span class="sc-badge" id="sc-summary-count"></span>
                <span class="sc-select-all" onclick="scReset()">Edit</span>
            </div>
            <div class="sc-tags" id="sc-summary-tags"></div>
        </div>
    </div>

    {{-- Hidden inputs submitted with the form --}}
    <div id="sc-hidden-inputs" style="display:none" aria-hidden="true"></div>

</div>


<script>
    function scInitRoleSelect2(scope) {
        const $scope = scope ? $(scope) : $(document);

        $scope.find('.sc-role-select').each(function () {
            const $select = $(this);

            if ($select.hasClass('select2-hidden-accessible')) {
                $select.select2('destroy');
            }

            const $modal = $select.closest('.modal');
            $select.select2({
                width: '100%',
                placeholder: $select.data('placeholder') || 'Select options',
                allowClear: true,
                closeOnSelect: false,
                dropdownParent: $modal.length ? $modal : $(document.body)
            });
        });
    }

    $(document).ready(function () {
        scInitRoleSelect2(document);

        $(document).on('shown.bs.modal', '.modal', function () {
            if ($(this).find('#sc-assign-root').length) {
                scInitRoleSelect2(this);
            }
        });
    });
    (function () {
        const scInitialSelected = @json(
            collect($initialSelectedStudents ?? [])
                ->map(function ($student) {
                    $name = trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
                    if ($name === '') {
                        $name = $student->full_name ?? ('Student #' . $student->id);
                    }

                    return [
                        'id' => (int) $student->id,
                        'name' => $name,
                    ];
                })
                ->values()
                ->all()
        );

        let scTypes    = [];
        let scQuarters = ['all'];
        let scRoles    = [];
        let scSelected = new Map(scInitialSelected.map(function (student) {
            return [parseInt(student.id, 10), student.name];
        }));
        const scFilterStudentsUrl = '{{ route("tasks.filter-students") }}';
        const scDefaultYear = (new Date()).getFullYear();

        function scGetSelectedYear() {
            const yearInput = document.getElementById('sc-quarter-year');
            if (!yearInput) return scDefaultYear;

            const selectedYear = parseInt(yearInput.value, 10);
            return Number.isFinite(selectedYear) ? selectedYear : scDefaultYear;
        }

        function scShouldSkipQuarter() {
            return scTypes.includes('current') || scTypes.includes('previous');
        }

        function scSetQuarterInputsDisabled(isDisabled) {
            const quarterGroup = document.getElementById('sc-quarter-chips');
            const quarterYearInput = document.getElementById('sc-quarter-year');

            if (quarterGroup) {
                quarterGroup.style.pointerEvents = isDisabled ? 'none' : '';
                quarterGroup.style.opacity = isDisabled ? '0.55' : '';
            }

            if (quarterYearInput) {
                quarterYearInput.disabled = !!isDisabled;
            }

            if (isDisabled) {
                uncheckAll('sc-quarter-chips');
                scQuarters = [];
                return;
            }

            if (!scQuarters.length) {
                scQuarters = ['all'];
            }

            uncheckAll('sc-quarter-chips');
            scQuarters.forEach(function (val) {
                const chip = document.querySelector('#sc-quarter-chips [data-val="' + val + '"]');
                if (chip) chip.classList.add('sc-selected');
            });
        }


        function getChecked(groupId) {
            const group = document.getElementById(groupId);
            if (!group) return [];

            return [...group.querySelectorAll('.sc-chip.sc-selected')]
                .map(function (c) { return c.dataset.val; });
        }

        function uncheckAll(groupId) {
            const group = document.getElementById(groupId);
            if (!group) return;

            group.querySelectorAll('.sc-chip')
                .forEach(function (c) { c.classList.remove('sc-selected'); });
        }

        function initChips(groupId) {
            const group = document.getElementById(groupId);
            if (!group) return;

            group.querySelectorAll('.sc-chip').forEach(function (chip) {
                chip.addEventListener('click', function () {
                    const val = chip.dataset.val;

                    if (groupId === 'sc-type-chips') {
                        chip.classList.toggle('sc-selected');
                        scTypes = getChecked(groupId);
                        scSetText('sc-type-count', scTypes.length + ' selected');
                        scSetQuarterInputsDisabled(scShouldSkipQuarter());

                    } else if (groupId === 'sc-quarter-chips') {
                        if (val === 'all') {
                            uncheckAll(groupId);
                            chip.classList.add('sc-selected');
                            scQuarters = ['all'];
                        } else {
                            document.querySelector('#sc-quarter-chips [data-val="all"]').classList.remove('sc-selected');
                            chip.classList.toggle('sc-selected');
                            const sel = getChecked(groupId);
                            scQuarters = sel.length ? sel : ['all'];
                            if (!sel.length) {
                                document.querySelector('#sc-quarter-chips [data-val="all"]').classList.add('sc-selected');
                            }
                        }

                    } else if (groupId === 'sc-role-chips') {
                        chip.classList.toggle('sc-selected');
                        scRoles = getChecked(groupId);
                    }
                });
            });
        }

        function scEscapeHtml(value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function scSetText(id, value) {
            const el = document.getElementById(id);
            if (!el) return;
            el.innerText = value;
        }

        function scRenderInitialSelection() {
            const wrapper = document.getElementById('sc-initial-selection');
            const tagsEl = document.getElementById('sc-initial-selection-tags');
            if (!wrapper || !tagsEl) return;

            const values = [...scSelected.values()];
            if (!values.length) {
                wrapper.style.display = 'none';
                tagsEl.innerHTML = '';
                scSetText('sc-initial-selection-count', '');
                return;
            }

            wrapper.style.display = '';
            scSetText('sc-initial-selection-count', values.length + ' students');
            tagsEl.innerHTML = values.map(function (name) {
                return '<div class="sc-tag">' + scEscapeHtml(name) + '</div>';
            }).join('');
        }

        function scSyncHiddenInputs() {
            const hiddenInputsContainer = document.getElementById('sc-hidden-inputs');
            if (!hiddenInputsContainer) return;

            hiddenInputsContainer.innerHTML = [...scSelected.keys()].map(function (id) {
                return '<input type="hidden" name="student_ids[]" value="' + id + '">';
            }).join('');
        }

        function scRenderStudents(students, emptyMessage) {
            const listEl = document.getElementById('sc-list');
            const items = Array.isArray(students) ? students : [];
            const message = emptyMessage || 'No students match your filters.';

            listEl.innerHTML = items.map(function (student) {
                const id = parseInt(student.id, 10);
                const rawName = (student.name || ((student.first_name || '') + ' ' + (student.last_name || '')).trim());
                const name = scEscapeHtml(rawName);
                const nameLower = scEscapeHtml(String(rawName).toLowerCase());
                const selectedClass = scSelected.has(id) ? ' sc-checked' : '';
                const selectedCheckboxClass = scSelected.has(id) ? ' sc-on' : '';

                return '<div class="sc-list-item' + selectedClass + '" data-id="' + id + '" data-name="' + nameLower + '" data-filtered="1" onclick="scToggleItem(this)">' +
                    '<div class="sc-checkbox' + selectedCheckboxClass + '"><span class="sc-check-icon">✓</span></div>' +
                    '<span class="sc-item-name">' + name + '</span>' +
                    '</div>';
            }).join('');

            scSetText('sc-result-badge', items.length + ' students');
        }


        window.scGoStep = function (n) {
            document.querySelectorAll('.sc-panel').forEach(function (p) { p.classList.remove('sc-visible'); });
            document.getElementById('sc-panel-' + n).classList.add('sc-visible');
            document.querySelectorAll('.sc-step').forEach(function (s) {
                const sn = parseInt(s.dataset.step);
                s.classList.remove('sc-active', 'sc-done');
                if (sn === n) s.classList.add('sc-active');
                else if (sn < n) s.classList.add('sc-done');
            });
        };

        window.scGoFromTypeStep = function () {
            if (scShouldSkipQuarter()) {
                scSetQuarterInputsDisabled(true);
                scGoStep(3);
                return;
            }

            scSetQuarterInputsDisabled(false);
            scGoStep(2);
        };

        window.scGoBackFromRoles = function () {
            if (scShouldSkipQuarter()) {
                scGoStep(1);
                return;
            }

            scGoStep(2);
        };


        $('#filter_btn').on( 'click'  , function () {
            // alert("ssss")
            scApplyFilters();
        })


        function scApplyFilters () {
            scSelected.clear();
            scRenderTags();
            scUpdateCount();
            document.getElementById('sc-list').innerHTML = '<div class="sc-empty">Loading students...</div>';
            document.getElementById('sc-search').value = '';


            const payload = {
                types: scTypes,
                leader_id: $('select[name="leader_id[]"]').val() || [],
                retention_admin_id: $('select[name="retention_admin_id[]"]').val() || [],
                instructor: $('select[name="instructor[]"]').val() || []
            };

            if (!scShouldSkipQuarter()) {
                payload.quarters = scQuarters;
                payload.year = scGetSelectedYear();
            }

            $.ajax({
                url: scFilterStudentsUrl,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: payload,
                success: function (res) {
                    const students = Array.isArray(res) ? res : (res.students || res.data || []);
                    scRenderStudents(students);
                    scGoStep(4);
                },
                error: function () {
                    scRenderStudents([], 'Could not load students. Please try again.');
                    scGoStep(4);
                }
            });
        };


        window.scSearchList = function (query) {
            const q = query.toLowerCase().trim();
            let visible = 0;

            document.querySelectorAll('#sc-list .sc-list-item').forEach(function (row) {
                if (row.dataset.filtered !== '1') return; // hidden by chip filter
                const nameMatch = (row.dataset.name || '').includes(q);
                row.style.display = nameMatch ? '' : 'none';
                if (nameMatch) visible++;
            });

            const emptyEl = document.getElementById('sc-empty-msg');
            if (emptyEl) {
                emptyEl.style.display = visible === 0 ? '' : 'none';
            }

            scSetText('sc-result-badge', visible + ' students');
        };


        window.scToggleItem = function (row) {
            const id   = parseInt(row.dataset.id);
            const name = row.querySelector('.sc-item-name').innerText.trim();

            if (scSelected.has(id)) {
                scSelected.delete(id);
                row.classList.remove('sc-checked');
                row.querySelector('.sc-checkbox').classList.remove('sc-on');
            } else {
                scSelected.set(id, name);
                row.classList.add('sc-checked');
                row.querySelector('.sc-checkbox').classList.add('sc-on');
            }

            scRenderTags();
            scUpdateCount();
        };


        window.scSelectAll = function () {
            document.querySelectorAll('#sc-list .sc-list-item').forEach(function (row) {
                if (row.style.display === 'none') return;
                const id   = parseInt(row.dataset.id);
                const name = row.querySelector('.sc-item-name').innerText.trim();
                scSelected.set(id, name);
                row.classList.add('sc-checked');
                row.querySelector('.sc-checkbox').classList.add('sc-on');
            });
            scRenderTags();
            scUpdateCount();
        };


        function scRenderTags() {
            document.getElementById('sc-tags').innerHTML = [...scSelected.entries()].map(function (e) {
                return '<div class="sc-tag">' + e[1] +
                    '<span class="sc-tag-x" onclick="scRemoveById(' + e[0] + ')"></span></div>';
            }).join('');
        }

        window.scRemoveById = function (id) {
            scSelected.delete(id);
            const row = document.querySelector('#sc-list .sc-list-item[data-id="' + id + '"]');
            if (row) {
                row.classList.remove('sc-checked');
                row.querySelector('.sc-checkbox').classList.remove('sc-on');
            }
            scRenderTags();
            scUpdateCount();
        };


        function scUpdateCount() {
            const n = scSelected.size;
            scSetText('sc-sel-count', n + ' selected');
            document.getElementById('sc-confirm-btn').disabled  = n === 0;
            scSyncHiddenInputs();
            scRenderInitialSelection();
        }


        window.scConfirm = function () {
            document.getElementById('sc-summary-tags').innerHTML = [...scSelected.values()].map(function (name) {
                return '<div class="sc-tag">' + name + '</div>';
            }).join('');

            scSetText('sc-summary-count', scSelected.size + ' students');

            scSyncHiddenInputs();

            document.getElementById('sc-main-card').style.display = 'none';
            document.getElementById('sc-summary').style.display   = 'block';
        };


        window.scReset = function () {
            scSelected.clear();
            scTypes    = [];
            scQuarters = ['all'];
            scRoles    = [];

            document.getElementById('sc-hidden-inputs').innerHTML = '';
            document.getElementById('sc-main-card').style.display = '';
            document.getElementById('sc-summary').style.display   = 'none';

            uncheckAll('sc-type-chips');
            uncheckAll('sc-quarter-chips');
            uncheckAll('sc-role-chips');

            const allQuarterChip = document.querySelector('#sc-quarter-chips [data-val="all"]');
            if (allQuarterChip) allQuarterChip.classList.add('sc-selected');

            const yearInput = document.getElementById('sc-quarter-year');
            if (yearInput) yearInput.value = scDefaultYear;

            scSetText('sc-type-count', '0 selected');
            scSetQuarterInputsDisabled(false);

            document.getElementById('sc-list').innerHTML = '<div class="sc-empty" id="sc-empty-msg">Apply filters to load students.</div>';

            scSetText('sc-result-badge', '—');
            document.getElementById('sc-search').value = '';
            scRenderTags();
            scUpdateCount();
            scGoStep(1);
        };

        initChips('sc-type-chips');
        initChips('sc-quarter-chips');
        initChips('sc-role-chips');
        scSetQuarterInputsDisabled(scShouldSkipQuarter());
        scRenderTags();
        scUpdateCount();
        scSyncHiddenInputs();
        scRenderInitialSelection();

    })();




    $(document).ready(function () {

        const selectedRetentionAdmin = @json(array_values((array) old('retention_admin_id', request()->get('retention_admin_id', []))));
        const leaderSelect = $('select[name="leader_id[]"]');
        const retentionAdminSelect = $('select[name="retention_admin_id[]"]');
        const retentionAdminsUrl = '{{ route("getRetentionAdmin") }}';
        const defaultRetentionAdminOptions = retentionAdminSelect.html();

        function loadRetentionAdmins(leaderIds) {
            if (!retentionAdminSelect.length) {
                return;
            }

            const selectedLeaderIds = Array.isArray(leaderIds) ? leaderIds.filter(Boolean) : (leaderIds ? [leaderIds] : []);

            if (!selectedLeaderIds.length) {
                retentionAdminSelect.prop('disabled', false).html(defaultRetentionAdminOptions);
                if (selectedRetentionAdmin.length) {
                    retentionAdminSelect.val(selectedRetentionAdmin);
                }
                retentionAdminSelect.trigger('change');
                return;
            }

            retentionAdminSelect.prop('disabled', true).html('<option>Loading...</option>');

            $.ajax({
                url: retentionAdminsUrl,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    staff_ids: selectedLeaderIds
                },
                success: function (res) {
                    retentionAdminSelect.empty().append('<option value="">select admin</option>');
                    var list = Array.isArray(res) ? res : (res.data || []);

                    list.forEach(function (item) {
                        retentionAdminSelect.append(
                            '<option value="' + (item.id || item.user_id) + '">' +
                            (item.first_name || '') + ' ' + (item.last_name || '') +
                            '</option>'
                        );
                    });

                    if (selectedRetentionAdmin.length) {
                        retentionAdminSelect.val(selectedRetentionAdmin).trigger('change');
                    } else {
                        retentionAdminSelect.trigger('change');
                    }

                    retentionAdminSelect.prop('disabled', false);
                },
                error: function () {
                    retentionAdminSelect.empty()
                        .append('<option value="">select admin</option>')
                        .prop('disabled', false);
                }
            });
        }


        leaderSelect.on('change', function () {
            loadRetentionAdmins($(this).val());
        });

        loadRetentionAdmins(leaderSelect.val());

    });
</script>