// admin-settings.js
document.addEventListener('DOMContentLoaded', function () {
    const images = document.querySelectorAll('#thumbs img');
    const input = document.getElementById('ptpian_theme');

    images.forEach(function(img) {
        img.addEventListener('click', function() {
            const index = img.getAttribute('data-index');
            input.value = 'thumb' + index + '.png';

            images.forEach(i => i.classList.remove('hover'));
            img.classList.add('hover');
        });
    });
});

document.addEventListener("DOMContentLoaded", function () {

    const tabs = document.querySelectorAll(".nav-tab");
    const tabContents = document.querySelectorAll(".ptpian-tab");

    tabs.forEach(tab => {
        tab.addEventListener("click", function (e) {
            e.preventDefault();

            // Remove active class
            tabs.forEach(t => t.classList.remove("nav-tab-active"));
            tabContents.forEach(c => c.style.display = "none");

            // Activate clicked tab
            this.classList.add("nav-tab-active");
            document.getElementById("tab-" + this.dataset.tab).style.display = "block";
        });
    });

});

document.addEventListener("DOMContentLoaded", function() {

    let table = document.querySelector("#ptpian-song-table tbody");
    let addBtn = document.getElementById("add-song");

    // Use a proper index counter
    let rowIndex = table ? table.rows.length : 0;

    addBtn.addEventListener("click", function() {

        let row = `
        <tr>
            <td><input type="text" name="ptpian_songs_data[${rowIndex}][name]" placeholder="Song Name"></td>
            <td><input type="text" name="ptpian_songs_data[${rowIndex}][scale]" placeholder="C Major"></td>          
			<td><textarea name="ptpian_songs_data[${rowIndex}][notes]" placeholder="C4,E4,G4"></textarea></td>			
            <td><button type="button" class="button remove-row">Remove</button></td>
        </tr>`;

        table.insertAdjacentHTML("beforeend", row);

        rowIndex++; // increment index safely
    });

    // Remove row
    document.addEventListener("click", function(e) {
        if (e.target.classList.contains("remove-row")) {
            e.target.closest("tr").remove();
        }
    });

});


