(() => {
    const customerMode = document.querySelectorAll('input[name="customer_mode"]');
    const newCustomerFields = document.querySelector('[data-new-customer]');
    customerMode.forEach((radio) => radio.addEventListener('change', () => {
        if (newCustomerFields) newCustomerFields.hidden = radio.value !== 'new';
    }));

    const addProduct = document.querySelector('[data-add-product]');
    const productsBody = document.querySelector('[data-products-body]');
    addProduct?.addEventListener('click', () => {
        productsBody?.querySelector('.empty-row')?.remove();
        const row = document.createElement('tr');
        row.innerHTML = `<td><input class="control" name="products[][name]" placeholder="Search product"></td><td><input class="control" name="products[][qty]" type="number" value="1" min="1"></td><td><input class="control" name="products[][rate]" type="number" min="0" step="0.01" placeholder="0.00"></td><td><input class="control" name="products[][tax]" type="number" min="0" step="0.01" placeholder="0"></td><td><button class="button danger small" type="button" data-remove-row><i class="fa-solid fa-trash"></i></button></td>`;
        productsBody?.append(row);
    });
    productsBody?.addEventListener('click', (event) => {
        const button = event.target.closest('[data-remove-row]');
        if (button) button.closest('tr')?.remove();
    });
})();
