{% extends 'base.html' %}

{% block title %}Les films de Lulu{% endblock %}

{% block matrix %}
<canvas id="matrix"></canvas>
<script src="{{ url_for('static', filename='js/matrix.js') }}"></script>
{% endblock %}

{% block content %}
<form id="search-form" action="/search" method="GET" style="display: flex; gap: 10px; align-items: flex-stretch; flex-wrap: wrap;">

    <!-- Colonne principale des filtres -->
    <div style="display: flex; flex-direction: column; gap: 10px;">
        <div style="display: flex; flex-direction: column;">
            <p class="user-info" style="text-align: center;">
                Conseils de recherche 😊
            </p>
            <p class="user-info">
                - Préciser une catégorie<br>
                - Essayer les titres en anglais<br>
                - Ajuster la taille maximale
            </p>
        </div>

        <!-- Ligne 1 : Catégorie et Recherche -->
        <div style="display: flex; gap: 10px; align-items: flex-start">
            <div style="display: flex; flex-direction: column;">
                <label class="bold-label">Catégorie</label>
                <select name="category_id" id="category_id">
                    <option value="">Tout</option>
                    <optgroup label="🎬 Film / Vidéo">
                        <option value="2183" selected>Film/Vidéo : Film</option>
                        <option value="2184">Film/Vidéo : Série TV</option>
                        <option value="2178">Film/Vidéo : Animation</option>
                        <option value="2179">Film/Vidéo : Animation Série</option>
                        <option value="2181">Film/Vidéo : Documentaire</option>
                        <option value="2182">Film/Vidéo : Émission TV</option>
                        <option value="2180">Film/Vidéo : Concert</option>   
                        <option value="2185">Film/Vidéo : Spectacle</option>
                        <option value="2186">Film/Vidéo : Sport</option>
                        <option value="2187">Film/Vidéo : Vidéo-clips</option>
                    </optgroup>

                    <optgroup label="🎧 Audio">
                        <option value="2147">Audio : Karaoké</option>
                        <option value="2148">Audio : Musique</option>
                        <option value="2150">Audio : Podcast / Radio</option>
                        <option value="2149">Audio : Samples</option>
                    </optgroup>

                    <optgroup label="💻 Application">
                        <option value="2177">Application : Autre</option>
                        <option value="2176">Application : Formation</option>
                        <option value="2171">Application : Linux</option>
                        <option value="2172">Application : MacOS</option>
                        <option value="2174">Application : Smartphone</option>
                        <option value="2175">Application : Tablette</option>
                        <option value="2173">Application : Windows</option>
                    </optgroup>

                    <optgroup label="🕹️ Jeu vidéo">
                        <option value="2167">Jeu vidéo : Autre</option>
                        <option value="2159">Jeu vidéo : Linux</option>
                        <option value="2160">Jeu vidéo : MacOS</option>
                        <option value="2161">Jeu vidéo : Windows</option>
                        <option value="2162">Jeu vidéo : Microsoft / Xbox</option>
                        <option value="2163">Jeu vidéo : Nintendo</option>
                        <option value="2164">Jeu vidéo : Sony / PlayStation</option>
                        <option value="2165">Jeu vidéo : Smartphone</option>
                        <option value="2166">Jeu vidéo : Tablette</option>
                    </optgroup>

                    <optgroup label="📚 eBook">
                        <option value="2151">eBook : Audio</option>
                        <option value="2152">eBook : BDs</option>
                        <option value="2153">eBook : Comics</option>
                        <option value="2154">eBook : Livres</option>
                        <option value="2155">eBook : Mangas</option>
                        <option value="2156">eBook : Presse</option>
                    </optgroup>
                </select>
            </div>

            <div style="display: flex; flex-direction: column; width: 100%; box-sizing: border-box;">
                <label class="bold-label">Recherche</label>
                <input type="text" name="query" placeholder="Gladiator" required>
            </div>
        </div>

        <!-- Ligne 2 : Langue et Taille max -->
        <div style="display: flex; gap: 10px; align-items: flex-start;">
            <div style="display: flex; flex-direction: column;">
                <label class="bold-label">Langue</label>
                <select name="language">
                    <option value="">Toutes</option>
                    <option value="VO">VO</option>
                    <option value="VF">VF</option>
                </select>
            </div>

            <div style="display: flex; flex-direction: column;">
                <label class="bold-label">Taille max (Go)</label>
                <input type="number" name="max_size" min="1" step="1" value="5">
            </div>
        </div>

        <!-- Ligne 3 : Série -->
        <div id="serie-section" style="display: none; flex-direction: column; gap: 5px;">
            <label class="bold-label">Série</label>
            <div style="display: flex; gap: 10px;">
                <label><input type="radio" name="serie_type" value="all" checked> Tout</label>
                <label><input type="radio" name="serie_type" value="season"> Saison entière</label>
                <label><input type="radio" name="serie_type" value="episode"> Épisode précis</label>
            </div>

            <div id="season-field" style="display: none; margin-top: 5px;">
                <label>Saison</label>
                <input type="number" name="season" min="1" step="1" placeholder="1">
            </div>

            <div id="episode-field" style="display: none; margin-top: 5px;">
                <label>Épisode</label>
                <input type="number" name="episode" min="1" step="1" placeholder="1">
            </div>
        </div>

        <div style="display: flex; justify-content: center;">
            <button type="submit" style="padding: 5px 30px;">Rechercher</button>
        </div>

    </div>
</form>

<div id="results">
    <!-- Les résultats de recherche seront injectés ici -->
</div>

<script>
const radioButtons = document.querySelectorAll('input[name="serie_type"]');
const seasonField = document.getElementById('season-field');
const episodeField = document.getElementById('episode-field');
const serieSection = document.getElementById('serie-section');
const categorySelect = document.getElementById('category_id');

// Gestion des radio boutons (saison/épisode)
radioButtons.forEach(radio => {
    radio.addEventListener('change', () => {
        if (radio.value === 'all') {
            seasonField.style.display = 'none';
            episodeField.style.display = 'none';
        } else if (radio.value === 'season') {
            seasonField.style.display = 'block';
            episodeField.style.display = 'none';
        } else if (radio.value === 'episode') {
            seasonField.style.display = 'block';
            episodeField.style.display = 'block';
        }
    });
});

// Affiche la section Série uniquement si la catégorie correspond à une série
function updateSerieVisibility() {
    const selected = categorySelect.value;
    if (selected === "2184" || selected === "2179" || selected === "2182") {
        serieSection.style.display = "flex";
    } else {
        serieSection.style.display = "none";
    }
}

// Exécute au chargement et lors d’un changement de catégorie
categorySelect.addEventListener('change', updateSerieVisibility);
updateSerieVisibility();
</script>
{% endblock %}