templates/pro/inscription2.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  2.     <link rel="stylesheet" href="/assets/css/pro/inscription-page.css">
  3.     <link rel="stylesheet" href="/assets/css/pro/new-inscription.css">
  4.     <link rel="stylesheet" href="/assets/lib/bootstrap-5.0.2-dist/css/bootstrap.min.css">
  5. {% endblock %}
  7. {% block javascripts %}
  8.     {# {{ encore_entry_script_tags('app') }} #}
  9.     <!--jquery-->
  10.     <script src="/assets/lib/jquery-3.6.0.min.js"></script>
  11.     <script src="/assets/lib/jquery-migrate-3.3.2.min.js"></script>
  12.     <!--bootstrap-->
  13.     <script src="/assets/lib/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
  15.     <!--Material-->
  16.     <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
  17.     <script src="/assets/lib/date.format.js"></script>
  18.     <script src="/assets/js/global.js"></script>
  19.     <script src="/assets/js/pro/payment.js?v=v14"></script>
  20.     <script src="/assets/js/pro/smsverify.js"></script>
  21.     <script src="/assets/lib/jquery.responsiveTabs.js"></script>
  22.     <script src="/assets/js/pro/inscription.js"></script>
  23.     <script src="https://js.stripe.com/v3/"></script>
  24.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRmNV4VerjHHrsOoQOMmRWwpKL_ekzJrc&libraries=geometry,drawing,places&callback=initMap"></script>
  25.     <script type="text/javascript">
  26.         $(document).ready(function () {
  27.             $("#password").on("input", function (event) {
  28.                 const password = document.getElementById("password").value.trim();
  30.                     const hasUpperCase = /[A-Z]/.test(password);
  31.                     const hasNumber = /\d/.test(password); 
  32.                     const hasSpecialChar = /[!@#$%^&*()_\-+=\[\]{};:'"\\|,.<>?/`~_&^%]/.test(password);
  33.                     const hasMinLength = password.length >= 8;
  35. updateRequirement("requirement-uppercase", "bullet-uppercase", hasUpperCase);
  36. updateRequirement("requirement-special-number", "bullet-number", hasNumber);
  37. updateRequirement("requirement-special-char", "bullet-special-char", hasSpecialChar);
  38. updateRequirement("requirement-min-length", "bullet-min-length", hasMinLength);
  39.             });
  40.             $('body').on('click', '#form7 .create-account-button', function (e) {
  41.                 e.preventDefault();
  42.                 validatePayment(e, userData);
  43.             });
  44.         });
  45.     </script>
  46.    
  48.     <script>
  49.         let currentStep = 1;
  50.         let totalSteps = 21;
  51.         let userData = {};
  52.         let imagesData = {};
  53.         let convertedJson = {};
  54.         let StripToken = "";
  55.         let durationAnimation = 3000
  56.         const tarifs = {{ tarifs|json_encode|raw }};
  57.         tarifs.quantity = 1 + tarifs.quantity;
  58.         let finalPriceSub = 0;
  60.         function getUrlParameters() {
  61.             const urlParams = new URLSearchParams(window.location.search);
  62.             urlParams.forEach((value, key) => {
  63.                 userData[key] = value;
  64.             });
  65.         }
  67.         //getUrlParameters();
  68.         
  69.         function setupCardInputs() {
  70.             const cardNumber = document.getElementById('card-number');
  71.             const expiryDate = document.getElementById('expiry-date');
  72.             const cvc = document.getElementById('cvc');
  74.             cardNumber.addEventListener('input', function (e) {
  75.                 let value = this.value.replace(/\D/g, '');
  76.                 this.value = value;
  78.                 if (value.length === 16) {
  79.                     setTimeout(() => expiryDate.focus(), 10);
  80.                 }
  81.             });
  83.             expiryDate.addEventListener('input', function (e) {
  84.                 let value = this.value.replace(/\D/g, '');
  86.                 value = value.substring(0, 4);
  88.                 if (value.length > 2) {
  89.                     this.value = value.substring(0, 2) + '/' + value.substring(2, 4);
  90.                 } else {
  91.                     this.value = value;
  92.                 }
  94.                 if (this.value.length === 5) {
  95.                     setTimeout(() => cvc.focus(), 10);
  96.                 }
  97.             });
  99.             cvc.addEventListener('input', function (e) {
  100.                 let value = this.value.replace(/\D/g, '');
  101.                 this.value = value;
  103.                 if (value.length === 3) {
  104.                     const submitButton = this.closest('form').querySelector('button[type="button"]');
  105.                     if (submitButton) {
  106.                         setTimeout(() => submitButton.focus(), 10);
  107.                     }
  108.                 }
  109.             });
  111.             expiryDate.addEventListener('keydown', function (e) {
  112.                 if (e.key === 'Backspace' && this.value === '') {
  113.                     cardNumber.focus();
  114.                 }
  115.             });
  117.             cvc.addEventListener('keydown', function (e) {
  118.                 if (e.key === 'Backspace' && this.value === '') {
  119.                     expiryDate.focus();
  120.                 }
  121.             });
  122.         }
  124.            function isValidBlob(file) {
  125.                return file instanceof Blob || file instanceof File;
  126.            }
  129.            function base64ToBlob(base64, mimeType) {
  130.                const byteCharacters = atob(base64.split(',')[1]);
  131.                const byteArrays = [];
  133.                  for (let i = 0; i < byteCharacters.length; i += 512) {
  134.                    const slice = byteCharacters.slice(i, i + 512);
  135.                    const byteNumbers = new Array(slice.length);
  136.                    for (let j = 0; j < slice.length; j++) {
  137.                       byteNumbers[j] = slice.charCodeAt(j);
  138.                     }
  139.                    const byteArray = new Uint8Array(byteNumbers);
  140.                    byteArrays.push(byteArray);
  141.                   }
  142.    
  143.                return new Blob(byteArrays, { type: mimeType });
  144.             }
  146.         async function switchForm(step) {
  147.             clearError();
  148.             const progressBar = document.querySelector(".progress-steps .progress");
  149.             if (progressBar) {
  150.                 let newWidth = Math.min(step * 5, 100);
  151.                 progressBar.style.width = `${newWidth}%`;
  152.             }
  154.             for (let i = 0; i <= totalSteps; i++) {
  155.                 document.getElementById("form" + i).style.display = "none";
  156.             }
  158.             document.getElementById("form" + step).style.display = "block";
  160.             if (step === 8) {
  161.                 const img = document.createElement('img');
  162.                 img.id = "welcomeImg";
  163.                 img.src = "/assets/img/pro/fireworks.gif";
  164.                 img.style.width = "400px";
  165.                 const formTitle = document.getElementById("formTitle");
  166.                 const main = formTitle.closest('main');
  167.                 if (main && formTitle) {
  168.                     main.insertBefore(img, formTitle);
  169.                 }
  170.             } else if (step !== 8) {
  171.                 const img = document.getElementById("welcomeImg");
  172.                 if (img) {
  173.                     img.remove();
  174.                 }
  175.             }
  177.             if (step === 10) {
  178.                 const img = document.createElement('img');
  179.                 img.id = "completedImg";
  180.                 img.src = "/assets/img/pro/handshake.gif";
  181.                 img.style.width = "400px";
  182.                 const formTitle = document.getElementById("formTitle");
  183.                 const main = formTitle.closest('main');
  184.                 if (main && formTitle) {
  185.                     main.insertBefore(img, formTitle);
  186.                 }
  187.             } else if (step !== 10) {
  188.                 const img = document.getElementById("completedImg");
  189.                 if (img) {
  190.                     img.remove();
  191.                 }
  192.             }
  194.             if (step === 21) {
  195.                 const img = document.createElement('img');
  196.                 img.id = "finishImg";
  197.                 img.src = "/assets/img/pro/finish.gif";
  198.                 img.style.width = "400px";
  199.                 const formTitle = document.getElementById("formTitle");
  200.                 const main = formTitle.closest('main');
  201.                 if (main && formTitle) {
  202.                     main.insertBefore(img, formTitle);
  203.                 }
  204.             } else if (step !== 21) {
  205.                 const img = document.getElementById("finishImg");
  206.                 if (img) {
  207.                     img.remove();
  208.                 }
  209.             }
  211.             switch (step) {
  212.                 case 0:
  213.                     document.getElementById("formTitle").innerText = "Créez votre compte";
  214.                     document.getElementById("previousPage").href = "/pronew";
  215.                     break;
  216.                 case 1:
  217.                     document.getElementById("formTitle").innerText = `Audioprothésiste gérant du centre auditif`;
  218.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  219.                     break;    
  220.                 case 2:
  221.                     document.getElementById("formTitle").innerText = "Quelle est votre nom ?";
  222.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  223.                     break;
  224.                 case 3:
  225.                     document.getElementById("formTitle").innerText = "À propos de votre société";
  226.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  227.                     break;
  228.                 case 4:
  229.                     document.getElementById("formTitle").innerText = "À propos de votre société";
  230.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  231.                     break;
  232.                 case 5:
  233.                     document.getElementById("formTitle").innerText = "Quel est le nom de votre centre ?";
  234.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  235.                     break;
  236.                 case 6:
  237.                     document.getElementById("formTitle").innerText = "Quel est votre numéro de téléphone ?";
  238.                     document.getElementById("subtitle").innerText = "Ce numéro vous permettra de recevoir les notifications des rendez-vous";
  239.                     $('#subtitle').show();
  240.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  241.                     break;
  242.                 case 7:
  243.                     $('#subtitle').hide();
  244.                     document.getElementById("formTitle").innerText = "C'est presque terminé";
  245.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  246.                     const priceElement = document.getElementById('pricePayment');
  247.                     if (priceElement && tarifs.price) {
  248.                         if (tarifs.recurring == 'annual') {
  249.                             priceElement.innerText = `${parseFloat(tarifs.annualPrice).toFixed(2)}€ HT/an`;
  250.                             finalPriceSub = parseFloat(tarifs.annualPrice).toFixed(2);
  251.                         } else {
  252.                             priceElement.innerText = `${parseFloat(tarifs.price).toFixed(2)}€ HT/mois`;
  253.                             finalPriceSub = parseFloat(tarifs.price).toFixed(2);
  254.                         }
  255.                     } else {
  256.                         priceElement.innerText = "Prix non disponible";
  257.                     }
  258.                     var currentDate = new Date();
  259.                     var futureDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
  260.                     var futureDateString = futureDate.toLocaleDateString();
  262.                     $('#resultMonth').text(futureDateString);
  263.                     break;
  264.                 case 8:
  265.                     document.getElementById("formTitle").innerText = `Félicitations !!!\nBienvenue chez My Audio.`;
  266.                     document.getElementById("formTitle").style.color = "#27977F";
  267.                     document.getElementById("formTitle").style.textAlign = "center";
  268.                     document.getElementById("formTitle").style.whiteSpace = "pre-line";
  269.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  270.                     setTimeout(() => {
  271.                         currentStep = 9;
  272.                         switchForm(currentStep);
  273.                     }, durationAnimation);
  274.                     break;
  276.                 case 9:
  277.                     document.getElementById("formTitle").innerText = `Réservez votre session\nd'onboarding `;
  278.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  279.                     break;
  281.                 case 10:
  282.                     document.getElementById("formTitle").innerText = `On a hâte de commencer !!!`;
  283.                     document.getElementById("formTitle").style.color = "#27977F";
  284.                     document.getElementById("formTitle").style.textAlign = "center";
  285.                     document.getElementById("formTitle").style.whiteSpace = "pre-line";
  286.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  287.                     setTimeout(() => {
  288.                         currentStep = 11;
  289.                         switchForm(currentStep);
  290.                     }, durationAnimation);
  291.                     break;
  293.                 case 11:
  294.                     document.getElementById("formTitle").style.color = "unset";
  295.                     document.getElementById("formTitle").innerText = `Vous avez 5 minutes ?`;
  296.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  297.                     break;
  299.                 case 12:
  300.                     document.getElementById("formTitle").innerText = `Accès au centre`;
  301.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  302.                     break;
  304.                 case 13:
  305.                     document.getElementById("formTitle").innerText = `Prestation et prises en charge`;
  306.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  307.                     break;
  309.                 /*case 14:
  310.                     document.getElementById("formTitle").innerText = `Audioprothésiste gérant du centre auditif`;
  311.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  312.                     break;
  313. */
  314.                 case 15:
  315.                     document.getElementById("formTitle").innerText = `Audioprothésiste gérant du centre auditif`;
  316.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  317.                     break;
  319.                 case 16:
  320.                     document.getElementById("formTitle").innerText = `Description de l'audioprothésiste`;
  321.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  322.                     break;
  324.                 case 17:
  325.                     document.getElementById("formTitle").innerText = `Description de votre centre auditif`;
  326.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  327.                     break;
  329.                 case 18:
  330.                     document.getElementById("formTitle").innerText = `Photos de votre centre auditif`;
  331.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  332.                     break;
  334.                 case 19:
  335.                     document.getElementById("formTitle").innerText = `Spécialité(s) Audioprothésiste gérant`;
  336.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  337.                     break;
  339.                 case 20:
  340.                     document.getElementById("formTitle").innerText = `Diplômes Audioprothésiste gérant`;
  341.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  342.                     break;
  344.                 case 21:
  345.                     let jsonFile = await convertJsonData(userData);
  346.                     console.log(jsonFile);
  347.                     document.getElementById("formTitle").innerText = `Bravo !\nOn finalisera tous lors de votre session d’onboarding.`;
  348.                     document.getElementById("formTitle").style.color = "#27977F";
  349.                     document.getElementById("formTitle").style.textAlign = "center";
  350.                     document.getElementById("formTitle").style.whiteSpace = "pre-line";
  351.                     document.getElementById("previousPage").href = "javascript:goToPreviousForm();";
  352.                     $(".finalStep").show();
  353.                     if (typeof imagesData.profileImage === 'string' && imagesData.profileImage.startsWith('data:')) {
  354.                     imagesData.profileImage = base64ToBlob(imagesData.profileImage, 'image/png');
  355.                     }
  356.                     if (typeof imagesData.diplomeImage === 'string' && imagesData.diplomeImage.startsWith('data:')) {
  357.                     imagesData.diplomeImage = base64ToBlob(imagesData.diplomeImage, 'image/jpeg');
  358.                     }
  359.                     if (typeof imagesData.facadeImage === 'string' && imagesData.facadeImage.startsWith('data:')) {
  360.                     imagesData.facadeImage = base64ToBlob(imagesData.facadeImage, 'image/png');
  361.                     }
  362.                     if (typeof imagesData.interieurImage === 'string' && imagesData.interieurImage.startsWith('data:')) {
  363.                     imagesData.interieurImage = base64ToBlob(imagesData.interieurImage, 'image/png');
  364.                     }
  366.                     const formData = new FormData();
  367.                     formData.append('audioId', userData.audioId);
  368.                     formData.append('centreId', userData.centerId);
  369.                    
  370.                     if (isValidBlob(imagesData.profileImage)) {
  371.                     formData.append('image_profil', imagesData.profileImage, 'image-profil.png');
  372. }                   else {
  373.                     console.warn('Invalid profile image, skipping...');
  374.                     }
  376.                     if (isValidBlob(imagesData.diplomeImage)) {
  377.                     formData.append('image_diplome', imagesData.diplomeImage, 'image-diplome.png');
  378. }                   else {
  379.                     console.warn('Invalid diplome image, skipping...');
  380.                     }
  382.                     if (isValidBlob(imagesData.facadeImage)) {
  383.                     formData.append('image_facade', imagesData.facadeImage, 'image-facade.png');
  384. }                   else {
  385.                     console.warn('Invalid facade image, skipping...');
  386.                     }
  388.                     if (isValidBlob(imagesData.interieurImage)) {
  389.                     formData.append('image_interieur', imagesData.interieurImage, 'image-interieur.png');
  390. }                   else {
  391.                      console.warn('Invalid interieur image, skipping...');
  392.                      }
  394.                     $.ajax({
  395.                         url: BASE_API + 'update/audio-center',
  396.                         type: "POST",
  397.                         contentType: "application/json",
  398.                         dataType: "json",
  399.                         data: JSON.stringify(jsonFile),
  400.                         async: true,
  401.                         success: function () {
  402.                             $.ajax({
  403.                                 url: BASE_API + 'centre/image/fData-newinscription',
  404.                                 type: "POST",
  405.                                 contentType: false,
  406.                                 processData: false,
  407.                                 dataType: "json",
  408.                                 data: formData,
  409.                                 async: true,
  410.                                 success: function (data) {
  411.                                      window.dataLayer.push({
  412.                                         event: "Formulaire_inscription_2",
  413.                                     });
  414.                                 },
  415.                                 error: function (xhr, status, error) {
  416.                                     handleAjaxError(xhr, "Erreur lors de l'envoi des données de l'image.");
  417.                                     $(".strButton").prop("disabled", false); // Réactiver le bouton
  418.                                 }
  419.                             });
  420.                         },
  421.                         error: function (xhr, status, error) {
  422.                         },
  423.                     });
  425.                     setTimeout(() => {
  426.                         currentStep = 21;
  427.                         //window.location.href = "https://pro.myaudio.fr/login";
  428.                     }, durationAnimation);
  429.                     break;
  430.                 default:
  431.                     break;
  432.             }
  433.         }
  435.         // Fonction pour afficher un message d'erreur
  436.         function displayError(message) {
  437.             const errorElement = document.getElementById("error-message-form");
  438.             if (errorElement) {
  439.                 errorElement.textContent = message;
  440.             }
  441.         }
  443.         function displayAllError(message) {
  444.             const errorContainer = document.getElementById("error-message-form");
  445.             errorContainer.innerHTML = message; 
  446.             errorContainer.style.display = "block"; 
  447.         }
  448.         // function for validate email adres format
  449.         function isValidEmail(email) {
  450.           const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  451.           return emailRegex.test(email);
  452.          }
  454.         // Fonction pour effacer le message d'erreur
  455.         function clearError() {
  456.             const errorElement = document.getElementById("error-message-form");
  457.             const errorElementStripe = document.querySelector(".error-message");
  458.             if (errorElementStripe) {
  459.               errorElementStripe.textContent = "";
  460.             }
  461.             if (errorElement) {
  462.                 errorElement.textContent = "";
  463.             }
  464.             $("#success-sms-validate").hide(); 
  465.         }
  467.         function validateForm(step, event) {
  468.             event.preventDefault();
  470.             let valid = true;
  472.             // Effacer les erreurs avant de valider
  473.             clearError();
  474.             let errors = [];
  475.             switch (step) {
  476.                 case 0:
  477.                     const email = document.getElementById("email").value.trim();
  478.                     const password = document.getElementById("password").value.trim();
  480.                     const hasUpperCase = /[A-Z]/.test(password);
  481.                     const hasNumber = /\d/.test(password); 
  482.                     const hasSpecialChar = /[!@#$%^&*()_\-+=\[\]{};:'"\\|,.<>?/`~_&^%]/.test(password);
  483.                     const hasMinLength = password.length >= 8;
  485. updateRequirement("requirement-uppercase", "bullet-uppercase", hasUpperCase);
  486. updateRequirement("requirement-special-number", "bullet-number", hasNumber);
  487. updateRequirement("requirement-special-char", "bullet-special-char", hasSpecialChar);
  488. updateRequirement("requirement-min-length", "bullet-min-length", hasMinLength);
  489.                     
  490.                     if (!email.trim()) {
  491.                     displayError("Veuillez saisir l'adresse e-mail.");
  492.                       } else if (!isValidEmail(email)) {
  493.                      displayError("Veuillez entrer une adresse e-mail valide.");
  494.                     }
  496.                     if (email && isValidEmail(email) && hasUpperCase && hasNumber && hasSpecialChar && hasMinLength) {
  497.                         userData.email = email;
  498.                         userData.password = password;
  499.                         currentStep = 1;
  500.                     } else {
  501.                         valid = false;
  502.                     }
  503.                     break;
  504.               case 1 :
  506.               let gerantCentre = {};
  508.                     let gerantMadame = document.getElementById("gerantMadame").checked;
  509.                     let gerantMonsieur = document.getElementById("gerantMonsieur").checked;
  511.                     if (gerantMadame) {
  512.                         gerantCentre.gerantCivility = "Madame";
  513.                     } else if (gerantMonsieur) {
  514.                         gerantCentre.gerantCivility = "Monsieur";
  515.                     } else {
  516.                         gerantCentre.gerantCivility = "Non spécifié";
  517.                     }
  519.                     if (!gerantMadame && !gerantMonsieur) {
  520.                     errors.push("Veuillez sélectionner la civilité.");
  521.                     //valid = false;
  522.                     //break;
  523.                     }
  525.                     let gerantFirstName = document.getElementById("gerant-first-name").value.trim();
  526.                     let gerantLastName = document.getElementById("gerant-last-name").value.trim();
  527.                     let gerantAdeliNumber = document.getElementById("gerant-adeli").value.trim();
  528.                     const phoneRegexGerant = /^[0-9]{10}$/;
  530.                     if (!gerantFirstName) {
  531.                     errors.push("Veuillez entrer votre prénom.");
  532.                     //valid = false;
  533.                     //break;
  534.                     } 
  535.                     if (!gerantLastName) {
  536.                     errors.push("Veuillez entrer votre nom.");
  537.                     //valid = false;
  538.                     //break;
  539.                     } 
  542.                     const adeliRegex = /^[0-9]{9,11}$/;
  543.                     if (!adeliRegex.test(gerantAdeliNumber)) {
  544.                      errors.push("Veuillez entrer un numéro Adeli / RPPS valide contenant entre 9 et 11 chiffres.");
  545.                     }
  547.                     if (errors.length > 0) {
  548.                        displayAllError(errors.join("<br>")); 
  549.                        valid = false;
  550.                         break;
  551.                     }              else{
  552.                    
  553.                     gerantCentre.gerantFirstName = gerantFirstName;
  554.                     gerantCentre.gerantLastName = gerantLastName;
  555.                     gerantCentre.gerantAdeliNumber = gerantAdeliNumber;
  557.                     userData.gerantCentre = gerantCentre;
  558.                     currentStep = 3;
  559.                     break;}
  560.               
  561.                 case 2:
  562.                     const firstName = document.getElementById("first-name").value;
  563.                     const lastName = document.getElementById("last-name").value;
  565.                     if (firstName && lastName) {
  566.                         userData.firstName = firstName;
  567.                         userData.lastName = lastName;
  568.                         currentStep = 3;
  569.                     } else {
  570.                         displayError("Veuillez remplir votre prénom et votre nom.");
  571.                         valid = false;
  572.                     }
  573.                     break;
  575.                 case 3:
  576.                     const companyName = document.getElementById("company-name").value;
  577.                     const siret = document.getElementById("company-siret").value;
  578.                     const finess = document.getElementById("company-finess").value;
  579.                     const siretValid = /^\d{14}$/.test(siret);
  580.                     const finessValid = /^\d{9}$/.test(finess);
  581.                     const codeParrain = document.getElementById("code-parrain").value;
  582.                     if (!companyName.trim()) {
  583.                     errors.push("Veuillez saisir le nom de votre société.");
  584.                     } if (!/^\d{14}$/.test(siret)) {
  585.                       errors.push("Veuillez entrer un SIRET valide (14 chiffres).");
  586.                     } if (!/^\d{9}$/.test(finess)) {
  587.                       errors.push("Veuillez entrer un numéro FINESS valide (9 chiffres).");
  588.                     } 
  589.                     
  591. if (codeParrain) {
  592.     $.ajax({
  593.         url: BASE_API + "api/check-referral-code",
  594.         type: "POST",
  595.         contentType: "application/json",
  596.         data: JSON.stringify({ code: codeParrain }),
  597.         success: function (response) {
  598.             if (!response.exists) {
  599.                 errors.push("Le code parrain est invalide.");
  600.             }
  602.             if (errors.length > 0) {
  603.                 displayAllError(errors.join("<br>")); 
  604.                 valid = false;
  605.                                     return;
  607.             }
  608.             valid = true;
  609.             currentStep = 3;
  610.                 userData.companyName = companyName;
  611.                 userData.siret = siret;
  612.                 userData.finess = finess;
  613.                 userData.codeParrain = codeParrain;
  614.                 switchForm(currentStep + 1);
  615.         },
  616.         error: function () {
  617.             errors.push("Erreur lors de la vérification du code parrain.");
  618.             displayAllError(errors);
  619.         }
  620.     });
  622.     // ⛔ Stop the normal flow — wait for AJAX result
  623.     return;
  624. }
  627.                     if (errors.length > 0) {
  628.                      displayAllError(errors.join("<br>")); 
  629.                      valid = false;
  630.      }               else {
  631.                       valid = true;
  632.                       userData.companyName = companyName;
  633.                       userData.siret = siret;
  634.                       userData.finess = finess;
  635.                       currentStep = 4;
  636.                      }
  637.                      
  639.                     break;
  640.                 case 4:
  641.                     const address = document.getElementById("company-address").value;
  642.                     const postCode = document.getElementById("company-post-code").value;
  643.                     const city = document.getElementById("company-city").value;
  645.                     if (!address.trim() || !postCode.trim() || !city.trim()) {
  646.                     displayError("Veuillez remplir tous les champs de l'adresse.");
  647.                     valid = false;
  648.                     break;
  649.                     }
  651.                     if (address && postCode && city) {
  652.                         userData.address = address;
  653.                         userData.postCode = postCode;
  654.                         userData.city = city;
  655.                         currentStep = 5;
  656.                     } 
  657.                     break;
  658.                 case 5:
  659.                     const centerName = document.getElementById("center-name").value;
  660.                     const centerWebsite = document.getElementById("center-website").value;
  662.                     if (!centerName.trim()) {
  663.                     displayError("Veuillez remplir le nom du centre");
  664.                     valid = false;
  665.                     break;
  666.                     }
  668.                     if (centerName) {
  669.                         userData.centerName = centerName;
  670.                         userData.centerWebsite = centerWebsite || "";
  671.                         currentStep = 6;
  672.                     } else {
  673.                         displayError("Veuillez remplir le nom du centre");
  674.                         valid = false;
  675.                     }
  676.                     break;
  678.                  case 6:
  679.                    const phoneRegex = /^(06|07)[0-9]{8}$/;
  680.                    const companyPhoneRegex = /^0[0-9]{9}$/;
  681.                    const companyPhone = document.getElementById("company-phone").value.trim();
  682.                    const cellphone = document.getElementById("cellphone").value.trim();
  683.                    const imageElement = document.getElementById("alert-image"); 
  684.                    
  687.                    if (!companyPhone) {
  688.                    errors.push("Veuillez saisir le numéro de téléphone du centre.");
  689.                    //valid = false;
  690.                    //break;
  691.                    }
  693.                    if (companyPhone.trim() !== "" && !companyPhoneRegex.test(companyPhone)) {
  694.                    errors.push("Le numéro de téléphone du centre doit contenir 10 chiffres et commencer par 0.");
  695.                    //valid = false;
  696.                    //break;
  697.                    }
  699.                    if (!cellphone) {
  700.                    errors.push("Veuillez saisir le numéro de téléphone portable.");
  701.                    //valid = false;
  702.                 //   break;
  703.                    }
  704.                    if (cellphone.trim() !== "" && !phoneRegex.test(cellphone)) {
  705.                    errors.push("Le numéro de téléphone portable doit contenir 10 chiffres et commencer par 06 ou 07");
  706.                    //valid = false;
  707.                   // break;
  708.                    }
  710.                    if (companyPhone && cellphone && companyPhone === cellphone) {
  711.                    errors.push("Le numéro de téléphone du centre et le numéro portable doivent être différents.");
  712.                    //valid = false;
  713.                    //break;
  714.                     }
  715.                    if (cellphone && !verifyPhone) {
  716.                    errors.push("Veuillez vérifier le numéro de téléphone portable.");
  717.                    //valid = false;
  718.                     imageElement.classList.add("image-jump");
  719.     setTimeout(() => {
  720.         imageElement.classList.remove("image-jump"); 
  721.     }, 500);
  722.                    //break;
  723.                    }
  724.                    
  725.                    if (errors.length > 0) {
  726.                      displayAllError(errors.join("<br>")); 
  727.                      valid = false;
  728.                      break;
  729.      }              else{
  730.                    
  731.                     valid = true;
  732.                     userData.companyPhone = companyPhone;
  733.                     userData.cellphone = cellphone;
  734.                     currentStep = 7;
  735.                     }
  737.                     let offerName = userData.type;
  738.                     if (offerName == "centre") {
  739.                         offerName = "Multi Centres";
  740.                     } else {
  741.                         offerName = "Multi Audios";
  742.                     }
  743.                     const requestData = {
  744.                         audio: [
  745.                             {
  746.                                 name: document.getElementById("company-name").value,
  747.                                 mail: userData.email
  748.                             }
  749.                         ],
  750.                         address: userData.address,
  751.                         quantity: tarifs?.quantity ?? 0,
  752.                         price: {
  753.                             finalPrice: tarifs.price,
  754.                             recurring: tarifs.recurring
  755.                         },
  756.                         plan: {
  757.                             planName: offerName
  758.                         }
  759.                     };
  761.                   /*price: {
  762.                  finalPrice: userData.price.finalPrice || userData.price,
  763.                  recurring: userData.price.recurring || "month"
  764.                  },*/
  766.                 function getSecretStripeToken(a) {
  767.                     $.ajax({
  768.                         url: BASE_API + 'relance/stripe',
  769.                         type: "POST",
  770.                         contentType: "application/json",
  771.                         dataType: "json",
  772.                         data: JSON.stringify(a),
  773.                         async: true,
  774.                         success: function (data) {
  775.                             //StripToken = data.stripeToken;
  776.                             initializeStripe(data.stripeToken, data.intentSecret);
  777.                             showPaymentForm(data.stripeToken, data.intentSecret);
  778.                             //sendCentre(data.stripeToken,data.intentSecret);
  779.                         }
  780.                     })
  781.                 }
  783.                     getSecretStripeToken(requestData);
  785.                     break;
  787.                 case 7:
  788.                     currentStep = 8;
  789.                     break;
  790.                 case 9:
  791.                     currentStep = 10;
  792.                     break;
  793.                 case 11:
  794.                     currentStep = 12;
  795.                     break;
  796.                 case 12:
  797.                     event.preventDefault();
  798.                     currentStep = 13;
  799.                     let metroData = [];
  800.                     let busData = [];
  801.                     let tramData = [];
  802.                     let rerData = [];
  803.                     let parkingPublicData = [];
  804.                     let parkingPriveData = [];
  805.                     let othersData = [];
  807.                     // Metro data
  808.                     let metroRows = document.querySelectorAll(".metrorow");
  810.                   
  811.            metroRows.forEach(row => {
  812.     let city = row.querySelector(".metro_text").value;
  813.     let line = row.querySelector(".lineMetro").value;
  814.     let stationSelect = row.querySelector(".nameMetro");
  815.     let stationId = null;
  817.     if (stationSelect && stationSelect.selectedIndex > 0) {
  818.         let selectedOption = stationSelect.options[stationSelect.selectedIndex];
  819.         stationId = selectedOption.getAttribute("data-id");
  820.     }
  822.     if (
  823.         city !== "Sélectionner la ville" &&
  824.         line !== "Sélectionner la ligne" &&
  825.         stationSelect.value !== "Sélectionner la station"
  826.     ) {
  827.         if (stationId) {
  828.             metroData.push(stationId);
  829.         }
  830.     }
  831. });
  834.                     // Bus data
  835.                     let busRows = document.querySelectorAll(".busrow input");
  836.                     busRows.forEach(input => {
  837.                         let busStop = input.value;
  839.                         if (busStop) {
  840.                             busData.push([busStop]);
  841.                         }
  842.                     });
  844.                     // Tram data
  845.                     let tramRows = document.querySelectorAll(".tramrow input");
  846.                     tramRows.forEach(input => {
  847.                         let tramStop = input.value;
  849.                         if (tramStop) {
  850.                             tramData.push([tramStop]);
  851.                         }
  852.                     });
  854.                     // RER data (assuming you have input fields for RER)
  855.                     let rerRows = document.querySelectorAll(".rerrow input");
  856.                     rerRows.forEach(input => {
  857.                         let rerStation = input.value;
  859.                         if (rerStation) {
  860.                             rerData.push([rerStation]);
  861.                         }
  862.                     });
  864.                     // Parking public data
  865.                     let parkingPublicRows = document.querySelectorAll(".parking_publicrow input");
  866.                     parkingPublicRows.forEach(input => {
  867.                         let parkingPublic = input.value;
  869.                         if (parkingPublic) {
  870.                             parkingPublicData.push([parkingPublic]);
  871.                         }
  872.                     });
  874.                     // Parking private data
  875.                     let parkingPriveRows = document.querySelectorAll(".parking_priverow input");
  876.                     parkingPriveRows.forEach(input => {
  877.                         let parkingPrive = input.value;
  879.                         if (parkingPrive) {
  880.                             parkingPriveData.push([parkingPrive]);
  881.                         }
  882.                     });
  884.                     // Other transport data (custom fields for any other transport types)
  885.                     let otherRows = document.querySelectorAll(".autrerow input");
  886.                     otherRows.forEach(input => {
  887.                         let otherTransport = input.value;
  889.                         if (otherTransport) {
  890.                             othersData.push([otherTransport]);
  891.                         }
  892.                     });
  894.                     let transports = {};
  896.                     // Add metro data
  897.                     if (metroData.length > 0) {
  898.                         transports.metro = metroData;
  899.                     }
  901.                     // Add bus data
  902.                     if (busData.length > 0) {
  903.                         transports.bus = busData;
  904.                     }
  906.                     // Add tram data
  907.                     if (tramData.length > 0) {
  908.                         transports.tram = tramData;
  909.                     }
  911.                     // Add RER data
  912.                     if (rerData.length > 0) {
  913.                         transports.rer = rerData;
  914.                     }
  916.                     // Add public parking data
  917.                     if (parkingPublicData.length > 0) {
  918.                         transports.parkingPublic = parkingPublicData;
  919.                     }
  921.                     // Add private parking data
  922.                     if (parkingPriveData.length > 0) {
  923.                         transports.parkingPrive = parkingPriveData;
  924.                     }
  926.                     // Add other transport data
  927.                     if (othersData.length > 0) {
  928.                         transports.other = othersData;
  929.                     }
  931.                     // Check if any transport data exists, then assign to userData
  932.                     if (Object.keys(transports).length > 0) {
  933.                         userData.transports = transports;
  934.                     } else {
  935.                         delete userData.transports;
  936.                     }
  938.                     break;
  941.                 case 13:
  942.                     currentStep = 15;
  943.                     let prestacharge = [];
  945.                     const checkboxValues = [
  946.                         "1",
  947.                         "2",
  948.                         "3",
  949.                         "4"
  950.                     ];
  952.                     for (let i = 1; i <= 4; i++) {
  953.                         let checkbox = document.getElementById(`form13Option${i}`);
  955.                         if (checkbox.checked) {
  956.                             prestacharge.push(checkboxValues[i - 1]);
  957.                         }
  958.                     }
  960.                     userData.prestacharge = prestacharge;
  961.                     break;
  963.                 case 14:
  964.                     /*let gerantCentre = {};
  966.                     let gerantMadame = document.getElementById("gerantMadame").checked;
  967.                     let gerantMonsieur = document.getElementById("gerantMonsieur").checked;
  969.                     if (gerantMadame) {
  970.                         gerantCentre.gerantCivility = "Madame";
  971.                     } else if (gerantMonsieur) {
  972.                         gerantCentre.gerantCivility = "Monsieur";
  973.                     } else {
  974.                         gerantCentre.gerantCivility = "Non spécifié";
  975.                     }
  977.                     if (!gerantMadame && !gerantMonsieur) {
  978.                     errors.push("Veuillez sélectionner la civilité.");
  979.                     //valid = false;
  980.                     //break;
  981.                     }
  983.                     let gerantFirstName = document.getElementById("gerant-first-name").value.trim();
  984.                     let gerantLastName = document.getElementById("gerant-last-name").value.trim();
  985.                     let gerantAdeliNumber = document.getElementById("gerant-adeli").value.trim();
  986.                     const phoneRegexGerant = /^[0-9]{10}$/;
  988.                     if (!gerantFirstName) {
  989.                     errors.push("Veuillez entrer votre prénom.");
  990.                     //valid = false;
  991.                     //break;
  992.                     } 
  993.                     if (!gerantLastName) {
  994.                     errors.push("Veuillez entrer votre nom.");
  995.                     //valid = false;
  996.                     //break;
  997.                     } 
  1000.                     const adeliRegex = /^[0-9]{9}$/;
  1001.                     if (!adeliRegex.test(gerantAdeliNumber)) {
  1002.                         errors.push("Veuillez entrer un numéro Adeli valide à 9 chiffres.");
  1003.                         //valid = false;
  1004.                         //break;
  1005.                     }
  1007.                     if (errors.length > 0) {
  1008.                        displayAllError(errors.join("<br>")); 
  1009.                        valid = false;
  1010.                         break;
  1011.                     }              else{
  1012.                    
  1013.                     gerantCentre.gerantFirstName = gerantFirstName;
  1014.                     gerantCentre.gerantLastName = gerantLastName;
  1015.                     gerantCentre.gerantAdeliNumber = gerantAdeliNumber;
  1017.                     userData.gerantCentre = gerantCentre;*/
  1018.                     currentStep = 15;
  1019.                     break;
  1021.                 case 15:
  1022.                     currentStep = 16;
  1023.                     let profileImage = document.getElementById('gerantProfile').src;
  1025.                     if (profileImage && profileImage !== '/assets/img/pro/loadImage.png') {
  1026.                         imagesData.profileImage = profileImage;
  1027.                     }
  1029.                     let cityInput = document.getElementById("company-city").value.trim();
  1030.                     let postalInput = document.getElementById("company-post-code").value.trim();
  1031.                     let lastnameInput = document.getElementById("gerant-last-name").value.trim();
  1032.                     let firstnameInput = document.getElementById("gerant-first-name").value.trim();
  1033.                     let gerantMadameCheck = document.getElementById("gerantMadame").checked;
  1034.                     let gerantMonsieurCheck = document.getElementById("gerantMonsieur").checked;
  1035.                     let civiliteInput = gerantMadameCheck ? "elle" : (gerantMonsieurCheck ? "il" : ""); 
  1037.                     let description = `Dans le centre auditif de ${cityInput} (${postalInput}), ${firstnameInput} excelle en tant qu'audioprothésiste, offrant une expertise inégalée dans les tests auditifs et l'adaptation d'appareils auditifs, y compris les modèles rechargeables et les solutions intra-auriculaires invisibles.\nGrâce à une approche personnalisée, ${civiliteInput} assure des diagnostics précis via des tests auditifs tonales et vocales.\nLe centre propose des appareillages auditifs sur-mesure et s'engage à guider ses patients dans le choix de leur appareil, en tenant compte de la nature de leur perte auditive, de leurs besoins spécifiques, de leur budget, ainsi que des options de prise en charge par la sécurité sociale et les mutuelles.\nPar ailleurs, depuis le 1er janvier 2021, la réforme 100% santé de l'État garantit que tous peuvent bénéficier d'un appareillage auditif sans frais, 0€ de reste à charge, offrant une correction auditive de qualité sans impact financier pour le patient.\n${firstnameInput}, audioprothésiste diplômé exerce à ${cityInput} et s'engage à naviguer avec vous à travers ces options, assurant un choix éclairé pour une expérience auditive optimale`;
  1038.                      document.getElementById("about").value = description;
  1039.                     userData.description = description;
  1041.                     break;
  1043.                 case 16:
  1044.                     currentStep = 17;
  1045.                     const cityInputCenter = document.getElementById("company-city").value.trim();
  1046.                     const postalInputCenter = document.getElementById("company-post-code").value.trim();
  1047.                     const lastnameInputCenter = document.getElementById("gerant-last-name").value.trim();
  1049.                     const centerNameInput = document.getElementById("center-name").value.trim();
  1050.                     let aboutCentre = `Situé à ${cityInputCenter} (${postalInputCenter}), le centre ${centerNameInput} excelle dans le domaine de l'audition, offrant une expertise d'audioprothésiste inégalée.\nNos tests auditifs de pointe permettent de diagnostiquer avec précision vos besoins auditifs, pour vous fournir des solutions sur mesure.\nNous proposons une sélection variée d'appareils auditifs modernes, conçus pour s'adapter parfaitement à votre quotidien et améliorer considérablement votre expérience auditive.\nPour le centre ${centerNameInput} à ${cityInputCenter}, la satisfaction de nos patients malentendants est notre priorité, grâce à un suivi pour votre acuité auditive d’un professionnalisme hors pair, qui assure une adaptation optimale et un confort d'écoute durable.\nNotre engagement est de vous reconnecter aux sons de la vie avec excellence et précision.\nL’audition n’est pas un luxe mais une nécessité.`;
  1051.                     document.getElementById("aboutCentre").value = aboutCentre;
  1052.                     userData.aboutCentre = aboutCentre;
  1053.                     break;
  1055.                 case 17:
  1056.                     currentStep = 18;
  1057.                     break;
  1059.                 case 18:
  1060.                     currentStep = 19;
  1061.                     const facadeImage = document.getElementById('gerantProfileFacade').src;
  1062.                     if (facadeImage && facadeImage !== '/assets/img/pro/facade-centre.png') {
  1063.                         imagesData.facadeImage = facadeImage;
  1064.                     }
  1065.                     const interieurImage = document.getElementById('gerantProfileInterieur').src;
  1066.                     if (interieurImage && interieurImage !== '/assets/img/pro/interieur-centre.png') {
  1067.                         imagesData.interieurImage = interieurImage;
  1068.                     }
  1069.                     const diplomeImage = document.getElementById('gerantProfileDiplome').src;
  1070.                     if (diplomeImage && diplomeImage !== '/assets/img/pro/diplome.png') {
  1071.                         imagesData.diplomeImage = diplomeImage;
  1072.                     }
  1073.                     break;
  1075.                 case 19:
  1076.                     currentStep = 20;
  1077.                     let selectedOptions = [];
  1079.                     if (document.getElementById("form19Option1").checked) selectedOptions.push("1");
  1080.                     if (document.getElementById("form19Option2").checked) selectedOptions.push("2");
  1081.                     if (document.getElementById("form19Option3").checked) selectedOptions.push("3");
  1082.                     if (document.getElementById("form19Option4").checked) selectedOptions.push("4");
  1083.                     if (document.getElementById("form19Option5").checked) selectedOptions.push("5");
  1084.                     if (document.getElementById("form19Option6").checked) selectedOptions.push("6");
  1085.                     if (document.getElementById("form19Option7").checked) selectedOptions.push("7");
  1086.                     if (document.getElementById("form19Option8").checked) selectedOptions.push("8");
  1087.                     if (document.getElementById("form19Option9").checked) selectedOptions.push("9");
  1088.                     if (document.getElementById("form19Option10").checked) selectedOptions.push("10");
  1090.                     userData.specialites = selectedOptions;
  1091.                     break;
  1093.                 case 20:
  1094.                     currentStep = 21;
  1096.                     const diplomaDetails = [];
  1097.                     userData.diplomaDetails = [];
  1100.                 document.querySelectorAll('input[type="checkbox"][data-diploma="true"]').forEach(checkbox => {
  1101.     if (checkbox.checked) {
  1102.         const idMatch = checkbox.id.match(/\d+$/);
  1103.         if (idMatch) {
  1104.             diplomaDetails.push({ id: idMatch[0], url: "", year: "" });
  1105.         }
  1106.     }
  1107. });
  1110.                     /*const diplomaDetails = [];
  1112.                     const form20Options = [
  1113.                         {id: "form20Option1", label: "Diplôme d'État audioprothésiste"},
  1114.                         {id: "form20Option2", label: "DU Audiophonologie"},
  1115.                         {id: "form20Option3", label: "DU implant cochléaire"},
  1116.                         {id: "form20Option4", label: "DU Nuisances Sonores"},
  1117.                         {id: "form20Option5", label: "Autres"}
  1118.                     ];
  1120.                     form20Options.forEach(option => {
  1121.                         const checkbox = document.getElementById(option.id);
  1122.                         if (checkbox && checkbox.checked) {
  1123.                             diplomaDetails.push(option.label);
  1124.                         }
  1125.                     });*/
  1127.                     if (diplomaDetails.length === 0) {
  1128.                         displayError("Veuillez sélectionner au moins un diplôme.");
  1129.                         break;
  1130.                     }
  1132.                     userData.diplomaDetails = diplomaDetails;
  1133.                     break;
  1135.                 default:
  1136.                     break;
  1137.             }
  1139.             if (valid) {
  1140.                 switchForm(currentStep);
  1141.             }
  1142.         }
  1144.         async function convertJsonData(userData) {
  1146.             let adresse = userData.address + " " + userData.postCode + " " + userData.city;
  1148.             coord = await getCoordonnee(adresse);
  1150.             const convertedJson = {
  1151.                 audioId: userData.audioId,
  1152.                 centerId: userData.centerId,
  1153.                 name: userData.centerName,
  1154.                 imgUrl: userData.profileImage,
  1155.                 isHandicap: false,
  1156.                 isRdvDomicile: false,
  1157.                 latitude: coord[0],
  1158.                 longitude: coord[1],
  1159.                 finess: userData.finess,
  1160.                 codeParrain: userData.codeParrain,
  1161.                 finessURL: "",
  1162.                 website: userData.centerWebsite || "",
  1163.                 siret: userData.siret,
  1164.                 companyName: userData.companyName,
  1165.                 postal: userData.postCode,
  1166.                 phone: userData.companyPhone,
  1167.                 city: userData.city,
  1168.                 address: userData.address,
  1169.                 prestation: userData.prestacharge,
  1170.                 tier: [],
  1171.                 mutuelle: [],
  1172.                 otherMutuelle: [],
  1173.                 otherSpetiality: [],
  1174.                 access: [],
  1175.             };
  1177.             if (userData.transports && typeof userData.transports === "object") {
  1178.                 Object.keys(userData.transports).forEach(key => {
  1179.                     const transportData = userData.transports[key];
  1180.                     if (Array.isArray(transportData) && transportData.length > 0) {
  1181.                         convertedJson.access.push({
  1182.                             [key]: transportData.flat()
  1183.                         });
  1184.                     }
  1185.                 });
  1186.             }
  1188.             if (tarifs.type == "centre") {
  1189.                 tarifs.plan = "Multi-Centres";
  1190.             } else {
  1191.                 tarifs.plan = "Multi-Audios";
  1192.             }
  1195.             if (tarifs.recurring == "annual") {
  1196.                 tarifs.recurring = "year";
  1197.             }
  1199.             convertedJson.audio = [
  1200.                 {
  1201.                     adeli: userData.gerantCentre?.gerantAdeliNumber || "",
  1202.                     civilite: userData.gerantCentre?.gerantCivility || "",
  1203.                     lastname: userData.gerantCentre?.gerantLastName || "",
  1204.                     name: userData.gerantCentre?.gerantFirstName || "",
  1205.                     mail: userData.email,
  1206.                     password: userData.password,
  1207.                     phone: userData.cellphone,
  1208.                     pin: 0,
  1209.                     birthdate: "12/12/2000",
  1210.                     role: "1",
  1211.                     registredAudio: "",
  1212.                     imgUrl: userData.images?.diplomeImage || "",
  1213.                     diplome: userData.diplomaDetails ? userData.diplomaDetails : [],
  1214.                     specialite: userData.specialites,
  1215.                     experiences: []
  1216.                 }
  1217.             ];
  1218.             convertedJson.descriptionAudio = userData.description;
  1219.             convertedJson.descriptionCentre = userData.aboutCentre;
  1220.             convertedJson.uploadedFiles = userData.uploadedFiles;
  1221.             convertedJson.gerant = "";
  1222.             convertedJson.isImported = "";
  1223.             convertedJson.nbaudio = 1;
  1224.             convertedJson.price = {
  1225.                 finalPrice: finalPriceSub,
  1226.                 recurring: tarifs.recurring
  1227.             };
  1228.             convertedJson.quantity = `${tarifs.quantity}`;
  1229.             convertedJson.plan = {
  1230.                 planName: tarifs.plan
  1231.             };
  1232.             convertedJson.paymentMethodId = userData.paymentMethod;
  1234.             return convertedJson;
  1235.         }
  1237.         function goToPreviousForm() {
  1238.             if (currentStep > 0 && currentStep !== 3) {
  1239.                 currentStep--;
  1240.                 switchForm(currentStep);
  1241.             } else if (currentStep === 3) {
  1242.                 currentStep = 1;
  1243.                 switchForm(currentStep);
  1244.             }
  1245.         }
  1247.         function updateRequirement(requirementId, bulletId, isValid) {
  1248.             const $requirementElement = $("#" + requirementId);
  1249.             const $bulletElement = $("#" + bulletId);
  1251.             if (isValid) {
  1252.                 $requirementElement.removeClass("invalid").find('span').addClass('circle-green').removeClass('circle-grey').removeClass('circle-red');
  1253.             } else {
  1254.                 $requirementElement.addClass("invalid").find('span').addClass('circle-red').removeClass('circle-grey').removeClass('circle-green');
  1255.             }
  1256.         }
  1258.         switchForm(currentStep);
  1260.         document.addEventListener('DOMContentLoaded', function () {
  1261.             setupCardInputs();
  1262.         });
  1263.     </script>
  1264. {% endblock %}
  1266. {% block content %}
  1267.     <header>
  1268.         <div class="progress-steps">
  1269.             <div class="progress"></div>
  1270.         </div>
  1271.         <div class="logo">
  1272.             <img src="/assets/img/pro/logo-myaudio.png" alt="Logo">
  1273.         </div>
  1274.         <div class="container-retour">
  1275.             <a id="previousPage" href="/pronew">Retour</a>
  1276.         </div>
  1277.     </header>
  1279.     <main class="inscription-page">
  1280.         <h1 id="formTitle">Créez votre compte</h1>
  1281.         <p id="subtitle" style="display: none;" class="text-grey"></p>
  1283.  <!--<form id="form16" class="signup-form" style="display: bloc;">
  1284.             <div class="d-flex flex-column">
  1285.                 <label for="about">À propos de vous</label>
  1286.                 <textarea class="about" id="about" rows="3" style="border: 2px solid #03866A; resize: none;"></textarea>
  1287.             </div>
  1289.             <button type="button"
  1290.                     class="create-account-button"
  1291.                     onclick="validateForm(16, event)">
  1292.                 Suivant >
  1293.             </button>
  1294.         </form>
  1295.      !-->   
  1296.         <!-- Formulaire 1 -->
  1297.         <form id="form0" class="signup-form" style="display: bloc;">
  1298.             <label for="email">Votre adresse email *</label>
  1299.             <input type="email" id="email" name="email" required>
  1301.             <label for="password">Mot de passe *</label>
  1302.             <input type="password" id="password" name="password" required>
  1304.             <div class="password-requirements">
  1305.                 <p>Votre mot de passe doit contenir au moins :</p>
  1306.                 <ul>
  1307.                   <li id="requirement-uppercase" class="requirement">
  1308.     <span id="bullet-uppercase" class="circle-grey">
  1309.         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor"
  1310.              class="bi bi-circle-fill" viewBox="0 0 16 16">
  1311.             <circle cx="8" cy="8" r="8"/>
  1312.         </svg>
  1313.     </span>
  1314.     1 lettre majuscule
  1315. </li>
  1316. <li id="requirement-special-number" class="requirement">
  1317.     <span id="bullet-number" class="circle-grey">
  1318.         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor"
  1319.              class="bi bi-circle-fill" viewBox="0 0 16 16">
  1320.             <circle cx="8" cy="8" r="8"/>
  1321.         </svg>
  1322.     </span>
  1323.     1 chiffre
  1324. </li>
  1325. <li id="requirement-special-char" class="requirement">
  1326.     <span id="bullet-special-char" class="circle-grey">
  1327.         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor"
  1328.              class="bi bi-circle-fill" viewBox="0 0 16 16">
  1329.             <circle cx="8" cy="8" r="8"/>
  1330.         </svg>
  1331.     </span>
  1332.     1 caractère spécial (exemple : # ? ! &)
  1333. </li>
  1334. <li id="requirement-min-length" class="requirement">
  1335.     <span id="bullet-min-length" class="circle-grey">
  1336.         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor"
  1337.              class="bi bi-circle-fill" viewBox="0 0 16 16">
  1338.             <circle cx="8" cy="8" r="8"/>
  1339.         </svg>
  1340.     </span>
  1341.     8 caractères
  1342. </li>
  1344.                 </ul>
  1345.             </div>
  1347.             <button type="button" class="create-account-button" onclick="validateForm(0, event)">Créez un compte
  1348.             </button>
  1350.             <p class="text-grey">
  1351.                 Ces identifiants vous permettront de vous connecter à la plateforme My Audio
  1352.             </p>
  1354.             <p class="terms-text">
  1355.                 En créant un compte, vous acceptez
  1356.                 <a target="_blank" href="/pro/politique-de-confidentialite" class="terms-link">les Conditions de Service
  1357.                     Client de
  1358.                     MyAudio.</a>
  1359.             </p>
  1360.         </form>
  1362.  <!-- Formulaire 14 -->
  1363.         <form id="form1" class="signup-form" style="display: none;">
  1364.             <div class="d-flex align-items-center gap-5 mb-4">
  1365.                 <div class="d-flex align-items-center gap-2">
  1366.                     <input type="checkbox" id="gerantMadame" name="gerantMadame" value="gerantMadame"
  1367.                            style="display:none" onclick="toggleCheckbox('gerantMadame', 'gerantMonsieur')">
  1368.                     <label class="fakeLabel" for="gerantMadame"></label>
  1369.                     <label for="gerantMadame">Madame</label>
  1370.                 </div>
  1372.                 <div class="d-flex align-items-center gap-2">
  1373.                     <input type="checkbox" id="gerantMonsieur" name="gerantMonsieur" value="gerantMonsieur"
  1374.                            style="display:none" onclick="toggleCheckbox('gerantMonsieur', 'gerantMadame')">
  1375.                     <label class="fakeLabel" for="gerantMonsieur"></label>
  1376.                     <label for="gerantMonsieur">Monsieur</label>
  1377.                 </div>
  1378.             </div>
  1380.             <label for="gerant-first-name">Prénom *</label>
  1381.             <input type="text" id="gerant-first-name" name="gerant-first-name" required>
  1383.             <label for="gerant-last-name">Nom *</label>
  1384.             <input type="text" id="gerant-last-name" name="gerant-last-name" required>
  1386.             <label for="gerant-adeli">Numéro Adeli / RPPS *</label>
  1387.             <input type="text" id="gerant-adeli" name="gerant-adeli" required>
  1388.             <button type="button"
  1389.                     class="create-account-button"
  1390.                     onclick="validateForm(1, event)">
  1391.                 Suivant >
  1392.             </button>
  1393.         </form>
  1395.         <!-- Formulaire 2 -->
  1396.         <form id="form2" class="signup-form" style="display: none;">
  1397.             <label for="first-name">Prénom *</label>
  1398.             <input type="text" id="first-name" name="first-name" required>
  1400.             <label for="last-name">Nom *</label>
  1401.             <input type="text" id="last-name" name="last-name" required>
  1403.             <button type="button" class="create-account-button" onclick="validateForm(2, event)">Suivant ></button>
  1404.         </form>
  1406.         <!-- Formulaire 3 -->
  1407.         <form id="form3" class="signup-form" style="display: none;">
  1408.             <label for="company-name">Nom de votre société *</label>
  1409.             <input type="text" id="company-name" name="company-name" required>
  1411.             <label for="company-siret">Numéro SIRET * (14 chiffres)</label>
  1412.             <input type="text" id="company-siret" name="company-siret" required>
  1414.             <label for="company-finess">Numéro finess * (9 chiffres)</label>
  1415.             <input type="text" id="company-finess" name="company-finess" required>
  1416.            
  1417.             <label for="code-parrain">Code parrain</label>
  1418.             <input type="text" id="code-parrain" name="code-parrain">
  1420.             <button type="button" class="create-account-button" onclick="validateForm(3, event)">Suivant ></button>
  1421.         </form>
  1423.         <!-- Formulaire 4 -->
  1424.         <form id="form4" class="signup-form" style="display: none;">
  1425.             <label for="company-address">Adresse *</label>
  1426.             <input type="text" id="company-address" name="company-address" required>
  1428.             <label for="company-post-code">Code Postal *</label>
  1429.             <input type="text" id="company-post-code" name="company-post-code" required>
  1431.             <label for="company-city">Ville *</label>
  1432.             <input class="uppercaseField" type="text" id="company-city" name="company-city" required>
  1434.             <button type="button" class="create-account-button" onclick="validateForm(4, event)">Suivant ></button>
  1435.         </form>
  1437.         <!-- Formulaire 5 -->
  1438.         <form id="form5" class="signup-form" style="display: none;">
  1439.             <label for="center-name">Nom du centre *</label>
  1440.             <input class="uppercaseField" type="text" id="center-name" name="center-name" required>
  1442.             <label for="center-website">Site internet du centre</label>
  1443.             <input type="text" id="center-website" name="center-website">
  1445.             <button type="button" class="create-account-button" onclick="validateForm(5, event)">Suivant ></button>
  1446.         </form>
  1448.         <!-- Formulaire 6 -->
  1449.         <form id="form6" class="signup-form" style="display: none;">
  1450.             <label for="company-phone">Numéro du centre *</label>
  1451.             <input type="text" id="company-phone" name="company-phone" required>
  1453.             <label for="cellphone">Numéro portable *</label>
  1454.             <div class="d-flex gap-3 align-items-center">
  1455.                 <input type="text" id="cellphone" name="cellphone" required>
  1456.                 <button type="button" id="alert-image"
  1457.                         class="verify-phone-button"
  1458.                         onclick="verifyPhoneNumber(event, 'cellphone')">
  1459.                     <img src="/assets/img/pro/checkPhone.svg" alt="check phone" style="border: none;"/>
  1460.                 </button>
  1461.             </div>
  1464.             <button type="button" class="create-account-button" onclick="validateForm(6, event)">Suivant ></button>
  1465.         </form>
  1467.         <div id="success-sms-validate" style="display:none">Votre numéro a été vérifié.</div>
  1469.         <!-- Formulaire 7  -->
  1470.         <form id="form7" class="signup-form payment-form" style="display: none;">
  1471.             <div class="payment-subtitle">Valider votre paiement</div>
  1473.            
  1475.             <div class="price" id="pricePayment"></div>
  1477.             <!-- Conteneur pour Stripe Elements -->
  1478.             <div id="card-element" class="card-input-wrapper"></div>
  1479.             <div id="card-errors" role="alert" class="error-message"></div>
  1480.             <button type="button"
  1481.                     class="create-account-button">
  1482.                 Valider >
  1483.             </button>
  1484.         </form>
  1486.         <!-- Formulaire 8  -->
  1487.         <form id="form8" class="signup-form" style="display: none;">
  1488.         </form>
  1490.         <!-- Formulaire 9  -->
  1491.         <form id="form9" class="signup-form calendar-google-rdv" style="display: none;">
  1492.             <div class="conainer-text">
  1493.                 <p>La session d'onboarding avec My Audio comprendra plusieurs étapes pour vous aider à bien démarrer
  1494.                     avec la plateforme et à optimiser son utilisation au quotidien.</p>
  1495.             </div>
  1496.             <div class="calendar-google">
  1497.                 <iframe src="https://calendar.app.google/BypwzPtYitYda6U97"
  1498.                         style="border: 0; width: 100%; height: 600px;" frameborder="0"></iframe>
  1499.             </div>
  1500.             <div class="container-button-bottom">
  1501.                 <button type="button"
  1502.                         class="create-account-button"
  1503.                         onclick="validateForm(9, event)" style="width: 15%">
  1504.                     Valider >
  1505.                 </button>
  1506.             </div>
  1507.         </form>
  1509.         <!-- Formulaire 10  -->
  1510.         <form id="form10" class="signup-form" style="display: none;">
  1511.         </form>
  1513.         <!-- Formulaire 11  -->
  1514.         <form id="form11" class="signup-form" style="display: none;">
  1515.             <div class="container-button">
  1516.                 <button type="button"
  1517.                         class="create-account-button btn-choice"
  1518.                         onclick="validateForm(11, event)">
  1519.                     Oui, je souhaite créer mon profil My Audio
  1520.                 </button>
  1521.                <button type="button"
  1522.                class="create-account-button btn-choice"
  1523.                onclick="window.open('{{ app.request.server.get('BASE_logiciel') }}login', '_blank');"
  1524.                style="font-weight: 200;">
  1525.                  Non, j'ai un patient qui m'attend !
  1526.                  </button>
  1528.             </div>
  1529.         </form>
  1531.         <!-- Formulaire 12  -->
  1532.         <form id="form12" class="signup-form" style="display: none; max-width: unset;">
  1533.             <div class="form-container">
  1534.                 <!-- Metro -->
  1535.                 <div class="form-group">
  1536.                     <div class="checkbox-wrapper">
  1537.                         <input type="checkbox" id="metro" name="metre" value="metre" style="display:none"
  1538.                                onchange="checkAccesCenter('metro', 'metro_text','lineMetro','nameMetro');">
  1539.                         <label class="fakeLabel " for="metro">
  1540.                         </label>
  1541.                         <label for="metro">Metro</label>
  1542.                     </div>
  1543.                     <div class="input-group metroappend">
  1544.                     </div>
  1545.                     <div class="container-button-transports">
  1546.                         <button type="button" class="btn btn-add metroMore" style="display:none">+</button>
  1547.                     </div>
  1548.                 </div>
  1550.                 <!-- Bus -->
  1551.                 <div class="form-group">
  1552.                     <div class="checkbox-wrapper">
  1553.                         <input type="checkbox" id="bus" name="bus" value="bus" style="display:none"
  1554.                                onchange="checkAcces('bus', 'bus_text');">
  1555.                         <label class="fakeLabel " for="bus"></label>
  1556.                         <label for="bus">Bus</label>
  1557.                     </div>
  1558.                     <div class="input-group busappend">
  1559.                     </div>
  1560.                     <div class="container-button-transports">
  1561.                         <button type="button" class="btn btn-add busMore" style="display:none">+</button>
  1562.                     </div>
  1563.                 </div>
  1565.                 <!-- Tram -->
  1566.                 <div class="form-group">
  1567.                     <div class="checkbox-wrapper">
  1568.                         <input type="checkbox" id="tram" name="tram" value="tram" style="display:none"
  1569.                                onchange="checkAcces('tram', 'tram_text');">
  1570.                         <label class="fakeLabel " for="tram"></label>
  1571.                         <label for="tram">Tram</label>
  1572.                     </div>
  1573.                     <div class="input-group tramappend">
  1574.                     </div>
  1575.                     <div class="container-button-transports">
  1576.                         <button type="button" class="btn btn-add tramMore" style="display:none">+</button>
  1577.                     </div>
  1578.                 </div>
  1580.                 <!-- RER -->
  1581.                 <div class="form-group">
  1582.                     <div class="checkbox-wrapper">
  1583.                         <input type="checkbox" id="rer" name="rer" value="rer" style="display:none"
  1584.                                onchange="checkAcces('rer', 'rer_text');">
  1585.                         <label class="fakeLabel " for="rer"></label>
  1586.                         <label for="rer">RER</label>
  1587.                     </div>
  1588.                     <div class="input-group rerappend">
  1589.                     </div>
  1590.                     <div class="container-button-transports">
  1591.                         <button type="button" class="btn btn-add rerMore" style="display:none">+</button>
  1592.                     </div>
  1593.                 </div>
  1595.                 <!-- Parking Public -->
  1596.                 <div class="form-group">
  1597.                     <div class="checkbox-wrapper">
  1598.                         <input type="checkbox" id="parking_public" name="parking_public" value="parking_public"
  1599.                                style="display:none" onchange="checkAcces('parking_public', 'pp_text');">
  1600.                         <label class="fakeLabel " for="parking_public"></label>
  1601.                         <label for="parking_public">Parking public</label>
  1602.                     </div>
  1603.                     <div class="input-group parking_publicappend">
  1604.                     </div>
  1605.                     <div class="container-button-transports">
  1606.                         <button type="button" class="btn btn-add parking_publicMore" style="display:none">+</button>
  1607.                     </div>
  1608.                 </div>
  1610.                 <!-- Parking Privé -->
  1611.                 <div class="form-group">
  1612.                     <div class="checkbox-wrapper">
  1613.                         <input type="checkbox" id="parking_prive" name="parking_prive" value="parking_prive"
  1614.                                style="display:none" onchange="checkAcces('parking_prive', 'ppr_text');">
  1615.                         <label class="fakeLabel " for="parking_prive"></label>
  1616.                         <label for="parking_prive">Parking privé</label>
  1617.                     </div>
  1618.                     <div class="input-group parking_priveappend">
  1619.                     </div>
  1620.                     <div class="container-button-transports">
  1621.                         <button type="button" class="btn btn-add parking_priveMore" style="display:none">+</button>
  1622.                     </div>
  1623.                 </div>
  1625.                 <!-- Autre -->
  1626.                 <div class="form-group">
  1627.                     <div class="checkbox-wrapper">
  1628.                         <input type="checkbox" id="autre" name="autre" value="autre" style="display:none"
  1629.                                onchange="checkAcces('autre', 'autre_text');">
  1630.                         <label class="fakeLabel" for="autre"></label>
  1631.                         <label for="autre">Autre</label>
  1632.                     </div>
  1633.                     <div class="input-group autreappend">
  1634.                     </div>
  1635.                     <div class="container-button-transports">
  1636.                         <button type="button" class="btn btn-add autreMore" style="display:none">+</button>
  1637.                     </div>
  1638.                 </div>
  1640.                 <button type="button"
  1641.                         class="create-account-button"
  1642.                         onclick="validateForm(12, event)">
  1643.                     Suivant >
  1644.                 </button>
  1645.             </div>
  1646.         </form>
  1648.         <!-- Formulaire 13  -->
  1649.         <form id="form13" class="signup-form" style="display: none;">
  1650.             <div class="container-checkbox">
  1651.                 <div>
  1652.                     <input type="checkbox" id="form13Option1" name="form13Option1" value="form13Option1"
  1653.                            style="display:none">
  1654.                     <label class="fakeLabel" for="form13Option1"></label>
  1655.                     <label for="form13Option1">Offre 100% Santé – Reste à charge 0 €</label>
  1656.                 </div>
  1658.                 <div>
  1659.                     <input type="checkbox" id="form13Option2" name="form13Option2" value="form13Option2"
  1660.                            style="display:none">
  1661.                     <label class="fakeLabel" for="form13Option2"></label>
  1662.                     <label for="form13Option2">Carte vitale acceptée</label>
  1663.                 </div>
  1665.                 <div>
  1666.                     <input type="checkbox" id="form13Option3" name="form13Option3" value="form13Option3"
  1667.                            style="display:none">
  1668.                     <label class="fakeLabel" for="form13Option3"></label>
  1669.                     <label for="form13Option3">Tiers-payant Sécurité sociale</label>
  1670.                 </div>
  1672.                 <div>
  1673.                     <input type="checkbox" id="form13Option4" name="form13Option4" value="form13Option4"
  1674.                            style="display:none">
  1675.                     <label class="fakeLabel" for="form13Option4"></label>
  1676.                     <label for="form13Option4">Tiers-payant mutuelle</label>
  1677.                 </div>
  1678.             </div>
  1679.             <button type="button"
  1680.                     class="create-account-button"
  1681.                     onclick="validateForm(13, event)">
  1682.                 Suivant >
  1683.             </button>
  1684.         </form>
  1686.         <!-- Formulaire 14 -->
  1687.         <form id="form14" class="signup-form" style="display: none;">
  1688.           
  1689.         </form>
  1691.         <!-- Formulaire 15 -->
  1692.         <form id="form15" class="signup-form" style="display: none;">
  1693.             <div class="d-flex justify-content-center">
  1694.                 <img src="/assets/img/pro/loadImage.png"
  1695.                      style="cursor: pointer; max-width: 200px; max-height: 200px; object-fit: cover;"
  1696.                      alt="Profile Image"
  1697.                      class="profile-image"
  1698.                      id="gerantProfile"
  1699.                      onclick="document.getElementById('image-input').click()">
  1701.                 <input type="file" id="image-input" accept="image/*" onchange="previewImage(event,'gerantProfile')"
  1702.                        style="display: none;">
  1703.             </div>
  1705.             <button type="button"
  1706.                     class="create-account-button"
  1707.                     onclick="validateForm(15, event)">
  1708.                 Suivant >
  1709.             </button>
  1710.         </form>
  1712.         <!-- Formulaire 16  -->
  1713.         <form id="form16" class="signup-form" style="display: none;">
  1714.             <div class="d-flex flex-column">
  1715.                 <label for="about">À propos de vous</label>
  1716.                 <textarea class="about" id="about" rows="3" style="border: 2px solid #03866A; resize: none;"></textarea>
  1717.             </div>
  1719.             <button type="button"
  1720.                     class="create-account-button"
  1721.                     onclick="validateForm(16, event)">
  1722.                 Suivant >
  1723.             </button>
  1724.         </form>
  1726.         <!-- Formulaire 17  -->
  1727.         <form id="form17" class="signup-form" style="display: none;">
  1728.             <div class="d-flex flex-column">
  1729.                 <label for="aboutCentre">À propos de votre centre</label>
  1730.                 <textarea class="aboutCentre" id="aboutCentre" rows="3"
  1731.                           style="border: 2px solid #03866A; resize: none;"></textarea>
  1732.             </div>
  1734.             <button type="button"
  1735.                     class="create-account-button"
  1736.                     onclick="validateForm(17, event)">
  1737.                 Suivant >
  1738.             </button>
  1739.         </form>
  1741.         <!-- Formulaire 18  -->
  1742.         <form id="form18" class="signup-form" style="display: none;">
  1743.             <div class="d-flex justify-content-center gap-5 mb-5 mt-5">
  1745.                 <div>
  1746.                     <img src="/assets/img/pro/facade-centre.png"
  1747.                          style="cursor: pointer; max-width: 200px; max-height: 200px; object-fit: cover;"
  1748.                          alt="Façade Image"
  1749.                          class="profile-image"
  1750.                          id="gerantProfileFacade"
  1751.                          onclick="document.getElementById('image-input-facade').click()">
  1752.                     <input type="file" id="image-input-facade" accept="image/*"
  1753.                            onchange="previewImage(event, 'gerantProfileFacade')" style="display: none;">
  1754.                 </div>
  1756.                 <div>
  1757.                     <img src="/assets/img/pro/interieur-centre.png"
  1758.                          style="cursor: pointer; max-width: 200px; max-height: 200px; object-fit: cover;"
  1759.                          alt="Intérieur Image"
  1760.                          class="profile-image"
  1761.                          id="gerantProfileInterieur"
  1762.                          onclick="document.getElementById('image-input-interieur').click()">
  1763.                     <input type="file" id="image-input-interieur" accept="image/*"
  1764.                            onchange="previewImage(event, 'gerantProfileInterieur')" style="display: none;">
  1765.                 </div>
  1767.                 <div>
  1768.                     <img src="/assets/img/pro/diplome.png"
  1769.                          style="cursor: pointer; max-width: 200px; max-height: 200px; object-fit: cover;"
  1770.                          alt="Diplôme Image"
  1771.                          class="profile-image"
  1772.                          id="gerantProfileDiplome"
  1773.                          onclick="document.getElementById('image-input-diplome').click()">
  1774.                     <input type="file" id="image-input-diplome" accept="image/*"
  1775.                            onchange="previewImage(event, 'gerantProfileDiplome')" style="display: none;">
  1776.                 </div>
  1778.             </div>
  1780.             <button type="button"
  1781.                     class="create-account-button"
  1782.                     onclick="validateForm(18, event)">
  1783.                 Suivant >
  1784.             </button>
  1785.         </form>
  1787.         <!-- Formulaire 19 -->
  1788.         <form id="form19" class="signup-form" style="display: none; max-width: 100% !important;">
  1789.             <div class="d-flex gap-5 justify-content-center mt-5 mb-5">
  1790.                 <!-- Container Left -->
  1791.                 <div class="d-flex flex-column">
  1792.                     <div>
  1793.                         <input type="checkbox" id="form19Option1" name="form19Option1" value="form19Option1"
  1794.                                style="display:none">
  1795.                         <label class="fakeLabel" for="form19Option1"></label>
  1796.                         <label for="form19Option1">Bilan auditif complet</label>
  1797.                     </div>
  1799.                     <div>
  1800.                         <input type="checkbox" id="form19Option2" name="form19Option2" value="form19Option2"
  1801.                                style="display:none">
  1802.                         <label class="fakeLabel" for="form19Option2"></label>
  1803.                         <label for="form19Option2">Acouphène</label>
  1804.                     </div>
  1806.                     <div>
  1807.                         <input type="checkbox" id="form19Option3" name="form19Option3" value="form19Option3"
  1808.                                style="display:none">
  1809.                         <label class="fakeLabel" for="form19Option3"></label>
  1810.                         <label for="form19Option3">Protections auditives sur mesure - Nuisances sonores</label>
  1811.                     </div>
  1813.                     <div>
  1814.                         <input type="checkbox" id="form19Option4" name="form19Option4" value="form19Option4"
  1815.                                style="display:none">
  1816.                         <label class="fakeLabel" for="form19Option4"></label>
  1817.                         <label for="form19Option4">Appareillage Pédiatrique - Audiophonologie de l'enfant</label>
  1818.                     </div>
  1820.                     <div>
  1821.                         <input type="checkbox" id="form19Option5" name="form19Option5" value="form19Option5"
  1822.                                style="display:none">
  1823.                         <label class="fakeLabel" for="form19Option5"></label>
  1824.                         <label for="form19Option5">Implant cochléaire et réglages</label>
  1825.                     </div>
  1826.                 </div>
  1828.                 <!-- Container Right -->
  1829.                 <div class="d-flex flex-column">
  1830.                     <div>
  1831.                         <input type="checkbox" id="form19Option6" name="form19Option6" value="form19Option6"
  1832.                                style="display:none">
  1833.                         <label class="fakeLabel" for="form19Option6"></label>
  1834.                         <label for="form19Option6">Appareil intra-auriculaire</label>
  1835.                     </div>
  1837.                     <div>
  1838.                         <input type="checkbox" id="form19Option7" name="form19Option7" value="form19Option7"
  1839.                                style="display:none">
  1840.                         <label class="fakeLabel" for="form19Option7"></label>
  1841.                         <label for="form19Option7">Perte d’équilibre – Vertige</label>
  1842.                     </div>
  1844.                     <div>
  1845.                         <input type="checkbox" id="form19Option8" name="form19Option8" value="form19Option8"
  1846.                                style="display:none">
  1847.                         <label class="fakeLabel" for="form19Option8"></label>
  1848.                         <label for="form19Option8">Langage des signes</label>
  1849.                     </div>
  1851.                     <div>
  1852.                         <input type="checkbox" id="form19Option9" name="form19Option9" value="form19Option9"
  1853.                                style="display:none">
  1854.                         <label class="fakeLabel" for="form19Option9"></label>
  1855.                         <label for="form19Option9">Lyric</label>
  1856.                     </div>
  1858.                     <div>
  1859.                         <input type="checkbox" id="form19Option10" name="form19Option10" value="form19Option10"
  1860.                                style="display:none">
  1861.                         <label class="fakeLabel" for="form19Option10"></label>
  1862.                         <label for="form19Option10">Autres</label>
  1863.                     </div>
  1864.                 </div>
  1865.             </div>
  1866.             <div class="container-button">
  1867.                 <button type="button" class="create-account-button mt-4" onclick="validateForm(19, event)"
  1868.                         style="width: 15%">
  1869.                     Suivant >
  1870.                 </button>
  1871.             </div>
  1872.         </form>
  1874.         <!-- Formulaire 20 -->
  1875.         <form id="form20" class="signup-form" style="display: none; max-width: 100% !important;">
  1876.             <div class="d-flex gap-5 justify-content-center mt-5 mb-5">
  1877.                 <div class="d-flex flex-column">
  1878.                     <div>
  1879.                         <input type="checkbox" id="form20Option1" name="form20Option1" data-diploma="true" value="form20Option1"
  1880.                                style="display:none">
  1881.                         <label class="fakeLabel" for="form20Option1"></label>
  1882.                         <label for="form20Option1">Diplôme d'État audioprothésiste</label>
  1883.                     </div>
  1885.                     <div>
  1886.                         <input type="checkbox" id="form20Option2" name="form20Option2" data-diploma="true" value="form20Option2"
  1887.                                style="display:none">
  1888.                         <label class="fakeLabel" for="form20Option2"></label>
  1889.                         <label for="form20Option2">DU Audiophonologie</label>
  1890.                     </div>
  1892.                     <div>
  1893.                         <input type="checkbox" id="form20Option3" name="form20Option3" data-diploma="true" value="form20Option3"
  1894.                                style="display:none">
  1895.                         <label class="fakeLabel" for="form20Option3"></label>
  1896.                         <label for="form20Option3">DU implant cochléaire</label>
  1897.                     </div>
  1899.                     <div>
  1900.                         <input type="checkbox" id="form20Option4" name="form20Option4" data-diploma="true" value="form20Option4"
  1901.                                style="display:none">
  1902.                         <label class="fakeLabel" for="form20Option4"></label>
  1903.                         <label for="form20Option4">DU Nuisances Sonores</label>
  1904.                     </div>
  1906.                     <div>
  1907.                         <input type="checkbox" id="form20Option5" name="form20Option5" data-diploma="true" value="form20Option5"
  1908.                                style="display:none">
  1909.                         <label class="fakeLabel" for="form20Option5"></label>
  1910.                         <label for="form20Option5">Autres</label>
  1911.                     </div>
  1912.                 </div>
  1913.             </div>
  1914.             <div class="container-button">
  1915.                 <button type="button" class="create-account-button mt-4" onclick="validateForm(20, event)"
  1916.                         style="width: 15%">
  1917.                     Suivant >
  1918.                 </button>
  1919.             </div>
  1920.         </form>
  1922.         <!-- Formulaire 21 -->
  1923.         <form id="form21" class="signup-form" style="display: none;">
  1924.         </form>
  1925.         <div id="error-message-form" class="error-message-form"></div>
  1927.             <div class="container-button-bottom finalStep" style="display:none;top:725px;">
  1928.                 <a href="https://pro.myaudio.fr/login"><button type="button" class="create-account-button" style="">
  1929.                     Accédez a votre espace pro
  1930.                 </button>
  1931.                 </a>
  1932.             </div>
  1934.     </main>
  1935.     <footer></footer>
  1937.     <script>
  1938.         function toggleCheckbox(selectedId, otherId) {
  1939.             const selectedCheckbox = document.getElementById(selectedId);
  1940.             const otherCheckbox = document.getElementById(otherId);
  1942.             if (selectedCheckbox.checked) {
  1943.                 otherCheckbox.checked = false;
  1944.             }
  1945.         }
  1947.         function previewImage(event, imageId) {
  1948.             const inputFile = event.target;
  1949.             const imageElement = document.getElementById(imageId);
  1951.             if (inputFile.files && inputFile.files[0]) {
  1952.                 const reader = new FileReader();
  1953.                 reader.onload = function (e) {
  1954.                     imageElement.src = e.target.result;
  1955.                 };
  1956.                 reader.readAsDataURL(inputFile.files[0]);
  1957.             } else {
  1958.                 imageElement.src = '';
  1959.             }
  1960.         }
  1962.     </script>
  1963.      <script>
  1964.     function capitalizeFirstChar(input) {
  1965.         input.value = input.value
  1966.             .toLowerCase() 
  1967.             .replace(/^\w/, char => char.toUpperCase()); 
  1968.     }
  1970.     document.getElementById('gerant-first-name').addEventListener('input', function() {
  1971.         capitalizeFirstChar(this);
  1972.     });
  1974.     document.getElementById('gerant-last-name').addEventListener('input', function() {
  1975.         capitalizeFirstChar(this);
  1976.     });
  1977. </script>
  1978. {% endblock %}
  1980. {% block modals %}
  1981.     <div id="SmsModal" class="modal" aria-labelledby="SmsModal" aria-hidden="true">
  1982.         <div class="form-confirm">
  1983.             <button class="close" type="button" onclick="hideOtpModal();">X</button>
  1985.             <div class="info">
  1986.                 <span class="title">Vérification OTP</span>
  1987.                 <p class="description">Veuillez entrer le code que nous vous avons envoyé par SMS.</p>
  1988.             </div>
  1989.             <div class="inputs">
  1990.                 <input class="inputNum" id="telOne" type="tel" maxlength="1" oninput="moveFocus(this, 'telTwo')">
  1991.                 <input class="inputNum" id="telTwo" type="tel" maxlength="1" oninput="moveFocus(this, 'telThree')">
  1992.                 <input class="inputNum" id="telThree" type="tel" maxlength="1" oninput="moveFocus(this, 'telFour')">
  1993.                 <input class="inputNum" id="telFour" type="tel" maxlength="1">
  1994.             </div>
  1995.             <a class="validate" href="#" onclick="validateOtpCode(event);">Vérifier</a>
  1996.             <div class="reSms"></div>
  1997.             <p class="resend">Vous ne recevez pas le code ? <a class="resend-action" href="#"
  1998.                                                                onclick="resendOtp(event);">Renvoyer</a></p>
  1999.         </div>
  2000.     </div>
  2002. {% endblock %}