<html>

<head>
    <title>Dropout.tv</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        :root {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 17px;
            background-color: #292F36;
            color: #ccc;
        }
        body {
            text-align: center;
            margin-top: 5em;
        }
        @media (min-width: 1171px) {
            .downloader{
                
                height: 50px;
            }
        }
        @media (max-width: 1170px) {
            :root {
                font-size: 40px;
            }
            .downloader{
                height: 125px;
                width: 700px;
            }
        }
        .downloader {
            font-size: 1.25em;
            padding: 0.5em;
            border-radius: 0.5em;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <form id="dropout_download">
        <select class="downloader" name="show" id="download_show">
        {% for item in data %}
            <option value="{{ item['SHOW'] }}">{{ item['SHOW'] }}</option>
        {% endfor %}
        </select>
        <input class="downloader" name="season" type="text" id="download_season" placeholder="Season">
        <!-- <input class="downloader" name="episode" type="text" id="download_episode" placeholder="Episode"><br> -->
        <button class="downloader" type="submit">Download</button> <!-- Added a submit button -->
    </form>
    <div id="downloadResult"></div>
</body>

<script>
    function clearInput() {
        $('#download_field').val(''); // Clear the input field
    }
            
    // Handle the form submission with AJAX
    $(document).ready(function () {
        $('#dropout_download').submit(function (event) {
            event.preventDefault(); // Prevent the default form submission
            alert("Episode(s) now downloading");

            $.ajax({
                type: 'POST', // Use POST method to send data
                url: '/dropout/download', // Target URL for the CherryPy handler
                data: $('#dropout_download').serializeArray(), // Serialize the form data
                success: function (data) {
                    $('#downloadResult').html(data); // Display the result in the specified div
                    alert("File has finished downloading");
                }
            });
        });
    });

    let showsData = [];

    // Load JSON data from the file
    fetch('dropout.json')
        .then(response => response.json())
        .then(data => {
            showsData = data;
            populateShows();
        });

    function populateShows() {
        const showSelect = document.getElementById("download_show");
        showsData.forEach(show => {
            const option = document.createElement("option");
            option.value = show.SHOW;
            option.text = show.SHOW;
            showSelect.appendChild(option);
        });
    }

    function updateSeasons() {
        const showSelect = document.getElementById("download_show");
        const seasonSelect = document.getElementById("download_season");
        const selectedShow = showSelect.value;

        // Clear existing options
        seasonSelect.innerHTML = '';

        // Find the selected show and update seasons
        const show = showsData.find(s => s.SHOW === selectedShow);
        if (show) {
            show.SEASONS.forEach(season => {
                const option = document.createElement("option");
                option.value = season;
                option.text = "Season " + season;
                seasonSelect.appendChild(option);
            });
        }
    }
</script>

</html>