@if (isset($route))
    <form action="{{ $route }}" method="POST" id="assing_student_form">
        @csrf
@endif

<div class="modal fade" id="assing_student_modal_to_schedule" tabindex="-1"
    aria-labelledby="assing_student_modal_to_schedule_Label" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content schedule-demo-student-modal">

            <!-- Header -->
            <div class="modal-header border-0 pb-0">
                <div>
                    <h1 class="modal-title fs-5 text-start">Assign Student</h1>
                    <p class="mb-0 text-muted">Search by name, code or phone</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Hidden Inputs -->

            @php
                $modalCourse = $course ?? null;
                $modalCourseIsDemo = optional(optional($modalCourse)->academyProduct)->name_en === 'demo';
            @endphp
            @if (!request()->is('schedule'))
                <input type="hidden" id="modal_course_id" name="course_id"
                    value="{{ optional($modalCourse)->id ?? '' }}">
                @if (!$modalCourseIsDemo)
                    <input type="hidden" id="modal_count_of_students" name="count_of_students"
                        value="{{ optional(optional($modalCourse)->trackType)->count_of_students ?? '' }}">
                    <input type="hidden" id="modal_exists_student_count" name="exists_student_count"
                        value="{{ optional($modalCourse)->courseStudent?->count() ?? 0 }}">
                @endif
            @endif

            <!-- Body -->
            <div class="modal-body pt-3">

                <!-- Select -->
                <div class="schedule-demo-student-modal__panel text-start">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                        <label class="schedule-demo-student-modal__label mb-0">Students</label>
                        <div class="form-check form-switch m-0 d-flex align-items-center gap-2 justify-content-center">
                            <input class="form-check-input" type="checkbox" role="switch"
                                id="filter_paid_unbooked_students">
                            <label class="form-check-label small text-muted" for="filter_paid_unbooked_students">
                                Waiting List
                            </label>
                        </div>
                    </div>
                    <select class="form-select" name="student_ids[]" id="student_id" style="width:100%;"
                        @if (request()->is('schedule') || request()->is('courses')) multiple @endif>
                        @if (!request()->is('schedule') && !request()->is('courses'))
                            <option value=""></option>
                        @endif

                        @foreach ($students as $item)
                            <option value="{{ $item->id }}"
                                @if (!request()->is('schedule'))
                                    @if (request()->query('student_id') == $item->id) selected @endif
                                @endif
                            >
                                {{ $item->first_name }} {{ $item->last_name }}
                                ({{ $item->student_code ?? 'No Code' }} - {{ $item->mobile ?? 'No Phone' }})
                            </option>
                        @endforeach
                    </select>

                    @if (!request()->is('schedule'))
                        <div class="schedule-demo-student-modal__hint">
                            You can select multiple students
                        </div>
                    @endif
                    <div id="students_filter_loader" class="small text-muted mt-2 d-none">Loading students...</div>
                </div>

                <!-- Preview -->
                <div class="schedule-demo-student-modal__preview mt-3 text-start" id="selected_student_preview">
                    No students selected yet.
                </div>
                <!-- Parent Page Selected Students -->
                <div id="selected_students_page_list" class="selected-students-container" style="margin-bottom: 10px"></div>
                <!-- Buttons -->
                @if (isset($route))
                    <button type="submit" class="btn btn-secondary">Submit</button>
                @else
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
                @endif

            </div>
        </div>
    </div>
</div>

@if (isset($route))
    </form>
@endif


