templates/partials/_etablissements_cards.html.twig line 1

  1. {% for etablissement in etablissements %}
  3. {# ============================================================
  4.    CARTE ÉTABLISSEMENT UNIQUE — Design premium centré
  5.    Ancien code de la grille multiple conservé ci-dessous en commentaire.
  7.    ANCIEN CODE (carte petite pour grille 3 colonnes) :
  8.    <div class="group bg-white rounded-xl border border-slate-200 p-5 ...">
  9.        ... (voir git history ou RESUME_MODIFICATIONS.txt)
  10.    </div>
  11.    ============================================================ #}
  13. <div class="w-full h-full flex flex-col etablissement-card">
  15.     {# --- En-tête blanc --- #}
  16.     <div class="bg-white border border-indigo-100 rounded-t-2xl px-4 py-4 text-center shadow-sm">
  17.         <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
  18.             <i class="fas fa-school text-2xl text-indigo-600"></i>
  19.         </div>
  20.         <h3 class="text-xl font-bold text-slate-900 leading-tight">{{ etablissement.nom }}</h3>
  21.         {% if etablissement.localite %}
  22.             <p class="text-xs text-slate-500 mt-2">
  23.                 <i class="fas fa-map-marker-alt mr-1 text-indigo-400"></i>
  24.                 {{ etablissement.localite.nom }}
  25.                 {% if etablissement.localite.directionRegionale %}
  26.                     — {{ etablissement.localite.directionRegionale.nom }}
  27.                 {% endif %}
  28.             </p>
  29.         {% endif %}
  30.     </div>
  32.     {# --- Corps principal --- #}
  33.     <div class="bg-white rounded-b-2xl border border-t-0 border-indigo-100 shadow-lg px-4 py-4 flex-grow flex flex-col">
  35.         {# --- Stats résumées --- #}
  36.         {% set totalPlaces = 0 %}
  37.         {% for em in etablissement.etablissementMetiers %}
  38.             {% set totalPlaces = totalPlaces + (em.nbrplace ?? 0) %}
  39.         {% endfor %}
  41.         <div class="flex justify-center gap-4 mb-4 py-2 bg-indigo-50 rounded-xl">
  42.             <div class="text-center">
  43.                 <div class="text-2xl font-bold text-indigo-600">{{ etablissement.etablissementMetiers|length }}</div>
  44.                 <div class="text-[10px] text-slate-500 mt-0.5 uppercase font-semibold">Métier(s)</div>
  45.             </div>
  46.             <div class="w-px bg-indigo-200"></div>
  47.             <div class="text-center">
  48.                 <div class="text-2xl font-bold text-green-600">{{ totalPlaces }}</div>
  49.                 <div class="text-[10px] text-slate-500 mt-0.5 uppercase font-semibold">Place(s)</div>
  50.             </div>
  51.         </div>
  53.         {# --- Liste des métiers avec bouton "Voir les options" --- #}
  54.         {% if etablissement.etablissementMetiers|length > 0 %}
  55.         <div class="mb-5 flex-grow">
  56.             <h4 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
  57.                 <i class="fas fa-briefcase mr-2 text-indigo-400"></i>Métiers disponibles
  58.             </h4>
  59.             <div class="space-y-2 h-32 overflow-y-auto pr-1 custom-scrollbar">
  60.                 {% for em in etablissement.etablissementMetiers %}
  61.                     {% if em.metier %}
  62.                     <div class="flex flex-col sm:flex-row sm:items-center justify-between w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl gap-2">
  63.                         <div class="flex items-center gap-3">
  64.                             <div class="w-7 h-7 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
  65.                                 <i class="fas fa-hard-hat text-indigo-600 text-[10px]"></i>
  66.                             </div>
  67.                             <div class="text-left leading-tight">
  68.                                 <span class="text-sm font-semibold text-slate-800 block">
  69.                                     {{ em.metier.nom }}
  70.                                 </span>
  71.                                 {% if em.nbrplace is defined and em.nbrplace %}
  72.                                 <span class="text-[10px] text-slate-500">{{ em.nbrplace }} place(s)</span>
  73.                                 {% endif %}
  74.                             </div>
  75.                         </div>
  76.                         {# Bouton "Voir les options" — ouvre le modal #}
  77.                         <button type="button"
  78.                                 onclick="ouvrirOptionsMetier('{{ em.metier.nom|e('html_attr') }}')"
  79.                                 class="text-[10px] font-semibold text-indigo-600 bg-indigo-100 hover:bg-indigo-600 hover:text-white px-2.5 py-1.5 rounded-full transition-all flex items-center gap-1 self-start sm:self-auto flex-shrink-0">
  80.                             <i class="fas fa-eye text-[9px]"></i> Voir les options
  81.                         </button>
  82.                     </div>
  83.                     {% endif %}
  84.                 {% endfor %}
  85.             </div>
  86.         </div>
  87.         {% else %}
  88.         <div class="mb-5 flex-grow">
  89.             <div class="h-32 flex items-center justify-center border-2 border-dashed border-slate-200 rounded-xl">
  90.                 <p class="text-xs text-slate-400">Aucun métier disponible</p>
  91.             </div>
  92.         </div>
  93.         {% endif %}
  95.         {# --- CTA principal --- #}
  96.         <div class="mt-auto pt-2">
  97.             <a href="{{ path('app_register') }}?etablissement={{ etablissement.id }}"
  98.                class="block w-full text-center bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-3 rounded-xl transition-all transform hover:-translate-y-0.5 hover:shadow-lg text-sm">
  99.                 <i class="fas fa-paper-plane mr-2"></i>
  100.                 Candidater ici
  101.             </a>
  102.         </div>
  104.     </div>
  105. </div>
  107. {% else %}
  108. <div class="col-span-full text-center py-12">
  109.     <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
  110.         <i class="fas fa-school text-2xl text-slate-400"></i>
  111.     </div>
  112.     <p class="text-lg text-white font-semibold">Aucun établissement trouvé</p>
  113.     <p class="text-sm text-white/70">Vérifiez la configuration de l'ID établissement</p>
  114. </div>
  115. {% endfor %}
  118. {# ============================================================
  119.    MODAL "VOIR LES OPTIONS" — Affiché au clic sur un métier
  120.    Contenu extrait des documents officiels (images fournies).
  121.    ============================================================ #}
  122. <div id="modal-options-metier"
  123.      class="fixed inset-0 z-50 hidden overflow-y-auto"
  124.      role="dialog" aria-modal="true">
  126.     {# Overlay #}
  127.     <div class="fixed inset-0 bg-slate-900/70 backdrop-blur-sm"
  128.          onclick="fermerOptionsMetier()"></div>
  130.     {# Panneau #}
  131.     <div class="relative min-h-screen flex items-start justify-center pt-8 pb-12 px-4">
  132.         <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden">
  134.             {# En-tête du modal #}
  135.             <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4 flex items-center justify-between">
  136.                 <div>
  137.                     <p class="text-xs text-white/70 font-medium uppercase tracking-wider mb-0.5">Options du métier</p>
  138.                     <h3 id="modal-metier-titre" class="text-lg font-bold text-white"></h3>
  139.                 </div>
  140.                 <button onclick="fermerOptionsMetier()"
  141.                         class="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition">
  142.                     <i class="fas fa-times text-white text-sm"></i>
  143.                 </button>
  144.             </div>
  146.             {# Bandeau info consultatif #}
  147.             <div class="bg-amber-50 border-b border-amber-100 px-6 py-2 flex items-center gap-2">
  148.                 <i class="fas fa-info-circle text-amber-500 text-sm"></i>
  149.                 <p class="text-xs text-amber-700">Ces informations sont fournies à titre consultatif.</p>
  150.             </div>
  152.             {# Corps : tableau des options #}
  153.             <div class="px-6 py-5 max-h-[70vh] overflow-y-auto">
  154.                 <div id="modal-options-contenu"></div>
  156.                 {# Message si métier non trouvé #}
  157.                 <div id="modal-options-vide" class="hidden text-center py-10">
  158.                     <i class="fas fa-search text-3xl text-slate-300 mb-3"></i>
  159.                     <p class="text-slate-500 text-sm">Aucune option détaillée disponible pour ce métier.</p>
  160.                 </div>
  161.             </div>
  163.             {# Pied du modal #}
  164.             <div class="px-6 py-4 border-t border-slate-100 flex justify-between items-center bg-slate-50">
  165.                 <p class="text-xs text-slate-400">
  166.                     <i class="fas fa-file-alt mr-1"></i>
  167.                     Certificat de Formation Qualifiante — DAIP 2026
  168.                 </p>
  169.                 <button onclick="fermerOptionsMetier()"
  170.                         class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
  171.                     Fermer
  172.                 </button>
  173.             </div>
  174.         </div>
  175.     </div>
  176. </div>
  179. {# ============================================================
  180.    DONNÉES DES OPTIONS — Extraites des documents officiels
  181.    Clé = nom du métier (doit correspondre au nom en base).
  182.    ============================================================ #}
  183. <script>
  184. const METIERS_OPTIONS = {
  186.     "COUTURE INDUSTRIELLE": {
  187.         description: "Certificat de Formation Qualifiante",
  188.         options: [
  189.             { nom: "CHEMISE / TUNIQUE CLASSIQUE HOMME/DAME", niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 20 },
  190.             { nom: "JEANS ET TENUE DE TRAVAIL",              niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 20 },
  191.             { nom: "JUPE, ROBE ET BUSTIER",                  niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 20 },
  192.             { nom: "PANTALON CLASSIQUE HOMME/DAME",          niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 20 },
  193.             { nom: "VESTE HOMME/DAME",                       niveau: "CEPE (20 ans - 40 ans)", duree: "4 mois", places: 20 },
  194.             { nom: "CHAPELIER MODISTE",                      niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 10 },
  195.             { nom: "T-SHIRT ET POLO",                        niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 20 },
  196.             { nom: "SAC ET PORTEFEUILLE",                    niveau: "CEPE (18 ans - 40 ans)", duree: "4 mois", places: 10 },
  197.         ]
  198.     },
  200.     "MODELISME": {
  201.         description: "Certificat de Formation Qualifiante",
  202.         options: [
  203.             { nom: "COUPE HOMME",             niveau: "BEPC (25 ans - 40 ans)", duree: "4 mois", places: 6 },
  204.             { nom: "COUPE DAME",              niveau: "BEPC (25 ans - 40 ans)", duree: "4 mois", places: 6 },
  205.             { nom: "COUPE VESTE HOMME/DAME",  niveau: "BEPC (25 ans - 40 ans)", duree: "4 mois", places: 6 },
  206.             { nom: "COUPE INDUSTRIELLE",      niveau: "BEPC (25 ans - 40 ans)", duree: "4 mois", places: 6 },
  207.         ]
  208.     },
  210.     // Support du pluriel
  211.     "METIERS DE LA MODE": {
  212.         description: "Certificat de Formation Qualifiante",
  213.         options: [
  214.             { nom: "AGENT DE NETTOYAGE ET DE MARQUAGE",       niveau: "CEPE (20 ans - 40 ans)", duree: "4 mois", places: 6 },
  215.             { nom: "AGENT CONTROLEUR QUALITE ET FINITION",    niveau: "CEPE (20 ans - 40 ans)", duree: "4 mois", places: 6 },
  216.         ]
  217.     },
  218.     // Support du singulier
  219.     "METIER DE LA MODE": {
  220.         description: "Certificat de Formation Qualifiante",
  221.         options: [
  222.             { nom: "AGENT DE NETTOYAGE ET DE MARQUAGE",       niveau: "CEPE (20 ans - 40 ans)", duree: "4 mois", places: 6 },
  223.             { nom: "AGENT CONTROLEUR QUALITE ET FINITION",    niveau: "CEPE (20 ans - 40 ans)", duree: "4 mois", places: 6 },
  224.         ]
  225.     },
  227.     "BRODERIE": {
  228.         description: "Certificat de Formation Qualifiante",
  229.         options: [
  230.             { nom: "BRODERIE SUR MACHINE AUTOMATISEE", niveau: "CEPE (18 ans - 40 ans)",                                        duree: "4 mois", places: 10 },
  231.             { nom: "GRAPHISTE BRODERIE",               niveau: "BEPC avec bonne notion en outil informatique (20 ans - 40 ans)", duree: "4 mois", places: 4  },
  232.         ]
  233.     },
  235.     "SERIGRAPHIE": {
  236.         description: "Certificat de Formation Qualifiante",
  237.         options: [
  238.             { nom: "SERIGRAPHE",                      niveau: "CEPE (18 ans - 40 ans)",                                        duree: "4 mois", places: 6 },
  239.             { nom: "GRAPHISTE IMPRESSION NUMERIQUE",  niveau: "BEPC avec bonne notion en outil informatique (20 ans - 40 ans)", duree: "4 mois", places: 4 },
  240.         ]
  241.     }
  242. };
  244. // ---- Recherche floue : tolère les majuscules/minuscules, espaces et accents ----
  245. function trouverMetier(nomBrut) {
  246.     // Supprimer les accents (ex: É -> E) et mettre en majuscules
  247.     const nomNorm = nomBrut.normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim().toUpperCase();
  248.     
  249.     // Correspondance exacte
  250.     if (METIERS_OPTIONS[nomNorm]) return METIERS_OPTIONS[nomNorm];
  251.     
  252.     // Correspondance partielle
  253.     const cle = Object.keys(METIERS_OPTIONS).find(k => nomNorm.includes(k) || k.includes(nomNorm));
  254.     return cle ? METIERS_OPTIONS[cle] : null;
  255. }
  257. function ouvrirOptionsMetier(nomMetier) {
  258.     const modal   = document.getElementById('modal-options-metier');
  259.     const titre   = document.getElementById('modal-metier-titre');
  260.     const contenu = document.getElementById('modal-options-contenu');
  261.     const vide    = document.getElementById('modal-options-vide');
  263.     titre.textContent = nomMetier;
  265.     const data = trouverMetier(nomMetier);
  267.     if (data && data.options && data.options.length > 0) {
  268.         vide.classList.add('hidden');
  269.         contenu.classList.remove('hidden');
  271.         let html = `
  272.         <p class="text-xs text-slate-500 mb-4 font-medium">
  273.             <i class="fas fa-certificate mr-1 text-indigo-400"></i>${data.description}
  274.         </p>
  275.         <div class="overflow-x-auto rounded-xl border border-slate-200">
  276.             <table class="w-full text-sm">
  277.                 <thead>
  278.                     <tr class="bg-indigo-50 text-indigo-700 text-xs uppercase tracking-wider">
  279.                         <th class="px-4 py-3 text-left font-semibold">Option</th>
  280.                         <th class="px-4 py-3 text-left font-semibold">Niveau requis</th>
  281.                         <th class="px-3 py-3 text-center font-semibold">Durée</th>
  282.                         <th class="px-3 py-3 text-center font-semibold">Places</th>
  283.                     </tr>
  284.                 </thead>
  285.                 <tbody class="divide-y divide-slate-100">`;
  287.         data.options.forEach((opt, i) => {
  288.             html += `
  289.                     <tr class="${i % 2 === 0 ? 'bg-white' : 'bg-slate-50'} hover:bg-indigo-50/40 transition-colors">
  290.                         <td class="px-4 py-3 font-semibold text-slate-800">${opt.nom}</td>
  291.                         <td class="px-4 py-3 text-slate-600 text-xs">${opt.niveau}</td>
  292.                         <td class="px-3 py-3 text-center">
  293.                             <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
  294.                                 <i class="fas fa-clock mr-1 text-[9px]"></i>${opt.duree}
  295.                             </span>
  296.                         </td>
  297.                         <td class="px-3 py-3 text-center">
  298.                             <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold bg-green-100 text-green-700">${opt.places}</span>
  299.                         </td>
  300.                     </tr>`;
  301.         });
  303.         html += `</tbody></table></div>`;
  304.         contenu.innerHTML = html;
  305.     } else {
  306.         contenu.innerHTML = '';
  307.         vide.classList.remove('hidden');
  308.     }
  310.     modal.classList.remove('hidden');
  311.     document.body.style.overflow = 'hidden';
  312. }
  314. function fermerOptionsMetier() {
  315.     document.getElementById('modal-options-metier').classList.add('hidden');
  316.     document.body.style.overflow = '';
  317. }
  319. // Fermer avec Échap
  320. document.addEventListener('keydown', e => {
  321.     if (e.key === 'Escape') fermerOptionsMetier();
  322. });
  323. </script>