templates/partner/preinscription.html.twig line 1

Open in your IDE?
  1. {% extends "/pro/base.html.twig" %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4.     <link rel="stylesheet" href="/assets/css/partner/inscription.css">
  5.      <link rel="stylesheet" href="/assets/css/partner/preinscription.css">
  6. {% endblock %}
  7. {% block javascripts %}
  8.     {{ parent() }}
  9.  
  10. {% endblock %}
  11. {% block body %}
  12.     {{ parent() }}
  13.   
  14. {% endblock %}
  15. {% block content %}
  16.     {{ parent() }}
  17.     <section class="body-preinscription">
  18.       <div class="container">
  19.     <div class="header-left">
  20.           <a href="/pro"><img class="logo logopro" src="/assets/img/header/logo.png" alt="My Audio"></a>
  21.     </div>
  22.     <div class="logo-wrapper">
  23.     <div >
  24.       <a href="/pro"><img  src="/assets/img/header/logo.png" alt="My Audio"></a>
  25.     </div>
  26.     <div >
  27.     <h2>partenaire</h2>
  28.     </div>
  29.     <div >
  30.     <a href="/pro"><img src="/assets/img/header/cda.png" alt="My Audio"></a>
  31.     </div>
  32.     </div>
  33.     <div class="content-box">
  34.       <h2>Avec My Audio développez votre <br> centre auditif à pleine puissance</h2>
  35.     <p>Remplissez le formulaire de Pré-inscription dès à présent et <br>bénéficiez de l'offre exclusive du partenariat My Audio X CDA</p>
  36.      <h2 class="tag">Tarif My Audio X CDA</h2>
  37.      <p>Choisissez la formule qui convient à votre mode de fonctionnement :</p>
  38.      <div class="plans">
  39.         <div class="plans-wrapper">
  40.                 <div>
  41.                    <input type="radio" id='Multi-Centres'  name="plan" value="Multi-Centres" style="display: none">
  42.                   <label class="fakeLabel " for="Multi-Centres">
  43.                    <img src="/assets/img/multi-center.png" />
  44.                    <div>
  45.                   <h3>Multi-Centres</h3>
  46.                   <p>Pour les audioprothésistes qui exercent sur un ou plusieurs centres auditifs</p>
  47.                   </div>
  48.                   </label>
  49.                 </div>
  50.                  <div>
  51.                   <input type="radio" id ='Multi-Audios' name="plan" value="Multi-Audios" style="display: none">
  52.                  <label class="fakeLabel " for="Multi-Audios">
  53.                   <img src="/assets/img/multi-audio.png" />
  54.                   <div>
  55.                  <h3> Multi-Audios</h3>
  56.                  <p>Pour les centres auditifs qui ont un ou plusieurs audioprothésistes au sein du même centre</p>
  57.                  </div>
  58.                 </label>
  59.                 </div>
  60.         </div>
  61.         <div class="plans-display">
  62.         <div id="planA" style="display: none;">
  63.         <p class="text-center">Sélectionnez le nombre de centres où vous exercez</p>
  64.          <div class="box">
  65.          <div class="tarif-box">
  66.            <h3>Tarif standard</h3>
  67.            <div>
  68.             900 HT/an <br> 1 centre inclus
  69.            </div>
  70.             <div>
  71.             1001 HT/an 2 <br> centres inclus
  72.            </div>
  73.              <div>
  74.             1102.1 HT/an <br>3 centres inclus
  75.            </div>
  76.          
  77.           </div>
  78.           <div class="tarif-box-info">
  79.            <h3>Remise</h3>
  80.            <div>
  81.             <div class="price">
  82.                <div class="prx">-101€</div>
  83.                <div class="remise">soit -11%</div> 
  84.             </div>
  85.              </div>
  86.               <div>
  87.                <div class="price">
  88.                 <div class="prx">-202€</div>
  89.                <div class="remise">soit -21%</div> 
  90.             </div>
  91.             </div>
  92.              <div>
  93.                <div class="price">
  94.                 <div class="prx">-303€</div>
  95.                <div class="remise">soit -28%</div> 
  96.             </div>
  97.              </div>
  98.           
  99.           </div>
  100.           <div class="tarif-box">
  101.            <h3>Tarif My audio X CDA</h3>
  102.             <div>
  103.              <input type="radio" id="tarifPlan" name="tarifPlan" value="1 centre" style="display: none">
  104.              <label class="fakeLabel " for="tarifPlan" >
  105.              799 HT/an <br> 1 centre inclus
  106.             </label>
  107.             </div>
  108.                <div>
  109.              <input type="radio" id="tarifPlan2" name="tarifPlan" value="2 centres" style="display: none">
  110.              <label class="fakeLabel " for="tarifPlan2" >
  111.              799 HT/an <br> 2 centres inclus
  112.             </label>
  113.             </div>
  114.               <div>
  115.               <input type="radio" id="tarifPlan3" name="tarifPlan" value="3 centres" style="display: none">
  116.              <label class="fakeLabel " for="tarifPlan3">
  117.                799 HT/an <br> 3 centres inclus
  118.             </label>
  119.             </div>
  120.           </div>
  121.     
  122.          </div>
  123.           
  124.    
  125. </div>
  126. <div id="planB" style="display: none;">
  127.  <p class="text-center">Sélectionnez le nombre d'audioprothésiste(s) dans votre centre</p>
  128.          <div class="box">
  129.          <div class="tarif-box">
  130.            <h3>Tarif standard</h3>
  131.            <div>
  132.             900 HT/an <br> 1 Audio inclus
  133.            </div>
  134.             <div>
  135.             1001.1 HT/an 2 <br> Audios inclus
  136.            </div>
  137.              <div>
  138.             1302.1 HT/an <br>3 Audios inclus
  139.            </div>
  140.      
  141.           </div>
  142.           <div class="tarif-box-info">
  143.            <h3>Remise</h3>
  144.            <div>
  145.             <div class="price">
  146.                <div class="prx">-101€</div>
  147.                <div class="remise">soit -11%</div> 
  148.             </div>
  149.              </div>
  150.               <div>
  151.                <div class="price">
  152.                 <div class="prx">-302.1€</div>
  153.                <div class="remise">soit -28%</div> 
  154.             </div>
  155.             </div>
  156.              <div>
  157.                <div class="price">
  158.                 <div class="prx">-503€</div>
  159.                <div class="remise">soit -39%</div> 
  160.             </div>
  161.              </div>
  162.           
  163.           </div>
  164.           <div class="tarif-box">
  165.            <h3>Tarif My audio X CDA</h3>
  166.             <div>
  167.              <input type="radio" id="tarifaudio" name="tarifPlan" value="1 Audio" style="display: none">
  168.              <label class="fakeLabel " for="tarifaudio" >
  169.              799 HT/an <br> 1 Audio inclus
  170.             </label>
  171.             </div>
  172.                <div>
  173.              <input type="radio" id="tarifaudio2" name="tarifPlan" value="2 Audios" style="display: none">
  174.              <label class="fakeLabel " for="tarifaudio2" >
  175.              799 HT/an <br> 2 Audios inclus
  176.             </label>
  177.             </div>
  178.               <div>
  179.               <input type="radio" id="tarifaudio3" name="tarifPlan" value="3 Audios" style="display: none">
  180.              <label class="fakeLabel " for="tarifaudio3">
  181.                799 HT/an <br> 3 Audios inclus
  182.             </label>
  183.             </div>
  184.           </div>
  185.     
  186.          </div>
  187.        </div>
  188.         </div>
  189.      </div>
  190.    <p class="offre-info" style="display:none">Complétez le formulaire de pré-inscription et bénéficiez de ces remises exceptionnelles Offre limitée</p>
  191.     <h2 class="tag">Pré-inscription My Audio Pro</h2>
  192.     </div>
  193.   
  194.       <form id="preInscription" class="preInscriptionForm" >
  195.        <div class="card">
  196.        <img class="Iimage" src="/assets/img/preinscriptionimg.png" alt="My Audio">
  197.        
  198.       
  199.          <div class="checkbox-form checkCivilite">
  200.            <div>
  201.              <input type="radio" id="madame" name="civility" value="Madame" style="display: none">
  202.              <label class="fakeLabel right" for="madame">Madame</label>
  203.            </div>
  204.            <div>
  205.                 <input type="radio" id="monsieur" name="civility" value="Monsieur" style="display: none">
  206.                 <label class="fakeLabel right" for="monsieur">Monsieur</label>
  207.            </div>
  208.          </div>
  209.                 
  210.          <div class="inputs-wrapper">
  211.           <div> <input class="form-control borderBottom" type="text" id="firstName" name="firstName" placeholder="Nom"></div>
  212.           <div><input class="form-control borderBottom"  type="text" id="lastName" name="lastName"  placeholder="Prénom"></div>
  213.          </div>
  214.          <div class="inputs-wrapper">
  215.           <div>   <input class="form-control borderBottom" type="text" id="centerPhone" name="centerPhone" placeholder="Téléphone du centre:"></div>
  216.           <div> <input class="form-control borderBottom" type="text" id="mobilePhone" name="mobilePhone" placeholder="Téléphone portable:"></div>
  217.          </div>
  218.            <div class="inputs-wrapper">
  219.           <div>  <input class="form-control borderBottom" type="email" id="email" name="email" placeholder="Email:" ></div>
  220.          
  221.          </div>
  222.          <div class="inputs-wrapper">
  223.           <div>  <input class="form-control borderBottom" type="text" id="centerAddress" name="centerAddress" placeholder="Adresse du centre:"></div>
  224.           <div>  <input class="form-control borderBottom" type="text" id="postalCode" name="postalCode" placeholder="Code postale:"></div>
  225.          </div>
  226.         <div class="inputs-wrapper">
  227.           <div>  <input class="form-control borderBottom" type="text" id="city" name="city" placeholder="Ville:"></div>
  228.           <div> <input class="form-control borderBottom" type="text" id="finessNumber" name="finessNumber" placeholder="Finess:"></div>
  229.          </div>
  230.         <div class="inputs-wrapper">
  231.          <div>  <input class="form-control borderBottom" type="text" id="website" name="website" placeholder="Site web:"></div>
  232.           <div>  <input class="form-control borderBottom" type="text" id="adeliNumber" name="adeliNumber" placeholder="ADELIE:"></div>
  233.          
  234.          </div>
  235.    
  236.    
  237.     
  238.   
  239.    
  240.    
  241.    
  242.     
  243.    
  244.    
  245.     <div class="checkbox-wrapper">
  246.       <label for="prestation" class="presentation">Prestation et prises en charge:</label>
  247.        <div class="inputs-wrapper">
  248.          <div>
  249.           <input type="checkbox" id="carteVitale" name="prestation[]" value="Carte vitale acceptee" style="display: none">
  250.        <label class="fakeLabel" for="carteVitale">Carte vitale acceptée</label>
  251.            <input type="checkbox" id="tiersPayantMutuelleS" name="prestation[]" value="Offre 100% Sante - Rac 0€" style="display: none">
  252.     <label class="fakeLabel" for="tiersPayantMutuelleS">Offre 100% Santé - Rac 0€</label>
  253.    
  254.    
  255.          </div>
  256.           <div>
  257.     <input type="checkbox" id="tiersPayantSS" name="prestation[]" value="Tiers-payant Securite-sociale" style="display: none">
  258.    <label class="fakeLabel" for="tiersPayantSS">Tiers-payant Sécurité sociale</label>
  259.     <input type="checkbox" id="tiersPayantMutuelle" name="prestation[]" value="Tiers-payant mutuelle" style="display: none">
  260.     <label class="fakeLabel" for="tiersPayantMutuelle">Tiers-payant mutuelle</label>
  261.          </div>
  262.        </div>
  263.           
  264.   
  265.     </div>
  266.     
  267.     <div class="card">
  268.     <div >
  269.      <input type="checkbox" id="managerYes" name="isManager" value="yes" style="display: none">
  270.      <label class="fakeLabel right" for="managerYes">Si l'audioprothésiste du centre est également le gérant de l'entreprise, cocher la case:</label>
  271.     </div>
  272.     
  273.    <br>
  274.    <label class="fakeLabel right">Si l'audioprothésiste du centre est différant du gérant de l'entreprise, remplir les éléments ci-dessous</label>
  275.     <div class="checkbox-form checkCivilite">
  276.            <div>
  277.              <input type="radio" id="managerMadame" name="managerCivility" value="Madame" style="display: none">
  278.              <label class="fakeLabel right" for="managerMadame">Madame</label>
  279.            </div>
  280.            <div>
  281.               <input type="radio" id="managerMonsieur" name="managerCivility" value="Monsieur" style="display: none">
  282.                 <label class="fakeLabel right" for="managerMonsieur">Monsieur</label>
  283.            </div>
  284.          </div>
  285.     <input class="form-control borderBottom" type="text" id="managerFirstName" name="managerFirstName" placeholder="Nom">
  286.     <input class="form-control borderBottom"  type="text" id="managerLastName" name="managerLastName"  placeholder="Prénom">
  287.     <input class="form-control borderBottom" type="text" id="managerMobilePhone" name="managerMobilePhone" placeholder="Téléphone portable:">
  288.     <input class="form-control borderBottom" type="email" id="managerEmail" name="managerEmail" placeholder="Email:" >
  289.     </div>
  290.    
  291.        </div>
  292.        <button type="submit" class="form-wizard-submit  btn btn-vert-inverse">Valider votre pré-inscription
  293.         </form>
  294.     </div>
  295.     </section>
  296.    
  297. <script>
  298.         document.getElementById('managerYes').addEventListener('change', function() {
  299.             if (this.checked) {
  300.                       var selectedCivility = document.querySelector('input[name="civility"]:checked');
  301.                 if (selectedCivility) {
  302.                       var selectedCivility = document.querySelector('input[name="civility"]:checked').value;
  303.         // Set the manager civility based on the selected civility
  304.         if (selectedCivility === 'Madame') {
  305.             document.getElementById('managerMadame').checked = true;
  306.         } else if (selectedCivility === 'Monsieur') {
  307.             document.getElementById('managerMonsieur').checked = true;
  308.         }
  309.                 }
  310.                 // Checkbox is checked, populate manager fields
  311.                 document.getElementById('managerFirstName').value = document.getElementById('firstName').value;
  312.                 document.getElementById('managerLastName').value = document.getElementById('lastName').value;
  313.                 document.getElementById('managerMobilePhone').value = document.getElementById('mobilePhone').value;
  314.                 document.getElementById('managerEmail').value = document.getElementById('email').value;
  315.             } else {
  316.                 // Checkbox is unchecked, clear manager fields
  317.                 document.getElementById('managerMadame').checked = false;
  318.                 document.getElementById('managerMonsieur').checked = false;
  319.                 document.getElementById('managerFirstName').value = '';
  320.                 document.getElementById('managerLastName').value = '';
  321.                 document.getElementById('managerMobilePhone').value = '';
  322.                 document.getElementById('managerEmail').value = '';
  323.             }
  324.         });
  325.         $(document).ready(function() {
  326.            var civility = $('input[name="civility"]');
  327.             $(civility).closest('.checkbox-form').addClass('required');
  328.             var isManager = $('input[name="isManager"]');
  329.               $(isManager).closest('div').addClass('required left');
  330.           var inputs = {
  331.             civility: $('input[name="civility"]:checked').val(),
  332.             firstName: $('#firstName').val(),
  333.             lastName: $('#lastName').val(),
  334.             centerPhone: $('#centerPhone').val(),
  335.             mobilePhone: $('#mobilePhone').val(),
  336.             email: $('#email').val(),
  337.             centerAddress: $('#centerAddress').val(),
  338.             postalCode: $('#postalCode').val(),
  339.             city: $('#city').val(),
  340.             finessNumber: $('#finessNumber').val(),
  341.             adeliNumber: $('#adeliNumber').val()
  342.         };
  343.         var requiredFields = ['firstName', 'lastName','adeliNumber', 'centerPhone', 'mobilePhone', 'email', 'centerAddress', 'postalCode', 'city', 'finessNumber'];
  344.         var isValid = true;
  345.         requiredFields.forEach(function(fieldName) {
  346.            $('#' + fieldName).closest('div').addClass('required');
  347.            
  348.         });
  349.        
  350.  $('input[type="radio"][name="plan"]').change(function() {
  351.         var selectedPlan = $(this).val();
  352.         if (selectedPlan === "Multi-Centres") {
  353.           $(".offre-info").hide();
  354.             $('#planA').show();
  355.             $('#planB').hide();
  356.         } else if (selectedPlan === "Multi-Audios") {
  357.             $('#planA').hide();
  358.             $(".offre-info").hide();
  359.             $('#planB').show();
  360.         }
  361.     });
  362. $('input[name="tarifPlan"]').click(function(){
  363.           $(".offre-info").show();
  364. });
  365.             $('#preInscription').submit(function(event) {
  366.                 event.preventDefault();
  367. var inputs = {
  368.             civility: $('input[name="civility"]:checked').val(),
  369.             firstName: $('#firstName').val(),
  370.             lastName: $('#lastName').val(),
  371.             centerPhone: $('#centerPhone').val(),
  372.             mobilePhone: $('#mobilePhone').val(),
  373.             email: $('#email').val(),
  374.             centerAddress: $('#centerAddress').val(),
  375.             postalCode: $('#postalCode').val(),
  376.             city: $('#city').val(),
  377.             finessNumber: $('#finessNumber').val(),
  378.             adeliNumber: $('#adeliNumber').val()
  379.         };
  380.         var requiredFields = ['firstName', 'lastName','adeliNumber', 'centerPhone', 'mobilePhone', 'email', 'centerAddress', 'postalCode', 'city', 'finessNumber'];
  381.         var isValid = true;
  382.         requiredFields.forEach(function(fieldName) {
  383.            $('#' + fieldName).addClass('required');
  384.             if (inputs[fieldName] === '') {
  385.                 isValid = false;
  386.                 $('#' + fieldName).addClass('emptyField');
  387.             } else {
  388.                 $('#' + fieldName).removeClass('emptyField'); 
  389.             }
  390.         });
  391.        var civilityChecked = $('input[name="civility"]:checked').length > 0;
  392. if (!civilityChecked) {
  393. isValid = false;
  394.         $('.checkCivilite').addClass('emptyField');
  395.     } else {
  396.         $('.checkCivilite').removeClass('emptyField');
  397.     }
  398.         if (!isValid) {
  399.             return; 
  400.         }
  401. var civility = $('input[name="civility"]:checked').val();
  402. var plan = $('input[name="plan"]:checked').val();
  403. var tarifPlan = $('input[name="tarifPlan"]:checked').val();
  404. var firstName = $('#firstName').val();
  405. var lastName = $('#lastName').val();
  406. var centerPhone = $('#centerPhone').val();
  407. var mobilePhone = $('#mobilePhone').val();
  408. var email = $('#email').val();
  409. var centerAddress = $('#centerAddress').val();
  410. var postalCode = $('#postalCode').val();
  411. var city = $('#city').val();
  412. var finessNumber = $('#finessNumber').val();
  413. var website = $('#website').val();
  414. var prestation = $('input[name="prestation[]"]:checked').map(function() {
  415.     return this.value;
  416. }).get();
  417. var isManager = $('input[name="isManager"]:checked').val();
  418. var managerCivility = $('input[name="managerCivility"]:checked').val();
  419. var managerFirstName = $('#managerFirstName').val();
  420. var managerLastName = $('#managerLastName').val();
  421. var managerMobilePhone = $('#managerMobilePhone').val();
  422. var adeliNumber = $('#adeliNumber').val();
  423. var managerEmail = $('#managerEmail').val();
  424. var jsonData = {
  425.     civility: civility,
  426.     plan: plan,
  427.     tarifPlan : tarifPlan,
  428.     firstName: firstName,
  429.     lastName: lastName,
  430.     centerPhone: centerPhone,
  431.     mobilePhone: mobilePhone,
  432.     email: email,
  433.     centerAddress: centerAddress,
  434.     postalCode: postalCode,
  435.     city: city,
  436.     finessNumber: finessNumber,
  437.     website: website,
  438.     prestation: prestation,
  439.     isManager: isManager,
  440.     managerCivility: managerCivility,
  441.     managerFirstName: managerFirstName,
  442.     managerLastName: managerLastName,
  443.     managerMobilePhone: managerMobilePhone,
  444.     adeliNumber: adeliNumber,
  445.     managerEmail: managerEmail
  446. };
  447.                 $.ajax({
  448.                     type: 'POST',
  449.                     url: BASE_API + 'create-partner-preinscription',
  450.                     dataType: "json",
  451.                     data: JSON.stringify(jsonData), // Convert JSON object to string
  452.                     success: function(response) {
  453.                         // Handle success response here
  454.                            location.href="/preinscription-termine?prenom="+lastName;
  455.                     },
  456.                     error: function(xhr, status, error) {
  457.                         // Handle error here
  458.                         alert('Error:', error);
  459.                     }
  460.                 });
  461.             });
  462.         });
  463. $(document).ready(function () {
  464.  
  465.   $('.required input[placeholder]').each(function () {
  466.   
  467.     var placeholderText = $(this).attr('placeholder');
  468.   
  469.     var tempElement = $('<span>').text(placeholderText).css({
  470.       'visibility': 'hidden',
  471.       'font-family': $(this).css('font-family'),
  472.       'font-size': '20px', 
  473.     });
  474.     $('body').append(tempElement);
  475.     var asteriskSpan = $('<span>').text('*');
  476.     $(this).parent().append(asteriskSpan);
  477.     var placeholderWidth = tempElement.outerWidth();
  478.     asteriskSpan.css('left', placeholderWidth + 5 + 'px'); 
  479.     tempElement.remove();
  480.   });
  481. });
  482.     </script>
  483. {% endblock %}