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

{% block body %}
<div class="layout-wrapper">
	{% include 'admin/_components/header.html.twig' %}
	{% include 'admin/_components/sidebar.html.twig' %}
</div>

<div class="insertCours">
	<div class="container">
		{{ form_start(form, { attr: { 'data-turbo': 'true' } }) }}
		<div class="form-title">
			<h5 class="font-weight-bold">Course information</h5>
			<div class="line-container">
				<div class="line-black"></div>
				<div class="line-gray"></div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.title, 'Course title'|raw) }}
					{{ form_widget(form.title) }}
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.price, 'Course Price') }}
					{{ form_widget(form.price, {'attr': {'class': 'form-control', 'placeholder': 'Add a Price'}}) }}
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.discount, 'Price Promo') }}
					{{ form_widget(form.discount, {'attr': {'class': 'form-control', 'placeholder': 'Add a title'}}) }}
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.presentationVideoUrl, 'Course Presentation Video') }}
					{{ form_widget(form.presentationVideoUrl, {'attr': {'class': 'form-control', 'placeholder': 'Enter Vimeo video ID'}}) }}
					<small class="video_vimeo">Example:
						<span >https://player.vimeo.com/video/<u>00000000?h=111111</u>
						</span>
					</small>
					{{ form_errors(form.presentationVideoUrl) }}
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.language, 'Language') }}
					{{ form_widget(form.language, {'attr': {'class': 'form-control', 'placeholder': 'Select a language'}}) }}
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.level, 'Level') }}
					{{ form_widget(form.level, {'attr': {'class': 'form-control', 'placeholder': 'Select a level'}}) }}
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.category, 'Category') }}
					{{ form_widget(form.category, {'attr': {'class': 'form-control', 'placeholder': 'Select a Category'}}) }}
				</div>
			</div>
			<div class="col-md-6">
				<div class="form-group">
					{{ form_label(form.subCategory, 'Subcategory') }}
					{{ form_widget(form.subCategory, {'attr': {'class': 'form-control', 'placeholder': 'Select a Subcategory'}}) }}
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="form-group">
					<div class="form-group">
						{{ form_label(form.image, 'Featured Image') }}
						{{ form_widget(form.image, {'attr': {'class': 'form-control', 'placeholder': 'Add a URL'}}) }}
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="form-group">
					<label for="Course-description">Overview</label>
					<div class="container-editor">
						{{ form_widget(form.description, {'attr': {'class': 'editor'}}) }}
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="form-group">
					<label for="Course-whatYouWillLearn">Learning list</label>
					<div class="container-editor">
						{{ form_widget(form.whatYouWillLearn, {'attr': {'class': 'editor'}}) }}
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="form-group">
					<label for="Course-requirement">Add a Requirement</label>
					<div class="container-editor">
						{{ form_widget(form.requirement, {'attr': {'class': 'editor'}}) }}
					</div>
				</div>
			</div>
		</div>

		<!-- Ajout des chapitres -->
		<div>
			<!-- Gestion des chapitres -->
			<div id="chapterSections">
				<div class="form-title">
					<div class="line-container">

				</div>
				</div>				
					<div id="chaptersContainer">
						{{ form_widget(form.chapters) }}
					</div>
				</div>
			</div>
		</div>
		<div class="container-btn-chapter">
			<div class="row">
				<div class="col-md-12">
					<button type="button" class="add-chapiter" id="addChapterBtn">+ Add Chapter</button>
				</div>
			</div>
		</div>

		<div class="container-btn-chapter">
			<div class="row">
				<div class="col-md-12">
					<button class="save">
						Save
					</button>
				</div>
			</div>
		</div>

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

