$(document).ready(function() {
    // Function to load courses based on the selected zone
    function loadCourses(zone) {
        $.ajax({
            url: '/get_courses',  // Make sure this route exists in Flask
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ 'zone': zone }),
            success: function(response) {
                // Clear the existing options in the course dropdown
                $('#course').empty();

                // Populate the course dropdown with the new options
                response.forEach(function(course) {
                    $('#course').append(new Option(course, course));
                });
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    }

    // On page load, fetch courses for the pre-selected zone
    var defaultZone = $('#zone').val();  // Get the default selected zone
    loadCourses(defaultZone);            // Load courses for the default zone

    // When the zone dropdown changes, fetch the filtered courses
    $('#zone').change(function() {
        var selectedZone = $(this).val();
        loadCourses(selectedZone);  // Load courses for the newly selected zone
    });
});