var/cache/dev/twig/84/84bb0ccf4e71a0637706afe4cb4858b5.php line 45

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* Parent/LoginParent.html.twig */
  18. class __TwigTemplate_37bb9239606940e257554a0bc0386491 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'LinksCss' => [$this, 'block_LinksCss'],
  34.             'Content' => [$this, 'block_Content'],
  35.             'javascript' => [$this, 'block_javascript'],
  36.         ];
  37.     }
  39.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  40.     {
  41.         // line 1
  42.         return "/Accueil/layoutAccueilParents.html.twig";
  43.     }
  45.     protected function doDisplay(array $context, array $blocks = []): iterable
  46.     {
  47.         $macros = $this->macros;
  48.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  51.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  54.         $this->parent = $this->load("/Accueil/layoutAccueilParents.html.twig", 1);
  55.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  56.         
  57.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  59.         
  60.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  62.     }
  64.     // line 2
  65.     /**
  66.      * @return iterable<null|scalar|\Stringable>
  67.      */
  68.     public function block_LinksCss(array $context, array $blocks = []): iterable
  69.     {
  70.         $macros = $this->macros;
  71.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "LinksCss"));
  74.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "LinksCss"));
  77.         // line 3
  78.         yield "    ";
  79.         yield from $this->yieldParentBlock("LinksCss", $context, $blocks);
  80.         yield "
  82.     <link rel=\"stylesheet\" href=\"";
  83.         // line 5
  84.         yield "/css/Parent/css/login.css";
  85.         yield "\" >
  86.     <link rel=\"stylesheet\" href=\"";
  87.         // line 6
  88.         yield "/css/Parent/css/premiercnx.css";
  89.         yield "\">
  90.     <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  91.      <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">
  93.  <link href=\"";
  94.         // line 10
  95.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/bootstrap-social.css"), "html", null, true);
  96.         yield "\" type=\"text/css\" rel=\"stylesheet\" >
  97.  <link rel=\"stylesheet\" href=\"";
  98.         // line 11
  99.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/splide.min.css"), "html", null, true);
  100.         yield "\">
  102. <style>
  103.     .titleProdbienvenu {
  104.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  105. }
  107. /* Style pour le bouton de retour en haut */
  108. .scroll-top-btn {
  109.     position: fixed;
  110.     bottom: 20px;
  111.     right: 20px;
  112.     width: 40px;
  113.     height: 40px;
  114.     border-radius: 50%;
  115.     background-color:#f09e7a;
  116.     color: white;
  117.     border: none;
  118.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  119.     z-index: 1000;
  120.     display: none;
  121.     cursor: pointer;
  122.     transition: all 0.3s ease;
  123. }
  125. .scroll-top-btn:hover {
  126.     background-color: #f09e7a;
  127.     transform: translateY(-3px);
  128. }
  130. /* Styles pour le loader d'inscription */
  131. .register-loader {
  132.     position: fixed;
  133.     top: 0;
  134.     left: 0;
  135.     width: 100%;
  136.     height: 100%;
  137.     background-color: rgba(255, 255, 255, 0.9);
  138.     z-index: 9999;
  139.     display: none;
  140.     justify-content: center;
  141.     align-items: center;
  142. }
  144. .loader-content {
  145.     text-align: center;
  146.     background-color: white;
  147.     padding: 30px;
  148.     border-radius: 10px;
  149.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  150.     max-width: 350px;
  151.     width: 90%;
  152. }
  154. .loader-message {
  155.     margin-top: 20px;
  156.     font-size: 18px;
  157.     font-weight: bold;
  158.     color: #41a2aa;
  159. }
  161. .loader-submessage {
  162.     margin-top: 10px;
  163.     font-size: 14px;
  164.     color: #666;
  165. }
  167. .spinner-border {
  168.     width: 3rem;
  169.     height: 3rem;
  170.     color: #f09e7a !important;
  171. }
  173. /* Styles pour le modal de confirmation */
  174. .modal {
  175.     display: flex;
  176.     align-items: center;
  177.     justify-content: center;
  178. }
  180. .modal-dialog {
  181.     margin: 0 auto;
  182.     max-width: 500px;
  183.     width: 90%;
  184. }
  186. .modal-content {
  187.     border-radius: 10px;
  188.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  189.     margin: 0 auto;
  190. }
  192. .modal-body {
  193.     padding: 30px 20px;
  194. }
  196. .modal-footer {
  197.     justify-content: center;
  198.     padding: 15px;
  199. }
  201. .circleModal {
  202.     background-color: #f09e7a;
  203.     color: white;
  204.     border: none;
  205.     border-radius: 5px;
  206.     padding: 10px 30px;
  207.     font-weight: bold;
  208.     transition: all 0.3s ease;
  209. }
  211. .circleModal:hover {
  212.     background-color: #e8865e;
  213.     transform: translateY(-2px);
  214. }
  216. /* Animation pour le passage au champ suivant */
  217. .field-complete {
  218.     transition: all 0.3s ease;
  219.     border-color: #41a2aa !important;
  220.     box-shadow: 0 0 5px rgba(65, 162, 170, 0.5) !important;
  221.     transform: translateY(-2px);
  222. }
  224. .form-control:focus {
  225.     border-color: #f09e7a !important;
  226.     box-shadow: 0 0 6px rgba(240, 158, 122, 0.5) !important;
  227.     transition: all 0.3s ease;
  228. }
  230. /* Position for password toggle icons */
  231. .position-relative {
  232.     position: relative;
  233.     display: block;
  234.     width: 100%;
  235. }
  237. .field-icon {
  238.     position: absolute;
  239.     right: 0px;
  240.     padding-top: 10px;
  241.     transform: translateY(-50%);
  242.     z-index: 10;
  243.     cursor: pointer;
  244.     color: #41a2aa;
  245.     font-size: 14px;
  246.     pointer-events: auto;
  247. }
  249. .field-icon:hover {
  250.     color: #f09e7a;
  251. }
  253. /* Adjust input padding to make room for the icon */
  254. input[type=\"password\"] {
  255.     padding-right: 40px;
  256. }
  258. /* Updated styles for login forms */
  259. .form-section {
  260.     background-color: #fff;
  261.     padding: 25px;
  262.     border-radius: 8px;
  263.     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  264.     margin-bottom: 20px;
  265. }
  267. .soutitle {
  268.     color: #333;
  269.     font-size: 24px;
  270.     font-weight: bold;
  271.     margin-bottom: 15px;
  272.     text-align: center;
  273. }
  275. .description2 {
  276.     color: #666;
  277.     text-align: center;
  278.     margin-bottom: 20px;
  279.     font-size: 14px;
  280.     line-height: 1.5;
  281. }
  283. .form-control {
  284.     border-radius: 4px;
  285.     padding: 12px 15px;
  286.     margin-bottom: 15px;
  287.     border: 1px solid #ddd;
  288.     transition: all 0.3s ease;
  289. }
  291. .form-control:focus {
  292.     border-color: #41a2aa !important;
  293. }
  295. .logButton {
  296.     width: 100%;
  297.     padding: 12px;
  298.     border-radius: 5px;
  299.     font-weight: bold;
  300.     font-size: 16px;
  301.     margin-top: 10px;
  302.     transition: all 0.3s ease;
  303.     border: none;
  304. }
  306. .logButton:hover {
  307.     transform: translateY(-2px);
  308.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  309. }
  311. .logButtonSocial {
  312.     display: flex;
  313.     align-items: center;
  314.     justify-content: center;
  315.     width: 100%;
  316.     padding: 12px;
  317.     border-radius: 5px;
  318.     font-weight: bold;
  319.     margin-top: 15px;
  320.     text-decoration: none;
  321.     transition: all 0.3s ease;
  322. }
  324. .logButtonSocial:hover {
  325.     transform: translateY(-2px);
  326.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  327.     text-decoration: none;
  328. }
  330. .logButtonSocial img {
  331.     margin-right: 10px;
  332.     height: 20px;
  333. }
  335. .ou-container {
  336.     position: relative;
  337.     height: 100%;
  338.     display: flex;
  339.     align-items: center;
  340.     justify-content: center;
  341. }
  343. .ou-line {
  344.     position: absolute;
  345.     width: 1px;
  346.     height: 80%;
  347.     background-color: #ddd;
  348.     left: 50%;
  349.     transform: translateX(-50%);
  350. }
  352. .ou-text {
  353.     background-color: white;
  354.     padding: 10px;
  355.     position: relative;
  356.     z-index: 1;
  357.     color: #666;
  358.     font-weight: bold;
  359. }
  361. /* Hide one form by default at 1024px and below */
  362. @media screen and (max-width: 1360px) {
  363.     #connexionDiv, #inscriptionDiv {
  364.         width: 80% !important;
  365.         margin: 0 auto !important;
  366.         float: none !important;
  367.         margin-left: 10% !important;
  368.     }
  369.     
  370.     /* Initially hide the connection form */
  371.     #connexionDiv {
  372.         display: none;
  373.     }
  374.     
  375.     /* Make the inscription form take full width */
  376.     #inscriptionDiv {
  377.         display: block;
  378.     }
  379.     
  380.     /* Hide the OR separator at 1024px */
  381.     .ou-container {
  382.         display: none;
  383.     }
  384.     
  385.     /* Make the buttons more prominent for form switching */
  386.     .circleCree {
  387.         display: block !important;
  388.         width: 100% !important;
  389.         margin: 15px auto !important;
  390.         padding: 10px !important;
  391.         background-color: #41a2aa !important;
  392.         color: white !important;
  393.         border-radius: 5px !important;
  394.         border: none !important;
  395.         cursor: pointer !important;
  396.         text-align: center !important;
  397.         font-weight: bold !important;
  398.     }
  399.     
  400.     /* Adjust column widths */
  401.     .col-md-5, .col-sm-5, .col-lg-5 {
  402.         width: 100% !important;
  403.         max-width: 100% !important;
  404.         flex: 0 0 100% !important;
  405.     }
  406.     
  407.     /* Hide the middle column with the separator */
  408.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  409.         display: none !important;
  410.     }
  411. }
  413. /* Maintain desktop layout above 1024px */
  414. @media screen and (min-width: 1360px) {
  415.     #connexionDiv, #inscriptionDiv {
  416.         display: block !important;
  417.     }
  418.     
  419.     .circleCree {
  420.         display: none !important;
  421.     }
  422. }
  424. /* Forgot password link styling */
  425. .description a {
  426.     color: #f09e7a;
  427.     text-decoration: none;
  428.     font-weight: bold;
  429. }
  431. .description a:hover {
  432.     text-decoration: underline;
  433. }
  435. /* Button container styling */
  436. .button-container {
  437.     margin-top: 15px;
  438.     margin-bottom: 15px;
  439. }
  441. /* Social login buttons styling */
  442. .mobilesocial {
  443.     margin-top: 10px;
  444. }
  446. </style>
  447. ";
  448.         
  449.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  451.         
  452.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  454.         yield from [];
  455.     }
  457.     // line 361
  458.     /**
  459.      * @return iterable<null|scalar|\Stringable>
  460.      */
  461.     public function block_Content(array $context, array $blocks = []): iterable
  462.     {
  463.         $macros = $this->macros;
  464.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  465.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  467.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  468.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  470.         // line 362
  471.         yield "
  472.   <!-- Bouton pour remonter en haut de la page -->
  473.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  474.     <i class=\"bi bi-arrow-up\"></i>
  475.   </button>
  477.   <!-- Loader pour l'inscription -->
  478.   <div id=\"registerLoader\" class=\"register-loader\">
  479.     <div class=\"loader-content\">
  480.       <div class=\"spinner-border text-primary\" role=\"status\">
  481.         <span class=\"sr-only\">Chargement...</span>
  482.                 </div>
  483.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  484.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  485.                         </div>
  486.                     </div>
  488.   <!-- Modal de confirmation - avec l'attribut aria-hidden=\"true\" pour s'assurer qu'il est caché par défaut -->
  489.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  490.       <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  491.     <div class=\"modal-content\" style=\"border-radius: 10px;\">
  492.       <div class=\"modal-header border-0\">
  493.         <button onclick=\"location.reload();\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\" style=\"margin-left: auto;\">
  494.           <img src=\"";
  495.         // line 385
  496.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("images/Groupe_526.svg"), "html", null, true);
  497.         yield "\" alt=\"Fermer\">
  498.         </button>
  499.       </div>
  500.       <div class=\"modal-body text-center\">
  501.         <!-- Logo -->
  502.         <img class=\"imageLogo2\" src=\"";
  503.         // line 390
  504.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.svg"), "html", null, true);
  505.         yield "\" alt=\"Logo 5sur5séjour\" style=\"max-height: 60px; margin-bottom: 20px;\">
  507.         <!-- Illustration -->
  509.         <!-- Titre -->
  510.         <h4 class=\"modal-title font-weight-bold mb-3\" id=\"modalInscriptionLabel\">🎉 Bienvenue sur 5sur5séjour !</h4>
  512.         <!-- Texte -->
  513.         <p style=\"font-size: 16px; line-height: 1.5; margin-bottom: 15px;\">
  514.   Votre compte parent est presque prêt ! Encore une étape pour accéder à l'espace du séjour de votre enfant.
  515.         </p>
  517.         <p style=\"font-size: 15px; line-height: 1.5; margin-bottom: 15px;\">
  518.   📩 Un e-mail vous a été envoyé pour <strong>activer votre compte parent</strong> en toute sécurité.
  519.         </p>
  521.         
  523.         <!-- Bouton -->
  524.         <div class=\"mt-4\">
  525.           <button onclick=\"location.reload();\" class=\"btn btn-primary\" style=\"background-color: #41a2aa; border: none; padding: 12px 30px; font-weight: bold; border-radius: 8px; font-size: 16px;\">
  526.             ✅ Compris, je vais consulter mes e-mails
  527.           </button>
  528.         </div>
  529.       </div>
  530.     </div>
  531.   </div>
  532.     </div>
  535.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  536.         <div class=\"splide__track\">
  537.             <ul class=\"splide__list\">
  538.                 <!-- Slide 1 -->
  539.               
  540.                 <!-- Slide 2 -->
  541.                 <li class=\"splide__slide\">
  542.                     <div class=\"slider-content\">
  543.                         <div class=\"namePRD\" style=\"display: block;\">
  544.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  545.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  546.                           </div>
  547.                         <img src=\"";
  548.         // line 432
  549.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/3.png"), "html", null, true);
  550.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  551.                     </div>
  552.                 </li>
  553.                   <li class=\"splide__slide\">
  554.                     <div class=\"slider-content\">
  555.                         <div class=\"namePRD\" style=\"display: block;\">
  556.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  557.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  558.                           </div>
  559.                       
  560.                         
  561.                         <img src=\"";
  562.         // line 443
  563.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/2.png"), "html", null, true);
  564.         yield "\" class=\"imgslider\" alt=\"Image 1\" />
  565.                     </div>
  566.                 </li>
  567.                 <li class=\"splide__slide\">
  568.                     <div class=\"slider-content\">
  569.                         <div class=\"namePRD\" style=\"display: block;\">
  570.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  571.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  572.                           </div>
  573.                         <img src=\"";
  574.         // line 452
  575.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/1.png"), "html", null, true);
  576.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  577.                     </div>
  578.                 </li>
  579.             </ul>
  580.         </div>
  581.     </div>
  583.     <div class='row no-margin' style=\"padding-top:4%\">
  585.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  586.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  587.          
  588.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  589.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  590.         En savoir plus
  591.         </button>
  595.         
  596.           
  598.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  600.   
  602.                 
  603.                
  604.                 <div class=\"col-md-5 col-sm-5 col-lg-5  Inscription \" id='inscriptionDiv'>
  607.                    
  608.                     <form class =\"form-section\" id=\"create\" onsubmit=\"cp(); return false;\">
  609.                         <div class=\"soutitle\"> Créer un compte   </div>
  610.                     <div class =\"description2\"  style=\"padding-top:0px> Vous vous connectez pour la 1ère fois et n'avez pas
  611.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  612.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  614.                         <div class=\"form-group\">
  617.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\"  placeholder=\"NOM * \" >
  618.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\"  placeholder=\"PRENOM *\">
  619.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  620.                             <div class=\"position-relative\">
  621.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\"  class=\"form-control\"  placeholder=\"MOT DE PASSE  * \">
  622.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser\"></i>
  623.                             </div>
  624.                             <div class=\"position-relative\">
  625.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\"  class=\"form-control\"  placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  626.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser2\"></i>
  627.                             </div>
  628.                             
  629.                             <p style=\"display: none; color:red; font-weight: bold; margin-top: 10px;\" id=\"eroor\">Cet email est déjà utilisé. <a href=\"";
  630.         // line 505
  631.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  632.         yield "\" style=\"color:#f09e7a; text-decoration: underline;\">Mot de passe oublié ?</a></p>
  634.                             <input type=\"text\" class=\"form-control\" id=\"num\"  name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  635.                                
  636.   
  637.                                         <div class=\"row no-margin \">
  638.                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  639.             </div>
  640.             <br>
  641.             <div class=\"row no-margin\">
  643.                 <div class=\"box-1\" id=\"smsToggle\">
  644.                     <input type='checkbox' name =\"sms\" id =\"smsInput\"  />
  645.                     <span class=\"toogle\"> </span>
  646.                 </div>
  647.                 <span class=\"sms\"> Par SMS </span>
  649.                 <div class=\"box-1\">
  650.                     <input type='checkbox' name =\"mail\" id =\"mailInput\"   />
  651.                     <span class=\"toogle\" > </span>
  652.                 </div>
  653.                 <span class=\"mail\"> Par Mail </span>
  654.             </div>
  655.             
  656.                         </div>
  657.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  658.                         <div class=\"button-container\">
  659.                         <button  type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a;    position: relative;
  660.         background-color: #f09e7a;margin-top:-5%;\" id=\"submitBtn\">     
  661.             S'inscrire
  662.           </button></div>
  664.           
  665.           <div class=\"button-container mobilesocial\">
  666.             <a href=\"";
  667.         // line 539
  668.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  669.         yield "\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  670.          <img src=\"";
  671.         // line 540
  672.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  673.         yield "\"  >Continuer avec Google
  674.        </a>
  675.                        
  676.      </div>
  677.      <div class=\"mobilesocial\" >                  
  678.                     <a href=\"";
  679.         // line 545
  680.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  681.         yield "\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  682.                      <img src=\"";
  683.         // line 546
  684.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  685.         yield "\"  >         Continuer avec Facebook
  686.        </a>
  687.            </div>        
  688.         </form>
  689.                 </div></div>
  692.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1  \" ><div class=\"ou-container\" style=\"margin-left: 20%;\">
  693.                     <div class=\"ou-line\"></div>
  694.                     <div class=\"ou-text\">OU</div>
  695.                   </div> </div>
  696.                 <div class=\"col-md-5 col-sm-5 col-lg-5 col-xs-5 connexion \" id='connexionDiv' >
  697.                  
  698.                
  701.                     <div class=\"form-section\">
  702.                         <div class=\"soutitle\">  Se connecter </div>
  703.                         <div class =\"description2\" style=\"padding-top:0px\">Vous avez déja un compte Parent(s) « 5 sur 5 séjour »  </div>
  704.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  707.                         <form method=\"post\" class=\"\" id=\"login-form\" onsubmit=\"handleLogin(event)\">
  708.                             ";
  709.         // line 569
  710.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 569, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  711.             // line 570
  712.             yield "                                <div class=\"alert alert-danger d-none\">";
  713.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\TranslationExtension']->trans(CoreExtension::getAttribute($this->env, $this->source, (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 570, $this->source); })()), "messageKey", [], "any", false, false, false, 570), CoreExtension::getAttribute($this->env, $this->source, (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 570, $this->source); })()), "messageData", [], "any", false, false, false, 570), "security"), "html", null, true);
  714.             yield "</div>
  715.                                 <script>
  716.                                     document.addEventListener('DOMContentLoaded', function() {
  717.                                         Swal.fire({
  718.                                             icon: 'error',
  719.                                             title: 'Erreur de connexion',
  720.                                             text: 'Identifiant ou mot de passe incorrect.',
  721.                                             confirmButtonColor: '#41a2aa'
  722.                                         });
  723.                                     });
  724.                                 </script>
  725.                             ";
  726.         }
  727.         // line 582
  728.         yield "                            <div class=\"form-group\">
  730.                                 <input type=\"text\"  name=\"email\" id=\"inputEmail\"  value=\"";
  731.         // line 584
  732.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["last_username"]) || array_key_exists("last_username", $context) ? $context["last_username"] : (function () { throw new RuntimeError('Variable "last_username" does not exist.', 584, $this->source); })()), "html", null, true);
  733.         yield "\"  class=\"form-control\" placeholder=\"Mon identifiant  * \" >
  734.                             <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\">
  735.                             <span toggle=\"#inputPassword\" class=\"bi bi-eye field-icon toggle-password\" style=\"right: 40px;\"></span>
  737.             
  738.                                 
  739.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  740.         // line 590
  741.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  742.         yield "\">
  743.                                 <div class=\"button-container\">
  744.                                     <button type=\"button\" onclick=\"handleLogin(event)\" class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" id=\"login-button\">
  745.              Se connecter 
  746.           </button>
  747.         
  748.                             </div>
  750.                               
  751.                             <div class =\"description\" > <a id=\"mdpobli\" href=\"";
  752.         // line 599
  753.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  754.         yield "\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ?  </a> </div>
  756.                             <div class=\"button-container\">
  757.                <a href=\"";
  758.         // line 602
  759.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  760.         yield "\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  761.             <img src=\"";
  762.         // line 603
  763.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  764.         yield "\"  >Continuer avec Google
  765.           </a>
  766.                           
  767.         </div>
  768.         <div class=\"button-c\" style=\"display: flex;
  769.         justify-content: center;
  770.         align-items: center;\">                  
  771.                        <a href=\"";
  772.         // line 610
  773.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  774.         yield "\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  775.                         <img src=\"";
  776.         // line 611
  777.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  778.         yield "\"  >         Continuer avec Facebook
  779.           </a>
  780.               </div>        
  781.         
  782.                             
  783.                                 <br>
  784.                                 <br>
  786.                                 
  787.                             </div>
  788.                         </form>
  789.                     
  790.                     </div>
  791.                 </div>
  792.                    
  794.         </div>
  795.       
  796.     </div>
  797.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  798.    <a href=\"";
  799.         // line 631
  800.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  801.         yield "\"  style=\"color:#fff;background-color:#4F86EC;border-color:rgba(0,0,0,0.2)\" class=\"btn btn-block btn-social btn-google\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  802.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  803.           </a>
  804.           
  805.                           
  806.                                 <br>
  807.                                    <br>
  808.                        <a href=\"";
  809.         // line 638
  810.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  811.         yield "\"  class=\"btn btn-block btn-social btn-facebook\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  812.             <span class=\"fa fa-facebook\"></span>  S'inscrire avec Facebook
  813.           </a></div>
  814.             </div>
  815. ";
  816.         
  817.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  819.         
  820.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  822.         yield from [];
  823.     }
  825.     // line 645
  826.     /**
  827.      * @return iterable<null|scalar|\Stringable>
  828.      */
  829.     public function block_javascript(array $context, array $blocks = []): iterable
  830.     {
  831.         $macros = $this->macros;
  832.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  833.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  835.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  836.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  838.         // line 646
  839.         yield "   
  840.    
  842.     ";
  843.         // line 649
  844.         yield from $this->yieldParentBlock("javascript", $context, $blocks);
  845.         yield "
  846.   <script src=\"";
  847.         // line 650
  848.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("js/splide.min.js"), "html", null, true);
  849.         yield "\"></script>
  850.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  851.     
  852.     <script>
  853.         /**
  854.          * Handle login form submission
  855.          */
  856.         function handleLogin(event) {
  857.             event.preventDefault();
  858.             
  859.             const email = document.getElementById('inputEmail').value;
  860.             const password = document.getElementById('inputPassword').value;
  861.             const csrfToken = document.querySelector('input[name=\"_csrf_token\"]').value;
  862.             
  863.             // Validate fields
  864.             if (!email || !password) {
  865.                 Swal.fire({
  866.                     icon: 'warning',
  867.                     title: 'Champs requis',
  868.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  869.                     confirmButtonColor: '#41a2aa'
  870.                 });
  871.                 return;
  872.             }
  873.             
  874.             // Show loading indicator
  875.             const loginBtn = document.getElementById('login-button');
  876.             const originalBtnText = loginBtn.innerHTML;
  877.             loginBtn.disabled = true;
  878.             loginBtn.innerHTML = '<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Connexion...';
  879.             
  880.             // Send AJAX request
  881.             \$.ajax({
  882.                 type: \"POST\",
  883.                 url: \"";
  884.         // line 684
  885.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Parent");
  886.         yield "\",
  887.                 data: {
  888.                     email: email,
  889.                     password: password,
  890.                     _csrf_token: csrfToken
  891.                 },
  892.                 success: function(response) {
  893.                     // Si la réponse est un objet JSON
  894.                     if (typeof response === 'object') {
  895.                         if (response.success) {
  896.                             window.location.href = \"";
  897.         // line 694
  898.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("CodeSejour");
  899.         yield "\";
  900.                         } else {
  901.                             Swal.fire({
  902.                                 icon: 'error',
  903.                                 title: 'Erreur de connexion',
  904.                                 text: 'Identifiant ou mot de passe incorrect.',
  905.                                 confirmButtonColor: '#41a2aa'
  906.                             });
  907.                             loginBtn.disabled = false;
  908.                             loginBtn.innerHTML = originalBtnText;
  909.                         }
  910.                     } 
  911.                     // Si la réponse contient du HTML (redirection)
  912.                     else if (response.includes('CodeSejour')) {
  913.                         window.location.href = \"";
  914.         // line 708
  915.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("CodeSejour");
  916.         yield "\";
  917.                     } else {
  918.                         Swal.fire({
  919.                             icon: 'error',
  920.                             title: 'Erreur de connexion',
  921.                             text: 'Identifiant ou mot de passe incorrect.',
  922.                             confirmButtonColor: '#41a2aa'
  923.                         });
  924.                         loginBtn.disabled = false;
  925.                         loginBtn.innerHTML = originalBtnText;
  926.                     }
  927.                 },
  928.                 error: function() {
  929.                     Swal.fire({
  930.                         icon: 'error',
  931.                         title: 'Erreur de connexion',
  932.                         text: 'Une erreur est survenue. Veuillez réessayer.',
  933.                         confirmButtonColor: '#41a2aa'
  934.                     });
  935.                     loginBtn.disabled = false;
  936.                     loginBtn.innerHTML = originalBtnText;
  937.                 }
  938.             });
  939.         }
  941.         document.addEventListener('DOMContentLoaded', function () {
  942.     // S'assurer que le modal est caché au chargement de la page
  943.     \$('#exampleModal').modal('hide');
  944.     \$('#exampleModal').removeClass('show');
  945.     \$('#exampleModal').attr('aria-hidden', 'true');
  946.     \$('body').removeClass('modal-open');
  947.     \$('.modal-backdrop').remove();
  948.     
  949.     // Login form validation
  950.     const loginForm = document.getElementById('login-form');
  951.     if (loginForm) {
  952.         loginForm.addEventListener('submit', function(e) {
  953.             const email = document.getElementById('inputEmail').value;
  954.             const password = document.getElementById('inputPassword').value;
  955.             
  956.             if (!email || !password) {
  957.                 e.preventDefault();
  958.                 Swal.fire({
  959.                     icon: 'warning',
  960.                     title: 'Champs requis',
  961.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  962.                     confirmButtonColor: '#41a2aa'
  963.                 });
  964.             }
  965.         });
  966.     }
  967.     
  968.     // Gestion du bouton de retour en haut
  969.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  970.     
  971.     // Afficher/masquer le bouton en fonction du défilement
  972.     window.addEventListener('scroll', function() {
  973.         if (window.pageYOffset > 300) {
  974.             scrollTopBtn.style.display = 'block';
  975.         } else {
  976.             scrollTopBtn.style.display = 'none';
  977.         }
  978.     });
  979.     
  980.     // Action de clic sur le bouton
  981.     scrollTopBtn.addEventListener('click', function() {
  982.         window.scrollTo({
  983.             top: 0,
  984.             behavior: 'smooth'
  985.         });
  986.     });
  987.     
  988.     // Initialisation du carrousel Splide
  989.     var splide = new Splide('#imageSlider', {
  990.         type: 'loop',
  991.         perPage: 1,
  992.         autoplay: true,
  993.         interval: 6000,
  994.         pauseOnHover: false,
  995.         pauseOnFocus: false,
  996.          pagination: false , // Désactive la pagination
  997.          arrows: false  
  998.     });
  1000.     splide.mount();
  1002.     // Auto-scroll vers les formulaires après 3 secondes
  1003.     setTimeout(function() {
  1004.         scrollToFormSection();
  1005.     }, 5000);
  1007.     // Configuration du modal de confirmation - s'assurer qu'il est bien caché
  1008.     \$('#exampleModal').modal('dispose'); // Supprimer toute initialisation précédente
  1009.     
  1010.     // Réinitialiser le modal
  1011.     \$('#exampleModal').modal({
  1012.         backdrop: 'static',
  1013.         keyboard: false,
  1014.         show: false // S'assurer que le modal ne s'affiche pas automatiquement
  1015.     });
  1016.     
  1017.     // Centrage du modal uniquement lorsqu'il est affiché
  1018.     \$('#exampleModal').on('show.bs.modal', function () {
  1019.         \$(this).css('display', 'flex');
  1020.         \$(this).css('align-items', 'center');
  1021.         \$(this).find('.modal-dialog').css({
  1022.             'display': 'flex',
  1023.             'align-items': 'center',
  1024.             'margin': '0 auto',
  1025.             'max-height': '90vh'
  1026.         });
  1027.     });
  1029.     // Fonction pour faire défiler vers la section des formulaires
  1030.     function scrollToFormSection() {
  1031.         const formSection = document.getElementById('formSection');
  1032.         if (formSection) {
  1033.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  1034.             const headerOffset = 50; // Tenir compte de la hauteur de l'en-tête
  1035.             const scrollPosition = formPosition - headerOffset;
  1036.             
  1037.             // Animation de défilement fluide
  1038.             window.scrollTo({
  1039.                 top: scrollPosition,
  1040.                 behavior: 'smooth'
  1041.             });
  1042.             
  1043.             // Les animations de mise en évidence ont été supprimées
  1044.         }
  1045.     }
  1046. });
  1047.         // Fonction pour afficher le popover automatiquement avec animation
  1048.       
  1049.         function cp() {
  1050.          
  1051.            // Afficher le loader
  1052.            \$('#registerLoader').css('display', 'flex');
  1053.            
  1054.            // Définir un timeout pour masquer le loader après 3 secondes si la requête prend trop de temps
  1055.            var loaderTimeout = setTimeout(function() {
  1056.                \$('#registerLoader').css('display', 'none');
  1057.                // Afficher directement le modal de confirmation avec le logo 5sur5
  1058.                \$(\"#showOkInscription\").trigger('click');
  1059.            }, 3000);
  1060.           
  1061.             var nomparent = \"\";
  1062.             var   prenomparent= \"\";
  1063.             var mail = \"\";
  1064.             var num = \"5555\";
  1065.             console.log(num);
  1066.             var confirmpassword = \$('#Passworduser2').val();
  1067.             var parent_register = \"";
  1068.         // line 859
  1069.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("parent_register");
  1070.         yield "\";
  1071.             var Passworduser = \"\";
  1072.             \$testDeCreation = false;
  1073.             \$testDeCreation2 = false;
  1074.             \$testDeCreation3 = false;
  1075.             \$testDeCreation4 = false;
  1076.             \$testDeCreation5 = false;
  1077.             if (\$('#nomparent').val() == \"\") {
  1078.                   
  1079.                 \$('#nomparent').addClass('is-invalid');
  1080.                 \$('#nomparent').removeClass('is-valid');
  1081.                 \$('#nomparent').css('border', '1px solid red');
  1082.                 \$testDeCreation = false;
  1083.             } else {
  1084.                 \$('#nomparent').removeClass('is-invalid');
  1085.                 \$('#nomparent').addClass('is-valid');
  1086.                 
  1087.                 \$('#nomparent').css('border', '1px solid green');
  1088.                nomparent = \$('#nomparent').val();
  1089.                 \$testDeCreation = true;
  1091.             }
  1093.             if (\$('#prenomparent').val() == \"\") {
  1094.               
  1095.                 \$('#prenomparent').addClass('is-invalid');
  1096.                 \$('#prenomparent').removeClass('is-valid');
  1097.                 \$('#prenomparent').css('border', '1px solid red');
  1098.                 \$testDeCreation1 = false;
  1099.             } else {
  1100.                 \$('#prenomparent').removeClass('is-invalid');
  1101.                 \$('#prenomparent').addClass('is-valid');
  1102.                
  1103.                 \$('#prenomparent').css('border', '1px solid green');
  1104.                prenomparent = \$('#prenomparent').val();
  1105.                 \$testDeCreation1 = true;
  1107.             }
  1111.             if (\$('#num').val() == \"\") {
  1112.                 \$('#num ').addClass('is-invalid');
  1113.                 \$('#num').removeClass('is-valid');
  1114.                 \$('#num').css('border', '1px solid red');
  1115.                 \$testDeCreation2 = false;
  1116.             } else {
  1117.                 \$('#num').removeClass('is-invalid');
  1118.                 \$('#num').addClass('is-valid');
  1119.                
  1120.                 \$('#num').css('border', '1px solid green');
  1121.                num = \$('#num').val();
  1122.                 \$testDeCreation2 = true;
  1124.             }
  1129.             if (\$('#mail').val() == \"\") {
  1130.                 \$('#mail').addClass('is-invalid');
  1131.                 \$('#mail').removeClass('is-valid');
  1132.                 \$('#mail').css('border', '1px solid red');
  1133.                 \$testDeCreation3 = false;
  1134.             } else {
  1135.                 \$('#mail').removeClass('is-invalid');
  1136.                 \$('#mail').addClass('is-valid');
  1137.                
  1138.                 \$('#mail').css('border', '1px solid green');
  1139.                 mail = \$('#mail').val();
  1140.                 \$testDeCreation3 = true;
  1142.             }
  1144.             if (\$('#Passworduser').val() == \"\") {
  1145.                 \$('#Passworduser').addClass('is-invalid');
  1146.                 \$('#Passworduser').removeClass('is-valid');
  1147.                 \$('#Passworduser').css('border', '1px solid red');
  1148.                 \$testDeCreation4 = false;
  1149.             } else {
  1150.                 \$('#Passworduser').removeClass('is-invalid');
  1151.                 \$('#Passworduser').addClass('is-valid');
  1152.                
  1153.                 \$('#Passworduser').css('border', '1px solid green');
  1154.                 Passworduser = \$('#Passworduser').val();
  1155.                 \$testDeCreation4 = true;
  1157.             }
  1158.             
  1159.             var sms = 0; var mailnotif = 0;
  1160.             if (\$(\"#smsInput\").is(':checked')) {
  1161.                 var sms = 1;
  1162.             }
  1163.             if (\$(\"#mailInput\").is(':checked')){
  1164.                 var mailnotif = 1;
  1165.             }
  1166.            
  1167.             \$_data = {
  1168.                 'nomparent': nomparent,
  1169.                 'prenomparent': prenomparent,
  1170.                 'mailprent': mail,
  1171.                 'numtel': num,
  1172.                 'passwordparent': Passworduser,
  1173.                 'confirmpassword':confirmpassword,
  1174.                 'sms': sms,
  1175.                 'mailnotif': mailnotif
  1176.             }
  1177.              console.log(\$_data);
  1178.             if (\$testDeCreation &&  \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  1179.              
  1180.          
  1181.                 \$.ajax({
  1182.                     type: \"POST\",
  1183.                     url: parent_register,
  1184.                     data: \$_data,
  1185.                     success: function (\$response) {
  1186.                         console.log(\$response);
  1187.                         // Masquer le loader quelle que soit la réponse
  1188.                         \$('#registerLoader').css('display', 'none');
  1189.                         // Annuler le timeout puisque la requête est terminée
  1190.                         clearTimeout(loaderTimeout);
  1191.                         
  1192.                         if (\$response == 'eror') {
  1193.                         
  1194.                             \$('#mail').css('border-color', 'red');
  1195.                             \$('#eroor').css('display', 'block');
  1196.                             // Afficher une alerte SweetAlert pour l'email déjà utilisé avec boutons d'action
  1197.                             Swal.fire({
  1198.                                 icon: 'error',
  1199.                                 title: 'Email déjà utilisé',
  1200.                                 text: 'Cette adresse email est déjà associée à un compte.',
  1201.                                 footer: '<a href=\"";
  1202.         // line 990
  1203.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1204.         yield "\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  1205.                                 showCancelButton: true,
  1206.                                 confirmButtonText: 'Se connecter',
  1207.                                 cancelButtonText: 'Modifier',
  1208.                                 confirmButtonColor: '#41a2aa',
  1209.                                 cancelButtonColor: '#f09e7a',
  1210.                                 position: 'center'
  1211.                             }).then((result) => {
  1212.                                 if (result.isConfirmed) {
  1213.                                     // Basculer vers le formulaire de connexion et pré-remplir l'email
  1214.                                     AffichDivConnexion();
  1215.                                     \$('#inputEmail').val(\$('#mail').val());
  1216.                                     \$('#inputPassword').focus();
  1217.                                 }
  1218.                             });
  1220.                         }
  1221.                         else if(\$response == 'erorpasswordconfirm')
  1222.                         {
  1223.                              
  1224.                               \$('#Passworduser2').css('border-color', 'red');
  1225.                                 Swal.fire({
  1226.                                 icon: 'error',
  1227.                                 title: 'Oups..!',
  1228.                                 text: 'Les mots de passe ne se correspondent pas.',
  1229.                                 footer: '',
  1230.                                 position: 'center'
  1231.                             })
  1233.                         }
  1234.                     
  1235.                          else {
  1236.                               
  1237.                           
  1238.                             \$(\"#showOkInscription\").trigger('click');
  1239.                             
  1240.                             // Réinitialiser tous les champs du formulaire
  1241.                             resetForm();
  1242.                             
  1243.                             // S'assurer que le modal est bien centré
  1244.                             \$('#exampleModal').on('shown.bs.modal', function () {
  1245.                                 \$(this).find('.modal-dialog').css({
  1246.                                     'margin-top': function () {
  1247.                                         return (\$(window).height() - \$(this).height()) / 2;
  1248.                                     }
  1249.                                 });
  1250.                             });
  1251.                               var windowWidth = document.documentElement.clientWidth;
  1252.                                 if (windowWidth <= 560) {
  1253.                                     setTimeout(function(){
  1254.                                        
  1255.                                    location.reload();
  1256.                               },500);
  1257.                               
  1258.                            }
  1259.                               
  1260.                             
  1261.                         }
  1264.                     },
  1265.                     error: function() {
  1266.                         // Masquer le loader en cas d'erreur
  1267.                         \$('#registerLoader').css('display', 'none');
  1268.                         // Annuler le timeout puisque la requête est terminée
  1269.                         clearTimeout(loaderTimeout);
  1270.                         
  1271.                         // Afficher un message d'erreur
  1272.                         Swal.fire({
  1273.                             icon: 'error',
  1274.                             title: 'Erreur de connexion',
  1275.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  1276.                             confirmButtonColor: '#f09e7a',
  1277.                             position: 'center'
  1278.                         });
  1279.                     }
  1280.                 })
  1282.             } else {
  1283.                 // Masquer le loader si la validation échoue
  1284.                 \$('#registerLoader').css('display', 'none');
  1285.                 // Annuler le timeout puisque la validation a échoué
  1286.                 clearTimeout(loaderTimeout);
  1287.             }
  1289.         }
  1291.         function AffichDivConnexion() {
  1292.     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  1293.     \$(\"#connexionDiv\").css(\"display\", \"block\");
  1294. }
  1296. function AffichDivInscri() {
  1297.     \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1298.     \$(\"#connexionDiv\").css(\"display\", \"none\");
  1299. }
  1301. // Function to handle responsive behavior based on window width
  1302. function handleResponsiveFormDisplay() {
  1303.     var windowWidth = \$(window).width();
  1304.     
  1305.     if (windowWidth <= 1024) {
  1306.         // Apply mobile-like behavior for tablets/smaller screens
  1307.         // Show only one form at a time with toggle buttons
  1308.         \$(\"#connexionDiv\").css(\"display\", \"none\");
  1309.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1310.         \$(\".circleCree\").css(\"display\", \"block\");
  1311.     } else {
  1312.         // For desktop, show both forms side by side
  1313.         \$(\"#connexionDiv\").css(\"display\", \"block\");
  1314.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1315.         \$(\".circleCree\").css(\"display\", \"none\");
  1316.     }
  1317. }
  1319. // Run on page load
  1320. \$(document).ready(function() {
  1321.     handleResponsiveFormDisplay();
  1322.     
  1323.     // Also run when window is resized
  1324.     \$(window).resize(function() {
  1325.         handleResponsiveFormDisplay();
  1326.     });
  1327.     
  1328.     // Configuration pour le passage automatique au champ suivant
  1329.     setupAutoNextField();
  1330.     
  1331.     // Ajouter la validation en temps réel pour tous les champs
  1332.     setupRealtimeValidation();
  1333. });
  1335. // Fonction pour configurer le passage automatique au champ suivant
  1336. function setupAutoNextField() {
  1337.     // Ordre des champs dans le formulaire d'inscription
  1338.     const formFields = [
  1339.         'nomparent',
  1340.         'prenomparent',
  1341.         'mail',
  1342.         'Passworduser',
  1343.         'Passworduser2',
  1344.         'num'
  1345.     ];
  1346.     
  1347.     // Pour chaque champ, ajouter des événements pour la navigation
  1348.     formFields.forEach((field, index) => {
  1349.         if (index < formFields.length - 1) {
  1350.             const \$currentField = \$('#' + field);
  1351.             let typingTimer; // Timer pour détecter quand l'utilisateur arrête de taper
  1352.             const doneTypingInterval = 1500; // Temps en ms après lequel on considère que l'utilisateur a fini de taper
  1353.             
  1354.             // Événement lorsque l'utilisateur tape
  1355.             \$currentField.on('input', function() {
  1356.                 clearTimeout(typingTimer);
  1357.                 
  1358.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  1359.                 if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1360.                     event.preventDefault(); // Empêcher l'espace d'être ajouté
  1361.                     \$('#' + formFields[index + 1]).focus();
  1362.                     return;
  1363.                 }
  1364.                 
  1365.                 // Démarrer un nouveau timer
  1366.                 if (\$(this).val()) {
  1367.                     typingTimer = setTimeout(function() {
  1368.                         // Vérifier si le champ est valide
  1369.                         if (isFieldValid(field, \$currentField.val().trim())) {
  1370.                             \$('#' + formFields[index + 1]).focus();
  1371.                         }
  1372.                     }, doneTypingInterval);
  1373.                 }
  1374.             });
  1375.             
  1376.             // Réinitialiser le timer si l'utilisateur continue de taper
  1377.             \$currentField.on('keydown', function(e) {
  1378.                 clearTimeout(typingTimer);
  1379.                 
  1380.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  1381.                 if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1382.                     e.preventDefault(); // Empêcher l'espace d'être ajouté
  1383.                     \$('#' + formFields[index + 1]).focus();
  1384.                     return;
  1385.                 }
  1386.                 
  1387.                 // Si l'utilisateur appuie sur Tab ou Entrée
  1388.                 if (e.key === 'Tab' && !e.shiftKey) {
  1389.                     // Laisser le comportement par défaut de Tab
  1390.                     return true;
  1391.                 }
  1392.                 
  1393.                 if (e.key === 'Enter') {
  1394.                     e.preventDefault(); // Empêcher la soumission du formulaire
  1395.                     \$('#' + formFields[index + 1]).focus();
  1396.                 }
  1397.             });
  1398.             
  1399.             // Événement lorsque le champ perd le focus
  1400.             \$currentField.on('blur', function() {
  1401.                 clearTimeout(typingTimer);
  1402.             });
  1403.         }
  1404.     });
  1405.     
  1406.     // Pour le dernier champ, la touche Enter déclenche l'inscription
  1407.     \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  1408.         if (e.key === 'Enter') {
  1409.             e.preventDefault();
  1410.             cp(); // Fonction d'inscription
  1411.         }
  1412.     });
  1413. }
  1415. // Fonction pour vérifier si un champ est valide selon son type
  1416. function isFieldValid(fieldId, value) {
  1417.     switch(fieldId) {
  1418.         case 'mail':
  1419.             const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1420.             return emailRegex.test(value);
  1421.         case 'Passworduser':
  1422.             // Minimum 6 caractères pour un mot de passe
  1423.             return value.length >= 6;
  1424.         case 'Passworduser2':
  1425.             // Doit correspondre au mot de passe et avoir au moins 6 caractères
  1426.             return value === \$('#Passworduser').val() && value.length >= 6;
  1427.         case 'num':
  1428.             // Numéro de téléphone: doit contenir uniquement des chiffres et avoir au moins 8 caractères
  1429.             const phoneRegex = /^[0-9]{8,}\$/;
  1430.             return phoneRegex.test(value.replace(/\\s+/g, '')); // Enlever les espaces avant de tester
  1431.         case 'nomparent':
  1432.         case 'prenomparent':
  1433.             // Nom et prénom: au moins 2 caractères, pas de chiffres
  1434.             const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  1435.             return nameRegex.test(value);
  1436.         default:
  1437.             return value.length >= 2;
  1438.     }
  1439. }
  1441.     </script>
  1442.    
  1444.     <script>
  1445.         function hideshow() {
  1446.             document.getElementById(\"btnn\").disabled = true;
  1447.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  1448.             \$(\"#mdpobli\").css(\"display\", \"none\");
  1449.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  1450.         }
  1451.     </script>
  1452.        <script>
  1453.     function closeModale(){
  1454.     \$(\"#monModalInscription\").modal('hide');
  1456.      }
  1457.    // \$(\".masktelph\").inputmask({\"mask\": \"9999999999\"});
  1458.    </script>
  1459.    <script>
  1460.     /**
  1461.      * this code is used to toggle the password
  1462.      */ 
  1463.     \$(\".toggle-password\").click(function() {
  1464.         \$(this).toggleClass(\"bi-eye bi-eye-slash\");
  1465. var input = \$(\$(this).attr(\"toggle\"));
  1466. if (input.attr(\"type\") == \"password\") {
  1467.   input.attr(\"type\", \"text\");
  1468. } else {
  1469.   input.attr(\"type\", \"password\");
  1470. }
  1471. });
  1474. \$(document).ready(function(){
  1475.             \$('[data-toggle=\"tooltip\"]').tooltip({
  1476.                 trigger: 'manual',
  1477.                 html: true,
  1478.                 template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  1479.             });
  1481.             function validateEmail(email) {
  1482.                 const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1483.                 return re.test(String(email).toLowerCase());
  1484.             }
  1486.             \$('#mail').on('input', function() {
  1487.                 var emailInput = \$(this);
  1488.                 if (validateEmail(emailInput.val())) {
  1489.                     emailInput.removeClass('is-invalid');
  1490.                     emailInput.addClass('is-valid');
  1491.                     emailInput.tooltip('dispose');
  1492.                     \$('#notification').hide();
  1493.                     \$('#submitBtn').prop('disabled', false);
  1494.                     
  1495.                     // Ne pas passer automatiquement au champ suivant ici,
  1496.                     // car c'est déjà géré par setupAutoNextField()
  1497.                 } else {
  1498.                     emailInput.removeClass('is-valid');
  1499.                     emailInput.addClass('is-invalid');
  1500.                     
  1501.                     // Afficher le tooltip seulement si l'utilisateur a commencé à saisir
  1502.                     if (emailInput.val().length > 3) {
  1503.                         emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  1504.                         if (emailInput.val().length > 0) {
  1505.                             \$('#notification').show();
  1506.                         }
  1507.                     } else {
  1508.                         \$('#notification').hide();
  1509.                     }
  1510.                     \$('#submitBtn').prop('disabled', false);
  1511.                 }
  1512.             });
  1513.         });
  1514. </script>
  1515. <script>
  1516. // Fonction pour configurer la validation en temps réel
  1517. function setupRealtimeValidation() {
  1518.     const formFields = [
  1519.         'nomparent',
  1520.         'prenomparent',
  1521.         'mail',
  1522.         'Passworduser',
  1523.         'Passworduser2',
  1524.         'num'
  1525.     ];
  1526.     
  1527.     formFields.forEach(field => {
  1528.         \$('#' + field).on('input', function() {
  1529.             const value = \$(this).val();
  1530.             
  1531.             // Ne pas afficher d'erreur tant que l'utilisateur n'a pas commencé à saisir
  1532.             if (value.length === 0) {
  1533.                 \$(this).removeClass('is-valid is-invalid');
  1534.                 \$(this).css('border', '1px solid #ced4da'); // Couleur de bordure par défaut
  1535.                 return;
  1536.             }
  1537.             
  1538.             // Vérifier la validité du champ
  1539.             if (isFieldValid(field, value)) {
  1540.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  1541.                 \$(this).css('border', '1px solid #28a745'); // Vert pour valide
  1542.             } else {
  1543.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  1544.                 \$(this).css('border', '1px solid #dc3545'); // Rouge pour invalide
  1545.             }
  1546.         });
  1547.     });
  1548. }
  1550. // Fonction pour réinitialiser le formulaire
  1551. function resetForm() {
  1552.     \$('#nomparent').css('border','1px solid #41a2aa');
  1553.     \$('#nomparent').removeClass('is-valid'); 
  1554.     \$('#nomparent').removeClass('is-invalid'); 
  1555.     \$('#nomparent').val(''); 
  1556.     \$('#prenomparent').css('border','1px solid #41a2aa');
  1557.     \$('#prenomparent').removeClass('is-valid'); 
  1558.     \$('#prenomparent').removeClass('is-invalid'); 
  1559.     \$('#prenomparent').val(''); 
  1560.     \$('#mail').css('border','1px solid #41a2aa');
  1561.     \$('#mail').removeClass('is-valid'); 
  1562.     \$('#mail').removeClass('is-invalid'); 
  1563.     \$('#mail').val(''); 
  1564.     \$('#eroor').css('display','none');
  1565.     \$('#num').css('border','1px solid #41a2aa');
  1566.     \$('#num').removeClass('is-valid'); 
  1567.     \$('#num').removeClass('is-invalid'); 
  1568.     \$('#num').val(''); 
  1569.     \$('#Passworduser').css('border','1px solid #41a2aa');
  1570.     \$('#Passworduser').removeClass('is-valid'); 
  1571.     \$('#Passworduser').removeClass('is-invalid');
  1572.     \$('#Passworduser').val('');  
  1573.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  1574.     \$('#Passworduser2').removeClass('is-valid'); 
  1575.     \$('#Passworduser2').removeClass('is-invalid'); 
  1576.     \$('#Passworduser2').val(''); 
  1577.     \$(\"#smsInput\").prop(\"checked\",false);
  1578.     \$(\"#mailInput\").prop(\"checked\",false);
  1579. }
  1580. </script>
  1581. ";
  1582.         
  1583.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1585.         
  1586.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1588.         yield from [];
  1589.     }
  1591.     /**
  1592.      * @codeCoverageIgnore
  1593.      */
  1594.     public function getTemplateName(): string
  1595.     {
  1596.         return "Parent/LoginParent.html.twig";
  1597.     }
  1599.     /**
  1600.      * @codeCoverageIgnore
  1601.      */
  1602.     public function isTraitable(): bool
  1603.     {
  1604.         return false;
  1605.     }
  1607.     /**
  1608.      * @codeCoverageIgnore
  1609.      */
  1610.     public function getDebugInfo(): array
  1611.     {
  1612.         return array (  1203 => 990,  1069 => 859,  915 => 708,  898 => 694,  885 => 684,  848 => 650,  844 => 649,  839 => 646,  826 => 645,  810 => 638,  800 => 631,  777 => 611,  773 => 610,  763 => 603,  759 => 602,  753 => 599,  741 => 590,  732 => 584,  728 => 582,  712 => 570,  710 => 569,  684 => 546,  680 => 545,  672 => 540,  668 => 539,  631 => 505,  575 => 452,  563 => 443,  549 => 432,  504 => 390,  496 => 385,  471 => 362,  458 => 361,  99 => 11,  95 => 10,  88 => 6,  84 => 5,  78 => 3,  65 => 2,  42 => 1,);
  1613.     }
  1615.     public function getSourceContext(): Source
  1616.     {
  1617.         return new Source("{% extends '/Accueil/layoutAccueilParents.html.twig' %}
  1618. {% block LinksCss %}
  1619.     {{ parent() }}
  1621.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/login.css'}}\" >
  1622.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/premiercnx.css'}}\">
  1623.     <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  1624.      <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">
  1626.  <link href=\"{{ asset ('css/bootstrap-social.css')}}\" type=\"text/css\" rel=\"stylesheet\" >
  1627.  <link rel=\"stylesheet\" href=\"{{ asset('css/splide.min.css') }}\">
  1629. <style>
  1630.     .titleProdbienvenu {
  1631.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  1632. }
  1634. /* Style pour le bouton de retour en haut */
  1635. .scroll-top-btn {
  1636.     position: fixed;
  1637.     bottom: 20px;
  1638.     right: 20px;
  1639.     width: 40px;
  1640.     height: 40px;
  1641.     border-radius: 50%;
  1642.     background-color:#f09e7a;
  1643.     color: white;
  1644.     border: none;
  1645.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  1646.     z-index: 1000;
  1647.     display: none;
  1648.     cursor: pointer;
  1649.     transition: all 0.3s ease;
  1650. }
  1652. .scroll-top-btn:hover {
  1653.     background-color: #f09e7a;
  1654.     transform: translateY(-3px);
  1655. }
  1657. /* Styles pour le loader d'inscription */
  1658. .register-loader {
  1659.     position: fixed;
  1660.     top: 0;
  1661.     left: 0;
  1662.     width: 100%;
  1663.     height: 100%;
  1664.     background-color: rgba(255, 255, 255, 0.9);
  1665.     z-index: 9999;
  1666.     display: none;
  1667.     justify-content: center;
  1668.     align-items: center;
  1669. }
  1671. .loader-content {
  1672.     text-align: center;
  1673.     background-color: white;
  1674.     padding: 30px;
  1675.     border-radius: 10px;
  1676.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1677.     max-width: 350px;
  1678.     width: 90%;
  1679. }
  1681. .loader-message {
  1682.     margin-top: 20px;
  1683.     font-size: 18px;
  1684.     font-weight: bold;
  1685.     color: #41a2aa;
  1686. }
  1688. .loader-submessage {
  1689.     margin-top: 10px;
  1690.     font-size: 14px;
  1691.     color: #666;
  1692. }
  1694. .spinner-border {
  1695.     width: 3rem;
  1696.     height: 3rem;
  1697.     color: #f09e7a !important;
  1698. }
  1700. /* Styles pour le modal de confirmation */
  1701. .modal {
  1702.     display: flex;
  1703.     align-items: center;
  1704.     justify-content: center;
  1705. }
  1707. .modal-dialog {
  1708.     margin: 0 auto;
  1709.     max-width: 500px;
  1710.     width: 90%;
  1711. }
  1713. .modal-content {
  1714.     border-radius: 10px;
  1715.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  1716.     margin: 0 auto;
  1717. }
  1719. .modal-body {
  1720.     padding: 30px 20px;
  1721. }
  1723. .modal-footer {
  1724.     justify-content: center;
  1725.     padding: 15px;
  1726. }
  1728. .circleModal {
  1729.     background-color: #f09e7a;
  1730.     color: white;
  1731.     border: none;
  1732.     border-radius: 5px;
  1733.     padding: 10px 30px;
  1734.     font-weight: bold;
  1735.     transition: all 0.3s ease;
  1736. }
  1738. .circleModal:hover {
  1739.     background-color: #e8865e;
  1740.     transform: translateY(-2px);
  1741. }
  1743. /* Animation pour le passage au champ suivant */
  1744. .field-complete {
  1745.     transition: all 0.3s ease;
  1746.     border-color: #41a2aa !important;
  1747.     box-shadow: 0 0 5px rgba(65, 162, 170, 0.5) !important;
  1748.     transform: translateY(-2px);
  1749. }
  1751. .form-control:focus {
  1752.     border-color: #f09e7a !important;
  1753.     box-shadow: 0 0 6px rgba(240, 158, 122, 0.5) !important;
  1754.     transition: all 0.3s ease;
  1755. }
  1757. /* Position for password toggle icons */
  1758. .position-relative {
  1759.     position: relative;
  1760.     display: block;
  1761.     width: 100%;
  1762. }
  1764. .field-icon {
  1765.     position: absolute;
  1766.     right: 0px;
  1767.     padding-top: 10px;
  1768.     transform: translateY(-50%);
  1769.     z-index: 10;
  1770.     cursor: pointer;
  1771.     color: #41a2aa;
  1772.     font-size: 14px;
  1773.     pointer-events: auto;
  1774. }
  1776. .field-icon:hover {
  1777.     color: #f09e7a;
  1778. }
  1780. /* Adjust input padding to make room for the icon */
  1781. input[type=\"password\"] {
  1782.     padding-right: 40px;
  1783. }
  1785. /* Updated styles for login forms */
  1786. .form-section {
  1787.     background-color: #fff;
  1788.     padding: 25px;
  1789.     border-radius: 8px;
  1790.     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  1791.     margin-bottom: 20px;
  1792. }
  1794. .soutitle {
  1795.     color: #333;
  1796.     font-size: 24px;
  1797.     font-weight: bold;
  1798.     margin-bottom: 15px;
  1799.     text-align: center;
  1800. }
  1802. .description2 {
  1803.     color: #666;
  1804.     text-align: center;
  1805.     margin-bottom: 20px;
  1806.     font-size: 14px;
  1807.     line-height: 1.5;
  1808. }
  1810. .form-control {
  1811.     border-radius: 4px;
  1812.     padding: 12px 15px;
  1813.     margin-bottom: 15px;
  1814.     border: 1px solid #ddd;
  1815.     transition: all 0.3s ease;
  1816. }
  1818. .form-control:focus {
  1819.     border-color: #41a2aa !important;
  1820. }
  1822. .logButton {
  1823.     width: 100%;
  1824.     padding: 12px;
  1825.     border-radius: 5px;
  1826.     font-weight: bold;
  1827.     font-size: 16px;
  1828.     margin-top: 10px;
  1829.     transition: all 0.3s ease;
  1830.     border: none;
  1831. }
  1833. .logButton:hover {
  1834.     transform: translateY(-2px);
  1835.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  1836. }
  1838. .logButtonSocial {
  1839.     display: flex;
  1840.     align-items: center;
  1841.     justify-content: center;
  1842.     width: 100%;
  1843.     padding: 12px;
  1844.     border-radius: 5px;
  1845.     font-weight: bold;
  1846.     margin-top: 15px;
  1847.     text-decoration: none;
  1848.     transition: all 0.3s ease;
  1849. }
  1851. .logButtonSocial:hover {
  1852.     transform: translateY(-2px);
  1853.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  1854.     text-decoration: none;
  1855. }
  1857. .logButtonSocial img {
  1858.     margin-right: 10px;
  1859.     height: 20px;
  1860. }
  1862. .ou-container {
  1863.     position: relative;
  1864.     height: 100%;
  1865.     display: flex;
  1866.     align-items: center;
  1867.     justify-content: center;
  1868. }
  1870. .ou-line {
  1871.     position: absolute;
  1872.     width: 1px;
  1873.     height: 80%;
  1874.     background-color: #ddd;
  1875.     left: 50%;
  1876.     transform: translateX(-50%);
  1877. }
  1879. .ou-text {
  1880.     background-color: white;
  1881.     padding: 10px;
  1882.     position: relative;
  1883.     z-index: 1;
  1884.     color: #666;
  1885.     font-weight: bold;
  1886. }
  1888. /* Hide one form by default at 1024px and below */
  1889. @media screen and (max-width: 1360px) {
  1890.     #connexionDiv, #inscriptionDiv {
  1891.         width: 80% !important;
  1892.         margin: 0 auto !important;
  1893.         float: none !important;
  1894.         margin-left: 10% !important;
  1895.     }
  1896.     
  1897.     /* Initially hide the connection form */
  1898.     #connexionDiv {
  1899.         display: none;
  1900.     }
  1901.     
  1902.     /* Make the inscription form take full width */
  1903.     #inscriptionDiv {
  1904.         display: block;
  1905.     }
  1906.     
  1907.     /* Hide the OR separator at 1024px */
  1908.     .ou-container {
  1909.         display: none;
  1910.     }
  1911.     
  1912.     /* Make the buttons more prominent for form switching */
  1913.     .circleCree {
  1914.         display: block !important;
  1915.         width: 100% !important;
  1916.         margin: 15px auto !important;
  1917.         padding: 10px !important;
  1918.         background-color: #41a2aa !important;
  1919.         color: white !important;
  1920.         border-radius: 5px !important;
  1921.         border: none !important;
  1922.         cursor: pointer !important;
  1923.         text-align: center !important;
  1924.         font-weight: bold !important;
  1925.     }
  1926.     
  1927.     /* Adjust column widths */
  1928.     .col-md-5, .col-sm-5, .col-lg-5 {
  1929.         width: 100% !important;
  1930.         max-width: 100% !important;
  1931.         flex: 0 0 100% !important;
  1932.     }
  1933.     
  1934.     /* Hide the middle column with the separator */
  1935.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  1936.         display: none !important;
  1937.     }
  1938. }
  1940. /* Maintain desktop layout above 1024px */
  1941. @media screen and (min-width: 1360px) {
  1942.     #connexionDiv, #inscriptionDiv {
  1943.         display: block !important;
  1944.     }
  1945.     
  1946.     .circleCree {
  1947.         display: none !important;
  1948.     }
  1949. }
  1951. /* Forgot password link styling */
  1952. .description a {
  1953.     color: #f09e7a;
  1954.     text-decoration: none;
  1955.     font-weight: bold;
  1956. }
  1958. .description a:hover {
  1959.     text-decoration: underline;
  1960. }
  1962. /* Button container styling */
  1963. .button-container {
  1964.     margin-top: 15px;
  1965.     margin-bottom: 15px;
  1966. }
  1968. /* Social login buttons styling */
  1969. .mobilesocial {
  1970.     margin-top: 10px;
  1971. }
  1973. </style>
  1974. {% endblock %}
  1977. {% block Content %}
  1979.   <!-- Bouton pour remonter en haut de la page -->
  1980.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  1981.     <i class=\"bi bi-arrow-up\"></i>
  1982.   </button>
  1984.   <!-- Loader pour l'inscription -->
  1985.   <div id=\"registerLoader\" class=\"register-loader\">
  1986.     <div class=\"loader-content\">
  1987.       <div class=\"spinner-border text-primary\" role=\"status\">
  1988.         <span class=\"sr-only\">Chargement...</span>
  1989.                 </div>
  1990.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  1991.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  1992.                         </div>
  1993.                     </div>
  1995.   <!-- Modal de confirmation - avec l'attribut aria-hidden=\"true\" pour s'assurer qu'il est caché par défaut -->
  1996.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  1997.       <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  1998.     <div class=\"modal-content\" style=\"border-radius: 10px;\">
  1999.       <div class=\"modal-header border-0\">
  2000.         <button onclick=\"location.reload();\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\" style=\"margin-left: auto;\">
  2001.           <img src=\"{{ asset('images/Groupe_526.svg') }}\" alt=\"Fermer\">
  2002.         </button>
  2003.       </div>
  2004.       <div class=\"modal-body text-center\">
  2005.         <!-- Logo -->
  2006.         <img class=\"imageLogo2\" src=\"{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}\" alt=\"Logo 5sur5séjour\" style=\"max-height: 60px; margin-bottom: 20px;\">
  2008.         <!-- Illustration -->
  2010.         <!-- Titre -->
  2011.         <h4 class=\"modal-title font-weight-bold mb-3\" id=\"modalInscriptionLabel\">🎉 Bienvenue sur 5sur5séjour !</h4>
  2013.         <!-- Texte -->
  2014.         <p style=\"font-size: 16px; line-height: 1.5; margin-bottom: 15px;\">
  2015.   Votre compte parent est presque prêt ! Encore une étape pour accéder à l'espace du séjour de votre enfant.
  2016.         </p>
  2018.         <p style=\"font-size: 15px; line-height: 1.5; margin-bottom: 15px;\">
  2019.   📩 Un e-mail vous a été envoyé pour <strong>activer votre compte parent</strong> en toute sécurité.
  2020.         </p>
  2022.         
  2024.         <!-- Bouton -->
  2025.         <div class=\"mt-4\">
  2026.           <button onclick=\"location.reload();\" class=\"btn btn-primary\" style=\"background-color: #41a2aa; border: none; padding: 12px 30px; font-weight: bold; border-radius: 8px; font-size: 16px;\">
  2027.             ✅ Compris, je vais consulter mes e-mails
  2028.           </button>
  2029.         </div>
  2030.       </div>
  2031.     </div>
  2032.   </div>
  2033.     </div>
  2036.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  2037.         <div class=\"splide__track\">
  2038.             <ul class=\"splide__list\">
  2039.                 <!-- Slide 1 -->
  2040.               
  2041.                 <!-- Slide 2 -->
  2042.                 <li class=\"splide__slide\">
  2043.                     <div class=\"slider-content\">
  2044.                         <div class=\"namePRD\" style=\"display: block;\">
  2045.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  2046.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  2047.                           </div>
  2048.                         <img src=\"{{ asset('/images/3.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  2049.                     </div>
  2050.                 </li>
  2051.                   <li class=\"splide__slide\">
  2052.                     <div class=\"slider-content\">
  2053.                         <div class=\"namePRD\" style=\"display: block;\">
  2054.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  2055.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  2056.                           </div>
  2057.                       
  2058.                         
  2059.                         <img src=\"{{ asset('/images/2.png') }}\" class=\"imgslider\" alt=\"Image 1\" />
  2060.                     </div>
  2061.                 </li>
  2062.                 <li class=\"splide__slide\">
  2063.                     <div class=\"slider-content\">
  2064.                         <div class=\"namePRD\" style=\"display: block;\">
  2065.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  2066.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  2067.                           </div>
  2068.                         <img src=\"{{ asset('/images/1.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  2069.                     </div>
  2070.                 </li>
  2071.             </ul>
  2072.         </div>
  2073.     </div>
  2075.     <div class='row no-margin' style=\"padding-top:4%\">
  2077.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  2078.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  2079.          
  2080.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  2081.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  2082.         En savoir plus
  2083.         </button>
  2087.         
  2088.           
  2090.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  2092.   
  2094.                 
  2095.                
  2096.                 <div class=\"col-md-5 col-sm-5 col-lg-5  Inscription \" id='inscriptionDiv'>
  2099.                    
  2100.                     <form class =\"form-section\" id=\"create\" onsubmit=\"cp(); return false;\">
  2101.                         <div class=\"soutitle\"> Créer un compte   </div>
  2102.                     <div class =\"description2\"  style=\"padding-top:0px> Vous vous connectez pour la 1ère fois et n'avez pas
  2103.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  2104.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  2106.                         <div class=\"form-group\">
  2109.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\"  placeholder=\"NOM * \" >
  2110.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\"  placeholder=\"PRENOM *\">
  2111.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  2112.                             <div class=\"position-relative\">
  2113.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\"  class=\"form-control\"  placeholder=\"MOT DE PASSE  * \">
  2114.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser\"></i>
  2115.                             </div>
  2116.                             <div class=\"position-relative\">
  2117.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\"  class=\"form-control\"  placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  2118.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser2\"></i>
  2119.                             </div>
  2120.                             
  2121.                             <p style=\"display: none; color:red; font-weight: bold; margin-top: 10px;\" id=\"eroor\">Cet email est déjà utilisé. <a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a; text-decoration: underline;\">Mot de passe oublié ?</a></p>
  2123.                             <input type=\"text\" class=\"form-control\" id=\"num\"  name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  2124.                                
  2125.   
  2126.                                         <div class=\"row no-margin \">
  2127.                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  2128.             </div>
  2129.             <br>
  2130.             <div class=\"row no-margin\">
  2132.                 <div class=\"box-1\" id=\"smsToggle\">
  2133.                     <input type='checkbox' name =\"sms\" id =\"smsInput\"  />
  2134.                     <span class=\"toogle\"> </span>
  2135.                 </div>
  2136.                 <span class=\"sms\"> Par SMS </span>
  2138.                 <div class=\"box-1\">
  2139.                     <input type='checkbox' name =\"mail\" id =\"mailInput\"   />
  2140.                     <span class=\"toogle\" > </span>
  2141.                 </div>
  2142.                 <span class=\"mail\"> Par Mail </span>
  2143.             </div>
  2144.             
  2145.                         </div>
  2146.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  2147.                         <div class=\"button-container\">
  2148.                         <button  type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a;    position: relative;
  2149.         background-color: #f09e7a;margin-top:-5%;\" id=\"submitBtn\">     
  2150.             S'inscrire
  2151.           </button></div>
  2153.           
  2154.           <div class=\"button-container mobilesocial\">
  2155.             <a href=\"{{ path('connect_google_start') }}\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  2156.          <img src=\"{{ asset('/images/icons-google.png') }}\"  >Continuer avec Google
  2157.        </a>
  2158.                        
  2159.      </div>
  2160.      <div class=\"mobilesocial\" >                  
  2161.                     <a href=\"{{ path('connect_facebook_start') }}\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  2162.                      <img src=\"{{ asset('/images/icons-facebook.png') }}\"  >         Continuer avec Facebook
  2163.        </a>
  2164.            </div>        
  2165.         </form>
  2166.                 </div></div>
  2169.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1  \" ><div class=\"ou-container\" style=\"margin-left: 20%;\">
  2170.                     <div class=\"ou-line\"></div>
  2171.                     <div class=\"ou-text\">OU</div>
  2172.                   </div> </div>
  2173.                 <div class=\"col-md-5 col-sm-5 col-lg-5 col-xs-5 connexion \" id='connexionDiv' >
  2174.                  
  2175.                
  2178.                     <div class=\"form-section\">
  2179.                         <div class=\"soutitle\">  Se connecter </div>
  2180.                         <div class =\"description2\" style=\"padding-top:0px\">Vous avez déja un compte Parent(s) « 5 sur 5 séjour »  </div>
  2181.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  2184.                         <form method=\"post\" class=\"\" id=\"login-form\" onsubmit=\"handleLogin(event)\">
  2185.                             {% if error %}
  2186.                                 <div class=\"alert alert-danger d-none\">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  2187.                                 <script>
  2188.                                     document.addEventListener('DOMContentLoaded', function() {
  2189.                                         Swal.fire({
  2190.                                             icon: 'error',
  2191.                                             title: 'Erreur de connexion',
  2192.                                             text: 'Identifiant ou mot de passe incorrect.',
  2193.                                             confirmButtonColor: '#41a2aa'
  2194.                                         });
  2195.                                     });
  2196.                                 </script>
  2197.                             {% endif %}
  2198.                             <div class=\"form-group\">
  2200.                                 <input type=\"text\"  name=\"email\" id=\"inputEmail\"  value=\"{{ last_username }}\"  class=\"form-control\" placeholder=\"Mon identifiant  * \" >
  2201.                             <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\">
  2202.                             <span toggle=\"#inputPassword\" class=\"bi bi-eye field-icon toggle-password\" style=\"right: 40px;\"></span>
  2204.             
  2205.                                 
  2206.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  2207.                                 <div class=\"button-container\">
  2208.                                     <button type=\"button\" onclick=\"handleLogin(event)\" class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" id=\"login-button\">
  2209.              Se connecter 
  2210.           </button>
  2211.         
  2212.                             </div>
  2214.                               
  2215.                             <div class =\"description\" > <a id=\"mdpobli\" href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ?  </a> </div>
  2217.                             <div class=\"button-container\">
  2218.                <a href=\"{{ path('connect_google_start') }}\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  2219.             <img src=\"{{ asset('/images/icons-google.png') }}\"  >Continuer avec Google
  2220.           </a>
  2221.                           
  2222.         </div>
  2223.         <div class=\"button-c\" style=\"display: flex;
  2224.         justify-content: center;
  2225.         align-items: center;\">                  
  2226.                        <a href=\"{{ path('connect_facebook_start') }}\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  2227.                         <img src=\"{{ asset('/images/icons-facebook.png') }}\"  >         Continuer avec Facebook
  2228.           </a>
  2229.               </div>        
  2230.         
  2231.                             
  2232.                                 <br>
  2233.                                 <br>
  2235.                                 
  2236.                             </div>
  2237.                         </form>
  2238.                     
  2239.                     </div>
  2240.                 </div>
  2241.                    
  2243.         </div>
  2244.       
  2245.     </div>
  2246.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  2247.    <a href=\"{{ path('connect_google_start') }}\"  style=\"color:#fff;background-color:#4F86EC;border-color:rgba(0,0,0,0.2)\" class=\"btn btn-block btn-social btn-google\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  2248.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  2249.           </a>
  2250.           
  2251.                           
  2252.                                 <br>
  2253.                                    <br>
  2254.                        <a href=\"{{ path('connect_facebook_start') }}\"  class=\"btn btn-block btn-social btn-facebook\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  2255.             <span class=\"fa fa-facebook\"></span>  S'inscrire avec Facebook
  2256.           </a></div>
  2257.             </div>
  2258. {% endblock %}
  2261. {% block javascript %}
  2262.    
  2263.    
  2265.     {{ parent() }}
  2266.   <script src=\"{{ asset('js/splide.min.js') }}\"></script>
  2267.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  2268.     
  2269.     <script>
  2270.         /**
  2271.          * Handle login form submission
  2272.          */
  2273.         function handleLogin(event) {
  2274.             event.preventDefault();
  2275.             
  2276.             const email = document.getElementById('inputEmail').value;
  2277.             const password = document.getElementById('inputPassword').value;
  2278.             const csrfToken = document.querySelector('input[name=\"_csrf_token\"]').value;
  2279.             
  2280.             // Validate fields
  2281.             if (!email || !password) {
  2282.                 Swal.fire({
  2283.                     icon: 'warning',
  2284.                     title: 'Champs requis',
  2285.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  2286.                     confirmButtonColor: '#41a2aa'
  2287.                 });
  2288.                 return;
  2289.             }
  2290.             
  2291.             // Show loading indicator
  2292.             const loginBtn = document.getElementById('login-button');
  2293.             const originalBtnText = loginBtn.innerHTML;
  2294.             loginBtn.disabled = true;
  2295.             loginBtn.innerHTML = '<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Connexion...';
  2296.             
  2297.             // Send AJAX request
  2298.             \$.ajax({
  2299.                 type: \"POST\",
  2300.                 url: \"{{ path('app_back_Parent') }}\",
  2301.                 data: {
  2302.                     email: email,
  2303.                     password: password,
  2304.                     _csrf_token: csrfToken
  2305.                 },
  2306.                 success: function(response) {
  2307.                     // Si la réponse est un objet JSON
  2308.                     if (typeof response === 'object') {
  2309.                         if (response.success) {
  2310.                             window.location.href = \"{{ path('CodeSejour') }}\";
  2311.                         } else {
  2312.                             Swal.fire({
  2313.                                 icon: 'error',
  2314.                                 title: 'Erreur de connexion',
  2315.                                 text: 'Identifiant ou mot de passe incorrect.',
  2316.                                 confirmButtonColor: '#41a2aa'
  2317.                             });
  2318.                             loginBtn.disabled = false;
  2319.                             loginBtn.innerHTML = originalBtnText;
  2320.                         }
  2321.                     } 
  2322.                     // Si la réponse contient du HTML (redirection)
  2323.                     else if (response.includes('CodeSejour')) {
  2324.                         window.location.href = \"{{ path('CodeSejour') }}\";
  2325.                     } else {
  2326.                         Swal.fire({
  2327.                             icon: 'error',
  2328.                             title: 'Erreur de connexion',
  2329.                             text: 'Identifiant ou mot de passe incorrect.',
  2330.                             confirmButtonColor: '#41a2aa'
  2331.                         });
  2332.                         loginBtn.disabled = false;
  2333.                         loginBtn.innerHTML = originalBtnText;
  2334.                     }
  2335.                 },
  2336.                 error: function() {
  2337.                     Swal.fire({
  2338.                         icon: 'error',
  2339.                         title: 'Erreur de connexion',
  2340.                         text: 'Une erreur est survenue. Veuillez réessayer.',
  2341.                         confirmButtonColor: '#41a2aa'
  2342.                     });
  2343.                     loginBtn.disabled = false;
  2344.                     loginBtn.innerHTML = originalBtnText;
  2345.                 }
  2346.             });
  2347.         }
  2349.         document.addEventListener('DOMContentLoaded', function () {
  2350.     // S'assurer que le modal est caché au chargement de la page
  2351.     \$('#exampleModal').modal('hide');
  2352.     \$('#exampleModal').removeClass('show');
  2353.     \$('#exampleModal').attr('aria-hidden', 'true');
  2354.     \$('body').removeClass('modal-open');
  2355.     \$('.modal-backdrop').remove();
  2356.     
  2357.     // Login form validation
  2358.     const loginForm = document.getElementById('login-form');
  2359.     if (loginForm) {
  2360.         loginForm.addEventListener('submit', function(e) {
  2361.             const email = document.getElementById('inputEmail').value;
  2362.             const password = document.getElementById('inputPassword').value;
  2363.             
  2364.             if (!email || !password) {
  2365.                 e.preventDefault();
  2366.                 Swal.fire({
  2367.                     icon: 'warning',
  2368.                     title: 'Champs requis',
  2369.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  2370.                     confirmButtonColor: '#41a2aa'
  2371.                 });
  2372.             }
  2373.         });
  2374.     }
  2375.     
  2376.     // Gestion du bouton de retour en haut
  2377.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  2378.     
  2379.     // Afficher/masquer le bouton en fonction du défilement
  2380.     window.addEventListener('scroll', function() {
  2381.         if (window.pageYOffset > 300) {
  2382.             scrollTopBtn.style.display = 'block';
  2383.         } else {
  2384.             scrollTopBtn.style.display = 'none';
  2385.         }
  2386.     });
  2387.     
  2388.     // Action de clic sur le bouton
  2389.     scrollTopBtn.addEventListener('click', function() {
  2390.         window.scrollTo({
  2391.             top: 0,
  2392.             behavior: 'smooth'
  2393.         });
  2394.     });
  2395.     
  2396.     // Initialisation du carrousel Splide
  2397.     var splide = new Splide('#imageSlider', {
  2398.         type: 'loop',
  2399.         perPage: 1,
  2400.         autoplay: true,
  2401.         interval: 6000,
  2402.         pauseOnHover: false,
  2403.         pauseOnFocus: false,
  2404.          pagination: false , // Désactive la pagination
  2405.          arrows: false  
  2406.     });
  2408.     splide.mount();
  2410.     // Auto-scroll vers les formulaires après 3 secondes
  2411.     setTimeout(function() {
  2412.         scrollToFormSection();
  2413.     }, 5000);
  2415.     // Configuration du modal de confirmation - s'assurer qu'il est bien caché
  2416.     \$('#exampleModal').modal('dispose'); // Supprimer toute initialisation précédente
  2417.     
  2418.     // Réinitialiser le modal
  2419.     \$('#exampleModal').modal({
  2420.         backdrop: 'static',
  2421.         keyboard: false,
  2422.         show: false // S'assurer que le modal ne s'affiche pas automatiquement
  2423.     });
  2424.     
  2425.     // Centrage du modal uniquement lorsqu'il est affiché
  2426.     \$('#exampleModal').on('show.bs.modal', function () {
  2427.         \$(this).css('display', 'flex');
  2428.         \$(this).css('align-items', 'center');
  2429.         \$(this).find('.modal-dialog').css({
  2430.             'display': 'flex',
  2431.             'align-items': 'center',
  2432.             'margin': '0 auto',
  2433.             'max-height': '90vh'
  2434.         });
  2435.     });
  2437.     // Fonction pour faire défiler vers la section des formulaires
  2438.     function scrollToFormSection() {
  2439.         const formSection = document.getElementById('formSection');
  2440.         if (formSection) {
  2441.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  2442.             const headerOffset = 50; // Tenir compte de la hauteur de l'en-tête
  2443.             const scrollPosition = formPosition - headerOffset;
  2444.             
  2445.             // Animation de défilement fluide
  2446.             window.scrollTo({
  2447.                 top: scrollPosition,
  2448.                 behavior: 'smooth'
  2449.             });
  2450.             
  2451.             // Les animations de mise en évidence ont été supprimées
  2452.         }
  2453.     }
  2454. });
  2455.         // Fonction pour afficher le popover automatiquement avec animation
  2456.       
  2457.         function cp() {
  2458.          
  2459.            // Afficher le loader
  2460.            \$('#registerLoader').css('display', 'flex');
  2461.            
  2462.            // Définir un timeout pour masquer le loader après 3 secondes si la requête prend trop de temps
  2463.            var loaderTimeout = setTimeout(function() {
  2464.                \$('#registerLoader').css('display', 'none');
  2465.                // Afficher directement le modal de confirmation avec le logo 5sur5
  2466.                \$(\"#showOkInscription\").trigger('click');
  2467.            }, 3000);
  2468.           
  2469.             var nomparent = \"\";
  2470.             var   prenomparent= \"\";
  2471.             var mail = \"\";
  2472.             var num = \"5555\";
  2473.             console.log(num);
  2474.             var confirmpassword = \$('#Passworduser2').val();
  2475.             var parent_register = \"{{ path('parent_register') }}\";
  2476.             var Passworduser = \"\";
  2477.             \$testDeCreation = false;
  2478.             \$testDeCreation2 = false;
  2479.             \$testDeCreation3 = false;
  2480.             \$testDeCreation4 = false;
  2481.             \$testDeCreation5 = false;
  2482.             if (\$('#nomparent').val() == \"\") {
  2483.                   
  2484.                 \$('#nomparent').addClass('is-invalid');
  2485.                 \$('#nomparent').removeClass('is-valid');
  2486.                 \$('#nomparent').css('border', '1px solid red');
  2487.                 \$testDeCreation = false;
  2488.             } else {
  2489.                 \$('#nomparent').removeClass('is-invalid');
  2490.                 \$('#nomparent').addClass('is-valid');
  2491.                 
  2492.                 \$('#nomparent').css('border', '1px solid green');
  2493.                nomparent = \$('#nomparent').val();
  2494.                 \$testDeCreation = true;
  2496.             }
  2498.             if (\$('#prenomparent').val() == \"\") {
  2499.               
  2500.                 \$('#prenomparent').addClass('is-invalid');
  2501.                 \$('#prenomparent').removeClass('is-valid');
  2502.                 \$('#prenomparent').css('border', '1px solid red');
  2503.                 \$testDeCreation1 = false;
  2504.             } else {
  2505.                 \$('#prenomparent').removeClass('is-invalid');
  2506.                 \$('#prenomparent').addClass('is-valid');
  2507.                
  2508.                 \$('#prenomparent').css('border', '1px solid green');
  2509.                prenomparent = \$('#prenomparent').val();
  2510.                 \$testDeCreation1 = true;
  2512.             }
  2516.             if (\$('#num').val() == \"\") {
  2517.                 \$('#num ').addClass('is-invalid');
  2518.                 \$('#num').removeClass('is-valid');
  2519.                 \$('#num').css('border', '1px solid red');
  2520.                 \$testDeCreation2 = false;
  2521.             } else {
  2522.                 \$('#num').removeClass('is-invalid');
  2523.                 \$('#num').addClass('is-valid');
  2524.                
  2525.                 \$('#num').css('border', '1px solid green');
  2526.                num = \$('#num').val();
  2527.                 \$testDeCreation2 = true;
  2529.             }
  2534.             if (\$('#mail').val() == \"\") {
  2535.                 \$('#mail').addClass('is-invalid');
  2536.                 \$('#mail').removeClass('is-valid');
  2537.                 \$('#mail').css('border', '1px solid red');
  2538.                 \$testDeCreation3 = false;
  2539.             } else {
  2540.                 \$('#mail').removeClass('is-invalid');
  2541.                 \$('#mail').addClass('is-valid');
  2542.                
  2543.                 \$('#mail').css('border', '1px solid green');
  2544.                 mail = \$('#mail').val();
  2545.                 \$testDeCreation3 = true;
  2547.             }
  2549.             if (\$('#Passworduser').val() == \"\") {
  2550.                 \$('#Passworduser').addClass('is-invalid');
  2551.                 \$('#Passworduser').removeClass('is-valid');
  2552.                 \$('#Passworduser').css('border', '1px solid red');
  2553.                 \$testDeCreation4 = false;
  2554.             } else {
  2555.                 \$('#Passworduser').removeClass('is-invalid');
  2556.                 \$('#Passworduser').addClass('is-valid');
  2557.                
  2558.                 \$('#Passworduser').css('border', '1px solid green');
  2559.                 Passworduser = \$('#Passworduser').val();
  2560.                 \$testDeCreation4 = true;
  2562.             }
  2563.             
  2564.             var sms = 0; var mailnotif = 0;
  2565.             if (\$(\"#smsInput\").is(':checked')) {
  2566.                 var sms = 1;
  2567.             }
  2568.             if (\$(\"#mailInput\").is(':checked')){
  2569.                 var mailnotif = 1;
  2570.             }
  2571.            
  2572.             \$_data = {
  2573.                 'nomparent': nomparent,
  2574.                 'prenomparent': prenomparent,
  2575.                 'mailprent': mail,
  2576.                 'numtel': num,
  2577.                 'passwordparent': Passworduser,
  2578.                 'confirmpassword':confirmpassword,
  2579.                 'sms': sms,
  2580.                 'mailnotif': mailnotif
  2581.             }
  2582.              console.log(\$_data);
  2583.             if (\$testDeCreation &&  \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  2584.              
  2585.          
  2586.                 \$.ajax({
  2587.                     type: \"POST\",
  2588.                     url: parent_register,
  2589.                     data: \$_data,
  2590.                     success: function (\$response) {
  2591.                         console.log(\$response);
  2592.                         // Masquer le loader quelle que soit la réponse
  2593.                         \$('#registerLoader').css('display', 'none');
  2594.                         // Annuler le timeout puisque la requête est terminée
  2595.                         clearTimeout(loaderTimeout);
  2596.                         
  2597.                         if (\$response == 'eror') {
  2598.                         
  2599.                             \$('#mail').css('border-color', 'red');
  2600.                             \$('#eroor').css('display', 'block');
  2601.                             // Afficher une alerte SweetAlert pour l'email déjà utilisé avec boutons d'action
  2602.                             Swal.fire({
  2603.                                 icon: 'error',
  2604.                                 title: 'Email déjà utilisé',
  2605.                                 text: 'Cette adresse email est déjà associée à un compte.',
  2606.                                 footer: '<a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  2607.                                 showCancelButton: true,
  2608.                                 confirmButtonText: 'Se connecter',
  2609.                                 cancelButtonText: 'Modifier',
  2610.                                 confirmButtonColor: '#41a2aa',
  2611.                                 cancelButtonColor: '#f09e7a',
  2612.                                 position: 'center'
  2613.                             }).then((result) => {
  2614.                                 if (result.isConfirmed) {
  2615.                                     // Basculer vers le formulaire de connexion et pré-remplir l'email
  2616.                                     AffichDivConnexion();
  2617.                                     \$('#inputEmail').val(\$('#mail').val());
  2618.                                     \$('#inputPassword').focus();
  2619.                                 }
  2620.                             });
  2622.                         }
  2623.                         else if(\$response == 'erorpasswordconfirm')
  2624.                         {
  2625.                              
  2626.                               \$('#Passworduser2').css('border-color', 'red');
  2627.                                 Swal.fire({
  2628.                                 icon: 'error',
  2629.                                 title: 'Oups..!',
  2630.                                 text: 'Les mots de passe ne se correspondent pas.',
  2631.                                 footer: '',
  2632.                                 position: 'center'
  2633.                             })
  2635.                         }
  2636.                     
  2637.                          else {
  2638.                               
  2639.                           
  2640.                             \$(\"#showOkInscription\").trigger('click');
  2641.                             
  2642.                             // Réinitialiser tous les champs du formulaire
  2643.                             resetForm();
  2644.                             
  2645.                             // S'assurer que le modal est bien centré
  2646.                             \$('#exampleModal').on('shown.bs.modal', function () {
  2647.                                 \$(this).find('.modal-dialog').css({
  2648.                                     'margin-top': function () {
  2649.                                         return (\$(window).height() - \$(this).height()) / 2;
  2650.                                     }
  2651.                                 });
  2652.                             });
  2653.                               var windowWidth = document.documentElement.clientWidth;
  2654.                                 if (windowWidth <= 560) {
  2655.                                     setTimeout(function(){
  2656.                                        
  2657.                                    location.reload();
  2658.                               },500);
  2659.                               
  2660.                            }
  2661.                               
  2662.                             
  2663.                         }
  2666.                     },
  2667.                     error: function() {
  2668.                         // Masquer le loader en cas d'erreur
  2669.                         \$('#registerLoader').css('display', 'none');
  2670.                         // Annuler le timeout puisque la requête est terminée
  2671.                         clearTimeout(loaderTimeout);
  2672.                         
  2673.                         // Afficher un message d'erreur
  2674.                         Swal.fire({
  2675.                             icon: 'error',
  2676.                             title: 'Erreur de connexion',
  2677.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  2678.                             confirmButtonColor: '#f09e7a',
  2679.                             position: 'center'
  2680.                         });
  2681.                     }
  2682.                 })
  2684.             } else {
  2685.                 // Masquer le loader si la validation échoue
  2686.                 \$('#registerLoader').css('display', 'none');
  2687.                 // Annuler le timeout puisque la validation a échoué
  2688.                 clearTimeout(loaderTimeout);
  2689.             }
  2691.         }
  2693.         function AffichDivConnexion() {
  2694.     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  2695.     \$(\"#connexionDiv\").css(\"display\", \"block\");
  2696. }
  2698. function AffichDivInscri() {
  2699.     \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2700.     \$(\"#connexionDiv\").css(\"display\", \"none\");
  2701. }
  2703. // Function to handle responsive behavior based on window width
  2704. function handleResponsiveFormDisplay() {
  2705.     var windowWidth = \$(window).width();
  2706.     
  2707.     if (windowWidth <= 1024) {
  2708.         // Apply mobile-like behavior for tablets/smaller screens
  2709.         // Show only one form at a time with toggle buttons
  2710.         \$(\"#connexionDiv\").css(\"display\", \"none\");
  2711.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2712.         \$(\".circleCree\").css(\"display\", \"block\");
  2713.     } else {
  2714.         // For desktop, show both forms side by side
  2715.         \$(\"#connexionDiv\").css(\"display\", \"block\");
  2716.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2717.         \$(\".circleCree\").css(\"display\", \"none\");
  2718.     }
  2719. }
  2721. // Run on page load
  2722. \$(document).ready(function() {
  2723.     handleResponsiveFormDisplay();
  2724.     
  2725.     // Also run when window is resized
  2726.     \$(window).resize(function() {
  2727.         handleResponsiveFormDisplay();
  2728.     });
  2729.     
  2730.     // Configuration pour le passage automatique au champ suivant
  2731.     setupAutoNextField();
  2732.     
  2733.     // Ajouter la validation en temps réel pour tous les champs
  2734.     setupRealtimeValidation();
  2735. });
  2737. // Fonction pour configurer le passage automatique au champ suivant
  2738. function setupAutoNextField() {
  2739.     // Ordre des champs dans le formulaire d'inscription
  2740.     const formFields = [
  2741.         'nomparent',
  2742.         'prenomparent',
  2743.         'mail',
  2744.         'Passworduser',
  2745.         'Passworduser2',
  2746.         'num'
  2747.     ];
  2748.     
  2749.     // Pour chaque champ, ajouter des événements pour la navigation
  2750.     formFields.forEach((field, index) => {
  2751.         if (index < formFields.length - 1) {
  2752.             const \$currentField = \$('#' + field);
  2753.             let typingTimer; // Timer pour détecter quand l'utilisateur arrête de taper
  2754.             const doneTypingInterval = 1500; // Temps en ms après lequel on considère que l'utilisateur a fini de taper
  2755.             
  2756.             // Événement lorsque l'utilisateur tape
  2757.             \$currentField.on('input', function() {
  2758.                 clearTimeout(typingTimer);
  2759.                 
  2760.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  2761.                 if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2762.                     event.preventDefault(); // Empêcher l'espace d'être ajouté
  2763.                     \$('#' + formFields[index + 1]).focus();
  2764.                     return;
  2765.                 }
  2766.                 
  2767.                 // Démarrer un nouveau timer
  2768.                 if (\$(this).val()) {
  2769.                     typingTimer = setTimeout(function() {
  2770.                         // Vérifier si le champ est valide
  2771.                         if (isFieldValid(field, \$currentField.val().trim())) {
  2772.                             \$('#' + formFields[index + 1]).focus();
  2773.                         }
  2774.                     }, doneTypingInterval);
  2775.                 }
  2776.             });
  2777.             
  2778.             // Réinitialiser le timer si l'utilisateur continue de taper
  2779.             \$currentField.on('keydown', function(e) {
  2780.                 clearTimeout(typingTimer);
  2781.                 
  2782.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  2783.                 if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2784.                     e.preventDefault(); // Empêcher l'espace d'être ajouté
  2785.                     \$('#' + formFields[index + 1]).focus();
  2786.                     return;
  2787.                 }
  2788.                 
  2789.                 // Si l'utilisateur appuie sur Tab ou Entrée
  2790.                 if (e.key === 'Tab' && !e.shiftKey) {
  2791.                     // Laisser le comportement par défaut de Tab
  2792.                     return true;
  2793.                 }
  2794.                 
  2795.                 if (e.key === 'Enter') {
  2796.                     e.preventDefault(); // Empêcher la soumission du formulaire
  2797.                     \$('#' + formFields[index + 1]).focus();
  2798.                 }
  2799.             });
  2800.             
  2801.             // Événement lorsque le champ perd le focus
  2802.             \$currentField.on('blur', function() {
  2803.                 clearTimeout(typingTimer);
  2804.             });
  2805.         }
  2806.     });
  2807.     
  2808.     // Pour le dernier champ, la touche Enter déclenche l'inscription
  2809.     \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  2810.         if (e.key === 'Enter') {
  2811.             e.preventDefault();
  2812.             cp(); // Fonction d'inscription
  2813.         }
  2814.     });
  2815. }
  2817. // Fonction pour vérifier si un champ est valide selon son type
  2818. function isFieldValid(fieldId, value) {
  2819.     switch(fieldId) {
  2820.         case 'mail':
  2821.             const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2822.             return emailRegex.test(value);
  2823.         case 'Passworduser':
  2824.             // Minimum 6 caractères pour un mot de passe
  2825.             return value.length >= 6;
  2826.         case 'Passworduser2':
  2827.             // Doit correspondre au mot de passe et avoir au moins 6 caractères
  2828.             return value === \$('#Passworduser').val() && value.length >= 6;
  2829.         case 'num':
  2830.             // Numéro de téléphone: doit contenir uniquement des chiffres et avoir au moins 8 caractères
  2831.             const phoneRegex = /^[0-9]{8,}\$/;
  2832.             return phoneRegex.test(value.replace(/\\s+/g, '')); // Enlever les espaces avant de tester
  2833.         case 'nomparent':
  2834.         case 'prenomparent':
  2835.             // Nom et prénom: au moins 2 caractères, pas de chiffres
  2836.             const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  2837.             return nameRegex.test(value);
  2838.         default:
  2839.             return value.length >= 2;
  2840.     }
  2841. }
  2843.     </script>
  2844.    
  2846.     <script>
  2847.         function hideshow() {
  2848.             document.getElementById(\"btnn\").disabled = true;
  2849.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  2850.             \$(\"#mdpobli\").css(\"display\", \"none\");
  2851.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  2852.         }
  2853.     </script>
  2854.        <script>
  2855.     function closeModale(){
  2856.     \$(\"#monModalInscription\").modal('hide');
  2858.      }
  2859.    // \$(\".masktelph\").inputmask({\"mask\": \"9999999999\"});
  2860.    </script>
  2861.    <script>
  2862.     /**
  2863.      * this code is used to toggle the password
  2864.      */ 
  2865.     \$(\".toggle-password\").click(function() {
  2866.         \$(this).toggleClass(\"bi-eye bi-eye-slash\");
  2867. var input = \$(\$(this).attr(\"toggle\"));
  2868. if (input.attr(\"type\") == \"password\") {
  2869.   input.attr(\"type\", \"text\");
  2870. } else {
  2871.   input.attr(\"type\", \"password\");
  2872. }
  2873. });
  2876. \$(document).ready(function(){
  2877.             \$('[data-toggle=\"tooltip\"]').tooltip({
  2878.                 trigger: 'manual',
  2879.                 html: true,
  2880.                 template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  2881.             });
  2883.             function validateEmail(email) {
  2884.                 const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2885.                 return re.test(String(email).toLowerCase());
  2886.             }
  2888.             \$('#mail').on('input', function() {
  2889.                 var emailInput = \$(this);
  2890.                 if (validateEmail(emailInput.val())) {
  2891.                     emailInput.removeClass('is-invalid');
  2892.                     emailInput.addClass('is-valid');
  2893.                     emailInput.tooltip('dispose');
  2894.                     \$('#notification').hide();
  2895.                     \$('#submitBtn').prop('disabled', false);
  2896.                     
  2897.                     // Ne pas passer automatiquement au champ suivant ici,
  2898.                     // car c'est déjà géré par setupAutoNextField()
  2899.                 } else {
  2900.                     emailInput.removeClass('is-valid');
  2901.                     emailInput.addClass('is-invalid');
  2902.                     
  2903.                     // Afficher le tooltip seulement si l'utilisateur a commencé à saisir
  2904.                     if (emailInput.val().length > 3) {
  2905.                         emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  2906.                         if (emailInput.val().length > 0) {
  2907.                             \$('#notification').show();
  2908.                         }
  2909.                     } else {
  2910.                         \$('#notification').hide();
  2911.                     }
  2912.                     \$('#submitBtn').prop('disabled', false);
  2913.                 }
  2914.             });
  2915.         });
  2916. </script>
  2917. <script>
  2918. // Fonction pour configurer la validation en temps réel
  2919. function setupRealtimeValidation() {
  2920.     const formFields = [
  2921.         'nomparent',
  2922.         'prenomparent',
  2923.         'mail',
  2924.         'Passworduser',
  2925.         'Passworduser2',
  2926.         'num'
  2927.     ];
  2928.     
  2929.     formFields.forEach(field => {
  2930.         \$('#' + field).on('input', function() {
  2931.             const value = \$(this).val();
  2932.             
  2933.             // Ne pas afficher d'erreur tant que l'utilisateur n'a pas commencé à saisir
  2934.             if (value.length === 0) {
  2935.                 \$(this).removeClass('is-valid is-invalid');
  2936.                 \$(this).css('border', '1px solid #ced4da'); // Couleur de bordure par défaut
  2937.                 return;
  2938.             }
  2939.             
  2940.             // Vérifier la validité du champ
  2941.             if (isFieldValid(field, value)) {
  2942.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  2943.                 \$(this).css('border', '1px solid #28a745'); // Vert pour valide
  2944.             } else {
  2945.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  2946.                 \$(this).css('border', '1px solid #dc3545'); // Rouge pour invalide
  2947.             }
  2948.         });
  2949.     });
  2950. }
  2952. // Fonction pour réinitialiser le formulaire
  2953. function resetForm() {
  2954.     \$('#nomparent').css('border','1px solid #41a2aa');
  2955.     \$('#nomparent').removeClass('is-valid'); 
  2956.     \$('#nomparent').removeClass('is-invalid'); 
  2957.     \$('#nomparent').val(''); 
  2958.     \$('#prenomparent').css('border','1px solid #41a2aa');
  2959.     \$('#prenomparent').removeClass('is-valid'); 
  2960.     \$('#prenomparent').removeClass('is-invalid'); 
  2961.     \$('#prenomparent').val(''); 
  2962.     \$('#mail').css('border','1px solid #41a2aa');
  2963.     \$('#mail').removeClass('is-valid'); 
  2964.     \$('#mail').removeClass('is-invalid'); 
  2965.     \$('#mail').val(''); 
  2966.     \$('#eroor').css('display','none');
  2967.     \$('#num').css('border','1px solid #41a2aa');
  2968.     \$('#num').removeClass('is-valid'); 
  2969.     \$('#num').removeClass('is-invalid'); 
  2970.     \$('#num').val(''); 
  2971.     \$('#Passworduser').css('border','1px solid #41a2aa');
  2972.     \$('#Passworduser').removeClass('is-valid'); 
  2973.     \$('#Passworduser').removeClass('is-invalid');
  2974.     \$('#Passworduser').val('');  
  2975.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  2976.     \$('#Passworduser2').removeClass('is-valid'); 
  2977.     \$('#Passworduser2').removeClass('is-invalid'); 
  2978.     \$('#Passworduser2').val(''); 
  2979.     \$(\"#smsInput\").prop(\"checked\",false);
  2980.     \$(\"#mailInput\").prop(\"checked\",false);
  2981. }
  2982. </script>
  2983. {% endblock %}
  2984. ", "Parent/LoginParent.html.twig", "/var/www/5sur5sejour/templates/Parent/LoginParent.html.twig");
  2985.     }
  2986. }