// assets/js/main.js
document.addEventListener('DOMContentLoaded', function () {
    console.log('Dashboard loaded.');

    const addTrackBtn = document.getElementById('add-track-btn');
    const tracksContainer = document.getElementById('tracks-container');
    let trackIndex = 1;

    if (addTrackBtn && tracksContainer) {
        addTrackBtn.addEventListener('click', function () {
            const trackHtml = `
                <div class="track-input-group">
                    <hr>
                    <h5>Track ${trackIndex + 1}</h5>
                    <div class="form-group">
                        <label for="track-title-${trackIndex}">Track Title</label>
                        <input type="text" id="track-title-${trackIndex}" name="tracks[${trackIndex}][title]" placeholder="Enter the track title" required>
                    </div>
                    <div class="form-group">
                        <label for="audio-file-${trackIndex}">Audio File</label>
                        <input type="file" id="audio-file-${trackIndex}" name="tracks[${trackIndex}][audio_file]" accept="audio/mpeg, audio/wav" required>
                    </div>
                </div>
            `;
            tracksContainer.insertAdjacentHTML('beforeend', trackHtml);
            trackIndex++;
        });
    }
});