{# templates/Admin/exam_paper/edit_with_cascade.html.twig #}
{% extends '@SonataAdmin/CRUD/base_edit.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            // -------------------------------------------------------------
            // THE HOLY GRAIL: Dynamic Sonata Unique ID Selectors
            // -------------------------------------------------------------
            const uniqId = "{{ admin.uniqId }}";
            const $institute = $('#' + uniqId + '_institute');
            const $course = $('#' + uniqId + '_course');
            // -------------------------------------------------------------

            // Debug verification: Check if jQuery successfully found the fields in the DOM
            console.log("Sonata UniqID:", uniqId);
            console.log("Institute Element Found:", $institute.length > 0, $institute.attr('id'));
            console.log("Course Element Found:", $course.length > 0, $course.attr('id'));

            if ($institute.length && $course.length) {
                
                function buildDynamicCourseDropdown(selectedInstituteId) {
                    // Destroy any residual instance to completely flush internal caches
                    if ($course.hasClass("select2-hidden-accessible")) {
                        $course.select2('destroy');
                    }
                    
                    // Reset to clean boilerplate option line
                    $course.html('<option value="">Select course code (Choose Institute first)</option>');

                    // Initialize the standalone Select2 engine layout
                    $course.select2({
                        placeholder: 'Select course code (Choose Institute first)',
                        allowClear: true,
                        width: '100%',
                        dropdownParent: $course.parent(), 
                        ajax: {
                            url: '{{path("admin_ajax_courses_by_institute")}}',
                            dataType: 'json',
                            delay: 250,
                            data: function (params) {
                                return {
                                    q: params.term, 
                                    institute: selectedInstituteId // Live state tracking payload
                                };
                            },
                            processResults: function (data) {
                                return {
                                    results: data.results || data
                                };
                            },
                            cache: false
                        }
                    });
                }

                // Initial page load binding pass
                buildDynamicCourseDropdown($institute.val());

                // Force full rebuild whenever the operator changes the upstream choice
                $institute.on('change', function() {
                    const freshId = $(this).val();
                    $course.val(null).trigger('change');
                    buildDynamicCourseDropdown(freshId);
                });
            }
        });
    </script>
{% endblock %}