(function() {
    var cfg = window.paintopsPaintColorsCfg || {};
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('cs-remove-row') && e.target.closest('#cs-paint-color-table')) {
            var tbody = e.target.closest('tbody');
            if (tbody && tbody.rows.length > 1) {
                e.target.closest('tr').remove();
            } else {
                e.target.closest('tr').querySelectorAll('input').forEach(function(input) { input.value = ''; });
                e.target.closest('tr').querySelectorAll('select').forEach(function(select) { select.value = ''; });
            }
        }

        if (e.target.id === 'cs-add-paint-color') {
            var tbody = document.querySelector('#cs-paint-color-table tbody');
            var tr = document.createElement('tr');
            tr.innerHTML =
                '<td><input type="text" name="paint_color_name[]" placeholder="i.e. SW Alabaster #7008"></td>' +
                '<td><input type="text" name="paint_product[]" placeholder="i.e. SuperPaint"></td>' +
                '<td><input type="text" name="paint_area[]" placeholder="i.e. Trim and doors"></td>' +
                '<td><input type="text" name="paint_quantity[]" placeholder="i.e. 2 gallons"></td>' +
                '<td>' + (cfg.sheenSelectHtml || '') + '</td>' +
                '<td><button type="button" class="button cs-remove-row">Remove</button></td>';
            tbody.appendChild(tr);
        }
    });
})();
