{# {% extends 'base.html.twig' %} #}
{% extends "/layout/master.html.twig" %}

{% block title %}Épisode Maker - {{ episode.id is defined ? 'Modifier' : 'Ajouter' }}{% endblock %}

{% block body %}
<div class="container">
    <!-- Titre principal -->
    <div class="row align-items-center">
        <div class="col-md-6">
            <h4 class="main-title">
                {{ episode.id is defined ? '✏️ Modifier un contenu' : '➕ Ajouter un contenu' }}
            </h4>
            {% if episode.id is defined %}
                <p class="text-muted">
                    Vous modifiez : <strong>{{ episode.name }}</strong>
                </p>
            {% endif %}
        </div>


        <div class="col-md-6 mb-1 mt-1 text-end">
            <a href="{{ path('episode_index') }}" class="btn btn-secondary me-2">
                <i class="ti ti-list"></i> Voir la liste
            </a>
            {% if episode.id is defined %}
                <a href="{{ path('episode_new') }}" class="btn btn-primary">
                    <i class="ti ti-plus"></i> Ajouter un nouveau
                </a>
            {% endif %}
        </div>
    </div>

    <!-- Formulaire dans une carte -->
    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="card-title mb-4 text-secondary">
                Formulaire {{ episode.id is defined ? 'de modification' : 'd\'ajout' }}
            </h5>

            {{ form_start(form, { 'attr': {'class': 'needs-validation'} }) }}
            
            <!-- Section 1 : Informations générales -->
            <h6 class="border-bottom pb-2 mb-4 text-uppercase text-secondary">🔎 Informations générales</h6>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        {{ form_label(form.name, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.name, { 'attr': {'class': 'form-control', 'placeholder': 'Nom du contenu (ex: Breaking Bad, Harry Potter)'} }) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.type, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.type, { 'attr': {'class': 'form-select'} }) }}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        {{ form_label(form.status, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.status, { 'attr': {'class': 'form-select'} }) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.platform, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.platform, { 'attr': {'class': 'form-control', 'placeholder': 'Ex: Netflix, Disney+, Amazon'} }) }}
                    </div>
                </div>
            </div>








            <!-- Section 2 : Progression -->
            <h6 class="border-bottom pb-2 mb-4 text-uppercase text-secondary">📈 Progression</h6>
            <div class="row">
                
                {# livre #}
                <div class="col-md-6" id="book_div_1">
                    <div class="mb-3">
                        {{ form_label(form.page, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.page, { 'attr': {'class': 'form-control', 'placeholder': 'Page actuelle (si livre)'} }) }}
                    </div>
                </div>
                <div class="col-md-6" id="book_div_2">
                    <div class="mb-3">
                        {{ form_label(form.chapter, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.chapter, { 'attr': {'class': 'form-control', 'placeholder': 'Chapitre actuel (si livre)'} }) }}
                    </div>
                </div>
                

                {# Serie #}
                <div class="col-md-6" id="serie_div_1">
                    <div class="mb-3">
                        {{ form_label(form.season, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.season, { 'attr': {'class': 'form-control', 'placeholder': 'Saison actuelle (si série)'} }) }}
                    </div>
                </div> 
                <div class="col-md-6" id="serie_div_2">
                    <div class="mb-3">
                        {{ form_label(form.episode, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.episode, { 'attr': {'class': 'form-control', 'placeholder': 'Épisode actuel (si série)'} }) }}
                    </div>
                </div>


                {# film #}
                <div class="col-md-12" id="movie_div_1">
                    <div class="mb-3">
                        {{ form_label(form.filmNumber, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.filmNumber, { 'attr': {'class': 'form-control', 'placeholder': 'N° de l\'Opus'} }) }}
                    </div>
                </div>
                <div class="col-md-6" id="movie_div_2">
                    <div class="mb-3">
                        {{ form_label(form.timerHours, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.timerHours, { 'attr': {'class': 'form-control', 'placeholder': 'Heures'} }) }}
                    </div>
                </div>
                <div class="col-md-6" id="movie_div_3">
                    <div class="mb-3">
                        {{ form_label(form.timerMinutes, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.timerMinutes, { 'attr': {'class': 'form-control', 'placeholder': 'Minutes'} }) }}
                    </div>
                </div>


            </div>










            <!-- Section 3 : Notes et rappels -->
            <h6 class="border-bottom pb-2 mb-4 text-uppercase text-secondary">📋 Notes et rappels</h6>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        {{ form_label(form.reminder, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.reminder, { 'attr': {'class': 'form-control', 'type': 'date'} }) }}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        {{ form_label(form.notes, null, { 'label_attr': { 'class': 'form-label fw-bold' } }) }}
                        {{ form_widget(form.notes, { 'attr': {'class': 'form-control', 'rows': '5', 'placeholder': 'Ajoutez vos commentaires ici...'} }) }}
                    </div>
                </div>
            </div>

            {{ form_end(form) }}
        </div>
    </div>
</div>

{% block javascripts %}

    <script>

        document.addEventListener('DOMContentLoaded', function () {
            const select = document.getElementById('episode_maker_type');

            // 👉 Liste des valeurs et des IDs à masquer si non sélectionnées
            const fieldVisibilityMap = {
                'Livre': ['book_div_1', 'book_div_2'],
                'Série': ['serie_div_1', 'serie_div_2'], 
                'Film': ['movie_div_2', 'movie_div_3'],
                'Saga': ['movie_div_1','movie_div_2', 'movie_div_3'], 
                'Animé': ['movie_div_2', 'movie_div_3','serie_div_1', 'serie_div_2'],
                'Documentaire': ['movie_div_2', 'movie_div_3','serie_div_1', 'serie_div_2'], 
                'Dessin Animé': ['movie_div_2', 'movie_div_3','serie_div_1', 'serie_div_2'],
                'Podcast': ['movie_div_2', 'movie_div_3','serie_div_1', 'serie_div_2'], 
                'Cours': ['movie_div_1','movie_div_2', 'movie_div_3'],
            };

            function toggleFields() {
                // D'abord, on cache tous les champs mentionnés dans le mapping
                const allFields = new Set(Object.values(fieldVisibilityMap).flat());
                allFields.forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.style.display = 'none';
                });

                // Ensuite, on affiche uniquement ceux correspondant à la valeur sélectionnée
                const visibleFields = fieldVisibilityMap[select.value];
                if (visibleFields) {
                    visibleFields.forEach(id => {
                        const el = document.getElementById(id);
                        if (el) el.style.display = '';
                    });
                }
            }

            select.addEventListener('change', toggleFields);
            toggleFields(); // Initialisation
        });


    </script>

{% endblock %}

{% endblock %}