// WHEN SELECTING A CUSTOMER FETCH AND DISPALY ITS RELATED ITEMS AND THE ITEMS THAT ARE NOT RELATED TO A CUSTOMER

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

        fetch('/fetch-customer-items/' + customerId + '/')
            .then(response => {
                return response.json();
            })
            .then(data => {
                var itemsSelectTag = document.getElementById('itemsSelectTag');
                itemsSelectTag.innerHTML = '';

                console.log('Items related to customer:', data.items_related_to_customer);
                data.items_related_to_customer.forEach(function (item) {
                    console.log('Item:', item);
                    var option = document.createElement('option');
                    option.value = item.id;
                    option.text = item.title;
                    itemsSelectTag.appendChild(option);
                });

                console.log('Items without customer:', data.items_without_customer);
                data.items_without_customer.forEach(function (item) {
                    console.log('Item:', item);
                    var option = document.createElement('option');
                    option.value = item.id;
                    option.text = item.title;
                    itemsSelectTag.appendChild(option);
                });


                // To make the select tag searchable
                $(document).ready(function () {
                    $('#itemsSelectTag').selectize();
                });
            })
            .catch(error => console.error('Error fetching customer items:', error));
    });
});