// JavaScript code (lcp-svg-repeater.js) to handle adding/removing rows dynamically
document.addEventListener('DOMContentLoaded', function () {
    // Add row
    document.getElementById('add-svg-row').addEventListener('click', function () {
        const container = document.getElementById('svg-repeater-container');
        const newRow = document.createElement('div');
        newRow.classList.add('repeater-row');
        newRow.innerHTML = `
            <input type="text" name="lcp_custom_svgs[][name]" placeholder="SVG Name" />
            <textarea name="lcp_custom_svgs[][path]" placeholder="SVG Path"></textarea>
            <button type="button" class="remove-row">Remove</button>
        `;
        container.appendChild(newRow);
    });

    // Remove row
    document.getElementById('svg-repeater-container').addEventListener('click', function (event) {
        if (event.target.classList.contains('remove-row')) {
            event.target.closest('.repeater-row').remove();
        }
    });
});


// REPEATERS
document.addEventListener('DOMContentLoaded', function() {
    // Function to add a new row to the repeater
    function addRepeaterRow(repeaterElement) {
        const newRow = repeaterElement.querySelector('.lcp-repeater-row').cloneNode(true); // Clone the first row
        repeaterElement.appendChild(newRow);

        // Add remove functionality to the new row's remove button
        const removeButton = newRow.querySelector('.remove-row');
        removeButton.addEventListener('click', function() {
            newRow.remove(); // Remove the row when the button is clicked
        });
    }

    // Find all .lcp-repeater elements in the DOM
    const repeaters = document.querySelectorAll('.lcp-repeater');

    repeaters.forEach(function(repeaterElement) {
        // Add event listener for the "Add Row" button
        const addButton = repeaterElement.querySelector('.add-row');
        addButton.addEventListener('click', function() {
            addRepeaterRow(repeaterElement); // Add a new row when clicked
        });

        // Initially, make sure each row has a remove button functionality
        const rows = repeaterElement.querySelectorAll('.lcp-repeater-row');
        rows.forEach(function(row) {
            const removeButton = row.querySelector('.remove-row');
            removeButton.addEventListener('click', function() {
                row.remove(); // Remove the row when the remove button is clicked
            });
        });
    });
});







// REPEATERS
    // Example html:
    //  <div class="my-repeater-container">
    // <div class="my-repeater-row">
    // <input type="text" name="field_1[]">
    // <input type="text" name="field_2[]">
    // <input type="text" name="field_3[]">
    //<button class="delete-repeater-row">Delete Row</button>
    //</div>
    //<button class="new-repeater-row">Click to add a new row</button>
    //</div>

document.addEventListener('DOMContentLoaded', function () {
    // Get all repeater containers
    const repeaterContainers = document.querySelectorAll('.my-repeater-container');
    
    // Loop through each repeater container and initialize the functionality
    repeaterContainers.forEach(function (container) {
        const newRowButton = container.querySelector('.new-repeater-row');
        const rowTemplate = container.querySelector('.my-repeater-row');

        // Hide the row template (we will clone it)
        rowTemplate.style.display = 'none';

        // Add event listener for the 'Add New Row' button
        newRowButton.addEventListener('click', function () {
            // Clone the row template
            const newRow = rowTemplate.cloneNode(true);

            // Make sure the new row is visible
            newRow.style.display = 'flex';  // or 'block' based on your layout

            // Reset input values in the new row
            const inputs = newRow.querySelectorAll('input');
            inputs.forEach(input => input.value = '');

            // Add the new row to the repeater container
            container.insertBefore(newRow, newRowButton);
        });

        // Handle deleting rows
        container.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('delete-repeater-row')) {
                const rowToDelete = e.target.closest('.my-repeater-row');
                if (rowToDelete) {
                    rowToDelete.remove();
                }
            }
        });
    });
});