<a href="{{ path('app_admin_course_index') }}">back to list</a>
<script>
document.addEventListener('turbo:load', function () {
    const categoryField = document.getElementById('course_category');
    const subCategoryField = document.getElementById('course_subCategory');

    categoryField.addEventListener('change', function () {
        const categoryId = categoryField.value;
        const url = '/admin/course/get-subcategories/' + categoryId;

        fetch(url)
          .then(response => response.json())
          .then(data => {
                const subCategoryOptions = data.map(subCategory => {
                    return `<option value="${subCategory.id}">${subCategory.title}</option>`;
                }).join('');

                subCategoryField.innerHTML = subCategoryOptions;
            })
          .catch(error => console.error(error));
    });
});
document.addEventListener('turbo:load', function () {
  // Fonction pour ajouter un chapitre
  document.getElementById('addChapterBtn').addEventListener('click', function () {
    const chaptersContainer = document.getElementById('chaptersContainer');
    const prototype = document.querySelector('#course_chapters').getAttribute('data-prototype');
    
    // Remplacer le placeholder __name__ par le nombre actuel de chapitres
    const newChapterHtml = prototype.replace(/__name__/g, chaptersContainer.children.length);

    // Créer une nouvelle div contenant le chapitre
    const newChapterDiv = document.createElement('div');
    newChapterDiv.classList.add('container-Chapters'); // Ajouter la classe 'container-Chapters'
    newChapterDiv.innerHTML = newChapterHtml;

    // Créer un nouveau formulaire pour le chapitre (titre et lignes)
    const newChapterForm = document.createElement('div');
    newChapterForm.innerHTML = `
      <h5 class="font-weight-bold">Chapter Information</h5>
      <div class="line-container">
        <div class="line-black"></div>
        <div class="line-gray"></div>
      </div>
    `;

    // Ajouter ce formulaire au début du chapitre
    newChapterDiv.insertBefore(newChapterForm, newChapterDiv.firstChild); // Insérer au début

    // Créer des conteneurs globaux pour les vidéos et les fichiers
    const videoContainer = document.createElement('div');
    videoContainer.classList.add('container-video');
    const fileContainer = document.createElement('div');
    fileContainer.classList.add('container-file');

    // Ajouter les conteneurs globaux au chapitre
    newChapterDiv.appendChild(videoContainer);
    newChapterDiv.appendChild(fileContainer);

    // Ajouter les formulaires imbriqués pour les chapitres vidéo et les chapitres de fichiers
    const videoChaptersContainer = newChapterDiv.querySelector('#course_chapters_' + chaptersContainer.children.length + '_videoChapters');
    const fileChaptersContainer = newChapterDiv.querySelector('#course_chapters_' + chaptersContainer.children.length + '_fileChapters');

    let videoChapterId = 1;
    let fileChapterId = 1;
    let videoAndFileContainer = chaptersContainer.children.length;

    // Ajouter un bouton "Ajouter un chapitre vidéo" pour chaque chapitre
    const addVideoChapterBtn = document.createElement('button');
    addVideoChapterBtn.textContent = '+ Add Video';
    addVideoChapterBtn.type = 'button';
    addVideoChapterBtn.classList.add('add-btn', 'btn'); // Classes pour le bouton

    // Ajouter un bouton "Ajouter un chapitre de fichier" pour chaque chapitre
    const addFileChapterBtn = document.createElement('button');
    addFileChapterBtn.textContent = '+ Add File';
    addFileChapterBtn.type = 'button';
    addFileChapterBtn.classList.add('add-btn', 'btn'); // Classes pour le bouton

    // Ajouter les boutons après les conteneurs de chapitres
    videoContainer.appendChild(videoChaptersContainer);
    videoContainer.appendChild(addVideoChapterBtn); // "Add Video" placé à la fin des vidéos
    fileContainer.appendChild(fileChaptersContainer);
    fileContainer.appendChild(addFileChapterBtn); // "Add File" placé à la fin des fichiers

    addVideoChapterBtn.addEventListener('click', function () {
      const videoChapterPrototype = videoChaptersContainer.getAttribute('data-prototype');
      const newVideoChapterHtml = videoChapterPrototype
        .replace(/course\[chapters\]\[\d+\]\[videoChapters\]\[\d+\]\[title\]/g, `course[chapters][${videoAndFileContainer}][videoChapters][${videoChapterId}][title]`)
        .replace(/course\[chapters\]\[\d+\]\[videoChapters\]\[\d+\]\[url\]/g, `course[chapters][${videoAndFileContainer}][videoChapters][${videoChapterId}][url]`)
        .replace(/course\[chapters\]\[\d+\]\[videoChapters\]\[\d+\]\[chapter\]/g, `course[chapters][${videoAndFileContainer}][videoChapters][${videoChapterId}][chapter]`);
      const newVideoChapterDiv = document.createElement('div');
      newVideoChapterDiv.innerHTML = newVideoChapterHtml;
      videoChaptersContainer.appendChild(newVideoChapterDiv);

      // Ajouter un bouton "X" pour le chapitre vidéo
      const videoCloseButton = document.createElement('button');
      videoCloseButton.textContent = 'Cancel';
      videoCloseButton.type = 'button';
      videoCloseButton.classList.add('close-btn', 'btn');
      newVideoChapterDiv.appendChild(videoCloseButton);

      // Ajouter l'événement pour fermer le chapitre vidéo
      videoCloseButton.addEventListener('click', function () {
        this.parentNode.remove(); // Supprimer le chapitre vidéo du DOM
      });

      videoChapterId++;
    });

    addFileChapterBtn.addEventListener('click', function () {
      const fileChapterPrototype = fileChaptersContainer.getAttribute('data-prototype');
      const newFileChapterHtml = fileChapterPrototype
        .replace(/__name__/g, fileChapterId)
        .replace(/course\[chapters\]\[\d+\]\[fileChapters\]\[\d+\]\[name\]/g, `course[chapters][${videoAndFileContainer}][fileChapters][${fileChapterId}][name]`)
        .replace(/course\[chapters\]\[\d+\]\[fileChapters\]\[\d+\]\[path\]/g, `course[chapters][${videoAndFileContainer}][fileChapters][${fileChapterId}][path]`)
        .replace(/course\[chapters\]\[\d+\]\[fileChapters\]\[\d+\]\[chapter\]/g, `course[chapters][${videoAndFileContainer}][fileChapters][${fileChapterId}][chapter]`);
      const newFileChapterDiv = document.createElement('div');
      newFileChapterDiv.innerHTML = newFileChapterHtml;
      fileChaptersContainer.appendChild(newFileChapterDiv);

      // Ajouter un bouton "X" pour le chapitre de fichier
      const fileCloseButton = document.createElement('button');
      fileCloseButton.textContent = 'Close';
      fileCloseButton.type = 'button';
      fileCloseButton.classList.add('close-btn', 'btn');
      newFileChapterDiv.appendChild(fileCloseButton);

      // Ajouter l'événement pour fermer le chapitre de fichier
      fileCloseButton.addEventListener('click', function () {
        this.parentNode.remove(); // Supprimer le chapitre de fichier du DOM
      });

      fileChapterId++;
    });

    // Ajouter un bouton "Supprimer" pour chaque chapitre
    const removeButton = document.createElement('button');
    removeButton.textContent = 'Close';
    removeButton.type = 'button';
    removeButton.classList.add('cancel-btn', 'btn'); // Classes pour le bouton

    const removeButtonContainer = document.createElement('div');
    removeButtonContainer.classList.add('cancel-chapter');
    removeButtonContainer.appendChild(removeButton);

    // Ajouter le bouton "Supprimer" après le chapitre
    newChapterDiv.appendChild(removeButtonContainer);

    // Ajouter le nouveau chapitre au conteneur des chapitres
    chaptersContainer.appendChild(newChapterDiv);

    // Ajouter l'événement pour supprimer le chapitre
    removeButton.addEventListener('click', function () {
      this.parentNode.parentNode.remove(); // Supprimer le chapitre du DOM
    });
  });
  
});

</script>

{% endblock %}