$(document).ready(function () {
    $('#customer-select').change(function () {
        var customerId = $(this).val();

        if (customerId) {
            var url = '/add/fetch-customer-information/' + customerId + '/';

            $.ajax({
                url: url,
                method: "GET",
                success: function (response) {
                    $('#project-select').empty();
                    $('#product-select').empty();

                    $('#project-select').append('<option value="">Select a Project</option>');
                    $('#product-select').append('<option value="">Select a Product</option>');

                    response.projects.forEach(function (project) {
                        $('#project-select').append('<option value="' + project.id + '">' + project.name + '</option>');
                    });

                    response.products.forEach(function (product) {
                        $('#product-select').append('<option value="' + product.id + '">' + product.name + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching customer data:", error);
                }
            });
        } else {
            $('#project-select').empty();
            $('#product-select').empty();

            $('#project-select').append('<option value="">Select a Project</option>');
            $('#product-select').append('<option value="">Select a Product</option>');
        }
    });
});