@push('styles')
    <style>
        /* container */
        .selected-students-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        /* chip */
        .selected-student-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 999px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            font-size: 0.85rem;
            font-weight: 600;
            color: #0f172a;
            transition: 0.2s ease;
        }

        .selected-student-badge:hover {
            background: #e0f2fe;
            border-color: #7dd3fc;
        }

        /* avatar */
        .selected-student-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #3b82f6;
            color: #fff;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* remove */
        .selected-student-remove {
            cursor: pointer;
            font-size: 13px;
            margin-left: 4px;
            color: #64748b;
        }

        .selected-student-remove:hover {
            color: #ef4444;
        }

        /* existing modal styles (keep yours if already exist) */
        .schedule-demo-student-modal {
            border-radius: 20px;
        }

        .schedule-demo-student-modal__panel {
            padding: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 15px;
            background: #f8fafc;
        }

        .schedule-demo-student-modal__label {
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .schedule-demo-student-modal__preview {
            padding: 12px;
            background: #eff6ff;
            border-radius: 12px;
            font-weight: 600;
            color: #1d4ed8;
        }

        .selected-student-badge {
            cursor: pointer;
            transition: 0.2s ease;
        }

        .selected-student-badge:hover {
            background: #dbeafe;
            border-color: #3b82f6;
            transform: scale(1.05);
        }
    </style>
@endpush


@push('scripts')
    <script>
        $(document).ready(function() {

            const modal = $('#assing_student_modal_to_schedule');
            const studentSelect = $('#student_id');
            const preview = $('#selected_student_preview');
            const parentPageList = $('#selected_students_page_list');
            const courseIdInput = $('#modal_course_id');
            const countOfStudentsInput = $('#modal_count_of_students');
            const existsStudentCountInput = $('#modal_exists_student_count');
            const paidUnbookedToggle = $('#filter_paid_unbooked_students');
            const studentsFilterLoader = $('#students_filter_loader');
            const studentsFilterUrl = @json(route('schedule.students.filter'));

            const isScheduleRoute = @json(request()->is('schedule'));
            let multiple = studentSelect.prop('multiple');

            // console.log(multiple)
            // alert(multiple)
            // init select2
            studentSelect.select2({
                dropdownParent: modal,
                placeholder: 'Select Students',
                allowClear: true,
                width: '100%'
            });

            function selectedStudentIds() {
                return (studentSelect.val() || [])
                    .map(v => String(v))
                    .filter(v => Number(v) > 0);
            }

            function normalizeStudentSelection() {
                const values = selectedStudentIds();
                const current = studentSelect.val() || [];

                if (values.length !== current.length) {
                    studentSelect.val(values).trigger('change.select2');
                }

                return values;
            }

            // auto-select student from URL if present
            const urlStudentId = new URLSearchParams(window.location.search).get('student_id');
            if (urlStudentId) {
                studentSelect.val(urlStudentId).trigger('change');
            } else {
                studentSelect.val(null).trigger('change');
            }

            function updateDisplays() {
                normalizeStudentSelection();

                const selectedOptions = studentSelect.find('option:selected').filter(function() {
                    return $(this).val();
                });

                const selectedCount = selectedOptions.length;
                const totalAllowed = Number(countOfStudentsInput.val() || 0);
                const existingCount = Number(existsStudentCountInput.val() || 0);
                const remaining = Math.max(totalAllowed - existingCount, 0);
                const shouldEnforceCapacity = !isScheduleRoute && totalAllowed > 0;

                if (shouldEnforceCapacity) {
                    if (selectedCount > remaining) {
                        let values = selectedStudentIds();
                        values.pop();

                        studentSelect.val(values).trigger('change');

                        if (!window.toastShown) {
                            toastr.warning(`You can only select ${remaining} students`, 'Limit reached');
                            window.toastShown = true;

                            setTimeout(() => window.toastShown = false, 2000);
                        }

                        return;
                    }
                }

                // preview text
                if (shouldEnforceCapacity && selectedCount >= remaining) {
                    preview.text(`Max students reached (${totalAllowed})`);
                } else if (selectedCount > 0) {
                    preview.text(`Selected students: ${selectedCount}`);
                } else {
                    preview.text('No students selected yet.');
                }

                let html = '';

                selectedOptions.each(function() {

                    const id = $(this).val();
                    const text = $(this).text().trim().split(' (')[0];

                    if (!id || !text) return;

                    const initials = text
                        .split(' ')
                        .map(w => w[0])
                        .join('')
                        .substring(0, 2)
                        .toUpperCase();

                    const badge = `
    <div class="selected-student-badge" data-id="${id}" data-url="/students/${id}">
        <div class="selected-student-avatar">${initials}</div>
        <span class="student-name">${text}</span>
        <span class="selected-student-remove">&times;</span>
    </div>
`;

                    if (multiple) {
                        html += badge;
                    } else {
                        html = badge;
                        return false;
                    }
                });

                parentPageList.html(html);
            }

            studentSelect.on('change', updateDisplays);

            function buildStudentOption(student) {
                const fullName = `${student.first_name ?? ''} ${student.last_name ?? ''}`.trim();
                const code = student.student_code ?? 'No Code';
                const phone = student.mobile ?? 'No Phone';

                return `<option value="${student.id}">${fullName} (${code} - ${phone})</option>`;
            }

            async function reloadStudentsByFilter() {
                const previouslySelected = selectedStudentIds();

                studentsFilterLoader.removeClass('d-none');
                paidUnbookedToggle.prop('disabled', true);

                // if english club levels were loaded, always scope to those levels
                const ecLevelIds = window.ecSelectedLevelIds || [];

                try {
                    const res = await $.ajax({
                        url: studentsFilterUrl,
                        type: 'GET',
                        data: {
                            only_paid_unbooked: paidUnbookedToggle.is(':checked') ? 1 : 0,
                            ...(ecLevelIds.length ? { level_ids: ecLevelIds } : {}),
                        },
                    });

                    if (!res || !res.success || !Array.isArray(res.students)) {
                        toastr.error('Failed to load students list.');
                        return;
                    }

                    studentSelect.empty();
                    if (!multiple) {
                        studentSelect.append('<option value=""></option>');
                    }
                    res.students.forEach(student => {
                        studentSelect.append(buildStudentOption(student));
                    });

                    const availableIds = res.students.map(s => String(s.id));
                    const nextSelected = previouslySelected.filter(id => availableIds.includes(id));
                    studentSelect.val(nextSelected).trigger('change');
                } catch (e) {
                    toastr.error('Failed to load students list.');
                } finally {
                    paidUnbookedToggle.prop('disabled', false);
                    studentsFilterLoader.addClass('d-none');
                }
            }

            paidUnbookedToggle.on('change', function() {
                reloadStudentsByFilter();
            });

            // remove student from chip
            parentPageList.on('click', '.selected-student-remove', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const badge = $(this).closest('.selected-student-badge');
                const id = String(badge.data('id'));

                let values = studentSelect.val();

                if (studentSelect.prop('multiple')) {
                    values = selectedStudentIds().filter(v => String(v) !== id);
                    studentSelect.val(values).trigger('change');
                } else {
                    studentSelect.val(null).trigger('change');
                }

                badge.remove();
            });

            parentPageList.on('click', '.selected-student-badge', function(e) {
                if ($(e.target).hasClass('selected-student-remove')) return;

                const url = $(this).data('url');
                if (url) {
                    window.open(url, '_blank', 'noopener,noreferrer');
                }
            });
            // auto open
            modal.on('shown.bs.modal', function() {
                studentSelect.select2('open');
            });

            modal.on('show.bs.modal', function(event) {
                const triggerButton = event.relatedTarget;
                const clickedCourseId = triggerButton ? triggerButton.getAttribute('data-course-id') : null;
                const clickedCountOfStudents = triggerButton ? triggerButton.getAttribute(
                    'data-count-of-students') : null;
                const clickedExistsStudentCount = triggerButton ? triggerButton.getAttribute(
                    'data-exists-student-count') : null;

                if (clickedCourseId && courseIdInput.length) {
                    courseIdInput.val(clickedCourseId);
                }

                if (clickedCountOfStudents !== null && countOfStudentsInput.length) {
                    countOfStudentsInput.val(clickedCountOfStudents);
                }

                if (clickedExistsStudentCount !== null && existsStudentCountInput.length) {
                    existsStudentCountInput.val(clickedExistsStudentCount);
                }
            });

            // modal.on('hidden.bs.modal', function () {
            //     studentSelect.select2('close');
            //     studentSelect.val(null).trigger('change');
            //     preview.text('No students selected yet.');
            //     parentPageList.empty();
            //
            //     if ($('.modal.show').length === 0) {
            //         $('body').removeClass('modal-open');
            //         $('.modal-backdrop').remove();
            //     }
            // });

            // updateDisplays();
        });
    </script>
@endpush