<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Dashboard</title>
    <link rel="icon" type="image/x-icon" href="../static/images/favicon.ico">
    <link rel="stylesheet" href="../static/css/styles.css">
    <link rel="stylesheet" href="../static/fontawesome/css/all.min.css">
    <style>

        h1 {
            margin-top: 20px;
            font-size: 36px;
            color: #333;
        }
        h2 {
            margin-top: 2px;
            font-size: 24px;
            color: #333;
        }
        .container {
            width: 80%;
            max-width: 300px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #ccc;
            border-radius: 10px;
            background-color: #ffffffb6;
            position: relative;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .checkbox-group input {
            margin-right: 10px;
        }
        .button-group {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .button-group .btn {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            text-decoration: none;
        }
        .button-group .btn:hover {
            background-color: #0056b3;
        }
        .status {
            margin-top: 10px;
            font-size: 16px;
            color: #555;
        }
        .side-img {
            position: absolute;
            top: 80px;
            left: 0;
            width: 230px; /* Set desired width */
            height: auto; /* Adjust height automatically to maintain aspect ratio */
            z-index: -1; /* Ensure image is behind other content */
        }
        .input-label{
            text-align: left;
        }
        .form-group textarea {
            width: 100%;
            padding: 8px;
            font-size: 16px;
            box-sizing: border-box;
            resize: none; /* Prevents the user from resizing the textarea */
            overflow-wrap: break-word; /* Ensures that long URLs wrap to the next line */
            white-space: pre-wrap; /* Preserves whitespace and wraps text as necessary */
        }
    </style>
</head>
<body>
    <div id="navbar"></div>
    <script>
        fetch('/static/html/nav.html')
            .then(response => response.text())
            .then(data => {
                document.getElementById('navbar').innerHTML = data;
            });
    </script>

    <div class="background-image"></div>

    <!--<div><img src="/static/images/helio-posh.png" alt="Helio Posh" class="side-img"></div>-->
    <div class="content-wrapper">
        <div class="content">
 
            <div>
                <img src="/static/images/helio-posh.png" alt="Helio Posh" class="side-img">
            </div>
            <h1>Media Dashboard</h1>
            <div class="container">
                <h2>Playlist Loop</h2>
                <div class="checkbox-group">
                    <input type="checkbox" id="autoPlayAtBoot" name="autoPlayAtBoot" checked>
                    <label for="autoPlayAtBoot">Autostart @Boot</label>
                </div>
                <div class="form-group">
                    <label class="input-label" for="mediaLocation">Media Sources:</label>
                    <select id="mediaLocation" name="mediaLocation">
                        <option value="USB">No Media Available</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="input-label" for="imageDuration">Image Duration in Secs:</label>
                    <input type="number" id="imageDuration" name="imageDuration" min="1" max="60">   
                </div>
                <div class="button-group">
                    <button class="btn" onclick="startMediaLoop()">Start</button>
                    <button class="btn" onclick="stopMediaLoop()">Stop</button>
                </div>
                <div class="status" id="mediaLoopStatus">status</div>
            </div>
            <div class="container">
                <h2>Web Gallery</h2>
                <div class="checkbox-group">
                    <input type="checkbox" id="autoStart" name="autoStart" checked>
                    <label for="autoStart">Autostart</label>
                </div>
                <div class="form-group">
                    <button class="btn" onclick="clearURL()">Clear</button>
                    <label class="input-label" for="galleryURL">URL:</label>
                    <textarea id="galleryURL" name="galleryURL" rows="3"></textarea>
                </div>
                <div class="button-group">
                    <button class="btn" onclick="startWebGallery()">Start</button>
                    <button class="btn" onclick="stopWebGallery()">Stop</button>
                </div>
                <div class="status" id="webGalleryStatus">status</div>
            </div>
        </div>
    </div>


    <script>
        function loadMediaSources() {
            fetch('../get_media_sources')
                .then(response => response.json())
                .then(data => {
                    media_sources = data.folders; // Access the "folders" array in the JSON
                    const mediaLocationSelect = document.getElementById('mediaLocation');

                    // Clear any existing options
                    while (mediaLocationSelect.options.length > 0) {
                        mediaLocationSelect.remove(0);
                    }

                    // Add new options
                    media_sources.forEach(media => {
                        var option = document.createElement('option');
                        option.text = media.folder_name_display;
                        option.value = media.folder_path;
                        mediaLocationSelect.add(option);
                    });
                })
                .catch(error => {
                    console.error("Error loading media sources:", error);
                });
        }

        function loadLastUsedData() {
            fetch('../get_screen_settings')
                .then(response => response.json())
                .then(data => {
                    console.info(data)
                    document.getElementById('autoPlayAtBoot').checked = data.autoPlayAtBoot || true;
                    document.getElementById('imageDuration').value = data.imageDuration || 5;
                    document.getElementById('autoStart').checked = data.autoStart || true;
                    document.getElementById('galleryURL').value = data.url || 'google.com';
                })
                .catch(error => {
                    console.error("Error loading screen settings:", error);
                });
        }

        function startMediaLoop() {
            const mediaLocation = document.getElementById('mediaLocation').value;
            const imageDuration = document.getElementById('imageDuration').value;
            const autoPlayAtBoot = document.getElementById('autoPlayAtBoot').checked;

            fetch('../start_media_loop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ mediaLocation: mediaLocation, imageDuration: imageDuration , autoPlayAtBoot: autoPlayAtBoot})
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('mediaLoopStatus').innerText = data.message;
                })
                .catch(error => {
                    console.error("Error during start media loop:", error);
                    document.getElementById('mediaLoopStatus').innerText = "Error during start media loop.";
                });
        }

        function stopMediaLoop() {
            fetch('../stop_media_loop', {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('mediaLoopStatus').innerText = data.message;
                })
                .catch(error => {
                    console.error("Error during stop media loop:", error);
                    document.getElementById('mediaLoopStatus').innerText = "Error during stop media loop.";
                });
        }

        function startWebGallery() {
            const autoStart = document.getElementById('autoStart').checked;
            const url = document.getElementById('galleryURL').value 
            fetch('../start_web_gallery', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ url: url, autoStart: autoStart })
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('webGalleryStatus').innerText = data.message;
                })
                .catch(error => {
                    console.error("Error during start web gallery:", error);
                    document.getElementById('webGalleryStatus').innerText = "Error during start web gallery.";
                });
        }

        function stopWebGallery() {
            fetch('../stop_web_gallery', {
                method: 'POST'
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('webGalleryStatus').innerText = data.message;
                })
                .catch(error => {
                    console.error("Error during stop web gallery:", error);
                    document.getElementById('webGalleryStatus').innerText = "Error during stop web gallery.";
                });
        }
        
        function clearURL() {
            document.getElementById('galleryURL').value = '';
        }
        
        document.addEventListener('DOMContentLoaded', loadLastUsedData);

        // Call the function to load media sources when the page loads
        window.onload = loadMediaSources;
    </script>
</body>
</html>
