templates/candidature/form.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Nouvelle candidature | DAIP{% endblock %}
  5. {# Définition de la classe CSS réutilisable #}
  6. {% set input_class = 'w-full px-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition' %}
  7. {% set is_edit_page = app.request.attributes.get('_route') == 'app_candidature_edit' %}
  9. {% block body %}
  11. {# Flash messages #}
  12. {% for label, messages in app.flashes %}
  14.     {% for message in messages %}
  15.         <div class="mb-4 p-4 rounded-lg border
  16.             {% if label == 'error' %}
  17.                 bg-red-50 border-red-200 text-red-800
  18.             {% elseif label == 'success' %}
  19.                 bg-green-50 border-green-200 text-green-800
  20.             {% else %}
  21.                 bg-blue-50 border-blue-200 text-blue-800
  22.             {% endif %}
  23.         ">
  24.             {{ message|raw }}
  25.         </div>
  26.     {% endfor %}
  27. {% endfor %}
  30. <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-8 mb-8 text-white">
  31.     <div class="flex items-center gap-4 mb-4">
  32.         <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
  33.             <i class="fas fa-file-alt text-3xl"></i>
  34.         </div>
  35.         <div>
  36.             <h1 class="text-2xl font-bold">
  37.                 {% if is_edit_page %}Modification de candidature{% else %}Nouvelle candidature{% endif %}
  38.             </h1>
  39.             <p class="text-white/80">
  40.                 {% if is_edit_page %}Mettez a jour les informations de la candidature de facon claire et complete.{% else %}Vous etes sur le point de postuler a une formation{% endif %}
  41.             </p>
  42.         </div>
  43.     </div>
  44.     
  45.     <!-- Informations du candidat -->
  46.     {% if app.user %}
  47.         {% if is_granted('ROLE_ENT') and is_edit_page and candidature is defined %}
  48.             <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
  49.                 <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
  50.                     <p class="text-sm font-semibold text-white/80 mb-3 flex items-center">
  51.                         <i class="fas fa-user-graduate mr-2"></i>
  52.                         Informations du candidat
  53.                     </p>
  54.                     <div class="space-y-3">
  55.                         <div class="bg-white/10 rounded-lg px-3 py-2">
  56.                             <p class="text-xs uppercase tracking-wide text-white/70">Nom du candidat</p>
  57.                             <p class="text-sm font-semibold text-white mt-1">{{ candidature.user ? (candidature.user.nom ~ ' ' ~ candidature.user.prenoms)|trim : 'Non renseigne' }}</p>
  58.                         </div>
  59.                         <div class="bg-white/10 rounded-lg px-3 py-2">
  60.                             <p class="text-xs uppercase tracking-wide text-white/70">Numero de candidature</p>
  61.                             <p class="text-sm font-semibold text-white mt-1">{{ candidature.numero|default('Non attribue') }}</p>
  62.                         </div>
  63.                     </div>
  64.                 </div>
  66.                 <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
  67.                     <p class="text-sm font-semibold text-white/80 mb-3 flex items-center">
  68.                         <i class="fas fa-file-signature mr-2"></i>
  69.                         Informations de la candidature
  70.                     </p>
  71.                     <div class="space-y-3">
  72.                         <div class="bg-white/10 rounded-lg px-3 py-2">
  73.                             <p class="text-xs uppercase tracking-wide text-white/70">Etablissement choisi</p>
  74.                             <p class="text-sm font-semibold text-white mt-1">{{ candidature.etablissement ? candidature.etablissement.nom : 'Non renseigne' }}</p>
  75.                         </div>
  76.                         <div class="bg-white/10 rounded-lg px-3 py-2">
  77.                             <p class="text-xs uppercase tracking-wide text-white/70">Metier choisi</p>
  78.                             <p class="text-sm font-semibold text-white mt-1">{{ candidature.metier ? candidature.metier.nom : 'Non renseigne' }}</p>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         {% else %}
  84.             <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 mt-4">
  85.                 <div class="flex items-center gap-3">
  86.                     <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
  87.                         <i class="fas fa-user"></i>
  88.                     </div>
  89.                     <div>
  90.                         <p class="text-sm text-white/80">Candidat</p>
  91.                         <p class="font-semibold">{{ app.user.nom }} {{ app.user.prenoms }}</p>
  92.                     </div>
  94.                     {# Calcul et affichage de l'âge #}
  95.                     {% if app.user.datenaissance %}
  96.                         {% set age = date().diff(date(app.user.datenaissance)).y %}
  97.                         <div class="ml-4 px-3 py-1 bg-white/20 rounded-full">
  98.                             <span class="text-sm">
  99.                                 <i class="fas fa-birthday-cake mr-1"></i>
  100.                                 {{ age }} ans
  101.                             </span>
  102.                         </div>
  103.                     {% endif %}
  105.                     <div class="ml-auto">
  106.                         <span class="px-3 py-1 bg-white/20 rounded-full text-sm">{{ app.user.email }}</span>
  107.                         <span class="ml-2 px-3 py-1 bg-indigo-500 rounded-full text-xs">
  108.                             {% if is_granted('ROLE_ADMIN') %}ADMIN
  109.                             {% elseif is_granted('ROLE_ENT') %}ENT
  110.                             {% elseif is_granted('ROLE_JURY') %}JURY
  111.                             {% elseif is_granted('ROLE_CANDIDAT') %}CANDIDAT
  112.                             {% endif %}
  113.                         </span>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.         {% endif %}
  118.     {% endif %}
  119.     
  120.     {# Vérification d'âge #}
  121.     {% if app.user and app.user.datenaissance %}
  122.         {% set age = date().diff(date(app.user.datenaissance)).y %}
  123.         {% if age < 16 or age > 40 %}
  124.             <div class="mt-4 bg-red-500/20 backdrop-blur-sm border border-red-500/30 rounded-xl p-4">
  125.                 <div class="flex items-center gap-3">
  126.                     <div class="w-10 h-10 bg-red-500/30 rounded-full flex items-center justify-center">
  127.                         <i class="fas fa-exclamation-triangle text-red-300"></i>
  128.                     </div>
  129.                     <div>
  130.                         <p class="font-semibold text-white">Âge non conforme</p>
  131.                         <p class="text-sm text-white/80">
  132.                             {% if age < 16 %}
  133.                                 Vous avez {{ age }} ans. L'âge minimum requis pour candidater est de 16 ans.
  134.                             {% elseif age > 40 %}
  135.                                 Vous avez {{ age }} ans. L'âge maximum autorisé pour candidater est de 40 ans.
  136.                             {% endif %}
  137.                         </p>
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.         {% endif %}
  142.     {% endif %}
  143. </div>
  145. <div class="max-w-7xl mx-auto px-4 pb-16 {{ is_edit_page ? 'pt-2' : '' }}">
  146.     {% include 'partials/_flash_messages.html.twig' %}
  148.     {% if is_edit_page and candidature is defined and candidature.id %}
  150.         {# ===== PARTIE 1 : MISE À JOUR DES INFORMATIONS ===== #}
  151.         <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden mb-8">
  152.             <div class="p-6 md:p-8">
  153.                 <div class="rounded-xl border border-indigo-200 bg-indigo-50 p-4 md:p-5 mb-8">
  154.                     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
  155.                         <div>
  156.                             <p class="text-sm font-semibold text-indigo-800 flex items-center">
  157.                                 <i class="fas fa-edit mr-2"></i> Partie 1 — Mise à jour des informations
  158.                             </p>
  159.                             <p class="text-sm text-indigo-700 mt-1">Modifiez les informations du candidat, le métier et les documents.</p>
  160.                         </div>
  161.                         <span class="inline-flex items-center px-3 py-1 rounded-full bg-white text-indigo-700 text-sm font-semibold border border-indigo-200">
  162.                             N° {{ candidature.numero|default('Non attribué') }}
  163.                         </span>
  164.                     </div>
  165.                 </div>
  167.                 <form id="form-update-info" action="{{ path('app_candidature_update_info', {id: candidature.id}) }}" method="POST" enctype="multipart/form-data" class="space-y-10">
  168.                     <input type="hidden" name="_token" value="{{ csrf_token('candidature_update_info_' ~ candidature.id) }}">
  170.                     {# Identité du candidat (ENT/ADMIN) #}
  171.                     {% if is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') %}
  172.                         <div class="rounded-xl border border-orange-200 bg-orange-50 p-5">
  173.                             <h3 class="text-base font-semibold text-orange-800 mb-4 flex items-center">
  174.                                 <div class="w-7 h-7 bg-orange-200 rounded-lg flex items-center justify-center mr-2">
  175.                                     <i class="fas fa-user-edit text-orange-700 text-sm"></i>
  176.                                 </div>
  177.                                 Identité du candidat
  178.                             </h3>
  179.                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  180.                                 <div>
  181.                                     <label class="block text-sm font-medium text-slate-700 mb-1">Nom <span class="text-red-500">*</span></label>
  182.                                     <input type="text" name="nom" value="{{ candidature.user ? candidature.user.nom : '' }}" class="{{ input_class }}" placeholder="Nom de famille">
  183.                                 </div>
  184.                                 <div>
  185.                                     <label class="block text-sm font-medium text-slate-700 mb-1">Prénom(s) <span class="text-red-500">*</span></label>
  186.                                     <input type="text" name="prenoms" value="{{ candidature.user ? candidature.user.prenoms : '' }}" class="{{ input_class }}" placeholder="Prénom(s)">
  187.                                 </div>
  188.                                 <div class="md:col-span-2">
  189.                                     <label class="block text-sm font-medium text-slate-700 mb-1">Contact (téléphone)</label>
  190.                                     <input type="text" name="contact" value="{{ candidature.user ? candidature.user.contact : '' }}" class="{{ input_class }}" placeholder="Ex: 0102030405">
  191.                                 </div>
  192.                             </div>
  193.                         </div>
  194.                     {% endif %}
  196.                     {# Formation souhaitée #}
  197.                     <h3 class="text-lg font-semibold text-indigo-800 flex items-center border-b pb-3 mb-5">
  198.                         <div class="w-8 h-8 bg-indigo-200 rounded-lg flex items-center justify-center mr-3">
  199.                             <i class="fas fa-graduation-cap text-indigo-700"></i>
  200.                         </div>
  201.                         Formation souhaitée
  202.                     </h3>
  204.                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  205.                         <div>
  206.                             <label class="block text-sm font-medium text-slate-700 mb-1">Établissement <span class="text-red-500">*</span></label>
  207.                             <div class="{{ input_class }} bg-slate-100 text-slate-600 cursor-default flex items-center gap-2">
  208.                                 <i class="fas fa-lock text-slate-400 text-xs"></i>
  209.                                 {{ candidature.etablissement ? candidature.etablissement.nom : 'Non renseigné' }}
  210.                             </div>
  211.                             <input type="hidden" id="candidature_etablissement" value="{{ candidature.etablissement ? candidature.etablissement.id : '' }}">
  212.                         </div>
  213.                         <div>
  214.                             <label class="block text-sm font-medium text-slate-700 mb-1">Métier <span class="text-red-500">*</span></label>
  215.                             <select name="metier_id" id="candidature_metier" required class="{{ input_class }}">
  216.                                 {% if candidature.metier %}
  217.                                     <option value="{{ candidature.metier.id }}" selected>{{ candidature.metier.nom }}</option>
  218.                                 {% else %}
  219.                                     <option value="">-- Sélectionnez un métier --</option>
  220.                                 {% endif %}
  221.                             </select>
  222.                             <div id="metier-loading" class="hidden text-sm text-indigo-600 mt-1">
  223.                                 <i class="fas fa-spinner fa-spin mr-1"></i> Chargement...
  224.                             </div>
  225.                         </div>
  226.                     </div>
  228.                     {# Informations détaillées du métier #}
  229.                     <div id="metier-info" class="hidden mt-6">
  230.                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
  231.                             <div class="flex items-center gap-3 p-2 bg-indigo-100 rounded-lg">
  232.                                 <i class="fas fa-building text-indigo-600"></i>
  233.                                 <div>
  234.                                     <p class="text-xs text-indigo-600">Secteur</p>
  235.                                     <p id="metier-secteur" class="text-sm font-medium">-</p>
  236.                                 </div>
  237.                             </div>
  238.                             <div class="flex items-center gap-3 p-2 bg-purple-100 rounded-lg">
  239.                                 <i class="fas fa-users text-purple-600"></i>
  240.                                 <div>
  241.                                     <p class="text-xs text-purple-600">Places</p>
  242.                                     <p id="metier-nbrplace" class="text-sm font-medium">-</p>
  243.                                 </div>
  244.                             </div>
  245.                             <div class="flex items-center gap-3 p-2 bg-green-100 rounded-lg">
  246.                                 <i class="fas fa-graduation-cap text-green-600"></i>
  247.                                 <div>
  248.                                     <p class="text-xs text-green-600">Niveau</p>
  249.                                     <p id="metier-niveau" class="text-sm font-medium">-</p>
  250.                                 </div>
  251.                             </div>
  252.                             <div class="flex items-center gap-3 p-2 bg-amber-100 rounded-lg">
  253.                                 <i class="fas fa-clock text-amber-600"></i>
  254.                                 <div>
  255.                                     <p class="text-xs text-amber-600">Durée</p>
  256.                                     <p id="metier-duree" class="text-sm font-medium">-</p>
  257.                                 </div>
  258.                             </div>
  259.                         </div>
  260.                     </div>
  262.                     {# Documents #}
  263.                     <h3 class="text-lg font-semibold text-purple-800 mb-5 flex items-center border-b pb-3">
  264.                         <div class="w-8 h-8 bg-purple-200 rounded-lg flex items-center justify-center mr-3">
  265.                             <i class="fas fa-cloud-upload-alt text-purple-700"></i>
  266.                         </div>
  267.                         Documents à télécharger <span class="text-red-500"> *</span>
  268.                     </h3>
  270.                     {% include 'partials/_document_upload_plain.html.twig' with {
  271.                         'candidature': candidature,
  272.                         'document_labels': document_labels,
  273.                         'input_class': input_class
  274.                     } %}
  276.                     {# Bouton Mise à jour #}
  277.                     <div class="flex flex-col md:flex-row justify-between items-center gap-4 pt-6 border-t border-slate-200">
  278.                         <div class="text-sm text-slate-500">
  279.                             <i class="fas fa-info-circle mr-1"></i>
  280.                             Les champs marqués d'une <span class="text-red-500">*</span> sont obligatoires
  281.                         </div>
  282.                         <button type="submit" class="px-8 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg flex items-center">
  283.                             <i class="fas fa-save mr-2"></i>
  284.                             Mise à jour
  285.                         </button>
  286.                     </div>
  287.                 </form>
  288.             </div>
  289.         </div>
  291.         {# ===== PARTIE 2 : ANALYSE DU DOSSIER ===== #}
  292.         <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
  293.             <div class="p-6 md:p-8">
  294.                 {{ form_start(form, {'attr': {'class': 'space-y-10', 'id': 'candidature-form'}}) }}
  296.                     <div class="rounded-xl border border-amber-200 bg-amber-50 p-4 md:p-5 mb-4">
  297.                         <p class="text-sm font-semibold text-amber-800 flex items-center">
  298.                             <i class="fas fa-clipboard-list mr-2"></i>
  299.                             Partie 2 — Analyse du dossier
  300.                         </p>
  301.                         <p class="text-sm text-amber-700 mt-1">Étudiez le dossier, évaluez le candidat et enregistrez le résultat.</p>
  302.                     </div>
  304.                     {% include 'partials/_candidature_evaluation_sections.html.twig' %}
  306.                     <div class="flex flex-col md:flex-row justify-between items-center gap-4 pt-6 border-t border-slate-200">
  307.                         <div class="text-sm text-slate-500">
  308.                             <i class="fas fa-info-circle mr-1"></i>
  309.                             Les champs marqués d'une <span class="text-red-500">*</span> sont obligatoires
  310.                         </div>
  311.                         <button type="submit" class="px-8 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg flex items-center">
  312.                             <i class="fas fa-paper-plane mr-2"></i>
  313.                             Enregistrer l'évaluation
  314.                         </button>
  315.                     </div>
  317.                 {{ form_end(form) }}
  318.             </div>
  319.         </div>
  321.     {% else %}
  323.     <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
  324.         <div class="p-6 md:p-8">
  325.             {{ form_start(form, {'attr': {'class': 'space-y-10', 'enctype': 'multipart/form-data', 'id': 'candidature-form'}}) }}
  327.             {% if is_edit_page and candidature is defined %}
  328.                 <div class="rounded-xl border border-indigo-200 bg-indigo-50 p-4 md:p-5">
  329.                     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
  330.                         <div>
  331.                             <p class="text-sm font-semibold text-indigo-800">Edition de candidature</p>
  332.                             <p class="text-sm text-indigo-700 mt-1">Verifiez les informations puis mettez a jour les documents si necessaire.</p>
  333.                         </div>
  334.                         <span class="inline-flex items-center px-3 py-1 rounded-full bg-white text-indigo-700 text-sm font-semibold border border-indigo-200">
  335.                             N° {{ candidature.numero|default('Non attribue') }}
  336.                         </span>
  337.                     </div>
  338.                 </div>
  339.             {% endif %}
  341.             {# Section : Identité du candidat (visible ENT / ADMIN en mode édition) #}
  342.             {% if is_edit_page and (is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN')) and form.nom is defined %}
  343.                 <div class="rounded-xl border border-orange-200 bg-orange-50 p-5">
  344.                     <h3 class="text-base font-semibold text-orange-800 mb-4 flex items-center">
  345.                         <div class="w-7 h-7 bg-orange-200 rounded-lg flex items-center justify-center mr-2">
  346.                             <i class="fas fa-user-edit text-orange-700 text-sm"></i>
  347.                         </div>
  348.                         Identité du candidat
  349.                     </h3>
  350.                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  351.                         <div>
  352.                             <label class="block text-sm font-medium text-slate-700 mb-1">
  353.                                 Nom <span class="text-red-500">*</span>
  354.                             </label>
  355.                             {{ form_widget(form.nom, {'attr': {'class': input_class, 'placeholder': 'Nom de famille'}}) }}
  356.                         </div>
  357.                         <div>
  358.                             <label class="block text-sm font-medium text-slate-700 mb-1">
  359.                                 Prénom(s) <span class="text-red-500">*</span>
  360.                             </label>
  361.                             {{ form_widget(form.prenoms, {'attr': {'class': input_class, 'placeholder': 'Prénom(s)'}}) }}
  362.                         </div>
  363.                     </div>
  364.                 </div>
  365.             {% endif %}
  367.             <!-- SECTION 1: TOUS LES UTILISATEURS - Formation souhaitée -->
  368.             <h3 class="text-lg font-semibold text-indigo-800 flex items-center border-b pb-3 mb-5">
  369.                 <div class="w-8 h-8 bg-indigo-200 rounded-lg flex items-center justify-center mr-3">
  370.                     <i class="fas fa-graduation-cap text-indigo-700"></i>
  371.                 </div>
  372.                 Formation souhaitée
  373.             </h3>
  374.             
  375.             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  376.                 <div>
  377.                     <label class="block text-sm font-medium text-slate-700 mb-1">
  378.                         Établissement <span class="text-red-500">*</span>
  379.                     </label>
  380.                     {% if is_edit_page and candidature is defined and candidature.etablissement %}
  381.                         {# En mode édition : établissement fixe (lecture seule) #}
  382.                         <div class="{{ input_class }} bg-slate-100 text-slate-600 cursor-default flex items-center gap-2">
  383.                             <i class="fas fa-lock text-slate-400 text-xs"></i>
  384.                             {{ candidature.etablissement.nom }}
  385.                         </div>
  386.                         {# Champ caché pour maintenir la valeur lors de la soumission #}
  387.                         {{ form_widget(form.etablissement, {'attr': {'class': 'hidden', 'id': 'candidature_etablissement'}}) }}
  388.                     {% else %}
  389.                         {{ form_widget(form.etablissement, {'attr': {'class': input_class, 'id': 'candidature_etablissement'}}) }}
  390.                     {% endif %}
  391.                     <div id="etablissement-loading" class="hidden text-sm text-indigo-600 mt-1">
  392.                         <i class="fas fa-spinner fa-spin mr-1"></i> Chargement...
  393.                     </div>
  394.                 </div>
  395.                 
  396.                 <div>
  397.                     <label class="block text-sm font-medium text-slate-700 mb-1">
  398.                         Métier <span class="text-red-500">*</span>
  399.                     </label>
  400.                     {{ form_widget(form.metier, {'attr': {'class': input_class, 'id': 'candidature_metier'}}) }}
  401.                     <div id="metier-loading" class="hidden text-sm text-indigo-600 mt-1">
  402.                         <i class="fas fa-spinner fa-spin mr-1"></i> Chargement...
  403.                     </div>
  404.                 </div>
  405.             </div>
  407.             <!-- Informations détaillées du métier -->
  408.             <div id="metier-info" class="hidden mt-6">
  409.                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
  410.                     <div class="flex items-center gap-3 p-2 bg-indigo-100 rounded-lg">
  411.                         <i class="fas fa-building text-indigo-600"></i>
  412.                         <div>
  413.                             <p class="text-xs text-indigo-600">Secteur</p>
  414.                             <p id="metier-secteur" class="text-sm font-medium">-</p>
  415.                         </div>
  416.                     </div>
  417.                     <div class="flex items-center gap-3 p-2 bg-purple-100 rounded-lg">
  418.                         <i class="fas fa-users text-purple-600"></i>
  419.                         <div>
  420.                             <p class="text-xs text-purple-600">Places</p>
  421.                             <p id="metier-nbrplace" class="text-sm font-medium">-</p>
  422.                         </div>
  423.                     </div>
  424.                     <div class="flex items-center gap-3 p-2 bg-green-100 rounded-lg">
  425.                         <i class="fas fa-graduation-cap text-green-600"></i>
  426.                         <div>
  427.                             <p class="text-xs text-green-600">Niveau</p>
  428.                             <p id="metier-niveau" class="text-sm font-medium">-</p>
  429.                         </div>
  430.                     </div>
  431.                     <div class="flex items-center gap-3 p-2 bg-amber-100 rounded-lg">
  432.                         <i class="fas fa-clock text-amber-600"></i>
  433.                         <div>
  434.                             <p class="text-xs text-amber-600">Durée</p>
  435.                             <p id="metier-duree" class="text-sm font-medium">-</p>
  436.                         </div>
  437.                     </div>
  438.                 </div>
  439.             </div>
  441.             <!-- SECTION 2: DOCUMENTS -->
  442.             <h3 class="text-lg font-semibold text-purple-800 mb-5 flex items-center border-b pb-3">
  443.                 <div class="w-8 h-8 bg-purple-200 rounded-lg flex items-center justify-center mr-3">
  444.                     <i class="fas fa-cloud-upload-alt text-purple-700"></i>
  445.                 </div>
  446.                 Documents à télécharger <span class="text-red-500"> *</span>
  447.             </h3>
  448.             
  449.             {% include 'partials/_document_upload.html.twig' with {
  450.                 'form': form,
  451.                 'document_labels': document_labels,
  452.                 'input_class': input_class
  453.             } %}
  455.             <!-- SECTION 3: POUR ENT ET ADMIN - Étude de dossier -->
  456.             {% if is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') %}
  457.                 <h3 class="text-lg font-semibold text-amber-800 mb-5 flex items-center border-b pb-3">
  458.                     <div class="w-8 h-8 bg-amber-200 rounded-lg flex items-center justify-center mr-3">
  459.                         <i class="fas fa-clipboard-check text-amber-700"></i>
  460.                     </div>
  461.                     Étude de dossier (ENT)
  462.                 </h3>
  463.                 
  464.                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  465.                     <div>
  466.                         <label class="block text-sm font-medium text-slate-700 mb-1">Statut dossier</label>
  467.                         {{ form_widget(form.etustatut, {'attr': {'class': input_class}}) }}
  468.                     </div>
  469.                     <div>
  470.                         <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire</label>
  471.                         {{ form_widget(form.etucom, {'attr': {'class': input_class, 'placeholder': 'Commentaire sur le dossier...'}}) }}
  472.                     </div>
  473.                 </div>
  474.             {% endif %}
  476.             <!-- SECTION 4: POUR JURY ET ADMIN - Évaluation entretien -->
  477.             {% if is_granted('ROLE_JURY') or is_granted('ROLE_ADMIN') %}
  478.                 <h3 class="text-lg font-semibold text-blue-800 mb-5 flex items-center border-b pb-3">
  479.                     <div class="w-8 h-8 bg-blue-200 rounded-lg flex items-center justify-center mr-3">
  480.                         <i class="fas fa-microphone-alt text-blue-700"></i>
  481.                     </div>
  482.                     Évaluation entretien (Jury)
  483.                 </h3>
  484.                 
  485.                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
  486.                     <div>
  487.                         <label class="block text-sm font-medium text-slate-700 mb-1">Date entretien</label>
  488.                         {{ form_widget(form.entdate, {'attr': {'class': input_class}}) }}
  489.                     </div>
  490.                     <div>
  491.                         <label class="block text-sm font-medium text-slate-700 mb-1">Lieu entretien</label>
  492.                         {{ form_widget(form.entlieu, {'attr': {'class': input_class, 'placeholder': 'Ex: Salle 101'}}) }}
  493.                     </div>
  494.                 </div>
  496.                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
  497.                     <div>
  498.                         <label class="block text-sm font-medium text-slate-700 mb-1">Jury n°</label>
  499.                         {{ form_widget(form.jury, {'attr': {'class': input_class, 'min': 1, 'max': 20}}) }}
  500.                     </div>
  501.                     <div>
  502.                         <label class="block text-sm font-medium text-slate-700 mb-1">Vague</label>
  503.                         {{ form_widget(form.vague, {'attr': {'class': input_class, 'min': 1}}) }}
  504.                     </div>
  505.                     <div>
  506.                         <label class="block text-sm font-medium text-slate-700 mb-1">Décision jury</label>
  507.                         {{ form_widget(form.entstatut, {'attr': {'class': input_class}}) }}
  508.                     </div>
  509.                 </div>
  511.                 <div class="mt-4">
  512.                     <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire entretien</label>
  513.                     {{ form_widget(form.entcom, {'attr': {'class': input_class, 'rows': 3, 'placeholder': "Observations sur l'entretien..."}}) }}
  514.                 </div>
  515.             {% endif %}
  517.             <!-- SECTION 4bis: GRILLE D'ÉVALUATION DYNAMIQUE -->
  518.             {% if (is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') or is_granted('ROLE_JURY')) and candidature is defined and candidature.id %}
  519.                 <div id="evaluation-section">
  520.                     <h3 class="text-lg font-semibold text-indigo-800 mb-5 flex items-center border-b pb-3">
  521.                         <div class="w-8 h-8 bg-indigo-200 rounded-lg flex items-center justify-center mr-3">
  522.                             <i class="fas fa-clipboard-check text-indigo-700"></i>
  523.                         </div>
  524.                         Évaluation de l'entretien
  525.                     </h3>
  527.                     {% if is_granted('ROLE_ENT') %}
  528.                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
  529.                             <div>
  530.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Date entretien</label>
  531.                                 {{ form_widget(form.entdate, {'attr': {'class': input_class}}) }}
  532.                             </div>
  533.                             <div>
  534.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Lieu entretien</label>
  535.                                 {{ form_widget(form.entlieu, {'attr': {'class': input_class, 'placeholder': 'Ex: Salle 101'}}) }}
  536.                             </div>
  537.                         </div>
  539.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
  540.                             <div>
  541.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Numéro du jury</label>
  542.                                 {{ form_widget(form.jury, {'attr': {'class': input_class, 'min': 1, 'max': 20}}) }}
  543.                             </div>
  544.                             <div>
  545.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Vague</label>
  546.                                 {{ form_widget(form.vague, {'attr': {'class': input_class, 'min': 1}}) }}
  547.                             </div>
  548.                             <div>
  549.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Décision du jury</label>
  550.                                 {{ form_widget(form.entstatut, {'attr': {'class': input_class}}) }}
  551.                             </div>
  552.                         </div>
  554.                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
  555.                             <div>
  556.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 1</label>
  557.                                 {{ form_widget(form.note1, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  558.                             </div>
  559.                             <div>
  560.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 2</label>
  561.                                 {{ form_widget(form.note2, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  562.                             </div>
  563.                             <div>
  564.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 3</label>
  565.                                 {{ form_widget(form.note3, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  566.                             </div>
  567.                             <div>
  568.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 4</label>
  569.                                 {{ form_widget(form.note4, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  570.                             </div>
  571.                             <div>
  572.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 5</label>
  573.                                 {{ form_widget(form.note5, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  574.                             </div>
  575.                             <div>
  576.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 6</label>
  577.                                 {{ form_widget(form.note6, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  578.                             </div>
  579.                             <div>
  580.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 7</label>
  581.                                 {{ form_widget(form.note7, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  582.                             </div>
  583.                             <div>
  584.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 8</label>
  585.                                 {{ form_widget(form.note8, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  586.                             </div>
  587.                             <div>
  588.                                 <label class="block text-sm font-medium text-slate-700 mb-1">Note 9</label>
  589.                                 {{ form_widget(form.note9, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  590.                             </div>
  591.                         </div>
  593.                         <div class="mt-4 mb-6">
  594.                             <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire entretien</label>
  595.                             {{ form_widget(form.entcom, {'attr': {'class': input_class, 'rows': 3, 'placeholder': "Observations sur l'entretien..."}}) }}
  596.                         </div>
  597.                     {% endif %}
  599.                     <!-- Évaluations existantes -->
  600.                     {% if evaluations is defined and evaluations|length > 0 %}
  601.                     <div class="mb-6 space-y-3" id="existing-evaluations">
  602.                         <p class="text-sm font-medium text-slate-600 flex items-center mb-2">
  603.                             <i class="fas fa-history text-indigo-500 mr-2"></i>
  604.                             Évaluations précédentes
  605.                         </p>
  606.                         {% for eval in evaluations %}
  607.                         <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
  608.                             <div class="flex items-center justify-between mb-2">
  609.                                 <div class="flex items-center gap-3">
  610.                                     <span class="font-medium text-slate-800">{{ eval.grille.nom }}</span>
  611.                                     <span class="text-xs text-slate-500">{{ eval.createdAt|date('d/m/Y H:i') }}</span>
  612.                                 </div>
  613.                                 <div class="flex items-center gap-2">
  614.                                     {% set percentage = eval.noteMaxTotale > 0 ? (eval.scoreTotal / eval.noteMaxTotale * 100) : 0 %}
  615.                                     <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold
  616.                                         {% if percentage >= 70 %}bg-green-100 text-green-700
  617.                                         {% elseif percentage >= 40 %}bg-yellow-100 text-yellow-700
  618.                                         {% else %}bg-red-100 text-red-700{% endif %}">
  619.                                         {{ eval.scoreTotal }} / {{ eval.noteMaxTotale }}
  620.                                     </span>
  621.                                 </div>
  622.                             </div>
  623.                             <!-- Progress bar -->
  624.                             <div class="w-full bg-slate-200 rounded-full h-2.5 mb-2">
  625.                                 <div class="h-2.5 rounded-full transition-all duration-500
  626.                                     {% if percentage >= 70 %}bg-green-500
  627.                                     {% elseif percentage >= 40 %}bg-yellow-500
  628.                                     {% else %}bg-red-500{% endif %}" 
  629.                                     style="width: {{ percentage }}%"></div>
  630.                             </div>
  631.                             {% if eval.commentaire %}
  632.                             <p class="text-xs text-slate-500 mt-1"><i class="fas fa-comment mr-1"></i> {{ eval.commentaire }}</p>
  633.                             {% endif %}
  634.                         </div>
  635.                         {% endfor %}
  636.                     </div>
  637.                     {% endif %}
  639.                     {#
  640.                     <!-- Sélection de la grille -->
  641.                     <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  642.                         <label class="block text-sm font-medium text-slate-700 mb-2">
  643.                             <i class="fas fa-th-list text-indigo-500 mr-1"></i>
  644.                             Sélectionner une grille d'évaluation
  645.                         </label>
  646.                         <select id="grille-select" class="{{ input_class }}">
  647.                             <option value="">-- Choisir une grille --</option>
  648.                             {% if grilles is defined %}
  649.                                 {% for grille in grilles %}
  650.                                     <option value="{{ grille.id }}" data-note-max="{{ grille.noteMaxTotale }}" data-nb-criteres="{{ grille.criteres|length }}">
  651.                                         {{ grille.nom }} ({{ grille.criteres|length }} critères — max {{ grille.noteMaxTotale }})
  652.                                     </option>
  653.                                 {% endfor %}
  654.                             {% endif %}
  655.                         </select>
  656.                     </div>
  657.                     #}
  659.                     <!-- Zone dynamique des critères -->
  660.                     <div id="criteres-container" class="hidden">
  661.                         <div class="bg-white rounded-xl border border-slate-200 overflow-hidden mb-4">
  662.                             <div class="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
  663.                                 <span class="text-sm font-semibold text-slate-700">
  664.                                     <i class="fas fa-star text-yellow-500 mr-1"></i>
  665.                                     Critères d'évaluation
  666.                                 </span>
  667.                                 <span id="grille-name" class="text-xs text-indigo-600 font-medium"></span>
  668.                             </div>
  669.                             <div class="overflow-x-auto">
  670.                                 <table class="w-full">
  671.                                     <thead class="bg-slate-50/50">
  672.                                         <tr>
  673.                                             <th class="px-5 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Critère</th>
  674.                                             <th class="px-5 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-28">Note max</th>
  675.                                             <th class="px-5 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-36">Note attribuée</th>
  676.                                         </tr>
  677.                                     </thead>
  678.                                     <tbody id="criteres-body" class="divide-y divide-slate-100">
  679.                                         <!-- Rempli dynamiquement par JS -->
  680.                                     </tbody>
  681.                                 </table>
  682.                             </div>
  683.                         </div>
  685.                         <!-- Score total + progress bar -->
  686.                         <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  687.                             <div class="flex items-center justify-between mb-3">
  688.                                 <span class="text-sm font-semibold text-slate-700">
  689.                                     <i class="fas fa-calculator text-indigo-500 mr-1"></i>
  690.                                     Score total
  691.                                 </span>
  692.                                 <span id="score-display" class="text-lg font-bold text-slate-800">0 / 0</span>
  693.                             </div>
  694.                             <div class="w-full bg-slate-200 rounded-full h-3">
  695.                                 <div id="score-bar" class="h-3 rounded-full transition-all duration-300 bg-slate-400" style="width: 0%"></div>
  696.                             </div>
  697.                             <p id="score-label" class="text-xs text-slate-500 mt-2 text-center"></p>
  698.                         </div>
  700.                         <!-- Commentaire -->
  701.                         <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  702.                             <label class="block text-sm font-medium text-slate-700 mb-2">
  703.                                 <i class="fas fa-comment-alt text-indigo-500 mr-1"></i>
  704.                                 Observation du jury
  705.                             </label>
  706.                             <textarea id="evaluation-commentaire" rows="3" 
  707.                                 class="{{ input_class }}" 
  708.                                 placeholder="Saisissez les observations du jury..."></textarea>
  709.                         </div>
  711.                         <!-- Bouton enregistrer -->
  712.                         <div class="flex justify-end">
  713.                             <button type="button" id="save-evaluation-btn" 
  714.                                 class="px-6 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg inline-flex items-center">
  715.                                 <i class="fas fa-save mr-2"></i>
  716.                                 Enregistrer l'évaluation
  717.                             </button>
  718.                         </div>
  720.                         <!-- Message de succès -->
  721.                         <div id="evaluation-success" class="hidden mt-4 p-4 rounded-xl bg-green-50 text-green-800 border border-green-200">
  722.                             <div class="flex items-center">
  723.                                 <i class="fas fa-check-circle text-green-500 mr-3 text-lg"></i>
  724.                                 <span id="evaluation-success-msg">Évaluation enregistrée avec succès.</span>
  725.                             </div>
  726.                         </div>
  728.                         <!-- Message d'erreur -->
  729.                         <div id="evaluation-error" class="hidden mt-4 p-4 rounded-xl bg-red-50 text-red-800 border border-red-200">
  730.                             <div class="flex items-center">
  731.                                 <i class="fas fa-exclamation-circle text-red-500 mr-3 text-lg"></i>
  732.                                 <span id="evaluation-error-msg">Erreur lors de l'enregistrement.</span>
  733.                             </div>
  734.                         </div>
  735.                     </div>
  736.                 </div>
  737.             {% endif %}
  739.             <!-- SECTION 5: Visite médicale et résultat final -->
  740.             {% if is_granted('ROLE_ENT') or is_granted('ROLE_JURY') or is_granted('ROLE_ADMIN') %}
  741.                 <div class="bg-emerald-50 rounded-2xl border border-emerald-200 p-6">
  742.                     <h3 class="text-lg font-semibold text-emerald-800 mb-5 flex items-center border-b border-emerald-200 pb-3">
  743.                         <div class="w-8 h-8 bg-emerald-200 rounded-lg flex items-center justify-center mr-3">
  744.                             <i class="fas fa-hospital text-emerald-700"></i>
  745.                         </div>
  746.                         VISITE MÉDICALE & Résultat final
  747.                     </h3>
  748.                     
  749.                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
  750.                         <div>
  751.                             <label class="block text-sm font-medium text-slate-700 mb-1">Date visite</label>
  752.                             {{ form_widget(form.visdate, {'attr': {'class': input_class}}) }}
  753.                         </div>
  754.                         <div>
  755.                             <label class="block text-sm font-medium text-slate-700 mb-1">Lieu visite</label>
  756.                             {{ form_widget(form.vislieu, {'attr': {'class': input_class, 'placeholder': 'Ex: Centre médical'}}) }}
  757.                         </div>
  758.                     </div>
  760.                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  761.                         <div>
  762.                             <label class="block text-sm font-medium text-slate-700 mb-1">Statut visite</label>
  763.                             {{ form_widget(form.visstatut, {'attr': {'class': input_class}}) }}
  764.                         </div>
  765.                         <div>
  766.                             <label class="block text-sm font-medium text-slate-700 mb-1">Résultat final</label>
  767.                             {{ form_widget(form.resultat, {'attr': {'class': input_class}}) }}
  768.                         </div>
  769.                         <div>
  770.                             <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire</label>
  771.                             {{ form_widget(form.viscom, {'attr': {'class': input_class, 'placeholder': 'Commentaire visite...'}}) }}
  772.                         </div>
  773.                     </div>
  774.                 </div>
  775.             {% endif %}
  777.             <!-- Boutons d'action -->
  778.             <div class="flex flex-col md:flex-row justify-between items-center gap-4 pt-6 border-t border-slate-200">
  779.                 <div class="text-sm text-slate-500">
  780.                     <i class="fas fa-info-circle mr-1"></i>
  781.                     Les champs marqués d'une <span class="text-red-500">*</span> sont obligatoires
  782.                 </div>
  783.                 
  784.                 <div class="flex gap-3">
  785.                     {% if app.user %}
  786.                         {# Vérification de l'âge pour afficher/masquer le bouton de soumission #}
  787.                         {% set age = app.user.datenaissance ? date().diff(date(app.user.datenaissance)).y : null %}
  788.                         
  789.                         {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_ENT') or is_granted('ROLE_JURY') %}
  790.                             {# Les rôles admin/ent/jury peuvent toujours soumettre #}
  791.                             <button type="submit" class="px-8 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg flex items-center">
  792.                                 <i class="fas fa-paper-plane mr-2"></i>
  793.                                 Enregistrer l'évaluation
  794.                             </button>
  795.                         {% elseif age >= 16 and age <= 40 %}
  796.                             {# Candidat avec âge valide #}
  797.                             <button type="submit" class="px-8 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg flex items-center">
  798.                                 <i class="fas fa-paper-plane mr-2"></i>
  799.                                 Soumettre ma candidature
  800.                             </button>
  801.                         {% else %}
  802.                             {# Candidat avec âge invalide - bouton désactivé #}
  803.                             <button type="button" disabled class="px-8 py-2 bg-gray-400 text-white font-semibold rounded-lg cursor-not-allowed opacity-50 flex items-center" title="Vous ne remplissez pas les conditions d'âge">
  804.                                 <i class="fas fa-ban mr-2"></i>
  805.                                 Soumission impossible
  806.                             </button>
  807.                         {% endif %}
  808.                     {% else %}
  809.                         {% set redirectUrl = path('app_candidature_new', {
  810.                             'etablissement': app.request.get('etablissement'),
  811.                             'metier': app.request.get('metier')
  812.                         }) %}
  813.                         
  814.                         <a href="{{ path('app_login', {'redirect': redirectUrl}) }}" 
  815.                            class="px-8 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-105 shadow-lg flex items-center">
  816.                             <i class="fas fa-sign-in-alt mr-2"></i>
  817.                             Se connecter pour postuler
  818.                         </a>
  819.                     {% endif %}
  820.                 </div>
  821.             </div>
  823.             {{ form_end(form) }}
  824.         </div>
  825.     </div>
  827.     {% endif %}
  828. </div>
  830. <!-- JavaScript pour la gestion dynamique établissement/métier -->
  831. <script>
  832. document.addEventListener('DOMContentLoaded', function() {
  833.     const etablissementSelect = document.getElementById('candidature_etablissement');
  834.     const metierSelect = document.getElementById('candidature_metier');
  835.     const metierInfo = document.getElementById('metier-info');
  836.     const metierSecteur = document.getElementById('metier-secteur');
  837.     const metierNiveau = document.getElementById('metier-niveau');
  838.     const metierNbrPlace = document.getElementById('metier-nbrplace');
  839.     const metierDuree = document.getElementById('metier-duree');
  840.     const etablissementLoading = document.getElementById('etablissement-loading');
  841.     const metierLoading = document.getElementById('metier-loading');
  842.     
  843.     const currentMetierValue = metierSelect.value;
  845.     function loadMetiers(etablissementId, callback) {
  846.         if (!etablissementId) {
  847.             metierSelect.innerHTML = '<option value="">-- Choisissez d\'abord un établissement --</option>';
  848.             metierSelect.disabled = true;
  849.             metierInfo.classList.add('hidden');
  850.             if (callback) callback();
  851.             return;
  852.         }
  854.         metierLoading.classList.remove('hidden');
  855.         metierSelect.disabled = true;
  857.         fetch('/candidature/etablissement/' + etablissementId + '/metiers')
  858.             .then(response => response.json())
  859.             .then(data => {
  860.                 metierSelect.innerHTML = '<option value="">-- Sélectionnez un métier --</option>';
  861.                 
  862.                 const grouped = {};
  863.                 data.forEach(metier => {
  864.                     const secteur = metier.secteur_nom || 'Autres';
  865.                     if (!grouped[secteur]) {
  866.                         grouped[secteur] = [];
  867.                     }
  868.                     grouped[secteur].push(metier);
  869.                 });
  870.                 
  871.                 for (const [secteur, metiers] of Object.entries(grouped)) {
  872.                     const optgroup = document.createElement('optgroup');
  873.                     optgroup.label = secteur;
  874.                     
  875.                     metiers.sort((a, b) => a.nom.localeCompare(b.nom));
  876.                     metiers.forEach(metier => {
  877.                         const option = document.createElement('option');
  878.                         option.value = metier.id;
  879.                         option.dataset.secteur = metier.secteur_nom || '';
  880.                         option.dataset.niveau = metier.niveau || '';
  881.                         option.dataset.duree = metier.duree || '';
  882.                         option.dataset.nbrplace = metier.nbrplace || '';
  883.                         let label = metier.nom;
  884.                         if (metier.nbrplace) {
  885.                             label += ' (' + metier.nbrplace + ' places)';
  886.                         }
  887.                         option.textContent = label;
  888.                         optgroup.appendChild(option);
  889.                     });
  890.                     
  891.                     metierSelect.appendChild(optgroup);
  892.                 }
  893.                 
  894.                 const metierToSelect = currentMetierValue || '{{ app.request.get('metier')|default('') }}';
  895.                 
  896.                 if (metierToSelect) {
  897.                     const options = metierSelect.options;
  898.                     for (let i = 0; i < options.length; i++) {
  899.                         if (options[i].value == metierToSelect) {
  900.                             options[i].selected = true;
  901.                             updateMetierInfo(options[i]);
  902.                             break;
  903.                         }
  904.                     }
  905.                 }
  906.                 
  907.                 metierSelect.disabled = false;
  908.                 metierLoading.classList.add('hidden');
  909.                 
  910.                 if (callback) callback();
  911.             })
  912.             .catch(error => {
  913.                 console.error('Erreur:', error);
  914.                 metierSelect.disabled = false;
  915.                 metierLoading.classList.add('hidden');
  916.                 if (callback) callback();
  917.             });
  918.     }
  920.     function updateMetierInfo(selectedOption) {
  921.         if (!selectedOption || !selectedOption.value) {
  922.             metierInfo.classList.add('hidden');
  923.             return;
  924.         }
  925.         
  926.         metierSecteur.textContent = selectedOption.dataset.secteur || 'Non spécifié';
  927.         metierNiveau.textContent = selectedOption.dataset.niveau || 'Non spécifié';
  928.         metierDuree.textContent = selectedOption.dataset.duree || 'Non spécifié';
  929.         metierNbrPlace.textContent = selectedOption.dataset.nbrplace || 'Non spécifié';
  930.         metierInfo.classList.remove('hidden');
  931.     }
  933.     {% if app.request.get('etablissement') %}
  934.         const etablissementId = '{{ app.request.get('etablissement') }}';
  935.         if (etablissementId) {
  936.             setTimeout(function() {
  937.                 const options = etablissementSelect.options;
  938.                 for (let i = 0; i < options.length; i++) {
  939.                     if (options[i].value == etablissementId) {
  940.                         options[i].selected = true;
  941.                         break;
  942.                     }
  943.                 }
  944.                 loadMetiers(etablissementId);
  945.             }, 100);
  946.         }
  947.     {% else %}
  948.         if (etablissementSelect.value) {
  949.             loadMetiers(etablissementSelect.value);
  950.         } else {
  951.             metierSelect.innerHTML = '<option value="">-- Choisissez d\'abord un établissement --</option>';
  952.             metierSelect.disabled = true;
  953.         }
  954.     {% endif %}
  956.     etablissementSelect.addEventListener('change', function() {
  957.         loadMetiers(this.value);
  958.         metierInfo.classList.add('hidden');
  959.     });
  961.     metierSelect.addEventListener('change', function() {
  962.         const selectedOption = this.options[this.selectedIndex];
  963.         updateMetierInfo(selectedOption);
  964.     });
  966.     const form = document.getElementById('candidature-form');
  967.     form.addEventListener('submit', function(e) {
  968.         {% if not app.user %}
  969.         e.preventDefault();
  970.         alert('Vous devez être connecté pour soumettre une candidature.');
  971.         const redirectUrl = '/candidature/new?etablissement=' + etablissementSelect.value + '&metier=' + metierSelect.value;
  972.         window.location.href = '/login?redirect=' + encodeURIComponent(redirectUrl);
  973.         return false;
  974.         {% endif %}
  976.         {# Vérification supplémentaire en JavaScript #}
  977.         {% if app.user and app.user.datenaissance %}
  978.             {% set age = date().diff(date(app.user.datenaissance)).y %}
  979.             {% if age < 16 or age > 40 %}
  980.                 e.preventDefault();
  981.                 alert('Vous ne remplissez pas les conditions d\'âge pour candidater (16 à 40 ans).');
  982.                 return false;
  983.             {% endif %}
  984.         {% endif %}
  986.         if (!etablissementSelect.value) {
  987.             e.preventDefault();
  988.             alert('Veuillez sélectionner un établissement.');
  989.             return false;
  990.         }
  991.         
  992.         if (!metierSelect.value) {
  993.             e.preventDefault();
  994.             alert('Veuillez sélectionner un métier.');
  995.             return false;
  996.         }
  997.     });
  998. });
  999. </script>
  1001. <!-- JavaScript pour la grille d'évaluation dynamique -->
  1002. {% if (is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') or is_granted('ROLE_JURY')) and candidature is defined and candidature.id %}
  1003. <script>
  1004. document.addEventListener('DOMContentLoaded', function() {
  1005.     const grilleSelect = document.getElementById('grille-select');
  1006.     const criteresContainer = document.getElementById('criteres-container');
  1007.     const criteresBody = document.getElementById('criteres-body');
  1008.     const grilleName = document.getElementById('grille-name');
  1009.     const scoreDisplay = document.getElementById('score-display');
  1010.     const scoreBar = document.getElementById('score-bar');
  1011.     const scoreLabel = document.getElementById('score-label');
  1012.     const saveBtn = document.getElementById('save-evaluation-btn');
  1013.     const commentaireField = document.getElementById('evaluation-commentaire');
  1014.     const successDiv = document.getElementById('evaluation-success');
  1015.     const errorDiv = document.getElementById('evaluation-error');
  1016.     const successMsg = document.getElementById('evaluation-success-msg');
  1017.     const errorMsg = document.getElementById('evaluation-error-msg');
  1019.     if (!grilleSelect) return;
  1021.     const candidatureId = {{ candidature.id }};
  1022.     let currentGrilleId = null;
  1023.     let noteMaxTotale = 0;
  1025.     // Charger les critères quand on sélectionne une grille
  1026.     grilleSelect.addEventListener('change', function() {
  1027.         const grilleId = this.value;
  1028.         if (!grilleId) {
  1029.             criteresContainer.classList.add('hidden');
  1030.             currentGrilleId = null;
  1031.             return;
  1032.         }
  1034.         currentGrilleId = grilleId;
  1035.         loadCriteres(grilleId);
  1036.     });
  1038.     function loadCriteres(grilleId) {
  1039.         fetch('/evaluation/grille/' + grilleId + '/criteres')
  1040.             .then(r => r.json())
  1041.             .then(data => {
  1042.                 criteresBody.innerHTML = '';
  1043.                 noteMaxTotale = data.grille.noteMaxTotale;
  1044.                 grilleName.textContent = data.grille.nom;
  1046.                 data.criteres.forEach(critere => {
  1047.                     const tr = document.createElement('tr');
  1048.                     tr.className = 'hover:bg-slate-50/50 transition';
  1049.                     tr.innerHTML = `
  1050.                         <td class="px-5 py-3">
  1051.                             <div>
  1052.                                 <span class="font-medium text-slate-800 text-sm">${critere.nom}</span>
  1053.                                 ${critere.description ? '<p class="text-xs text-slate-500 mt-0.5">' + critere.description + '</p>' : ''}
  1054.                             </div>
  1055.                         </td>
  1056.                         <td class="px-5 py-3 text-center">
  1057.                             <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">${critere.noteMax}</span>
  1058.                         </td>
  1059.                         <td class="px-5 py-3 text-center">
  1060.                             <input type="number" 
  1061.                                 class="w-24 mx-auto px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition text-center text-sm font-medium note-input"
  1062.                                 data-critere-id="${critere.id}" 
  1063.                                 data-note-max="${critere.noteMax}"
  1064.                                 min="0" 
  1065.                                 max="${critere.noteMax}" 
  1066.                                 step="0.5" 
  1067.                                 placeholder="..."
  1068.                             >
  1069.                         </td>
  1070.                     `;
  1071.                     criteresBody.appendChild(tr);
  1072.                 });
  1074.                 criteresContainer.classList.remove('hidden');
  1075.                 updateScore();
  1077.                 // Charger les notes existantes
  1078.                 loadExistingEvaluation(grilleId);
  1080.                 // Ajouter les écouteurs sur les champs de notes
  1081.                 document.querySelectorAll('.note-input').forEach(input => {
  1082.                     input.addEventListener('input', function() {
  1083.                         const max = parseFloat(this.dataset.noteMax);
  1084.                         let val = parseFloat(this.value);
  1085.                         if (val > max) { this.value = max; }
  1086.                         if (val < 0) { this.value = 0; }
  1087.                         updateScore();
  1088.                     });
  1089.                 });
  1090.             })
  1091.             .catch(err => {
  1092.                 console.error('Erreur chargement critères:', err);
  1093.             });
  1094.     }
  1096.     function loadExistingEvaluation(grilleId) {
  1097.         fetch('/evaluation/candidature/' + candidatureId + '/evaluation')
  1098.             .then(r => r.json())
  1099.             .then(evaluations => {
  1100.                 const existing = evaluations.find(e => e.grilleId == grilleId);
  1101.                 if (existing) {
  1102.                     existing.notations.forEach(n => {
  1103.                         const input = document.querySelector(`.note-input[data-critere-id="${n.critereId}"]`);
  1104.                         if (input && n.note !== null) {
  1105.                             input.value = n.note;
  1106.                         }
  1107.                     });
  1108.                     if (existing.commentaire) {
  1109.                         commentaireField.value = existing.commentaire;
  1110.                     }
  1111.                     updateScore();
  1112.                 }
  1113.             })
  1114.             .catch(err => console.error('Erreur chargement évaluation:', err));
  1115.     }
  1117.     function updateScore() {
  1118.         let total = 0;
  1119.         document.querySelectorAll('.note-input').forEach(input => {
  1120.             const val = parseFloat(input.value);
  1121.             if (!isNaN(val)) total += val;
  1122.         });
  1124.         scoreDisplay.textContent = total + ' / ' + noteMaxTotale;
  1126.         const percentage = noteMaxTotale > 0 ? (total / noteMaxTotale * 100) : 0;
  1127.         scoreBar.style.width = percentage + '%';
  1129.         // Couleur de la barre de progression
  1130.         scoreBar.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-slate-400');
  1131.         if (percentage >= 70) {
  1132.             scoreBar.classList.add('bg-green-500');
  1133.             scoreLabel.textContent = 'Excellent';
  1134.             scoreLabel.className = 'text-xs mt-2 text-center text-green-600 font-medium';
  1135.         } else if (percentage >= 40) {
  1136.             scoreBar.classList.add('bg-yellow-500');
  1137.             scoreLabel.textContent = 'Moyen';
  1138.             scoreLabel.className = 'text-xs mt-2 text-center text-yellow-600 font-medium';
  1139.         } else if (total > 0) {
  1140.             scoreBar.classList.add('bg-red-500');
  1141.             scoreLabel.textContent = 'Faible';
  1142.             scoreLabel.className = 'text-xs mt-2 text-center text-red-600 font-medium';
  1143.         } else {
  1144.             scoreBar.classList.add('bg-slate-400');
  1145.             scoreLabel.textContent = '';
  1146.         }
  1147.     }
  1149.     // Enregistrer l'évaluation
  1150.     saveBtn.addEventListener('click', function() {
  1151.         if (!currentGrilleId) return;
  1153.         successDiv.classList.add('hidden');
  1154.         errorDiv.classList.add('hidden');
  1156.         const notations = [];
  1157.         document.querySelectorAll('.note-input').forEach(input => {
  1158.             notations.push({
  1159.                 critereId: parseInt(input.dataset.critereId),
  1160.                 note: input.value !== '' ? parseFloat(input.value) : null,
  1161.             });
  1162.         });
  1164.         const payload = {
  1165.             grilleId: parseInt(currentGrilleId),
  1166.             notations: notations,
  1167.             commentaire: commentaireField.value || null,
  1168.         };
  1170.         saveBtn.disabled = true;
  1171.         saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Enregistrement...';
  1173.         fetch('/evaluation/candidature/' + candidatureId + '/evaluer', {
  1174.             method: 'POST',
  1175.             headers: { 'Content-Type': 'application/json' },
  1176.             body: JSON.stringify(payload),
  1177.         })
  1178.         .then(r => r.json())
  1179.         .then(data => {
  1180.             if (data.success) {
  1181.                 successMsg.textContent = data.message;
  1182.                 successDiv.classList.remove('hidden');
  1183.                 errorDiv.classList.add('hidden');
  1185.                 // Mettre à jour l'affichage du score
  1186.                 scoreDisplay.textContent = data.scoreTotal + ' / ' + data.noteMaxTotale;
  1187.             } else {
  1188.                 errorMsg.textContent = data.error || 'Erreur inconnue.';
  1189.                 errorDiv.classList.remove('hidden');
  1190.                 successDiv.classList.add('hidden');
  1191.             }
  1192.         })
  1193.         .catch(err => {
  1194.             console.error('Erreur:', err);
  1195.             errorMsg.textContent = 'Erreur réseau lors de l\'enregistrement.';
  1196.             errorDiv.classList.remove('hidden');
  1197.             successDiv.classList.add('hidden');
  1198.         })
  1199.         .finally(() => {
  1200.             saveBtn.disabled = false;
  1201.             saveBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Enregistrer l\'évaluation';
  1202.         });
  1203.     });
  1204. });
  1205. </script>
  1206. {% endif %}
  1207. {% endblock %}