<?php
function getAudioFilesByFolder($dir)
{
    $audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a'];
    $files = [];

    $iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));

    foreach ($iterator as $file) {
        if ($file->isFile()) {
            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($ext, $audioExtensions)) {
                $folder = dirname(str_replace("\\", "/", $file->getPathname()));
                $files[$folder][] = str_replace("\\", "/", $file->getPathname());
            }
        }
    }

    // Sort by folder names and then by file names
    ksort($files);
    foreach ($files as &$fileList) {
        sort($fileList);
    }

    return $files;
}

$audioFilesByFolder = getAudioFilesByFolder(".");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Bible Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            padding: 20px;
        }
        h2 {
            color: #333;
        }
        #playButton {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        #playButton:hover {
            background-color: #218838;
        }
        audio {
            display: block;
            margin: 10px auto;
        }
        .playing {
            background-color: #ffc107 !important;
        }
        .collapsible {
            background-color: #007bff;
            color: white;
            cursor: pointer;
            padding: 10px;
            width: 60%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 16px;
            border-radius: 5px;
            margin: 5px auto;
        }
        .active, .collapsible:hover {
            background-color: #0056b3;
        }
        .content {
            display: none;
            overflow: hidden;
            background-color: white;
            width: 60%;
            margin: auto;
            padding: 10px;
            border-radius: 5px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 8px;
            background: white;
            border-radius: 5px;
            transition: 0.3s;
            cursor: pointer;
        }
        li:hover {
            background: #ddd;
        }
    </style>
</head>
<body>
    <h2>Audio Bible Player</h2>
    <button id="playButton">Start Playlist</button>
    <audio id="audioPlayer" controls>
        <source id="audioSource" src="" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <?php $first = true; ?>
    <?php foreach ($audioFilesByFolder as $folder => $files): ?>
        <button class="collapsible"><?php echo basename($folder); ?></button>
        <div class="content" style="display: <?php echo $first ? 'block' : 'none'; ?>;">
            <ul>
                <?php foreach ($files as $file): ?>
                    <li class="track" data-filepath="<?php echo $file; ?>">
                        <?php echo basename($file); ?>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
        <?php $first = false; ?>
    <?php endforeach; ?>

    <script>
        var audioPlayer = document.getElementById("audioPlayer");
        var playButton = document.getElementById("playButton");
        var tracks = Array.from(document.querySelectorAll(".track"));
        var collapsibles = document.querySelectorAll(".collapsible");
        var currentTrackIndex = -1;

        function playAudio(index) {
            if (index >= 0 && index < tracks.length) {
                var track = tracks[index];
                audioPlayer.src = track.dataset.filepath;
                audioPlayer.play().catch(error => console.log("Playback error:", error));
                currentTrackIndex = index;
                highlightCurrentTrack();
                updateURL(index);
            }
        }

        function highlightCurrentTrack() {
            tracks.forEach(track => track.classList.remove("playing"));
            if (currentTrackIndex >= 0) {
                tracks[currentTrackIndex].classList.add("playing");
            }
        }

        function hidePlayButton() {
            playButton.style.display = "none";
        }

        function updateURL(index) {
            const url = new URL(window.location);
            url.searchParams.set('track', index);
            window.history.replaceState(null, '', url);
        }

        function getTrackFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            const trackIndex = parseInt(urlParams.get('track'));
            return isNaN(trackIndex) ? -1 : trackIndex;
        }

        tracks.forEach((track, index) => {
            track.addEventListener("click", function() {
                hidePlayButton();
                playAudio(index);
            });
        });

        playButton.addEventListener("click", function() {
            if (tracks.length > 0) {
                playAudio(0);
            }
            hidePlayButton();
        });

        collapsibles.forEach((collapsible) => {
            collapsible.addEventListener("click", function() {
                // Collapse others
                collapsibles.forEach(c => {
                    if (c !== this) {
                        c.classList.remove("active");
                        c.nextElementSibling.style.display = "none";
                    }
                });
                // Toggle current
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                content.style.display = (content.style.display === "block") ? "none" : "block";
                if (content.style.display === "block") {
                    setTimeout(() => content.scrollIntoView({ behavior: 'smooth', block: 'start' }), 100);
                }
            });
        });

        audioPlayer.addEventListener("ended", function() {
            if (currentTrackIndex < tracks.length - 1) {
                playAudio(currentTrackIndex + 1);
            }
        });

        // Load track from URL if available
        window.addEventListener("load", function() {
            const savedTrackIndex = getTrackFromURL();
            if (savedTrackIndex >= 0 && savedTrackIndex < tracks.length) {
                playAudio(savedTrackIndex);
                hidePlayButton();
            }
        });
    </script>
</body>
</html>