{% extends 'base.html.twig' %}

{% block title %}New Chapter{% endblock %}

{% block body %}
    <h1>Create new Chapter</h1>

    {{ form_start(form) }}
        <div class="form-group">
            {{ form_label(form.title, 'Titre') }}
            {{ form_widget(form.title, {'attr': {'class': 'form-control'}}) }}
        </div>

    <div class="form-group">
    {{ form_label(form.description, 'Description') }}
    {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}
    </div>

    <div class="form-group">
    {{ form_label(form.course, 'Cours') }}
    {{ form_widget(form.course, {'attr': {'class': 'form-control'}}) }}
    </div>

        <!-- Bloc pour les chapitres vidéo -->
        <div id="videoBlog">
            <h2>Videos</h2>
            <button type="button" id="addChapter" class="btn btn-primary" data-type="video">Add Video Chapter</button>
            <div id="videoChaptersWrapper"></div>
        </div>

        <!-- Bloc pour les chapitres de fichiers -->
        <div id="fileBlog">
            <h2>Files</h2>
            <button type="button" id="addChapter" class="btn btn-secondary" data-type="file">Add File Chapter</button>
            <div id="fileChaptersWrapper"></div>
        </div>

        <button class="btn">{{ button_label|default('Save') }}</button>
    {{ form_end(form) }}

    <a href="{{ path('app_chapter_index') }}">Back to list</a>

    <script>
        document.addEventListener('turbo:load', function () {
            // Fonction pour gérer l'ajout et la suppression de champs
            function handleChapter(type) {
                var wrapper = document.querySelector(`#${type}ChaptersWrapper`);
                var addButton = document.querySelector(`#addChapter[data-type="${type}"]`);
                var prototype = document.querySelector(`#chapter_${type}Chapters`).getAttribute('data-prototype');
                var index = wrapper.children.length;

                // Ajouter un champ de type vidéo ou fichier
                addButton.addEventListener('click', function () {
                    var newForm = prototype.replace(/__name__/g, index);
                    var newDiv = document.createElement('div');
                    newDiv.innerHTML = newForm;

                    // Ajouter le bouton de suppression (X)
                    var removeButton = document.createElement('button');
                    removeButton.type = 'button';
                    removeButton.classList.add(`remove-${type}`);
                    removeButton.textContent = 'X';
                    newDiv.appendChild(removeButton);

                    // Ajouter le champ au conteneur
                    wrapper.appendChild(newDiv);
                    index++;
                });

                // Supprimer un champ
                wrapper.addEventListener('click', function (e) {
                    if (e.target && e.target.classList.contains(`remove-${type}`)) {
                        var formDiv = e.target.closest('div');
                        formDiv.parentNode.removeChild(formDiv);
                    }
                });
            }

            // Gérer les chapitres vidéo
            handleChapter('video');

            // Gérer les chapitres fichier
            handleChapter('file');
        });
    </script>
{% endblock %}