document.addEventListener('DOMContentLoaded', function () {
    var itemsSelectTag = $('#itemsSelectTag').selectize()[0].selectize;

    document.getElementById('customersSelectTag').addEventListener('change', function () {
        var customerId = this.value;

        // FETCH CUSTOMER ITEMS
        fetch('/fetch-customer-items/' + customerId + '/')
            .then(response => {
                return response.json();
            })
            .then(data => {
                itemsSelectTag.clearOptions();

                // Remove the selected option "Select Customer First"
                var selectCustomerOption = itemsSelectTag.options['Select Customer First'];
                if (selectCustomerOption) {
                    delete itemsSelectTag.options['Select Customer First'];
                }

                // Add items related to the customer
                data.items_related_to_customer.forEach(function (item) {
                    itemsSelectTag.addOption({value: item.id, text: item.title});
                });

                // Add items without a customer
                data.items_without_customer.forEach(function (item) {
                    itemsSelectTag.addOption({value: item.id, text: item.title});
                });

                itemsSelectTag.refreshOptions();
            })
            .catch(error => console.error('Error fetching customer items:', error));



        // FETCH CUSTOMER BUSINESSES
        $.ajax({
            url: `/fetch-customer-businesses/${customerId}/`,
            type: 'GET',
            success: function (data) {
                $('#businessSelectTag').empty();
                if (data.businesses) { // Check if businesses exist in the response
                    $('#businessSelectTag').append(`<option value="">Select Business</option>`);
                    // Iterate over each business in the response
                    data.businesses.forEach(function(business) {
                        $('#businessSelectTag').append(`<option value="${business.id}">${business.name}</option>`);
                    });
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    });
});