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

{% block title %}
  Détails de la formation | {{ formation.titre }}
{% endblock %}

{% block meta_description %}
  Formation PSDM chez SMA : certification réglementaire, maîtrise des dispositifs médicaux, accompagnement patient. Développez vos compétences dès aujourd’hui.
{% endblock %}

{% block body %}
<div class="bg-gray-100 py-8">
  <div class="wrapper bg-white mx-auto max-w-5xl shadow-lg overflow-hidden">
    <!-- Image de la formation -->
<div class="relative w-full h-96">
  <img src="/images/formations/{{ formation.imageName }}" 
       alt="Image de la formation {{ formation.titre }}" 
       class="w-full h-full object-cover">
  {% if not formation.isDisponible %}
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-red-600 text-white text-center px-6 py-4 shadow-lg">
        <span class="text-2xl font-bold uppercase tracking-wide">Formation bientôt disponible</span>
      </div>
    </div>
  {% endif %}
</div>

    <div class="p-6 space-y-6">
      <!-- Titre principal avec étiquette si réglementaire -->
      <div class="flex justify-center items-center gap-4">
        <h1 class="text-3xl font-bold text-[#045B79] text-center">
          {{ formation.titre }}
        </h1>
        {% if formation.isReglementaire %}
          <span class="bg-red-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-md">
            Formation Réglementaire
          </span>
        {% endif %}
      </div>

      <!-- Boutons des lieux -->
      <div id="button-lieu" data-lieux="{{ formation.lieuFormation|json_encode }}" 
           class="flex flex-wrap gap-2 justify-center md:justify-start">
      </div>

      <!-- Description -->
      <div class="text-gray-700">
        {{ formation.description|replace({'&nbsp;': ''})|raw }}
      </div>

      <!-- Grille à deux colonnes pour contenu et détails -->
      <div class="grid md:grid-cols-2 gap-8">
        <!-- Colonne gauche : Informations détaillées -->
        <div class="space-y-6">
          <!-- Objectifs -->
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Objectifs
              {{ ux_icon('heroicons-outline:light-bulb', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.objectifsFormation|raw }}</p>
          </div>

          <!-- Public Concerné -->
          {% if formation.public_concerne %}
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Public Concerné
              {{ ux_icon('heroicons-outline:user-group', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.public_concerne|raw }}</p>
          </div>
          {% endif %}

          <!-- Prérequis -->
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Prérequis
              {{ ux_icon('heroicons-outline:badge-check', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.prerequis|raw }}</p>
          </div>

          <!-- Moyens pédagogiques -->
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Moyens pédagogiques
              {{ ux_icon('heroicons-outline:academic-cap', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.moyenPedagogiques|raw }}</p>
          </div>

          <!-- Modalités d'évaluation -->
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Modalités d'évaluation
              {{ ux_icon('heroicons-outline:clipboard-check', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.modaliteEvaluation|raw }}</p>
          </div>

          <!-- Programme -->
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Programme
              {{ ux_icon('heroicons-outline:book-open', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.programme|raw }}</p>
          </div>

          <!-- Informations Complémentaires -->
          {% if formation.informationsComplementaires %}
          <div class="p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition mt-6">
            <h2 class="text-2xl font-bold text-[#045B79] mb-2 flex items-center">
              Informations Complémentaires
              {{ ux_icon('heroicons-outline:information-circle', { width: 24, height: 24, class: 'ml-2 text-[#045B79]' }) }}
            </h2>
            <p class="text-gray-600">{{ formation.informationsComplementaires|raw }}</p>
          </div>
          {% endif %}
        </div>

        <!-- Colonne droite : Carte de détails -->
        <div class="rounded-lg flex flex-col items-center space-y-6">
          <h2 class="text-xl font-bold text-[#045B79]">Détails</h2>
          <!-- Section mise en avant pour Prix et Durée -->
          <div class="flex flex-col sm:flex-row justify-around items-center w-full gap-4">
            <div class="flex flex-col items-center bg-blue-50 p-4 rounded-lg flex-1">
              <span class="text-sm text-gray-600 mt-1 uppercase tracking-wide font-bold">Prix</span>
              {% if formation.prix %}
                <span class="text-2xl text-center font-extrabold text-[#045B79]">{{ formation.prix }} € H.T</span>
              {% else %}
                <span class="text-xl text-center font-extrabold text-[#045B79]">Prix sur demande</span>
              {% endif %}
            </div>
            <div class="flex flex-col items-center bg-blue-50 p-4 rounded-lg flex-1">
              <span class="text-sm text-gray-600 mt-1 uppercase tracking-wide font-bold">Durée</span>
              <span class="text-2xl text-center font-extrabold text-[#045B79]">{{ formation.tempsFormation }} heures</span>
            </div>
          </div>

           {# Affichage des dates en pastilles #}
            {% if formation.dates_session is defined and formation.dates_session|length > 0 %}
              {% set mois = {
                '01': 'Janvier',
                '02': 'Février',
                '03': 'Mars',
                '04': 'Avril',
                '05': 'Mai',
                '06': 'Juin',
                '07': 'Juillet',
                '08': 'Août',
                '09': 'Septembre',
                '10': 'Octobre',
                '11': 'Novembre',
                '12': 'Décembre'
              } %}

              <div class="flex flex-wrap gap-4 justify-center my-4">
                {% for dateStr in formation.dates_session %}
                  {% set parts = dateStr|split('/') %}
                  {% if parts|length == 2 %}
                    {% set moisTexte = mois[parts[0]]|default(parts[0]) %}
                    {% set annee = parts[1] %}
                    <span class="inline-block px-4 py-2 rounded-full bg-[#045B79] text-white text-lg font-semibold">
                      {{ moisTexte ~ ' ' ~ annee }}
                    </span>
                  {% endif %}
                {% endfor %}
              </div>
            {% endif %}

            {% if formation.adresses is defined and formation.adresses|length > 0 %}
              <div class="flex flex-wrap gap-4 justify-center my-4">
                {% for adresse in formation.adresses %}
                  <span class="inline-block px-4 py-2 rounded-full bg-green-600 text-white text-lg font-semibold">
                    {{ adresse }}
                  </span>
                {% endfor %}
              </div>
            {% endif %}

          <!-- Bouton de contact -->
          <a href="{{ path('app_contact') }}" 
             class="bg-[#C30000] text-white px-4 py-2 rounded hover:bg-[#9E0000] transition flex items-center gap-2">
            {{ ux_icon('material-symbols:mail-outline', { width: 16, height: 16 }) }} 
            S’inscrire à cette formation
          </a>
          <!-- Lien pour télécharger le PDF -->
          <a href="{{ path('formation_pdf', { id: formation.id }) }}"
             class="bg-[#045B79] text-white px-4 py-2 rounded hover:bg-[#033E52] transition-colors">
            Télécharger en PDF
          </a>
          <!-- Lien de partage -->
          <a href="mailto:?subject=Partage%20de%20formation&body=Bonjour,%0A%0AJe souhaite partager cette formation avec vous..."
             class="flex items-center gap-2 text-sm text-gray-600 hover:text-[#045B79] transition">
            {{ ux_icon('heroicons-outline:share', { width: 16, height: 16 }) }} 
            Partager cette formation
          </a>
        </div>
      </div>

      <!-- Section des formateurs associés -->
      {% if formation.formateurs|length > 0 %}
      <div>
        <h2 class="text-2xl font-bold text-[#045B79] mt-8">
          Formateurs associés
        </h2>
        <div class="flex flex-wrap gap-4 mt-4">
          {% for formateur in formation.formateurs %}
          <div class="flex flex-col items-center group relative cursor-pointer formateur-card"
               data-nom="{{ formateur.nom }}"
               data-prenom="{{ formateur.prenom }}"
               data-titre="{{ formateur.titre }}"
               data-description="{{ formateur.description|striptags }}"
               data-image="{{ formateur.getImagePath() }}"
               data-cv="{{ formateur.cvName|default('') }}">
            <div class="overflow-hidden mb-2 transform transition-transform duration-200 group-hover:scale-110">
              <img src="{{ formateur.getImagePath() }}" 
                   alt="Photo de {{ formateur.prenom }} {{ formateur.nom }}" 
                   class="object-cover"
                   width="180" height="180">
            </div>
            <p class="text-sm text-gray-800 font-medium">
              {{ formateur.prenom }} {{ formateur.nom }}
            </p>
            <p class="text-xs text-gray-600">
              {{ formateur.titre }}
            </p>
          </div>
          {% endfor %}
        </div>
      </div>
      {% else %}
      <p class="text-center text-gray-600 mt-8">
        Aucun formateur associé à cette formation.
      </p>
      {% endif %}
    </div>
  </div>
</div>

{# Modal pour afficher les détails du formateur #}
<div id="formateur-modal" class="fixed inset-0 flex justify-center items-center bg-gray-700 bg-opacity-50 backdrop-blur-sm z-50 hidden">
  <div class="bg-white rounded-lg shadow-lg p-6 relative max-w-sm w-full">
    <!-- Bouton de fermeture -->
    <button id="close-modal" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
    <div id="modal-content" class="flex flex-col items-center">
      <img id="modal-image" src="" alt="Photo du formateur" class="w-32 h-32 object-cover rounded-full mb-4">
      <h3 id="modal-nom" class="text-xl font-bold mb-2"></h3>
      <p id="modal-titre" class="text-sm text-gray-600 mb-4"></p>
      <p id="modal-description" class="text-gray-700 text-center mb-4"></p>
      <a id="modal-cv" href="" target="_blank" class="bg-[#045B79] text-white px-4 py-2 rounded hover:bg-[#034761] transition-colors hidden">
        <i class="fas fa-file-pdf mr-2"></i>Voir le CV
      </a>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('formateur-modal');
    const closeModal = document.getElementById('close-modal');
    const modalImage = document.getElementById('modal-image');
    const modalNom = document.getElementById('modal-nom');
    const modalTitre = document.getElementById('modal-titre');
    const modalDescription = document.getElementById('modal-description');
    const modalCv = document.getElementById('modal-cv');

    // Pour chaque carte de formateur, ajouter l'événement click
    document.querySelectorAll('.formateur-card').forEach(card => {
      card.addEventListener('click', function() {
        const nom = this.getAttribute('data-nom');
        const prenom = this.getAttribute('data-prenom');
        const titre = this.getAttribute('data-titre');
        const description = this.getAttribute('data-description');
        const image = this.getAttribute('data-image');
        const cv = this.getAttribute('data-cv');

        modalImage.src = image;
        modalNom.textContent = prenom + ' ' + nom;
        modalTitre.textContent = titre;
        modalDescription.textContent = description;

        if (cv) {
          modalCv.href = '/pdf/cv/' + cv;
          modalCv.classList.remove('hidden');
          console.log('CV URL:', cv); // Debug line
        } else {
          modalCv.classList.add('hidden');
          console.log('No CV found'); // Debug line
        }

        modal.classList.remove('hidden');
      });
    });

    // Fermer la modal via le bouton de fermeture
    closeModal.addEventListener('click', function() {
      modal.classList.add('hidden');
    });
    
    // Fermer la modal si clic en dehors du contenu
    modal.addEventListener('click', function(e) {
      if (e.target === modal) {
        modal.classList.add('hidden');
      }
    });
  });
</script>
{% endblock %}