<turbo-stream action="update" target="modal-contact"><template><div class="modal  fade" id="modalParrain" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <img class="icon bg-dark" src="https://www.isoneos.com/assets/theme/icons/interface/cross-25a1f2c4eb0de8992417ba1453e107d0e64ed3255cbd09884b52548a2f9482a2.svg" alt="cross interface icon" data-inject-svg />
        </button>
        <div class="m-xl-4 m-3">
          <div class="text-center mb-4">
            <h4 class="h3 mb-1">Parrainage</h4>
            <span>Parrainer un proche ou un ami !</span>
          </div>
          <form id="contact_parrain_form" action="https://www.isoneos.com/contact_parrain" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="-qK-QD_btrOrSRg4t71FpcAEO2WTjG8134q_HPfWGr26MBl_Uu695mfPpEHH8YFMMQDxcy6HlUscKyaF88_V4A" autocomplete="off" />
          <div class="row">
            <div class="col-lg-6 col-sm-12 pl-0">
              <h4 class="h4 mb-1">Infos Parrain</h4>
              <div class="form-group">
                <input required="required" placeholder="Prénom" class="form-control" type="text" name="prenom_parrain" id="prenom_parrain" />
              </div>
              <div class="form-group">
                <input required="required" placeholder="Nom" class="form-control" type="text" name="nom_parrain" id="nom_parrain" />
              </div>
              <div class="form-group">
                <input placeholder="Email" required="required" class="form-control" type="email" name="email_parrain" id="email_parrain" />
              </div>
              <div class="form-group">
                <input placeholder="Téléphone" required="required" class="form-control" type="tel" name="phone_parrain" id="phone_parrain" />
              </div>
              <div class="form-group" data-controller="select2" id="parent">
                <select id="select_status_oeuvre" style="width:100%;height:100%" data-select2-target="select" data-placeholder="Comment avez vous connu Isoneos ?" data-parent="#parent" data-minimum="-1" name="find"><option value="" label=" "></option>
<option value="Google">Google</option>
<option value="Travaux.com">Travaux.com</option>
<option value="Agent Immobilier">Agent Immobilier</option>
<option value="Architecte">Architecte</option>
<option value="Chasseur d&#39;Appartement">Chasseur d&#39;Appartement</option>
<option value="ChatGPT">ChatGPT</option>
<option value="Entrepreneur">Entrepreneur</option>
<option value="Hello Artisan">Hello Artisan</option>
<option value="Habitat Presto">Habitat Presto</option>
<option value="Partenaire">Partenaire</option>
<option value="Réseaux Sociaux">Réseaux Sociaux</option>
<option value="Publicité">Publicité</option>
<option value="Autre">Autre</option></select>
              </div>
            </div>
            <div class="col-lg-6 col-sm-12 pr-0">
              <h4 class="h4 mb-1">Infos Filleul</h4>
              <div class="form-group ">
                <input required="required" placeholder="Prénom" class="form-control" type="text" name="prenom_filleul" id="prenom_filleul" />
              </div>
              <div class="form-group">
                <input required="required" placeholder="Nom" class="form-control" type="text" name="nom_filleul" id="nom_filleul" />
              </div>

              <div class="form-group">
                <input placeholder="Email" required="required" class="form-control" type="email" name="email_filleul" id="email_filleul" />
              </div>
              <div class="form-group">
                <input placeholder="Téléphone" required="required" class="form-control" type="tel" name="phone_filleul" id="phone_filleul" />
              </div>
            </div>
          </div>
          <input type="hidden" name="recaptcha_token" id="recaptcha_token" value="" autocomplete="off" />

            <div class="form-group w-50 m-auto text-center pt-3">
              <button class="btn-block btn btn-primary" type="submit" id="button_parrain">Parrainer</button>
            </div>
            <div class="form-group pt-3">
              <div class="text-muted" for="signup-agree">En validant le formulaire vous acceptez ainsi que votre filleul, nos <a href="#">Conditions Générales d'Utilisation.</a></div>
            </div>
            <hr>

</form>        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=6LcNf1YrAAAAALf8Q22q78AqXdj8UMWrjErNCEyM"></script>

<script type="text/javascript">
  $('#modalParrain').modal('show');


  $('#button_parrain').on('click', function() {
      // Check if the required fields are filled
      var isFormValid = true;
      $('#modalParrain form').find('[required]').each(function() {
        if (!$(this).val()) {
          isFormValid = false;
          return false; // Exit the loop early if a required field is empty
        }
      });

      if (isFormValid) {
        // If the form is valid, hide the modal
        $('#modalParrain').modal('hide');
      } else {
        // If the form is not valid, show an alert or take another action
        //alert("Merci de remplir tous les informations nécessaires !");
        // You can customize the error handling here
      }
    });


  SVGInjector(document.querySelectorAll('[data-inject-svg]'));

  $(document).ready(function() {
    var form = document.getElementById('contact_parrain_form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
      // Only do reCAPTCHA if token is empty
      if (document.getElementById('recaptcha_token').value === "") {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('6LcNf1YrAAAAALf8Q22q78AqXdj8UMWrjErNCEyM', {action: 'contact_parrain_save'}).then(function(token) {
            document.getElementById('recaptcha_token').value = token;
            console.log(token)
            // Now call requestSubmit to trigger a REAL user-like submit (Turbo will handle!)
            form.requestSubmit();
          });
        });
      }
      // else, token is present, let Turbo handle the submit naturally!
    });
  });

</script>
</template></turbo-stream>
