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 des informations
  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, ENT ET ADMIN - Évaluation entretien -->
  477.             {% if is_granted('ROLE_JURY') or is_granted('ROLE_ADMIN') or is_granted('ROLE_ENT') %}
  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
  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">Numéro du jury</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 du jury</label>
  507.                         {{ form_widget(form.entstatut, {'attr': {'class': input_class}}) }}
  508.                     </div>
  509.                 </div>
  511.                 {% if form.note1 is defined %}
  512.                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
  513.                     <div>
  514.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 1</label>
  515.                         {{ form_widget(form.note1, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  516.                     </div>
  517.                     <div>
  518.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 2</label>
  519.                         {{ form_widget(form.note2, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  520.                     </div>
  521.                     <div>
  522.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 3</label>
  523.                         {{ form_widget(form.note3, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  524.                     </div>
  525.                     <div>
  526.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 4</label>
  527.                         {{ form_widget(form.note4, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  528.                     </div>
  529.                     <div>
  530.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 5</label>
  531.                         {{ form_widget(form.note5, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  532.                     </div>
  533.                     <div>
  534.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 6</label>
  535.                         {{ form_widget(form.note6, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  536.                     </div>
  537.                     <div>
  538.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 7</label>
  539.                         {{ form_widget(form.note7, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  540.                     </div>
  541.                     <div>
  542.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 8</label>
  543.                         {{ form_widget(form.note8, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  544.                     </div>
  545.                     <div>
  546.                         <label class="block text-sm font-medium text-slate-700 mb-1">Note 9</label>
  547.                         {{ form_widget(form.note9, {'attr': {'class': input_class, 'min': 0, 'max': 20, 'step': 0.5}}) }}
  548.                     </div>
  549.                 </div>
  550.                 {% endif %}
  552.                 <div class="mt-4 mb-6">
  553.                     <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire entretien</label>
  554.                     {{ form_widget(form.entcom, {'attr': {'class': input_class, 'rows': 3, 'placeholder': "Observations sur l'entretien..."}}) }}
  555.                 </div>
  556.             {% endif %}
  558.             <!-- SECTION 4bis: GRILLE D'ÉVALUATION DYNAMIQUE -->
  559.             {% if (is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') or is_granted('ROLE_JURY')) and candidature is defined and candidature.id %}
  560.                 <div id="evaluation-section">
  561.                     <h3 class="text-lg font-semibold text-indigo-800 mb-5 flex items-center border-b pb-3">
  562.                         <div class="w-8 h-8 bg-indigo-200 rounded-lg flex items-center justify-center mr-3">
  563.                             <i class="fas fa-clipboard-check text-indigo-700"></i>
  564.                         </div>
  565.                         Grille d'évaluation dynamique
  566.                     </h3>
  568.                     <!-- Évaluations existantes -->
  569.                     {% if evaluations is defined and evaluations|length > 0 %}
  570.                     <div class="mb-6 space-y-3" id="existing-evaluations">
  571.                         <p class="text-sm font-medium text-slate-600 flex items-center mb-2">
  572.                             <i class="fas fa-history text-indigo-500 mr-2"></i>
  573.                             Évaluations précédentes
  574.                         </p>
  575.                         {% for eval in evaluations %}
  576.                         <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
  577.                             <div class="flex items-center justify-between mb-2">
  578.                                 <div class="flex items-center gap-3">
  579.                                     <span class="font-medium text-slate-800">{{ eval.grille.nom }}</span>
  580.                                     <span class="text-xs text-slate-500">{{ eval.createdAt|date('d/m/Y H:i') }}</span>
  581.                                 </div>
  582.                                 <div class="flex items-center gap-2">
  583.                                     {% set percentage = eval.noteMaxTotale > 0 ? (eval.scoreTotal / eval.noteMaxTotale * 100) : 0 %}
  584.                                     <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold
  585.                                         {% if percentage >= 70 %}bg-green-100 text-green-700
  586.                                         {% elseif percentage >= 40 %}bg-yellow-100 text-yellow-700
  587.                                         {% else %}bg-red-100 text-red-700{% endif %}">
  588.                                         {{ eval.scoreTotal }} / {{ eval.noteMaxTotale }}
  589.                                     </span>
  590.                                 </div>
  591.                             </div>
  592.                             <!-- Progress bar -->
  593.                             <div class="w-full bg-slate-200 rounded-full h-2.5 mb-2">
  594.                                 <div class="h-2.5 rounded-full transition-all duration-500
  595.                                     {% if percentage >= 70 %}bg-green-500
  596.                                     {% elseif percentage >= 40 %}bg-yellow-500
  597.                                     {% else %}bg-red-500{% endif %}" 
  598.                                     style="width: {{ percentage }}%"></div>
  599.                             </div>
  600.                             {% if eval.commentaire %}
  601.                             <p class="text-xs text-slate-500 mt-1"><i class="fas fa-comment mr-1"></i> {{ eval.commentaire }}</p>
  602.                             {% endif %}
  603.                         </div>
  604.                         {% endfor %}
  605.                     </div>
  606.                     {% endif %}
  608.                     {#
  609.                     <!-- Sélection de la grille -->
  610.                     <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  611.                         <label class="block text-sm font-medium text-slate-700 mb-2">
  612.                             <i class="fas fa-th-list text-indigo-500 mr-1"></i>
  613.                             Sélectionner une grille d'évaluation
  614.                         </label>
  615.                         <select id="grille-select" class="{{ input_class }}">
  616.                             <option value="">-- Choisir une grille --</option>
  617.                             {% if grilles is defined %}
  618.                                 {% for grille in grilles %}
  619.                                     <option value="{{ grille.id }}" data-note-max="{{ grille.noteMaxTotale }}" data-nb-criteres="{{ grille.criteres|length }}">
  620.                                         {{ grille.nom }} ({{ grille.criteres|length }} critères — max {{ grille.noteMaxTotale }})
  621.                                     </option>
  622.                                 {% endfor %}
  623.                             {% endif %}
  624.                         </select>
  625.                     </div>
  626.                     #}
  628.                     <!-- Zone dynamique des critères -->
  629.                     <div id="criteres-container" class="hidden">
  630.                         <div class="bg-white rounded-xl border border-slate-200 overflow-hidden mb-4">
  631.                             <div class="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
  632.                                 <span class="text-sm font-semibold text-slate-700">
  633.                                     <i class="fas fa-star text-yellow-500 mr-1"></i>
  634.                                     Critères d'évaluation
  635.                                 </span>
  636.                                 <span id="grille-name" class="text-xs text-indigo-600 font-medium"></span>
  637.                             </div>
  638.                             <div class="overflow-x-auto">
  639.                                 <table class="w-full">
  640.                                     <thead class="bg-slate-50/50">
  641.                                         <tr>
  642.                                             <th class="px-5 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Critère</th>
  643.                                             <th class="px-5 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-28">Note max</th>
  644.                                             <th class="px-5 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-36">Note attribuée</th>
  645.                                         </tr>
  646.                                     </thead>
  647.                                     <tbody id="criteres-body" class="divide-y divide-slate-100">
  648.                                         <!-- Rempli dynamiquement par JS -->
  649.                                     </tbody>
  650.                                 </table>
  651.                             </div>
  652.                         </div>
  654.                         <!-- Score total + progress bar -->
  655.                         <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  656.                             <div class="flex items-center justify-between mb-3">
  657.                                 <span class="text-sm font-semibold text-slate-700">
  658.                                     <i class="fas fa-calculator text-indigo-500 mr-1"></i>
  659.                                     Score total
  660.                                 </span>
  661.                                 <span id="score-display" class="text-lg font-bold text-slate-800">0 / 0</span>
  662.                             </div>
  663.                             <div class="w-full bg-slate-200 rounded-full h-3">
  664.                                 <div id="score-bar" class="h-3 rounded-full transition-all duration-300 bg-slate-400" style="width: 0%"></div>
  665.                             </div>
  666.                             <p id="score-label" class="text-xs text-slate-500 mt-2 text-center"></p>
  667.                         </div>
  669.                         <!-- Commentaire -->
  670.                         <div class="bg-white rounded-xl border border-slate-200 p-5 mb-4">
  671.                             <label class="block text-sm font-medium text-slate-700 mb-2">
  672.                                 <i class="fas fa-comment-alt text-indigo-500 mr-1"></i>
  673.                                 Observation du jury
  674.                             </label>
  675.                             <textarea id="evaluation-commentaire" rows="3" 
  676.                                 class="{{ input_class }}" 
  677.                                 placeholder="Saisissez les observations du jury..."></textarea>
  678.                         </div>
  680.                         <!-- Bouton enregistrer -->
  681.                         <div class="flex justify-end">
  682.                             <button type="button" id="save-evaluation-btn" 
  683.                                 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">
  684.                                 <i class="fas fa-save mr-2"></i>
  685.                                 Enregistrer l'évaluation
  686.                             </button>
  687.                         </div>
  689.                         <!-- Message de succès -->
  690.                         <div id="evaluation-success" class="hidden mt-4 p-4 rounded-xl bg-green-50 text-green-800 border border-green-200">
  691.                             <div class="flex items-center">
  692.                                 <i class="fas fa-check-circle text-green-500 mr-3 text-lg"></i>
  693.                                 <span id="evaluation-success-msg">Évaluation enregistrée avec succès.</span>
  694.                             </div>
  695.                         </div>
  697.                         <!-- Message d'erreur -->
  698.                         <div id="evaluation-error" class="hidden mt-4 p-4 rounded-xl bg-red-50 text-red-800 border border-red-200">
  699.                             <div class="flex items-center">
  700.                                 <i class="fas fa-exclamation-circle text-red-500 mr-3 text-lg"></i>
  701.                                 <span id="evaluation-error-msg">Erreur lors de l'enregistrement.</span>
  702.                             </div>
  703.                         </div>
  704.                     </div>
  705.                 </div>
  706.             {% endif %}
  708.             <!-- SECTION 5: Visite médicale et résultat final -->
  709.             {% if is_granted('ROLE_ENT') or is_granted('ROLE_JURY') or is_granted('ROLE_ADMIN') %}
  710.                 <div class="bg-emerald-50 rounded-2xl border border-emerald-200 p-6">
  711.                     <h3 class="text-lg font-semibold text-emerald-800 mb-5 flex items-center border-b border-emerald-200 pb-3">
  712.                         <div class="w-8 h-8 bg-emerald-200 rounded-lg flex items-center justify-center mr-3">
  713.                             <i class="fas fa-hospital text-emerald-700"></i>
  714.                         </div>
  715.                         VISITE MÉDICALE & Résultat final
  716.                     </h3>
  717.                     
  718.                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
  719.                         <div>
  720.                             <label class="block text-sm font-medium text-slate-700 mb-1">Date visite</label>
  721.                             {{ form_widget(form.visdate, {'attr': {'class': input_class}}) }}
  722.                         </div>
  723.                         <div>
  724.                             <label class="block text-sm font-medium text-slate-700 mb-1">Lieu visite</label>
  725.                             {{ form_widget(form.vislieu, {'attr': {'class': input_class, 'placeholder': 'Ex: Centre médical'}}) }}
  726.                         </div>
  727.                     </div>
  729.                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  730.                         <div>
  731.                             <label class="block text-sm font-medium text-slate-700 mb-1">Statut visite</label>
  732.                             {{ form_widget(form.visstatut, {'attr': {'class': input_class}}) }}
  733.                         </div>
  734.                         <div>
  735.                             <label class="block text-sm font-medium text-slate-700 mb-1">Résultat final</label>
  736.                             {{ form_widget(form.resultat, {'attr': {'class': input_class}}) }}
  737.                         </div>
  738.                         <div>
  739.                             <label class="block text-sm font-medium text-slate-700 mb-1">Commentaire</label>
  740.                             {{ form_widget(form.viscom, {'attr': {'class': input_class, 'placeholder': 'Commentaire visite...'}}) }}
  741.                         </div>
  742.                     </div>
  743.                 </div>
  744.             {% endif %}
  746.             <!-- Boutons d'action -->
  747.             <div class="flex flex-col md:flex-row justify-between items-center gap-4 pt-6 border-t border-slate-200">
  748.                 <div class="text-sm text-slate-500">
  749.                     <i class="fas fa-info-circle mr-1"></i>
  750.                     Les champs marqués d'une <span class="text-red-500">*</span> sont obligatoires
  751.                 </div>
  752.                 
  753.                 <div class="flex gap-3">
  754.                     {% if app.user %}
  755.                         {# Vérification de l'âge pour afficher/masquer le bouton de soumission #}
  756.                         {% set age = app.user.datenaissance ? date().diff(date(app.user.datenaissance)).y : null %}
  757.                         
  758.                         {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_ENT') or is_granted('ROLE_JURY') %}
  759.                             {# Les rôles admin/ent/jury peuvent toujours soumettre #}
  760.                             <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">
  761.                                 <i class="fas fa-paper-plane mr-2"></i>
  762.                                 Enregistrer l'évaluation
  763.                             </button>
  764.                         {% elseif age >= 16 and age <= 40 %}
  765.                             {# Candidat avec âge valide #}
  766.                             <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">
  767.                                 <i class="fas fa-paper-plane mr-2"></i>
  768.                                 Soumettre ma candidature
  769.                             </button>
  770.                         {% else %}
  771.                             {# Candidat avec âge invalide - bouton désactivé #}
  772.                             <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">
  773.                                 <i class="fas fa-ban mr-2"></i>
  774.                                 Soumission impossible
  775.                             </button>
  776.                         {% endif %}
  777.                     {% else %}
  778.                         {% set redirectUrl = path('app_candidature_new', {
  779.                             'etablissement': app.request.get('etablissement'),
  780.                             'metier': app.request.get('metier')
  781.                         }) %}
  782.                         
  783.                         <a href="{{ path('app_login', {'redirect': redirectUrl}) }}" 
  784.                            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">
  785.                             <i class="fas fa-sign-in-alt mr-2"></i>
  786.                             Se connecter pour postuler
  787.                         </a>
  788.                     {% endif %}
  789.                 </div>
  790.             </div>
  792.             {{ form_end(form) }}
  793.         </div>
  794.     </div>
  796.     {% endif %}
  797. </div>
  799. <!-- JavaScript pour la gestion dynamique établissement/métier -->
  800. <script>
  801. document.addEventListener('DOMContentLoaded', function() {
  802.     const etablissementSelect = document.getElementById('candidature_etablissement');
  803.     const metierSelect = document.getElementById('candidature_metier');
  804.     const metierInfo = document.getElementById('metier-info');
  805.     const metierSecteur = document.getElementById('metier-secteur');
  806.     const metierNiveau = document.getElementById('metier-niveau');
  807.     const metierNbrPlace = document.getElementById('metier-nbrplace');
  808.     const metierDuree = document.getElementById('metier-duree');
  809.     const etablissementLoading = document.getElementById('etablissement-loading');
  810.     const metierLoading = document.getElementById('metier-loading');
  811.     
  812.     const currentMetierValue = metierSelect.value;
  814.     function loadMetiers(etablissementId, callback) {
  815.         if (!etablissementId) {
  816.             metierSelect.innerHTML = '<option value="">-- Choisissez d\'abord un établissement --</option>';
  817.             metierSelect.disabled = true;
  818.             metierInfo.classList.add('hidden');
  819.             if (callback) callback();
  820.             return;
  821.         }
  823.         metierLoading.classList.remove('hidden');
  824.         metierSelect.disabled = true;
  826.         fetch('/candidature/etablissement/' + etablissementId + '/metiers')
  827.             .then(response => response.json())
  828.             .then(data => {
  829.                 metierSelect.innerHTML = '<option value="">-- Sélectionnez un métier --</option>';
  830.                 
  831.                 const grouped = {};
  832.                 data.forEach(metier => {
  833.                     const secteur = metier.secteur_nom || 'Autres';
  834.                     if (!grouped[secteur]) {
  835.                         grouped[secteur] = [];
  836.                     }
  837.                     grouped[secteur].push(metier);
  838.                 });
  839.                 
  840.                 for (const [secteur, metiers] of Object.entries(grouped)) {
  841.                     const optgroup = document.createElement('optgroup');
  842.                     optgroup.label = secteur;
  843.                     
  844.                     metiers.sort((a, b) => a.nom.localeCompare(b.nom));
  845.                     metiers.forEach(metier => {
  846.                         const option = document.createElement('option');
  847.                         option.value = metier.id;
  848.                         option.dataset.secteur = metier.secteur_nom || '';
  849.                         option.dataset.niveau = metier.niveau || '';
  850.                         option.dataset.duree = metier.duree || '';
  851.                         option.dataset.nbrplace = metier.nbrplace || '';
  852.                         let label = metier.nom;
  853.                         if (metier.nbrplace) {
  854.                             label += ' (' + metier.nbrplace + ' places)';
  855.                         }
  856.                         option.textContent = label;
  857.                         optgroup.appendChild(option);
  858.                     });
  859.                     
  860.                     metierSelect.appendChild(optgroup);
  861.                 }
  862.                 
  863.                 const metierToSelect = currentMetierValue || '{{ app.request.get('metier')|default('') }}';
  864.                 
  865.                 if (metierToSelect) {
  866.                     const options = metierSelect.options;
  867.                     for (let i = 0; i < options.length; i++) {
  868.                         if (options[i].value == metierToSelect) {
  869.                             options[i].selected = true;
  870.                             updateMetierInfo(options[i]);
  871.                             break;
  872.                         }
  873.                     }
  874.                 }
  875.                 
  876.                 metierSelect.disabled = false;
  877.                 metierLoading.classList.add('hidden');
  878.                 
  879.                 if (callback) callback();
  880.             })
  881.             .catch(error => {
  882.                 console.error('Erreur:', error);
  883.                 metierSelect.disabled = false;
  884.                 metierLoading.classList.add('hidden');
  885.                 if (callback) callback();
  886.             });
  887.     }
  889.     function updateMetierInfo(selectedOption) {
  890.         if (!selectedOption || !selectedOption.value) {
  891.             metierInfo.classList.add('hidden');
  892.             return;
  893.         }
  894.         
  895.         metierSecteur.textContent = selectedOption.dataset.secteur || 'Non spécifié';
  896.         metierNiveau.textContent = selectedOption.dataset.niveau || 'Non spécifié';
  897.         metierDuree.textContent = selectedOption.dataset.duree || 'Non spécifié';
  898.         metierNbrPlace.textContent = selectedOption.dataset.nbrplace || 'Non spécifié';
  899.         metierInfo.classList.remove('hidden');
  900.     }
  902.     {% if app.request.get('etablissement') %}
  903.         const etablissementId = '{{ app.request.get('etablissement') }}';
  904.         if (etablissementId) {
  905.             setTimeout(function() {
  906.                 const options = etablissementSelect.options;
  907.                 for (let i = 0; i < options.length; i++) {
  908.                     if (options[i].value == etablissementId) {
  909.                         options[i].selected = true;
  910.                         break;
  911.                     }
  912.                 }
  913.                 loadMetiers(etablissementId);
  914.             }, 100);
  915.         }
  916.     {% else %}
  917.         if (etablissementSelect.value) {
  918.             loadMetiers(etablissementSelect.value);
  919.         } else {
  920.             metierSelect.innerHTML = '<option value="">-- Choisissez d\'abord un établissement --</option>';
  921.             metierSelect.disabled = true;
  922.         }
  923.     {% endif %}
  925.     etablissementSelect.addEventListener('change', function() {
  926.         loadMetiers(this.value);
  927.         metierInfo.classList.add('hidden');
  928.     });
  930.     metierSelect.addEventListener('change', function() {
  931.         const selectedOption = this.options[this.selectedIndex];
  932.         updateMetierInfo(selectedOption);
  933.     });
  935.     const form = document.getElementById('candidature-form');
  936.     form.addEventListener('submit', function(e) {
  937.         {% if not app.user %}
  938.         e.preventDefault();
  939.         alert('Vous devez être connecté pour soumettre une candidature.');
  940.         const redirectUrl = '/candidature/new?etablissement=' + etablissementSelect.value + '&metier=' + metierSelect.value;
  941.         window.location.href = '/login?redirect=' + encodeURIComponent(redirectUrl);
  942.         return false;
  943.         {% endif %}
  945.         {# Vérification supplémentaire en JavaScript #}
  946.         {% if app.user and app.user.datenaissance %}
  947.             {% set age = date().diff(date(app.user.datenaissance)).y %}
  948.             {% if age < 16 or age > 40 %}
  949.                 e.preventDefault();
  950.                 alert('Vous ne remplissez pas les conditions d\'âge pour candidater (16 à 40 ans).');
  951.                 return false;
  952.             {% endif %}
  953.         {% endif %}
  955.         if (!etablissementSelect.value) {
  956.             e.preventDefault();
  957.             alert('Veuillez sélectionner un établissement.');
  958.             return false;
  959.         }
  960.         
  961.         if (!metierSelect.value) {
  962.             e.preventDefault();
  963.             alert('Veuillez sélectionner un métier.');
  964.             return false;
  965.         }
  966.     });
  967. });
  968. </script>
  970. <!-- JavaScript pour la grille d'évaluation dynamique -->
  971. {% if (is_granted('ROLE_ENT') or is_granted('ROLE_ADMIN') or is_granted('ROLE_JURY')) and candidature is defined and candidature.id %}
  972. <script>
  973. document.addEventListener('DOMContentLoaded', function() {
  974.     const grilleSelect = document.getElementById('grille-select');
  975.     const criteresContainer = document.getElementById('criteres-container');
  976.     const criteresBody = document.getElementById('criteres-body');
  977.     const grilleName = document.getElementById('grille-name');
  978.     const scoreDisplay = document.getElementById('score-display');
  979.     const scoreBar = document.getElementById('score-bar');
  980.     const scoreLabel = document.getElementById('score-label');
  981.     const saveBtn = document.getElementById('save-evaluation-btn');
  982.     const commentaireField = document.getElementById('evaluation-commentaire');
  983.     const successDiv = document.getElementById('evaluation-success');
  984.     const errorDiv = document.getElementById('evaluation-error');
  985.     const successMsg = document.getElementById('evaluation-success-msg');
  986.     const errorMsg = document.getElementById('evaluation-error-msg');
  988.     if (!grilleSelect) return;
  990.     const candidatureId = {{ candidature.id }};
  991.     let currentGrilleId = null;
  992.     let noteMaxTotale = 0;
  994.     // Charger les critères quand on sélectionne une grille
  995.     grilleSelect.addEventListener('change', function() {
  996.         const grilleId = this.value;
  997.         if (!grilleId) {
  998.             criteresContainer.classList.add('hidden');
  999.             currentGrilleId = null;
  1000.             return;
  1001.         }
  1003.         currentGrilleId = grilleId;
  1004.         loadCriteres(grilleId);
  1005.     });
  1007.     function loadCriteres(grilleId) {
  1008.         fetch('/evaluation/grille/' + grilleId + '/criteres')
  1009.             .then(r => r.json())
  1010.             .then(data => {
  1011.                 criteresBody.innerHTML = '';
  1012.                 noteMaxTotale = data.grille.noteMaxTotale;
  1013.                 grilleName.textContent = data.grille.nom;
  1015.                 data.criteres.forEach(critere => {
  1016.                     const tr = document.createElement('tr');
  1017.                     tr.className = 'hover:bg-slate-50/50 transition';
  1018.                     tr.innerHTML = `
  1019.                         <td class="px-5 py-3">
  1020.                             <div>
  1021.                                 <span class="font-medium text-slate-800 text-sm">${critere.nom}</span>
  1022.                                 ${critere.description ? '<p class="text-xs text-slate-500 mt-0.5">' + critere.description + '</p>' : ''}
  1023.                             </div>
  1024.                         </td>
  1025.                         <td class="px-5 py-3 text-center">
  1026.                             <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>
  1027.                         </td>
  1028.                         <td class="px-5 py-3 text-center">
  1029.                             <input type="number" 
  1030.                                 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"
  1031.                                 data-critere-id="${critere.id}" 
  1032.                                 data-note-max="${critere.noteMax}"
  1033.                                 min="0" 
  1034.                                 max="${critere.noteMax}" 
  1035.                                 step="0.5" 
  1036.                                 placeholder="..."
  1037.                             >
  1038.                         </td>
  1039.                     `;
  1040.                     criteresBody.appendChild(tr);
  1041.                 });
  1043.                 criteresContainer.classList.remove('hidden');
  1044.                 updateScore();
  1046.                 // Charger les notes existantes
  1047.                 loadExistingEvaluation(grilleId);
  1049.                 // Ajouter les écouteurs sur les champs de notes
  1050.                 document.querySelectorAll('.note-input').forEach(input => {
  1051.                     input.addEventListener('input', function() {
  1052.                         const max = parseFloat(this.dataset.noteMax);
  1053.                         let val = parseFloat(this.value);
  1054.                         if (val > max) { this.value = max; }
  1055.                         if (val < 0) { this.value = 0; }
  1056.                         updateScore();
  1057.                     });
  1058.                 });
  1059.             })
  1060.             .catch(err => {
  1061.                 console.error('Erreur chargement critères:', err);
  1062.             });
  1063.     }
  1065.     function loadExistingEvaluation(grilleId) {
  1066.         fetch('/evaluation/candidature/' + candidatureId + '/evaluation')
  1067.             .then(r => r.json())
  1068.             .then(evaluations => {
  1069.                 const existing = evaluations.find(e => e.grilleId == grilleId);
  1070.                 if (existing) {
  1071.                     existing.notations.forEach(n => {
  1072.                         const input = document.querySelector(`.note-input[data-critere-id="${n.critereId}"]`);
  1073.                         if (input && n.note !== null) {
  1074.                             input.value = n.note;
  1075.                         }
  1076.                     });
  1077.                     if (existing.commentaire) {
  1078.                         commentaireField.value = existing.commentaire;
  1079.                     }
  1080.                     updateScore();
  1081.                 }
  1082.             })
  1083.             .catch(err => console.error('Erreur chargement évaluation:', err));
  1084.     }
  1086.     function updateScore() {
  1087.         let total = 0;
  1088.         document.querySelectorAll('.note-input').forEach(input => {
  1089.             const val = parseFloat(input.value);
  1090.             if (!isNaN(val)) total += val;
  1091.         });
  1093.         scoreDisplay.textContent = total + ' / ' + noteMaxTotale;
  1095.         const percentage = noteMaxTotale > 0 ? (total / noteMaxTotale * 100) : 0;
  1096.         scoreBar.style.width = percentage + '%';
  1098.         // Couleur de la barre de progression
  1099.         scoreBar.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-slate-400');
  1100.         if (percentage >= 70) {
  1101.             scoreBar.classList.add('bg-green-500');
  1102.             scoreLabel.textContent = 'Excellent';
  1103.             scoreLabel.className = 'text-xs mt-2 text-center text-green-600 font-medium';
  1104.         } else if (percentage >= 40) {
  1105.             scoreBar.classList.add('bg-yellow-500');
  1106.             scoreLabel.textContent = 'Moyen';
  1107.             scoreLabel.className = 'text-xs mt-2 text-center text-yellow-600 font-medium';
  1108.         } else if (total > 0) {
  1109.             scoreBar.classList.add('bg-red-500');
  1110.             scoreLabel.textContent = 'Faible';
  1111.             scoreLabel.className = 'text-xs mt-2 text-center text-red-600 font-medium';
  1112.         } else {
  1113.             scoreBar.classList.add('bg-slate-400');
  1114.             scoreLabel.textContent = '';
  1115.         }
  1116.     }
  1118.     // Enregistrer l'évaluation
  1119.     saveBtn.addEventListener('click', function() {
  1120.         if (!currentGrilleId) return;
  1122.         successDiv.classList.add('hidden');
  1123.         errorDiv.classList.add('hidden');
  1125.         const notations = [];
  1126.         document.querySelectorAll('.note-input').forEach(input => {
  1127.             notations.push({
  1128.                 critereId: parseInt(input.dataset.critereId),
  1129.                 note: input.value !== '' ? parseFloat(input.value) : null,
  1130.             });
  1131.         });
  1133.         const payload = {
  1134.             grilleId: parseInt(currentGrilleId),
  1135.             notations: notations,
  1136.             commentaire: commentaireField.value || null,
  1137.         };
  1139.         saveBtn.disabled = true;
  1140.         saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Enregistrement...';
  1142.         fetch('/evaluation/candidature/' + candidatureId + '/evaluer', {
  1143.             method: 'POST',
  1144.             headers: { 'Content-Type': 'application/json' },
  1145.             body: JSON.stringify(payload),
  1146.         })
  1147.         .then(r => r.json())
  1148.         .then(data => {
  1149.             if (data.success) {
  1150.                 successMsg.textContent = data.message;
  1151.                 successDiv.classList.remove('hidden');
  1152.                 errorDiv.classList.add('hidden');
  1154.                 // Mettre à jour l'affichage du score
  1155.                 scoreDisplay.textContent = data.scoreTotal + ' / ' + data.noteMaxTotale;
  1156.             } else {
  1157.                 errorMsg.textContent = data.error || 'Erreur inconnue.';
  1158.                 errorDiv.classList.remove('hidden');
  1159.                 successDiv.classList.add('hidden');
  1160.             }
  1161.         })
  1162.         .catch(err => {
  1163.             console.error('Erreur:', err);
  1164.             errorMsg.textContent = 'Erreur réseau lors de l\'enregistrement.';
  1165.             errorDiv.classList.remove('hidden');
  1166.             successDiv.classList.add('hidden');
  1167.         })
  1168.         .finally(() => {
  1169.             saveBtn.disabled = false;
  1170.             saveBtn.innerHTML = '<i class="fas fa-save mr-2"></i> Enregistrer l\'évaluation';
  1171.         });
  1172.     });
  1173. });
  1174. </script>
  1175. {% endif %}
  1176. {% endblock %}