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

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: #41a2aa;
  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. /* Hide one form by default at 1024px and below */
  231. @media screen and (max-width: 1360px) {
  232.     #connexionDiv, #inscriptionDiv {
  233.         width: 80% !important;
  234.         margin: 0 auto !important;
  235.         float: none !important;
  236.         margin-left: 10% !important;
  237.     }
  238.     
  239.     /* Initially hide the connection form */
  240.     #connexionDiv {
  241.         display: none;
  242.     }
  243.     
  244.     /* Make the inscription form take full width */
  245.     #inscriptionDiv {
  246.         display: block;
  247.     }
  248.     
  249.     /* Hide the OR separator at 1024px */
  250.     .ou-container {
  251.         display: none;
  252.     }
  253.     
  254.     /* Make the buttons more prominent for form switching */
  255.     .circleCree {
  256.         display: block !important;
  257.         width: 100% !important;
  258.         margin: 15px auto !important;
  259.         padding: 10px !important;
  260.         background-color: #41a2aa !important;
  261.         color: white !important;
  262.         border-radius: 5px !important;
  263.         border: none !important;
  264.         cursor: pointer !important;
  265.         text-align: center !important;
  266.         font-weight: bold !important;
  267.     }
  268.     
  269.     /* Adjust column widths */
  270.     .col-md-5, .col-sm-5, .col-lg-5 {
  271.         width: 100% !important;
  272.         max-width: 100% !important;
  273.         flex: 0 0 100% !important;
  274.     }
  275.     
  276.     /* Hide the middle column with the separator */
  277.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  278.         display: none !important;
  279.     }
  280. }
  282. /* Maintain desktop layout above 1024px */
  283. @media screen and (min-width: 1360px) {
  284.     #connexionDiv, #inscriptionDiv {
  285.         display: block !important;
  286.     }
  287.     
  288.     .circleCree {
  289.         display: none !important;
  290.     }
  291. }
  294. </style>
  295. ";
  296.         
  297.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  299.         
  300.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  302.         yield from [];
  303.     }
  305.     // line 209
  306.     /**
  307.      * @return iterable<null|scalar|\Stringable>
  308.      */
  309.     public function block_Content(array $context, array $blocks = []): iterable
  310.     {
  311.         $macros = $this->macros;
  312.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  313.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  315.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  316.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  318.         // line 210
  319.         yield "
  320.   <!-- Bouton pour remonter en haut de la page -->
  321.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  322.     <i class=\"fa fa-arrow-up\"></i>
  323.   </button>
  325.   <!-- Loader pour l'inscription -->
  326.   <div id=\"registerLoader\" class=\"register-loader\">
  327.     <div class=\"loader-content\">
  328.       <div class=\"spinner-border text-primary\" role=\"status\">
  329.         <span class=\"sr-only\">Chargement...</span>
  330.       </div>
  331.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  332.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  333.     </div>
  334.   </div>
  336.   <!-- Modal de confirmation - avec l'attribut aria-hidden=\"true\" pour s'assurer qu'il est caché par défaut -->
  337.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  338.         <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  339.             <div class=\"modal-content\">
  340.                 <div class=\"modal-header\" style=\"border-bottom: none; padding-bottom: 0;\">
  341.                     <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" style=\"position: absolute; right: 15px; top: 15px;\">
  342.                         <span aria-hidden=\"true\">&times;</span>
  343.                     </button>
  344.                 </div>
  345.                 <div class=\"modal-body text-center\">
  346.                     <img class=\"imageLogo2 mb-3\" src=\"";
  347.         // line 237
  348.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.svg"), "html", null, true);
  349.         yield "\" alt=\"Logo 5 sur 5 séjour\">
  351.                     <div class=\"row mb-4\">
  352.                         <div class=\"col-12\">
  353.                             <h4 class=\"font-weight-bold text-success\">Merci pour votre inscription à 5sur5sejour.com !</h4>
  354.                             <p class=\"mt-3\">Vous allez recevoir un mail de confirmation afin d'accéder au site</p>
  355.                         </div>
  356.                     </div>
  357.                 </div>
  358.                 <div class=\"modal-footer\" style=\"border-top: none;\">
  359.                     <button class=\"circleModal\" data-dismiss=\"modal\" onclick=\"location.reload();\" style=\"margin: 0 auto; padding: 10px 40px; font-size: 16px;\">OK</button>
  360.                 </div>
  361.             </div>
  362.         </div>
  363.     </div>
  366.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  367.         <div class=\"splide__track\">
  368.             <ul class=\"splide__list\">
  369.                 <!-- Slide 1 -->
  370.               
  371.                 <!-- Slide 2 -->
  372.                 <li class=\"splide__slide\">
  373.                     <div class=\"slider-content\">
  374.                         <div class=\"namePRD\" style=\"display: block;\">
  375.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  376.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  377.                           </div>
  378.                         <img src=\"";
  379.         // line 266
  380.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/3.png"), "html", null, true);
  381.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  382.                     </div>
  383.                 </li>
  384.                   <li class=\"splide__slide\">
  385.                     <div class=\"slider-content\">
  386.                         <div class=\"namePRD\" style=\"display: block;\">
  387.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  388.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  389.                           </div>
  390.                       
  391.                         
  392.                         <img src=\"";
  393.         // line 277
  394.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/2.png"), "html", null, true);
  395.         yield "\" class=\"imgslider\" alt=\"Image 1\" />
  396.                     </div>
  397.                 </li>
  398.                 <li class=\"splide__slide\">
  399.                     <div class=\"slider-content\">
  400.                         <div class=\"namePRD\" style=\"display: block;\">
  401.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  402.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  403.                           </div>
  404.                         <img src=\"";
  405.         // line 286
  406.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/1.png"), "html", null, true);
  407.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  408.                     </div>
  409.                 </li>
  410.             </ul>
  411.         </div>
  412.     </div>
  414.     <div class='row no-margin' style=\"padding-top:4%\">
  416.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  417.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  418.          
  419.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  420.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  421.         En savoir plus
  422.         </button>
  426.         
  427.           
  429.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  431.   
  433.                 
  434.                
  435.                 <div class=\"col-md-5 col-sm-5 col-lg-5  Inscription \" id='inscriptionDiv'>
  438.                    
  439.                     <form class =\"form-section\" id=\"create\" onsubmit=\"cp(); return false;\">
  440.                         <div class=\"soutitle\"> Créer un compte   </div>
  441.                     <div class =\"description2\" > Vous vous connectez pour la 1ère fois et n'avez pas
  442.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  443.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  445.                         <div class=\"form-group\">
  448.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\"  placeholder=\"NOM * \" >
  449.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\"  placeholder=\"PRENOM *\">
  450.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  451.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\"  class=\"form-control\"  placeholder=\"MOT DE PASSE  * \">
  452.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\"  class=\"form-control\"  placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  453.                             
  454.                             <p style=\"display: none; color:red; font-weight: bold; margin-top: 10px;\" id=\"eroor\">Cet email est déjà utilisé. <a href=\"";
  455.         // line 333
  456.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  457.         yield "\" style=\"color:#f09e7a; text-decoration: underline;\">Mot de passe oublié ?</a></p>
  459.                             <input type=\"text\" class=\"form-control\" id=\"num\"  name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  460.                                
  461.   
  462.                                         <div class=\"row no-margin \">
  463.                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  464.             </div>
  465.             <br>
  466.             <div class=\"row no-margin\">
  468.                 <div class=\"box-1\" id=\"smsToggle\">
  469.                     <input type='checkbox' name =\"sms\" id =\"smsInput\"  />
  470.                     <span class=\"toogle\"> </span>
  471.                 </div>
  472.                 <span class=\"sms\"> Par SMS </span>
  474.                 <div class=\"box-1\">
  475.                     <input type='checkbox' name =\"mail\" id =\"mailInput\"   />
  476.                     <span class=\"toogle\" > </span>
  477.                 </div>
  478.                 <span class=\"mail\"> Par Mail </span>
  479.             </div>
  480.             
  481.                         </div>
  482.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  483.                         <div class=\"button-container\">
  484.                         <button  type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a;    position: relative;
  485.         background-color: #f09e7a;\" id=\"submitBtn\">     
  486.             S'inscrire
  487.           </button></div>
  489.           
  490.           <div class=\"button-container mobilesocial\">
  491.             <a href=\"";
  492.         // line 367
  493.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  494.         yield "\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  495.          <img src=\"";
  496.         // line 368
  497.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  498.         yield "\"  >Continuer avec Google
  499.        </a>
  500.                        
  501.      </div>
  502.      <div class=\"mobilesocial\" >                  
  503.                     <a href=\"";
  504.         // line 373
  505.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  506.         yield "\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  507.                      <img src=\"";
  508.         // line 374
  509.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  510.         yield "\"  >         Continuer avec Facebook
  511.        </a>
  512.            </div>        
  513.         </form>
  514.                 </div>
  517.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1  \" ><div class=\"ou-container\" style=\"margin-left: 20%;\">
  518.                     <div class=\"ou-line\"></div>
  519.                     <div class=\"ou-text\">OU</div>
  520.                   </div> </div>
  521.                 <div class=\"col-md-5 col-sm-5 col-lg-5 col-xs-5 connexion \" id='connexionDiv' >
  522.                  
  523.                
  526.                     <div class=\"form-section\">
  527.                         <div class=\"soutitle\">  Se connecter </div>
  528.                         <div class =\"description2\" >Vous avez déja un compte Parent(s) « 5 sur 5 séjour »  </div>
  529.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  532.                         <form method=\"post\" class=\"\">
  533.                             ";
  534.         // line 397
  535.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 397, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  536.             // line 398
  537.             yield "                                <div class=\"alert alert-danger\">";
  538.             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.', 398, $this->source); })()), "messageKey", [], "any", false, false, false, 398), 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.', 398, $this->source); })()), "messageData", [], "any", false, false, false, 398), "security"), "html", null, true);
  539.             yield "</div>
  540.                             ";
  541.         }
  542.         // line 400
  543.         yield "                            <div class=\"form-group\">
  545.                                 <input type=\"text\"  name=\"email\" id=\"inputEmail\"  value=\"";
  546.         // line 402
  547.         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.', 402, $this->source); })()), "html", null, true);
  548.         yield "\"  class=\"form-control\" placeholder=\"Mon identifiant  * \" >
  549.                             <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\">
  550.                             <span toggle=\"#inputPassword\" class=\"fa fa-fw fa-eye field-icon toggle-password\"></span>
  552.             
  553.                                 
  554.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  555.         // line 408
  556.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  557.         yield "\">
  558.                                 <div class=\"button-container\">
  559.                                     <button   class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" >
  560.              Se connecter 
  561.           </button>
  562.         
  563.                             </div>
  565.                               
  566.                             <div class =\"description\" > <a id=\"mdpobli\" href=\"";
  567.         // line 417
  568.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  569.         yield "\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ?  </a> </div>
  571.                             <div class=\"button-container\">
  572.                <a href=\"";
  573.         // line 420
  574.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  575.         yield "\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  576.             <img src=\"";
  577.         // line 421
  578.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  579.         yield "\"  >Continuer avec Google
  580.           </a>
  581.                           
  582.         </div>
  583.         <div class=\"button-c\" style=\"display: flex;
  584.         justify-content: center;
  585.         align-items: center;\">                  
  586.                        <a href=\"";
  587.         // line 428
  588.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  589.         yield "\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  590.                         <img src=\"";
  591.         // line 429
  592.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  593.         yield "\"  >         Continuer avec Facebook
  594.           </a>
  595.               </div>        
  596.         
  597.                             
  598.                                 <br>
  599.                                 <br>
  601.                                 
  602.                             </div>
  603.                         </form>
  604.                     
  605.                     </div>
  606.                 </div>
  607.                    
  609.         </div>
  610.       
  611.     </div>
  612.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  613.    <a href=\"";
  614.         // line 449
  615.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  616.         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']);\">
  617.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  618.           </a>
  619.           
  620.                           
  621.                                 <br>
  622.                                    <br>
  623.                        <a href=\"";
  624.         // line 456
  625.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  626.         yield "\"  class=\"btn btn-block btn-social btn-facebook\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  627.             <span class=\"fa fa-facebook\"></span>  S'inscrire avec Facebook
  628.           </a></div>
  629.             </div>
  630. ";
  631.         
  632.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  634.         
  635.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  637.         yield from [];
  638.     }
  640.     // line 463
  641.     /**
  642.      * @return iterable<null|scalar|\Stringable>
  643.      */
  644.     public function block_javascript(array $context, array $blocks = []): iterable
  645.     {
  646.         $macros = $this->macros;
  647.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  648.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  650.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  651.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  653.         // line 464
  654.         yield "   
  655.    
  657.     ";
  658.         // line 467
  659.         yield from $this->yieldParentBlock("javascript", $context, $blocks);
  660.         yield "
  661.   <script src=\"";
  662.         // line 468
  663.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("js/splide.min.js"), "html", null, true);
  664.         yield "\"></script>
  665.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  666.     
  667.     <script>
  668.         document.addEventListener('DOMContentLoaded', function () {
  669.     // S'assurer que le modal est caché au chargement de la page
  670.     \$('#exampleModal').modal('hide');
  671.     \$('#exampleModal').removeClass('show');
  672.     \$('#exampleModal').attr('aria-hidden', 'true');
  673.     \$('body').removeClass('modal-open');
  674.     \$('.modal-backdrop').remove();
  675.     
  676.     // Gestion du bouton de retour en haut
  677.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  678.     
  679.     // Afficher/masquer le bouton en fonction du défilement
  680.     window.addEventListener('scroll', function() {
  681.         if (window.pageYOffset > 300) {
  682.             scrollTopBtn.style.display = 'block';
  683.         } else {
  684.             scrollTopBtn.style.display = 'none';
  685.         }
  686.     });
  687.     
  688.     // Action de clic sur le bouton
  689.     scrollTopBtn.addEventListener('click', function() {
  690.         window.scrollTo({
  691.             top: 0,
  692.             behavior: 'smooth'
  693.         });
  694.     });
  695.     
  696.     // Initialisation du carrousel Splide
  697.     var splide = new Splide('#imageSlider', {
  698.         type: 'loop',
  699.         perPage: 1,
  700.         autoplay: true,
  701.         interval: 6000,
  702.         pauseOnHover: false,
  703.         pauseOnFocus: false,
  704.          pagination: false , // Désactive la pagination
  705.          arrows: false  
  706.     });
  708.     splide.mount();
  709.     
  710.     // Auto-scroll vers les formulaires après 3 secondes
  711.     setTimeout(function() {
  712.         scrollToFormSection();
  713.     }, 5000);
  715.     // Configuration du modal de confirmation - s'assurer qu'il est bien caché
  716.     \$('#exampleModal').modal('dispose'); // Supprimer toute initialisation précédente
  717.     
  718.     // Réinitialiser le modal
  719.     \$('#exampleModal').modal({
  720.         backdrop: 'static',
  721.         keyboard: false,
  722.         show: false // S'assurer que le modal ne s'affiche pas automatiquement
  723.     });
  724.     
  725.     // Centrage du modal uniquement lorsqu'il est affiché
  726.     \$('#exampleModal').on('show.bs.modal', function () {
  727.         \$(this).css('display', 'flex');
  728.         \$(this).css('align-items', 'center');
  729.         \$(this).find('.modal-dialog').css({
  730.             'display': 'flex',
  731.             'align-items': 'center',
  732.             'margin': '0 auto',
  733.             'max-height': '90vh'
  734.         });
  735.     });
  737.     // Fonction pour faire défiler vers la section des formulaires
  738.     function scrollToFormSection() {
  739.         const formSection = document.getElementById('formSection');
  740.         if (formSection) {
  741.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  742.             const headerOffset = 50; // Tenir compte de la hauteur de l'en-tête
  743.             const scrollPosition = formPosition - headerOffset;
  744.             
  745.             // Animation de défilement fluide
  746.             window.scrollTo({
  747.                 top: scrollPosition,
  748.                 behavior: 'smooth'
  749.             });
  750.             
  751.             // Les animations de mise en évidence ont été supprimées
  752.         }
  753.     }
  754. });
  755.         // Fonction pour afficher le popover automatiquement avec animation
  756.       
  757.         function cp() {
  758.          
  759.            // Afficher le loader
  760.            \$('#registerLoader').css('display', 'flex');
  761.            
  762.            // Définir un timeout pour masquer le loader après 10 secondes, même si la requête n'est pas terminée
  763.            var loaderTimeout = setTimeout(function() {
  764.                \$('#registerLoader').css('display', 'none');
  765.                Swal.fire({
  766.                    icon: 'info',
  767.                    title: 'Inscription en cours',
  768.                    text: 'Votre inscription est en cours de traitement. Vous recevrez un email de confirmation.',
  769.                    confirmButtonColor: '#41a2aa',
  770.                    position: 'center'
  771.                });
  772.            }, 10000);
  773.           
  774.             var nomparent = \"\";
  775.             var   prenomparent= \"\";
  776.             var mail = \"\";
  777.             var num = \"5555\";
  778.             console.log(num);
  779.             var confirmpassword = \$('#Passworduser2').val();
  780.             var parent_register = \"";
  781.         // line 584
  782.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("parent_register");
  783.         yield "\";
  784.             var Passworduser = \"\";
  785.             \$testDeCreation = false;
  786.             \$testDeCreation2 = false;
  787.             \$testDeCreation3 = false;
  788.             \$testDeCreation4 = false;
  789.             \$testDeCreation5 = false;
  790.             if (\$('#nomparent').val() == \"\") {
  791.                   
  792.                 \$('#nomparent').addClass('is-invalid');
  793.                 \$('#nomparent').removeClass('is-valid');
  794.                 \$('#nomparent').css('border', '1px solid red');
  795.                 \$testDeCreation = false;
  796.             } else {
  797.                 \$('#nomparent').removeClass('is-invalid');
  798.                 \$('#nomparent').addClass('is-valid');
  799.                 
  800.                 \$('#nomparent').css('border', '1px solid green');
  801.                nomparent = \$('#nomparent').val();
  802.                 \$testDeCreation = true;
  804.             }
  806.             if (\$('#prenomparent').val() == \"\") {
  807.               
  808.                 \$('#prenomparent').addClass('is-invalid');
  809.                 \$('#prenomparent').removeClass('is-valid');
  810.                 \$('#prenomparent').css('border', '1px solid red');
  811.                 \$testDeCreation1 = false;
  812.             } else {
  813.                 \$('#prenomparent').removeClass('is-invalid');
  814.                 \$('#prenomparent').addClass('is-valid');
  815.                
  816.                 \$('#prenomparent').css('border', '1px solid green');
  817.                prenomparent = \$('#prenomparent').val();
  818.                 \$testDeCreation1 = true;
  820.             }
  824.             if (\$('#num').val() == \"\") {
  825.                 \$('#num ').addClass('is-invalid');
  826.                 \$('#num').removeClass('is-valid');
  827.                 \$('#num').css('border', '1px solid red');
  828.                 \$testDeCreation2 = false;
  829.             } else {
  830.                 \$('#num').removeClass('is-invalid');
  831.                 \$('#num').addClass('is-valid');
  832.                
  833.                 \$('#num').css('border', '1px solid green');
  834.                num = \$('#num').val();
  835.                 \$testDeCreation2 = true;
  837.             }
  842.             if (\$('#mail').val() == \"\") {
  843.                 \$('#mail').addClass('is-invalid');
  844.                 \$('#mail').removeClass('is-valid');
  845.                 \$('#mail').css('border', '1px solid red');
  846.                 \$testDeCreation3 = false;
  847.             } else {
  848.                 \$('#mail').removeClass('is-invalid');
  849.                 \$('#mail').addClass('is-valid');
  850.                
  851.                 \$('#mail').css('border', '1px solid green');
  852.                 mail = \$('#mail').val();
  853.                 \$testDeCreation3 = true;
  855.             }
  857.             if (\$('#Passworduser').val() == \"\") {
  858.                 \$('#Passworduser').addClass('is-invalid');
  859.                 \$('#Passworduser').removeClass('is-valid');
  860.                 \$('#Passworduser').css('border', '1px solid red');
  861.                 \$testDeCreation4 = false;
  862.             } else {
  863.                 \$('#Passworduser').removeClass('is-invalid');
  864.                 \$('#Passworduser').addClass('is-valid');
  865.                
  866.                 \$('#Passworduser').css('border', '1px solid green');
  867.                 Passworduser = \$('#Passworduser').val();
  868.                 \$testDeCreation4 = true;
  870.             }
  871.             
  872.             var sms = 0; var mailnotif = 0;
  873.             if (\$(\"#smsInput\").is(':checked')) {
  874.                 var sms = 1;
  875.             }
  876.             if (\$(\"#mailInput\").is(':checked')){
  877.                 var mailnotif = 1;
  878.             }
  879.            
  880.             \$_data = {
  881.                 'nomparent': nomparent,
  882.                 'prenomparent': prenomparent,
  883.                 'mailprent': mail,
  884.                 'numtel': num,
  885.                 'passwordparent': Passworduser,
  886.                 'confirmpassword':confirmpassword,
  887.                 'sms': sms,
  888.                 'mailnotif': mailnotif
  889.             }
  890.              console.log(\$_data);
  891.             if (\$testDeCreation &&  \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  892.              
  893.          
  894.                 \$.ajax({
  895.                     type: \"POST\",
  896.                     url: parent_register,
  897.                     data: \$_data,
  898.                     success: function (\$response) {
  899.                         console.log(\$response);
  900.                         // Masquer le loader quelle que soit la réponse
  901.                         \$('#registerLoader').css('display', 'none');
  902.                         // Annuler le timeout puisque la requête est terminée
  903.                         clearTimeout(loaderTimeout);
  904.                         
  905.                         if (\$response == 'eror') {
  906.                         
  907.                             \$('#mail').css('border-color', 'red');
  908.                             \$('#eroor').css('display', 'block');
  909.                             // Afficher une alerte SweetAlert pour l'email déjà utilisé avec boutons d'action
  910.                             Swal.fire({
  911.                                 icon: 'error',
  912.                                 title: 'Email déjà utilisé',
  913.                                 text: 'Cette adresse email est déjà associée à un compte.',
  914.                                 footer: '<a href=\"";
  915.         // line 715
  916.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  917.         yield "\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  918.                                 showCancelButton: true,
  919.                                 confirmButtonText: 'Se connecter',
  920.                                 cancelButtonText: 'Modifier',
  921.                                 confirmButtonColor: '#41a2aa',
  922.                                 cancelButtonColor: '#f09e7a',
  923.                                 position: 'center'
  924.                             }).then((result) => {
  925.                                 if (result.isConfirmed) {
  926.                                     // Basculer vers le formulaire de connexion et pré-remplir l'email
  927.                                     AffichDivConnexion();
  928.                                     \$('#inputEmail').val(\$('#mail').val());
  929.                                     \$('#inputPassword').focus();
  930.                                 }
  931.                             });
  933.                         }
  934.                         else if(\$response == 'erorpasswordconfirm')
  935.                         {
  936.                              
  937.                               \$('#Passworduser2').css('border-color', 'red');
  938.                                 Swal.fire({
  939.                                 icon: 'error',
  940.                                 title: 'Oups..!',
  941.                                 text: 'Les mots de passe ne se correspondent pas.',
  942.                                 footer: '',
  943.                                 position: 'center'
  944.                             })
  946.                         }
  947.                     
  948.                          else {
  949.                               
  950.                           
  951.                             \$(\"#showOkInscription\").trigger('click');
  952.                             
  953.                             // Réinitialiser tous les champs du formulaire
  954.                             resetForm();
  955.                             
  956.                             // S'assurer que le modal est bien centré
  957.                             \$('#exampleModal').on('shown.bs.modal', function () {
  958.                                 \$(this).find('.modal-dialog').css({
  959.                                     'margin-top': function () {
  960.                                         return (\$(window).height() - \$(this).height()) / 2;
  961.                                     }
  962.                                 });
  963.                             });
  964.                               var windowWidth = document.documentElement.clientWidth;
  965.                                 if (windowWidth <= 560) {
  966.                                     setTimeout(function(){
  967.                                        
  968.                                    location.reload();
  969.                               },500);
  970.                               
  971.                            }
  972.                               
  973.                             
  974.                         }
  977.                     },
  978.                     error: function() {
  979.                         // Masquer le loader en cas d'erreur
  980.                         \$('#registerLoader').css('display', 'none');
  981.                         // Annuler le timeout puisque la requête est terminée
  982.                         clearTimeout(loaderTimeout);
  983.                         
  984.                         // Afficher un message d'erreur
  985.                         Swal.fire({
  986.                             icon: 'error',
  987.                             title: 'Erreur de connexion',
  988.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  989.                             confirmButtonColor: '#f09e7a',
  990.                             position: 'center'
  991.                         });
  992.                     }
  993.                 })
  995.             } else {
  996.                 // Masquer le loader si la validation échoue
  997.                 \$('#registerLoader').css('display', 'none');
  998.                 // Annuler le timeout puisque la validation a échoué
  999.                 clearTimeout(loaderTimeout);
  1000.             }
  1002.         }
  1004.         function AffichDivConnexion() {
  1005.     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  1006.     \$(\"#connexionDiv\").css(\"display\", \"block\");
  1007. }
  1009. function AffichDivInscri() {
  1010.     \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1011.     \$(\"#connexionDiv\").css(\"display\", \"none\");
  1012. }
  1014. // Function to handle responsive behavior based on window width
  1015. function handleResponsiveFormDisplay() {
  1016.     var windowWidth = \$(window).width();
  1017.     
  1018.     if (windowWidth <= 1024) {
  1019.         // Apply mobile-like behavior for tablets/smaller screens
  1020.         // Show only one form at a time with toggle buttons
  1021.         \$(\"#connexionDiv\").css(\"display\", \"none\");
  1022.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1023.         \$(\".circleCree\").css(\"display\", \"block\");
  1024.     } else {
  1025.         // For desktop, show both forms side by side
  1026.         \$(\"#connexionDiv\").css(\"display\", \"block\");
  1027.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1028.         \$(\".circleCree\").css(\"display\", \"none\");
  1029.     }
  1030. }
  1032. // Run on page load
  1033. \$(document).ready(function() {
  1034.     handleResponsiveFormDisplay();
  1035.     
  1036.     // Also run when window is resized
  1037.     \$(window).resize(function() {
  1038.         handleResponsiveFormDisplay();
  1039.     });
  1040.     
  1041.     // Configuration pour le passage automatique au champ suivant
  1042.     setupAutoNextField();
  1043.     
  1044.     // Ajouter la validation en temps réel pour tous les champs
  1045.     setupRealtimeValidation();
  1046. });
  1048. // Fonction pour configurer le passage automatique au champ suivant
  1049. function setupAutoNextField() {
  1050.     // Ordre des champs dans le formulaire d'inscription
  1051.     const formFields = [
  1052.         'nomparent',
  1053.         'prenomparent',
  1054.         'mail',
  1055.         'Passworduser',
  1056.         'Passworduser2',
  1057.         'num'
  1058.     ];
  1059.     
  1060.     // Pour chaque champ, ajouter des événements pour la navigation
  1061.     formFields.forEach((field, index) => {
  1062.         if (index < formFields.length - 1) {
  1063.             const \$currentField = \$('#' + field);
  1064.             let typingTimer; // Timer pour détecter quand l'utilisateur arrête de taper
  1065.             const doneTypingInterval = 1500; // Temps en ms après lequel on considère que l'utilisateur a fini de taper
  1066.             
  1067.             // Événement lorsque l'utilisateur tape
  1068.             \$currentField.on('input', function() {
  1069.                 clearTimeout(typingTimer);
  1070.                 
  1071.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  1072.                 if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1073.                     event.preventDefault(); // Empêcher l'espace d'être ajouté
  1074.                     \$('#' + formFields[index + 1]).focus();
  1075.                     return;
  1076.                 }
  1077.                 
  1078.                 // Démarrer un nouveau timer
  1079.                 if (\$(this).val()) {
  1080.                     typingTimer = setTimeout(function() {
  1081.                         // Vérifier si le champ est valide
  1082.                         if (isFieldValid(field, \$currentField.val().trim())) {
  1083.                             \$('#' + formFields[index + 1]).focus();
  1084.                         }
  1085.                     }, doneTypingInterval);
  1086.                 }
  1087.             });
  1088.             
  1089.             // Réinitialiser le timer si l'utilisateur continue de taper
  1090.             \$currentField.on('keydown', function(e) {
  1091.                 clearTimeout(typingTimer);
  1092.                 
  1093.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  1094.                 if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1095.                     e.preventDefault(); // Empêcher l'espace d'être ajouté
  1096.                     \$('#' + formFields[index + 1]).focus();
  1097.                     return;
  1098.                 }
  1099.                 
  1100.                 // Si l'utilisateur appuie sur Tab ou Entrée
  1101.                 if (e.key === 'Tab' && !e.shiftKey) {
  1102.                     // Laisser le comportement par défaut de Tab
  1103.                     return true;
  1104.                 }
  1105.                 
  1106.                 if (e.key === 'Enter') {
  1107.                     e.preventDefault(); // Empêcher la soumission du formulaire
  1108.                     \$('#' + formFields[index + 1]).focus();
  1109.                 }
  1110.             });
  1111.             
  1112.             // Événement lorsque le champ perd le focus
  1113.             \$currentField.on('blur', function() {
  1114.                 clearTimeout(typingTimer);
  1115.             });
  1116.         }
  1117.     });
  1118.     
  1119.     // Pour le dernier champ, la touche Enter déclenche l'inscription
  1120.     \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  1121.         if (e.key === 'Enter') {
  1122.             e.preventDefault();
  1123.             cp(); // Fonction d'inscription
  1124.         }
  1125.     });
  1126. }
  1128. // Fonction pour vérifier si un champ est valide selon son type
  1129. function isFieldValid(fieldId, value) {
  1130.     switch(fieldId) {
  1131.         case 'mail':
  1132.             const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1133.             return emailRegex.test(value);
  1134.         case 'Passworduser':
  1135.             // Minimum 6 caractères pour un mot de passe
  1136.             return value.length >= 6;
  1137.         case 'Passworduser2':
  1138.             // Doit correspondre au mot de passe et avoir au moins 6 caractères
  1139.             return value === \$('#Passworduser').val() && value.length >= 6;
  1140.         case 'num':
  1141.             // Numéro de téléphone: doit contenir uniquement des chiffres et avoir au moins 8 caractères
  1142.             const phoneRegex = /^[0-9]{8,}\$/;
  1143.             return phoneRegex.test(value.replace(/\\s+/g, '')); // Enlever les espaces avant de tester
  1144.         case 'nomparent':
  1145.         case 'prenomparent':
  1146.             // Nom et prénom: au moins 2 caractères, pas de chiffres
  1147.             const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  1148.             return nameRegex.test(value);
  1149.         default:
  1150.             return value.length >= 2;
  1151.     }
  1152. }
  1154.     </script>
  1155.    
  1157.     <script>
  1158.         function hideshow() {
  1159.             document.getElementById(\"btnn\").disabled = true;
  1160.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  1161.             \$(\"#mdpobli\").css(\"display\", \"none\");
  1162.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  1163.         }
  1164.     </script>
  1165.        <script>
  1166.     function closeModale(){
  1167.     \$(\"#monModalInscription\").modal('hide');
  1169.      }
  1170.    // \$(\".masktelph\").inputmask({\"mask\": \"9999999999\"});
  1171.    </script>
  1172.    <script>
  1173.     /**
  1174.      * this code is used to toggle the password
  1175.      */ 
  1176.     \$(\".toggle-password\").click(function() {
  1178. \$(this).toggleClass(\"fa-eye fa-eye-slash\");
  1179. var input = \$(\$(this).attr(\"toggle\"));
  1180. if (input.attr(\"type\") == \"password\") {
  1181.   input.attr(\"type\", \"text\");
  1182. } else {
  1183.   input.attr(\"type\", \"password\");
  1184. }
  1185. });
  1188. \$(document).ready(function(){
  1189.             \$('[data-toggle=\"tooltip\"]').tooltip({
  1190.                 trigger: 'manual',
  1191.                 html: true,
  1192.                 template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  1193.             });
  1195.             function validateEmail(email) {
  1196.                 const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1197.                 return re.test(String(email).toLowerCase());
  1198.             }
  1200.             \$('#mail').on('input', function() {
  1201.                 var emailInput = \$(this);
  1202.                 if (validateEmail(emailInput.val())) {
  1203.                     emailInput.removeClass('is-invalid');
  1204.                     emailInput.addClass('is-valid');
  1205.                     emailInput.tooltip('dispose');
  1206.                     \$('#notification').hide();
  1207.                     \$('#submitBtn').prop('disabled', false);
  1208.                     
  1209.                     // Ne pas passer automatiquement au champ suivant ici,
  1210.                     // car c'est déjà géré par setupAutoNextField()
  1211.                 } else {
  1212.                     emailInput.removeClass('is-valid');
  1213.                     emailInput.addClass('is-invalid');
  1214.                     
  1215.                     // Afficher le tooltip seulement si l'utilisateur a commencé à saisir
  1216.                     if (emailInput.val().length > 3) {
  1217.                         emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  1218.                         if (emailInput.val().length > 0) {
  1219.                             \$('#notification').show();
  1220.                         }
  1221.                     } else {
  1222.                         \$('#notification').hide();
  1223.                     }
  1224.                     \$('#submitBtn').prop('disabled', false);
  1225.                 }
  1226.             });
  1227.         });
  1228. </script>
  1230. // Fonction pour configurer la validation en temps réel
  1231. function setupRealtimeValidation() {
  1232.     const formFields = [
  1233.         'nomparent',
  1234.         'prenomparent',
  1235.         'mail',
  1236.         'Passworduser',
  1237.         'Passworduser2',
  1238.         'num'
  1239.     ];
  1240.     
  1241.     formFields.forEach(field => {
  1242.         \$('#' + field).on('input', function() {
  1243.             const value = \$(this).val();
  1244.             
  1245.             // Ne pas afficher d'erreur tant que l'utilisateur n'a pas commencé à saisir
  1246.             if (value.length === 0) {
  1247.                 \$(this).removeClass('is-valid is-invalid');
  1248.                 \$(this).css('border', '1px solid #ced4da'); // Couleur de bordure par défaut
  1249.                 return;
  1250.             }
  1251.             
  1252.             // Vérifier la validité du champ
  1253.             if (isFieldValid(field, value)) {
  1254.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  1255.                 \$(this).css('border', '1px solid #28a745'); // Vert pour valide
  1256.             } else {
  1257.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  1258.                 \$(this).css('border', '1px solid #dc3545'); // Rouge pour invalide
  1259.             }
  1260.         });
  1261.     });
  1262. }
  1264. // Fonction pour réinitialiser le formulaire
  1265. function resetForm() {
  1266.     \$('#nomparent').css('border','1px solid #41a2aa');
  1267.     \$('#nomparent').removeClass('is-valid'); 
  1268.     \$('#nomparent').removeClass('is-invalid'); 
  1269.     \$('#nomparent').val(''); 
  1270.     \$('#prenomparent').css('border','1px solid #41a2aa');
  1271.     \$('#prenomparent').removeClass('is-valid'); 
  1272.     \$('#prenomparent').removeClass('is-invalid'); 
  1273.     \$('#prenomparent').val(''); 
  1274.     \$('#mail').css('border','1px solid #41a2aa');
  1275.     \$('#mail').removeClass('is-valid'); 
  1276.     \$('#mail').removeClass('is-invalid'); 
  1277.     \$('#mail').val(''); 
  1278.     \$('#eroor').css('display','none');
  1279.     \$('#num').css('border','1px solid #41a2aa');
  1280.     \$('#num').removeClass('is-valid'); 
  1281.     \$('#num').removeClass('is-invalid'); 
  1282.     \$('#num').val(''); 
  1283.     \$('#Passworduser').css('border','1px solid #41a2aa');
  1284.     \$('#Passworduser').removeClass('is-valid'); 
  1285.     \$('#Passworduser').removeClass('is-invalid');
  1286.     \$('#Passworduser').val('');  
  1287.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  1288.     \$('#Passworduser2').removeClass('is-valid'); 
  1289.     \$('#Passworduser2').removeClass('is-invalid'); 
  1290.     \$('#Passworduser2').val(''); 
  1291.     \$(\"#smsInput\").prop(\"checked\",false);
  1292.     \$(\"#mailInput\").prop(\"checked\",false);
  1293. }
  1295. ";
  1296.         
  1297.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1299.         
  1300.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1302.         yield from [];
  1303.     }
  1305.     /**
  1306.      * @codeCoverageIgnore
  1307.      */
  1308.     public function getTemplateName(): string
  1309.     {
  1310.         return "Parent/LoginParent.html.twig";
  1311.     }
  1313.     /**
  1314.      * @codeCoverageIgnore
  1315.      */
  1316.     public function isTraitable(): bool
  1317.     {
  1318.         return false;
  1319.     }
  1321.     /**
  1322.      * @codeCoverageIgnore
  1323.      */
  1324.     public function getDebugInfo(): array
  1325.     {
  1326.         return array (  916 => 715,  782 => 584,  663 => 468,  659 => 467,  654 => 464,  641 => 463,  625 => 456,  615 => 449,  592 => 429,  588 => 428,  578 => 421,  574 => 420,  568 => 417,  556 => 408,  547 => 402,  543 => 400,  537 => 398,  535 => 397,  509 => 374,  505 => 373,  497 => 368,  493 => 367,  456 => 333,  406 => 286,  394 => 277,  380 => 266,  348 => 237,  319 => 210,  306 => 209,  99 => 11,  95 => 10,  88 => 6,  84 => 5,  78 => 3,  65 => 2,  42 => 1,);
  1327.     }
  1329.     public function getSourceContext(): Source
  1330.     {
  1331.         return new Source("{% extends '/Accueil/layoutAccueilParents.html.twig' %}
  1332. {% block LinksCss %}
  1333.     {{ parent() }}
  1335.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/login.css'}}\" >
  1336.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/premiercnx.css'}}\">
  1337.     <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  1338.      <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">
  1340.  <link href=\"{{ asset ('css/bootstrap-social.css')}}\" type=\"text/css\" rel=\"stylesheet\" >
  1341.  <link rel=\"stylesheet\" href=\"{{ asset('css/splide.min.css') }}\">
  1343. <style>
  1344.     .titleProdbienvenu {
  1345.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  1346. }
  1348. /* Style pour le bouton de retour en haut */
  1349. .scroll-top-btn {
  1350.     position: fixed;
  1351.     bottom: 20px;
  1352.     right: 20px;
  1353.     width: 40px;
  1354.     height: 40px;
  1355.     border-radius: 50%;
  1356.     background-color: #41a2aa;
  1357.     color: white;
  1358.     border: none;
  1359.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  1360.     z-index: 1000;
  1361.     display: none;
  1362.     cursor: pointer;
  1363.     transition: all 0.3s ease;
  1364. }
  1366. .scroll-top-btn:hover {
  1367.     background-color: #f09e7a;
  1368.     transform: translateY(-3px);
  1369. }
  1371. /* Styles pour le loader d'inscription */
  1372. .register-loader {
  1373.     position: fixed;
  1374.     top: 0;
  1375.     left: 0;
  1376.     width: 100%;
  1377.     height: 100%;
  1378.     background-color: rgba(255, 255, 255, 0.9);
  1379.     z-index: 9999;
  1380.     display: none;
  1381.     justify-content: center;
  1382.     align-items: center;
  1383. }
  1385. .loader-content {
  1386.     text-align: center;
  1387.     background-color: white;
  1388.     padding: 30px;
  1389.     border-radius: 10px;
  1390.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1391.     max-width: 350px;
  1392.     width: 90%;
  1393. }
  1395. .loader-message {
  1396.     margin-top: 20px;
  1397.     font-size: 18px;
  1398.     font-weight: bold;
  1399.     color: #41a2aa;
  1400. }
  1402. .loader-submessage {
  1403.     margin-top: 10px;
  1404.     font-size: 14px;
  1405.     color: #666;
  1406. }
  1408. .spinner-border {
  1409.     width: 3rem;
  1410.     height: 3rem;
  1411.     color: #f09e7a !important;
  1412. }
  1414. /* Styles pour le modal de confirmation */
  1415. .modal {
  1416.     display: flex;
  1417.     align-items: center;
  1418.     justify-content: center;
  1419. }
  1421. .modal-dialog {
  1422.     margin: 0 auto;
  1423.     max-width: 500px;
  1424.     width: 90%;
  1425. }
  1427. .modal-content {
  1428.     border-radius: 10px;
  1429.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  1430.     margin: 0 auto;
  1431. }
  1433. .modal-body {
  1434.     padding: 30px 20px;
  1435. }
  1437. .modal-footer {
  1438.     justify-content: center;
  1439.     padding: 15px;
  1440. }
  1442. .circleModal {
  1443.     background-color: #f09e7a;
  1444.     color: white;
  1445.     border: none;
  1446.     border-radius: 5px;
  1447.     padding: 10px 30px;
  1448.     font-weight: bold;
  1449.     transition: all 0.3s ease;
  1450. }
  1452. .circleModal:hover {
  1453.     background-color: #e8865e;
  1454.     transform: translateY(-2px);
  1455. }
  1457. /* Animation pour le passage au champ suivant */
  1458. .field-complete {
  1459.     transition: all 0.3s ease;
  1460.     border-color: #41a2aa !important;
  1461.     box-shadow: 0 0 5px rgba(65, 162, 170, 0.5) !important;
  1462.     transform: translateY(-2px);
  1463. }
  1465. .form-control:focus {
  1466.     border-color: #f09e7a !important;
  1467.     box-shadow: 0 0 6px rgba(240, 158, 122, 0.5) !important;
  1468.     transition: all 0.3s ease;
  1469. }
  1471. /* Hide one form by default at 1024px and below */
  1472. @media screen and (max-width: 1360px) {
  1473.     #connexionDiv, #inscriptionDiv {
  1474.         width: 80% !important;
  1475.         margin: 0 auto !important;
  1476.         float: none !important;
  1477.         margin-left: 10% !important;
  1478.     }
  1479.     
  1480.     /* Initially hide the connection form */
  1481.     #connexionDiv {
  1482.         display: none;
  1483.     }
  1484.     
  1485.     /* Make the inscription form take full width */
  1486.     #inscriptionDiv {
  1487.         display: block;
  1488.     }
  1489.     
  1490.     /* Hide the OR separator at 1024px */
  1491.     .ou-container {
  1492.         display: none;
  1493.     }
  1494.     
  1495.     /* Make the buttons more prominent for form switching */
  1496.     .circleCree {
  1497.         display: block !important;
  1498.         width: 100% !important;
  1499.         margin: 15px auto !important;
  1500.         padding: 10px !important;
  1501.         background-color: #41a2aa !important;
  1502.         color: white !important;
  1503.         border-radius: 5px !important;
  1504.         border: none !important;
  1505.         cursor: pointer !important;
  1506.         text-align: center !important;
  1507.         font-weight: bold !important;
  1508.     }
  1509.     
  1510.     /* Adjust column widths */
  1511.     .col-md-5, .col-sm-5, .col-lg-5 {
  1512.         width: 100% !important;
  1513.         max-width: 100% !important;
  1514.         flex: 0 0 100% !important;
  1515.     }
  1516.     
  1517.     /* Hide the middle column with the separator */
  1518.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  1519.         display: none !important;
  1520.     }
  1521. }
  1523. /* Maintain desktop layout above 1024px */
  1524. @media screen and (min-width: 1360px) {
  1525.     #connexionDiv, #inscriptionDiv {
  1526.         display: block !important;
  1527.     }
  1528.     
  1529.     .circleCree {
  1530.         display: none !important;
  1531.     }
  1532. }
  1535. </style>
  1536. {% endblock %}
  1539. {% block Content %}
  1541.   <!-- Bouton pour remonter en haut de la page -->
  1542.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  1543.     <i class=\"fa fa-arrow-up\"></i>
  1544.   </button>
  1546.   <!-- Loader pour l'inscription -->
  1547.   <div id=\"registerLoader\" class=\"register-loader\">
  1548.     <div class=\"loader-content\">
  1549.       <div class=\"spinner-border text-primary\" role=\"status\">
  1550.         <span class=\"sr-only\">Chargement...</span>
  1551.       </div>
  1552.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  1553.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  1554.     </div>
  1555.   </div>
  1557.   <!-- Modal de confirmation - avec l'attribut aria-hidden=\"true\" pour s'assurer qu'il est caché par défaut -->
  1558.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  1559.         <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  1560.             <div class=\"modal-content\">
  1561.                 <div class=\"modal-header\" style=\"border-bottom: none; padding-bottom: 0;\">
  1562.                     <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" style=\"position: absolute; right: 15px; top: 15px;\">
  1563.                         <span aria-hidden=\"true\">&times;</span>
  1564.                     </button>
  1565.                 </div>
  1566.                 <div class=\"modal-body text-center\">
  1567.                     <img class=\"imageLogo2 mb-3\" src=\"{{ asset ('Accueil/imagesAccueil/logoHeader.svg')}}\" alt=\"Logo 5 sur 5 séjour\">
  1569.                     <div class=\"row mb-4\">
  1570.                         <div class=\"col-12\">
  1571.                             <h4 class=\"font-weight-bold text-success\">Merci pour votre inscription à 5sur5sejour.com !</h4>
  1572.                             <p class=\"mt-3\">Vous allez recevoir un mail de confirmation afin d'accéder au site</p>
  1573.                         </div>
  1574.                     </div>
  1575.                 </div>
  1576.                 <div class=\"modal-footer\" style=\"border-top: none;\">
  1577.                     <button class=\"circleModal\" data-dismiss=\"modal\" onclick=\"location.reload();\" style=\"margin: 0 auto; padding: 10px 40px; font-size: 16px;\">OK</button>
  1578.                 </div>
  1579.             </div>
  1580.         </div>
  1581.     </div>
  1584.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  1585.         <div class=\"splide__track\">
  1586.             <ul class=\"splide__list\">
  1587.                 <!-- Slide 1 -->
  1588.               
  1589.                 <!-- Slide 2 -->
  1590.                 <li class=\"splide__slide\">
  1591.                     <div class=\"slider-content\">
  1592.                         <div class=\"namePRD\" style=\"display: block;\">
  1593.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  1594.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  1595.                           </div>
  1596.                         <img src=\"{{ asset('/images/3.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  1597.                     </div>
  1598.                 </li>
  1599.                   <li class=\"splide__slide\">
  1600.                     <div class=\"slider-content\">
  1601.                         <div class=\"namePRD\" style=\"display: block;\">
  1602.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  1603.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  1604.                           </div>
  1605.                       
  1606.                         
  1607.                         <img src=\"{{ asset('/images/2.png') }}\" class=\"imgslider\" alt=\"Image 1\" />
  1608.                     </div>
  1609.                 </li>
  1610.                 <li class=\"splide__slide\">
  1611.                     <div class=\"slider-content\">
  1612.                         <div class=\"namePRD\" style=\"display: block;\">
  1613.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  1614.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  1615.                           </div>
  1616.                         <img src=\"{{ asset('/images/1.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  1617.                     </div>
  1618.                 </li>
  1619.             </ul>
  1620.         </div>
  1621.     </div>
  1623.     <div class='row no-margin' style=\"padding-top:4%\">
  1625.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  1626.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  1627.          
  1628.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  1629.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  1630.         En savoir plus
  1631.         </button>
  1635.         
  1636.           
  1638.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  1640.   
  1642.                 
  1643.                
  1644.                 <div class=\"col-md-5 col-sm-5 col-lg-5  Inscription \" id='inscriptionDiv'>
  1647.                    
  1648.                     <form class =\"form-section\" id=\"create\" onsubmit=\"cp(); return false;\">
  1649.                         <div class=\"soutitle\"> Créer un compte   </div>
  1650.                     <div class =\"description2\" > Vous vous connectez pour la 1ère fois et n'avez pas
  1651.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  1652.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  1654.                         <div class=\"form-group\">
  1657.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\"  placeholder=\"NOM * \" >
  1658.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\"  placeholder=\"PRENOM *\">
  1659.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  1660.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\"  class=\"form-control\"  placeholder=\"MOT DE PASSE  * \">
  1661.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\"  class=\"form-control\"  placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  1662.                             
  1663.                             <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>
  1665.                             <input type=\"text\" class=\"form-control\" id=\"num\"  name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  1666.                                
  1667.   
  1668.                                         <div class=\"row no-margin \">
  1669.                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  1670.             </div>
  1671.             <br>
  1672.             <div class=\"row no-margin\">
  1674.                 <div class=\"box-1\" id=\"smsToggle\">
  1675.                     <input type='checkbox' name =\"sms\" id =\"smsInput\"  />
  1676.                     <span class=\"toogle\"> </span>
  1677.                 </div>
  1678.                 <span class=\"sms\"> Par SMS </span>
  1680.                 <div class=\"box-1\">
  1681.                     <input type='checkbox' name =\"mail\" id =\"mailInput\"   />
  1682.                     <span class=\"toogle\" > </span>
  1683.                 </div>
  1684.                 <span class=\"mail\"> Par Mail </span>
  1685.             </div>
  1686.             
  1687.                         </div>
  1688.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  1689.                         <div class=\"button-container\">
  1690.                         <button  type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a;    position: relative;
  1691.         background-color: #f09e7a;\" id=\"submitBtn\">     
  1692.             S'inscrire
  1693.           </button></div>
  1695.           
  1696.           <div class=\"button-container mobilesocial\">
  1697.             <a href=\"{{ path('connect_google_start') }}\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  1698.          <img src=\"{{ asset('/images/icons-google.png') }}\"  >Continuer avec Google
  1699.        </a>
  1700.                        
  1701.      </div>
  1702.      <div class=\"mobilesocial\" >                  
  1703.                     <a href=\"{{ path('connect_facebook_start') }}\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  1704.                      <img src=\"{{ asset('/images/icons-facebook.png') }}\"  >         Continuer avec Facebook
  1705.        </a>
  1706.            </div>        
  1707.         </form>
  1708.                 </div>
  1711.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1  \" ><div class=\"ou-container\" style=\"margin-left: 20%;\">
  1712.                     <div class=\"ou-line\"></div>
  1713.                     <div class=\"ou-text\">OU</div>
  1714.                   </div> </div>
  1715.                 <div class=\"col-md-5 col-sm-5 col-lg-5 col-xs-5 connexion \" id='connexionDiv' >
  1716.                  
  1717.                
  1720.                     <div class=\"form-section\">
  1721.                         <div class=\"soutitle\">  Se connecter </div>
  1722.                         <div class =\"description2\" >Vous avez déja un compte Parent(s) « 5 sur 5 séjour »  </div>
  1723.                         <button type=\"button\"  align =\"center\" class=\"circleCree\"  onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  1726.                         <form method=\"post\" class=\"\">
  1727.                             {% if error %}
  1728.                                 <div class=\"alert alert-danger\">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  1729.                             {% endif %}
  1730.                             <div class=\"form-group\">
  1732.                                 <input type=\"text\"  name=\"email\" id=\"inputEmail\"  value=\"{{ last_username }}\"  class=\"form-control\" placeholder=\"Mon identifiant  * \" >
  1733.                             <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\">
  1734.                             <span toggle=\"#inputPassword\" class=\"fa fa-fw fa-eye field-icon toggle-password\"></span>
  1736.             
  1737.                                 
  1738.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  1739.                                 <div class=\"button-container\">
  1740.                                     <button   class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" >
  1741.              Se connecter 
  1742.           </button>
  1743.         
  1744.                             </div>
  1746.                               
  1747.                             <div class =\"description\" > <a id=\"mdpobli\" href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ?  </a> </div>
  1749.                             <div class=\"button-container\">
  1750.                <a href=\"{{ path('connect_google_start') }}\"  style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  1751.             <img src=\"{{ asset('/images/icons-google.png') }}\"  >Continuer avec Google
  1752.           </a>
  1753.                           
  1754.         </div>
  1755.         <div class=\"button-c\" style=\"display: flex;
  1756.         justify-content: center;
  1757.         align-items: center;\">                  
  1758.                        <a href=\"{{ path('connect_facebook_start') }}\"  class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  1759.                         <img src=\"{{ asset('/images/icons-facebook.png') }}\"  >         Continuer avec Facebook
  1760.           </a>
  1761.               </div>        
  1762.         
  1763.                             
  1764.                                 <br>
  1765.                                 <br>
  1767.                                 
  1768.                             </div>
  1769.                         </form>
  1770.                     
  1771.                     </div>
  1772.                 </div>
  1773.                    
  1775.         </div>
  1776.       
  1777.     </div>
  1778.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  1779.    <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']);\">
  1780.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  1781.           </a>
  1782.           
  1783.                           
  1784.                                 <br>
  1785.                                    <br>
  1786.                        <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)\" >
  1787.             <span class=\"fa fa-facebook\"></span>  S'inscrire avec Facebook
  1788.           </a></div>
  1789.             </div>
  1790. {% endblock %}
  1793. {% block javascript %}
  1794.    
  1795.    
  1797.     {{ parent() }}
  1798.   <script src=\"{{ asset('js/splide.min.js') }}\"></script>
  1799.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  1800.     
  1801.     <script>
  1802.         document.addEventListener('DOMContentLoaded', function () {
  1803.     // S'assurer que le modal est caché au chargement de la page
  1804.     \$('#exampleModal').modal('hide');
  1805.     \$('#exampleModal').removeClass('show');
  1806.     \$('#exampleModal').attr('aria-hidden', 'true');
  1807.     \$('body').removeClass('modal-open');
  1808.     \$('.modal-backdrop').remove();
  1809.     
  1810.     // Gestion du bouton de retour en haut
  1811.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  1812.     
  1813.     // Afficher/masquer le bouton en fonction du défilement
  1814.     window.addEventListener('scroll', function() {
  1815.         if (window.pageYOffset > 300) {
  1816.             scrollTopBtn.style.display = 'block';
  1817.         } else {
  1818.             scrollTopBtn.style.display = 'none';
  1819.         }
  1820.     });
  1821.     
  1822.     // Action de clic sur le bouton
  1823.     scrollTopBtn.addEventListener('click', function() {
  1824.         window.scrollTo({
  1825.             top: 0,
  1826.             behavior: 'smooth'
  1827.         });
  1828.     });
  1829.     
  1830.     // Initialisation du carrousel Splide
  1831.     var splide = new Splide('#imageSlider', {
  1832.         type: 'loop',
  1833.         perPage: 1,
  1834.         autoplay: true,
  1835.         interval: 6000,
  1836.         pauseOnHover: false,
  1837.         pauseOnFocus: false,
  1838.          pagination: false , // Désactive la pagination
  1839.          arrows: false  
  1840.     });
  1842.     splide.mount();
  1843.     
  1844.     // Auto-scroll vers les formulaires après 3 secondes
  1845.     setTimeout(function() {
  1846.         scrollToFormSection();
  1847.     }, 5000);
  1849.     // Configuration du modal de confirmation - s'assurer qu'il est bien caché
  1850.     \$('#exampleModal').modal('dispose'); // Supprimer toute initialisation précédente
  1851.     
  1852.     // Réinitialiser le modal
  1853.     \$('#exampleModal').modal({
  1854.         backdrop: 'static',
  1855.         keyboard: false,
  1856.         show: false // S'assurer que le modal ne s'affiche pas automatiquement
  1857.     });
  1858.     
  1859.     // Centrage du modal uniquement lorsqu'il est affiché
  1860.     \$('#exampleModal').on('show.bs.modal', function () {
  1861.         \$(this).css('display', 'flex');
  1862.         \$(this).css('align-items', 'center');
  1863.         \$(this).find('.modal-dialog').css({
  1864.             'display': 'flex',
  1865.             'align-items': 'center',
  1866.             'margin': '0 auto',
  1867.             'max-height': '90vh'
  1868.         });
  1869.     });
  1871.     // Fonction pour faire défiler vers la section des formulaires
  1872.     function scrollToFormSection() {
  1873.         const formSection = document.getElementById('formSection');
  1874.         if (formSection) {
  1875.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  1876.             const headerOffset = 50; // Tenir compte de la hauteur de l'en-tête
  1877.             const scrollPosition = formPosition - headerOffset;
  1878.             
  1879.             // Animation de défilement fluide
  1880.             window.scrollTo({
  1881.                 top: scrollPosition,
  1882.                 behavior: 'smooth'
  1883.             });
  1884.             
  1885.             // Les animations de mise en évidence ont été supprimées
  1886.         }
  1887.     }
  1888. });
  1889.         // Fonction pour afficher le popover automatiquement avec animation
  1890.       
  1891.         function cp() {
  1892.          
  1893.            // Afficher le loader
  1894.            \$('#registerLoader').css('display', 'flex');
  1895.            
  1896.            // Définir un timeout pour masquer le loader après 10 secondes, même si la requête n'est pas terminée
  1897.            var loaderTimeout = setTimeout(function() {
  1898.                \$('#registerLoader').css('display', 'none');
  1899.                Swal.fire({
  1900.                    icon: 'info',
  1901.                    title: 'Inscription en cours',
  1902.                    text: 'Votre inscription est en cours de traitement. Vous recevrez un email de confirmation.',
  1903.                    confirmButtonColor: '#41a2aa',
  1904.                    position: 'center'
  1905.                });
  1906.            }, 10000);
  1907.           
  1908.             var nomparent = \"\";
  1909.             var   prenomparent= \"\";
  1910.             var mail = \"\";
  1911.             var num = \"5555\";
  1912.             console.log(num);
  1913.             var confirmpassword = \$('#Passworduser2').val();
  1914.             var parent_register = \"{{ path('parent_register') }}\";
  1915.             var Passworduser = \"\";
  1916.             \$testDeCreation = false;
  1917.             \$testDeCreation2 = false;
  1918.             \$testDeCreation3 = false;
  1919.             \$testDeCreation4 = false;
  1920.             \$testDeCreation5 = false;
  1921.             if (\$('#nomparent').val() == \"\") {
  1922.                   
  1923.                 \$('#nomparent').addClass('is-invalid');
  1924.                 \$('#nomparent').removeClass('is-valid');
  1925.                 \$('#nomparent').css('border', '1px solid red');
  1926.                 \$testDeCreation = false;
  1927.             } else {
  1928.                 \$('#nomparent').removeClass('is-invalid');
  1929.                 \$('#nomparent').addClass('is-valid');
  1930.                 
  1931.                 \$('#nomparent').css('border', '1px solid green');
  1932.                nomparent = \$('#nomparent').val();
  1933.                 \$testDeCreation = true;
  1935.             }
  1937.             if (\$('#prenomparent').val() == \"\") {
  1938.               
  1939.                 \$('#prenomparent').addClass('is-invalid');
  1940.                 \$('#prenomparent').removeClass('is-valid');
  1941.                 \$('#prenomparent').css('border', '1px solid red');
  1942.                 \$testDeCreation1 = false;
  1943.             } else {
  1944.                 \$('#prenomparent').removeClass('is-invalid');
  1945.                 \$('#prenomparent').addClass('is-valid');
  1946.                
  1947.                 \$('#prenomparent').css('border', '1px solid green');
  1948.                prenomparent = \$('#prenomparent').val();
  1949.                 \$testDeCreation1 = true;
  1951.             }
  1955.             if (\$('#num').val() == \"\") {
  1956.                 \$('#num ').addClass('is-invalid');
  1957.                 \$('#num').removeClass('is-valid');
  1958.                 \$('#num').css('border', '1px solid red');
  1959.                 \$testDeCreation2 = false;
  1960.             } else {
  1961.                 \$('#num').removeClass('is-invalid');
  1962.                 \$('#num').addClass('is-valid');
  1963.                
  1964.                 \$('#num').css('border', '1px solid green');
  1965.                num = \$('#num').val();
  1966.                 \$testDeCreation2 = true;
  1968.             }
  1973.             if (\$('#mail').val() == \"\") {
  1974.                 \$('#mail').addClass('is-invalid');
  1975.                 \$('#mail').removeClass('is-valid');
  1976.                 \$('#mail').css('border', '1px solid red');
  1977.                 \$testDeCreation3 = false;
  1978.             } else {
  1979.                 \$('#mail').removeClass('is-invalid');
  1980.                 \$('#mail').addClass('is-valid');
  1981.                
  1982.                 \$('#mail').css('border', '1px solid green');
  1983.                 mail = \$('#mail').val();
  1984.                 \$testDeCreation3 = true;
  1986.             }
  1988.             if (\$('#Passworduser').val() == \"\") {
  1989.                 \$('#Passworduser').addClass('is-invalid');
  1990.                 \$('#Passworduser').removeClass('is-valid');
  1991.                 \$('#Passworduser').css('border', '1px solid red');
  1992.                 \$testDeCreation4 = false;
  1993.             } else {
  1994.                 \$('#Passworduser').removeClass('is-invalid');
  1995.                 \$('#Passworduser').addClass('is-valid');
  1996.                
  1997.                 \$('#Passworduser').css('border', '1px solid green');
  1998.                 Passworduser = \$('#Passworduser').val();
  1999.                 \$testDeCreation4 = true;
  2001.             }
  2002.             
  2003.             var sms = 0; var mailnotif = 0;
  2004.             if (\$(\"#smsInput\").is(':checked')) {
  2005.                 var sms = 1;
  2006.             }
  2007.             if (\$(\"#mailInput\").is(':checked')){
  2008.                 var mailnotif = 1;
  2009.             }
  2010.            
  2011.             \$_data = {
  2012.                 'nomparent': nomparent,
  2013.                 'prenomparent': prenomparent,
  2014.                 'mailprent': mail,
  2015.                 'numtel': num,
  2016.                 'passwordparent': Passworduser,
  2017.                 'confirmpassword':confirmpassword,
  2018.                 'sms': sms,
  2019.                 'mailnotif': mailnotif
  2020.             }
  2021.              console.log(\$_data);
  2022.             if (\$testDeCreation &&  \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  2023.              
  2024.          
  2025.                 \$.ajax({
  2026.                     type: \"POST\",
  2027.                     url: parent_register,
  2028.                     data: \$_data,
  2029.                     success: function (\$response) {
  2030.                         console.log(\$response);
  2031.                         // Masquer le loader quelle que soit la réponse
  2032.                         \$('#registerLoader').css('display', 'none');
  2033.                         // Annuler le timeout puisque la requête est terminée
  2034.                         clearTimeout(loaderTimeout);
  2035.                         
  2036.                         if (\$response == 'eror') {
  2037.                         
  2038.                             \$('#mail').css('border-color', 'red');
  2039.                             \$('#eroor').css('display', 'block');
  2040.                             // Afficher une alerte SweetAlert pour l'email déjà utilisé avec boutons d'action
  2041.                             Swal.fire({
  2042.                                 icon: 'error',
  2043.                                 title: 'Email déjà utilisé',
  2044.                                 text: 'Cette adresse email est déjà associée à un compte.',
  2045.                                 footer: '<a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  2046.                                 showCancelButton: true,
  2047.                                 confirmButtonText: 'Se connecter',
  2048.                                 cancelButtonText: 'Modifier',
  2049.                                 confirmButtonColor: '#41a2aa',
  2050.                                 cancelButtonColor: '#f09e7a',
  2051.                                 position: 'center'
  2052.                             }).then((result) => {
  2053.                                 if (result.isConfirmed) {
  2054.                                     // Basculer vers le formulaire de connexion et pré-remplir l'email
  2055.                                     AffichDivConnexion();
  2056.                                     \$('#inputEmail').val(\$('#mail').val());
  2057.                                     \$('#inputPassword').focus();
  2058.                                 }
  2059.                             });
  2061.                         }
  2062.                         else if(\$response == 'erorpasswordconfirm')
  2063.                         {
  2064.                              
  2065.                               \$('#Passworduser2').css('border-color', 'red');
  2066.                                 Swal.fire({
  2067.                                 icon: 'error',
  2068.                                 title: 'Oups..!',
  2069.                                 text: 'Les mots de passe ne se correspondent pas.',
  2070.                                 footer: '',
  2071.                                 position: 'center'
  2072.                             })
  2074.                         }
  2075.                     
  2076.                          else {
  2077.                               
  2078.                           
  2079.                             \$(\"#showOkInscription\").trigger('click');
  2080.                             
  2081.                             // Réinitialiser tous les champs du formulaire
  2082.                             resetForm();
  2083.                             
  2084.                             // S'assurer que le modal est bien centré
  2085.                             \$('#exampleModal').on('shown.bs.modal', function () {
  2086.                                 \$(this).find('.modal-dialog').css({
  2087.                                     'margin-top': function () {
  2088.                                         return (\$(window).height() - \$(this).height()) / 2;
  2089.                                     }
  2090.                                 });
  2091.                             });
  2092.                               var windowWidth = document.documentElement.clientWidth;
  2093.                                 if (windowWidth <= 560) {
  2094.                                     setTimeout(function(){
  2095.                                        
  2096.                                    location.reload();
  2097.                               },500);
  2098.                               
  2099.                            }
  2100.                               
  2101.                             
  2102.                         }
  2105.                     },
  2106.                     error: function() {
  2107.                         // Masquer le loader en cas d'erreur
  2108.                         \$('#registerLoader').css('display', 'none');
  2109.                         // Annuler le timeout puisque la requête est terminée
  2110.                         clearTimeout(loaderTimeout);
  2111.                         
  2112.                         // Afficher un message d'erreur
  2113.                         Swal.fire({
  2114.                             icon: 'error',
  2115.                             title: 'Erreur de connexion',
  2116.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  2117.                             confirmButtonColor: '#f09e7a',
  2118.                             position: 'center'
  2119.                         });
  2120.                     }
  2121.                 })
  2123.             } else {
  2124.                 // Masquer le loader si la validation échoue
  2125.                 \$('#registerLoader').css('display', 'none');
  2126.                 // Annuler le timeout puisque la validation a échoué
  2127.                 clearTimeout(loaderTimeout);
  2128.             }
  2130.         }
  2132.         function AffichDivConnexion() {
  2133.     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  2134.     \$(\"#connexionDiv\").css(\"display\", \"block\");
  2135. }
  2137. function AffichDivInscri() {
  2138.     \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2139.     \$(\"#connexionDiv\").css(\"display\", \"none\");
  2140. }
  2142. // Function to handle responsive behavior based on window width
  2143. function handleResponsiveFormDisplay() {
  2144.     var windowWidth = \$(window).width();
  2145.     
  2146.     if (windowWidth <= 1024) {
  2147.         // Apply mobile-like behavior for tablets/smaller screens
  2148.         // Show only one form at a time with toggle buttons
  2149.         \$(\"#connexionDiv\").css(\"display\", \"none\");
  2150.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2151.         \$(\".circleCree\").css(\"display\", \"block\");
  2152.     } else {
  2153.         // For desktop, show both forms side by side
  2154.         \$(\"#connexionDiv\").css(\"display\", \"block\");
  2155.         \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2156.         \$(\".circleCree\").css(\"display\", \"none\");
  2157.     }
  2158. }
  2160. // Run on page load
  2161. \$(document).ready(function() {
  2162.     handleResponsiveFormDisplay();
  2163.     
  2164.     // Also run when window is resized
  2165.     \$(window).resize(function() {
  2166.         handleResponsiveFormDisplay();
  2167.     });
  2168.     
  2169.     // Configuration pour le passage automatique au champ suivant
  2170.     setupAutoNextField();
  2171.     
  2172.     // Ajouter la validation en temps réel pour tous les champs
  2173.     setupRealtimeValidation();
  2174. });
  2176. // Fonction pour configurer le passage automatique au champ suivant
  2177. function setupAutoNextField() {
  2178.     // Ordre des champs dans le formulaire d'inscription
  2179.     const formFields = [
  2180.         'nomparent',
  2181.         'prenomparent',
  2182.         'mail',
  2183.         'Passworduser',
  2184.         'Passworduser2',
  2185.         'num'
  2186.     ];
  2187.     
  2188.     // Pour chaque champ, ajouter des événements pour la navigation
  2189.     formFields.forEach((field, index) => {
  2190.         if (index < formFields.length - 1) {
  2191.             const \$currentField = \$('#' + field);
  2192.             let typingTimer; // Timer pour détecter quand l'utilisateur arrête de taper
  2193.             const doneTypingInterval = 1500; // Temps en ms après lequel on considère que l'utilisateur a fini de taper
  2194.             
  2195.             // Événement lorsque l'utilisateur tape
  2196.             \$currentField.on('input', function() {
  2197.                 clearTimeout(typingTimer);
  2198.                 
  2199.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  2200.                 if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2201.                     event.preventDefault(); // Empêcher l'espace d'être ajouté
  2202.                     \$('#' + formFields[index + 1]).focus();
  2203.                     return;
  2204.                 }
  2205.                 
  2206.                 // Démarrer un nouveau timer
  2207.                 if (\$(this).val()) {
  2208.                     typingTimer = setTimeout(function() {
  2209.                         // Vérifier si le champ est valide
  2210.                         if (isFieldValid(field, \$currentField.val().trim())) {
  2211.                             \$('#' + formFields[index + 1]).focus();
  2212.                         }
  2213.                     }, doneTypingInterval);
  2214.                 }
  2215.             });
  2216.             
  2217.             // Réinitialiser le timer si l'utilisateur continue de taper
  2218.             \$currentField.on('keydown', function(e) {
  2219.                 clearTimeout(typingTimer);
  2220.                 
  2221.                 // Si l'utilisateur appuie sur espace et que le champ est valide
  2222.                 if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2223.                     e.preventDefault(); // Empêcher l'espace d'être ajouté
  2224.                     \$('#' + formFields[index + 1]).focus();
  2225.                     return;
  2226.                 }
  2227.                 
  2228.                 // Si l'utilisateur appuie sur Tab ou Entrée
  2229.                 if (e.key === 'Tab' && !e.shiftKey) {
  2230.                     // Laisser le comportement par défaut de Tab
  2231.                     return true;
  2232.                 }
  2233.                 
  2234.                 if (e.key === 'Enter') {
  2235.                     e.preventDefault(); // Empêcher la soumission du formulaire
  2236.                     \$('#' + formFields[index + 1]).focus();
  2237.                 }
  2238.             });
  2239.             
  2240.             // Événement lorsque le champ perd le focus
  2241.             \$currentField.on('blur', function() {
  2242.                 clearTimeout(typingTimer);
  2243.             });
  2244.         }
  2245.     });
  2246.     
  2247.     // Pour le dernier champ, la touche Enter déclenche l'inscription
  2248.     \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  2249.         if (e.key === 'Enter') {
  2250.             e.preventDefault();
  2251.             cp(); // Fonction d'inscription
  2252.         }
  2253.     });
  2254. }
  2256. // Fonction pour vérifier si un champ est valide selon son type
  2257. function isFieldValid(fieldId, value) {
  2258.     switch(fieldId) {
  2259.         case 'mail':
  2260.             const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2261.             return emailRegex.test(value);
  2262.         case 'Passworduser':
  2263.             // Minimum 6 caractères pour un mot de passe
  2264.             return value.length >= 6;
  2265.         case 'Passworduser2':
  2266.             // Doit correspondre au mot de passe et avoir au moins 6 caractères
  2267.             return value === \$('#Passworduser').val() && value.length >= 6;
  2268.         case 'num':
  2269.             // Numéro de téléphone: doit contenir uniquement des chiffres et avoir au moins 8 caractères
  2270.             const phoneRegex = /^[0-9]{8,}\$/;
  2271.             return phoneRegex.test(value.replace(/\\s+/g, '')); // Enlever les espaces avant de tester
  2272.         case 'nomparent':
  2273.         case 'prenomparent':
  2274.             // Nom et prénom: au moins 2 caractères, pas de chiffres
  2275.             const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  2276.             return nameRegex.test(value);
  2277.         default:
  2278.             return value.length >= 2;
  2279.     }
  2280. }
  2282.     </script>
  2283.    
  2285.     <script>
  2286.         function hideshow() {
  2287.             document.getElementById(\"btnn\").disabled = true;
  2288.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  2289.             \$(\"#mdpobli\").css(\"display\", \"none\");
  2290.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  2291.         }
  2292.     </script>
  2293.        <script>
  2294.     function closeModale(){
  2295.     \$(\"#monModalInscription\").modal('hide');
  2297.      }
  2298.    // \$(\".masktelph\").inputmask({\"mask\": \"9999999999\"});
  2299.    </script>
  2300.    <script>
  2301.     /**
  2302.      * this code is used to toggle the password
  2303.      */ 
  2304.     \$(\".toggle-password\").click(function() {
  2306. \$(this).toggleClass(\"fa-eye fa-eye-slash\");
  2307. var input = \$(\$(this).attr(\"toggle\"));
  2308. if (input.attr(\"type\") == \"password\") {
  2309.   input.attr(\"type\", \"text\");
  2310. } else {
  2311.   input.attr(\"type\", \"password\");
  2312. }
  2313. });
  2316. \$(document).ready(function(){
  2317.             \$('[data-toggle=\"tooltip\"]').tooltip({
  2318.                 trigger: 'manual',
  2319.                 html: true,
  2320.                 template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  2321.             });
  2323.             function validateEmail(email) {
  2324.                 const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2325.                 return re.test(String(email).toLowerCase());
  2326.             }
  2328.             \$('#mail').on('input', function() {
  2329.                 var emailInput = \$(this);
  2330.                 if (validateEmail(emailInput.val())) {
  2331.                     emailInput.removeClass('is-invalid');
  2332.                     emailInput.addClass('is-valid');
  2333.                     emailInput.tooltip('dispose');
  2334.                     \$('#notification').hide();
  2335.                     \$('#submitBtn').prop('disabled', false);
  2336.                     
  2337.                     // Ne pas passer automatiquement au champ suivant ici,
  2338.                     // car c'est déjà géré par setupAutoNextField()
  2339.                 } else {
  2340.                     emailInput.removeClass('is-valid');
  2341.                     emailInput.addClass('is-invalid');
  2342.                     
  2343.                     // Afficher le tooltip seulement si l'utilisateur a commencé à saisir
  2344.                     if (emailInput.val().length > 3) {
  2345.                         emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  2346.                         if (emailInput.val().length > 0) {
  2347.                             \$('#notification').show();
  2348.                         }
  2349.                     } else {
  2350.                         \$('#notification').hide();
  2351.                     }
  2352.                     \$('#submitBtn').prop('disabled', false);
  2353.                 }
  2354.             });
  2355.         });
  2356. </script>
  2358. // Fonction pour configurer la validation en temps réel
  2359. function setupRealtimeValidation() {
  2360.     const formFields = [
  2361.         'nomparent',
  2362.         'prenomparent',
  2363.         'mail',
  2364.         'Passworduser',
  2365.         'Passworduser2',
  2366.         'num'
  2367.     ];
  2368.     
  2369.     formFields.forEach(field => {
  2370.         \$('#' + field).on('input', function() {
  2371.             const value = \$(this).val();
  2372.             
  2373.             // Ne pas afficher d'erreur tant que l'utilisateur n'a pas commencé à saisir
  2374.             if (value.length === 0) {
  2375.                 \$(this).removeClass('is-valid is-invalid');
  2376.                 \$(this).css('border', '1px solid #ced4da'); // Couleur de bordure par défaut
  2377.                 return;
  2378.             }
  2379.             
  2380.             // Vérifier la validité du champ
  2381.             if (isFieldValid(field, value)) {
  2382.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  2383.                 \$(this).css('border', '1px solid #28a745'); // Vert pour valide
  2384.             } else {
  2385.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  2386.                 \$(this).css('border', '1px solid #dc3545'); // Rouge pour invalide
  2387.             }
  2388.         });
  2389.     });
  2390. }
  2392. // Fonction pour réinitialiser le formulaire
  2393. function resetForm() {
  2394.     \$('#nomparent').css('border','1px solid #41a2aa');
  2395.     \$('#nomparent').removeClass('is-valid'); 
  2396.     \$('#nomparent').removeClass('is-invalid'); 
  2397.     \$('#nomparent').val(''); 
  2398.     \$('#prenomparent').css('border','1px solid #41a2aa');
  2399.     \$('#prenomparent').removeClass('is-valid'); 
  2400.     \$('#prenomparent').removeClass('is-invalid'); 
  2401.     \$('#prenomparent').val(''); 
  2402.     \$('#mail').css('border','1px solid #41a2aa');
  2403.     \$('#mail').removeClass('is-valid'); 
  2404.     \$('#mail').removeClass('is-invalid'); 
  2405.     \$('#mail').val(''); 
  2406.     \$('#eroor').css('display','none');
  2407.     \$('#num').css('border','1px solid #41a2aa');
  2408.     \$('#num').removeClass('is-valid'); 
  2409.     \$('#num').removeClass('is-invalid'); 
  2410.     \$('#num').val(''); 
  2411.     \$('#Passworduser').css('border','1px solid #41a2aa');
  2412.     \$('#Passworduser').removeClass('is-valid'); 
  2413.     \$('#Passworduser').removeClass('is-invalid');
  2414.     \$('#Passworduser').val('');  
  2415.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  2416.     \$('#Passworduser2').removeClass('is-valid'); 
  2417.     \$('#Passworduser2').removeClass('is-invalid'); 
  2418.     \$('#Passworduser2').val(''); 
  2419.     \$(\"#smsInput\").prop(\"checked\",false);
  2420.     \$(\"#mailInput\").prop(\"checked\",false);
  2421. }
  2423. {% endblock %}
  2424. ", "Parent/LoginParent.html.twig", "/var/www/5sur5sejour/templates/Parent/LoginParent.html.twig");
  2425.     }
  2426. }