<div class="modal " id="customer-modal">
    <div class="modal-background"></div>
    <div class="modal-card">
      
      <section class="modal-card-body">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon"><i class="mdi mdi-ballot"></i></span>
              Nouveau client
            </p>
            
            <button class="delete" onclick="closePopup('customer-modal')" aria-label="close"></button>
          </header>

          <div class="card-content">
            <form method="post" id="customer-form"  enctype="multipart/form-data" >
              {% csrf_token %}
              
              <input type="hidden" name="id" value="" id="id">
              <input type="hidden" name="action" value="add">
              <input type="hidden" name="forContract" id="forContract" value="false">

              <div class="subtitle is-6 mb-2" style="font-size:10px">Information perso</div>
              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <label class="label is-small">Prénom</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="first_name" placeholder="Prénom" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-account"></i></span>
                    </p>
                  </div>
                  <div class="field">
                    <label class="label is-small">Nom</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="last_name" placeholder="Nom" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-account"></i></span>
                    </p>
                  </div>
                  <div class="field">
                    <label class="label is-small">Email</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="email" name="email" placeholder="Email" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-email"></i></span>
                    </p>
                  </div>

                  


                </div>
              </div>
            
              <div class="field is-horizontal">
                <div class="field-body">
                  
                  <div class="field">
                    <label class="label is-small">Date de naissance</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="date" name="birthdate" placeholder="Date de naissance" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-calendar"></i></span>
                    </p>
                  </div>

                  <div class="field">
                    <label class="label is-small">Lieu de naissance</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="birthplace" required>
                          <option value="">Lieu de naissance</option>
                          {% for place in places %}
                            <option value="{{ place.id }}">{{ place.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-map"></i></span>
                    </div>
                  </div>

                  
                  <div class="field">
                    <label class="label is-small">Sexe</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="sex" required>
                          <option value="">Sexe</option>
                          {% for key, label in SEX %}
                            <option value="{{ key }}">{{ label }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-gender-male-female"></i></span>
                    </div>
                  </div>


                  <div class="field">
                    <label class="label is-small">Nationalité</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="nationality" required>
                          <option value="">Nationalité</option>
                          {% for nat in nationalities %}
                            <option value="{{ nat.id }}">{{ nat.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-flag"></i></span>
                    </div>
                  </div>


                </div>
              </div>

              <div class="field is-horizontal">
                <div class="field-body">

                  <div class="field">
                    <label class="label is-small">Téléphone</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="phone" placeholder="Téléphone" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-phone"></i></span>
                    </p>
                  </div>
                  
                  <div class="field">
                    <label class="label is-small">Adresse</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="address" placeholder="Adresse">
                      <span class="icon is-small is-left"><i class="mdi mdi-map-marker"></i></span>
                    </p>
                  </div>

                  

                  
                </div>
              </div>

              <hr>
              

              <div class="subtitle is-6 mb-2" style="font-size:10px">Informations professionelles</div>
              <div class="field is-horizontal">
                <div class="field-body">
                  


                  <div class="field">
                    <label class="label is-small">Profession</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="profession" required>
                          <option value="">Profession</option>
                          {% for p in professions %}
                            <option value="{{ p.id }}">{{ p.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-briefcase"></i></span>
                    </div>
                  </div>

                  <div class="field">
                    <label class="label is-small">Secteur d'activité</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="sector" required>
                          <option value="">Secteur d'activité</option>
                          {% for s in sectors %}
                            <option value="{{ s.id }}">{{ s.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-domain"></i></span>
                    </div>
                  </div>

                </div>
              </div>
            
              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <label class="label is-small">Type d'identité</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="identityType" required>
                          <option value="">Type d'identité</option>
                          {% for key, label in indentityTypes %}
                            <option value="{{ key }}">{{ label }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-card-account-details"></i></span>
                    </div>
                  </div>
                  <div class="field">
                    <label class="label is-small">Numéro d'identité</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="identityNumber" placeholder="Numéro d'identité" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-card-text-outline"></i></span>
                    </p>
                  </div>
                  <div class="field">
                    <label class="label is-small">Date d'émission</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="date" name="dateOfIssue" placeholder="Date d'émission" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-calendar-check"></i></span>
                    </p>
                  </div>
                </div>
              </div>
            
              <hr>

              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <label class="label is-small">Banque</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="bank" required>
                          <option value="">Banque</option>
                          {% for b in banks %}
                            <option value="{{ b.id }}">{{ b.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-bank"></i></span>
                    </div>
                  </div>
                  <div class="field">
                    <label class="label is-small">Code banque</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="codeBank" placeholder="Code banque" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-bank-transfer"></i></span>
                    </p>
                  </div>
                  <div class="field">
                    <label class="label is-small">RIB</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="rib" placeholder="RIB" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-numeric"></i></span>
                    </p>
                  </div>
                </div>
              </div>
            
              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <label class="label is-small">Numéro de compte</label>
                    <p class="control is-expanded has-icons-left">
                      <input class="input" type="text" name="numberBank" placeholder="Numéro de compte" required>
                      <span class="icon is-small is-left"><i class="mdi mdi-numeric"></i></span>
                    </p>
                  </div>

                  

                  
                </div>
              </div>

              
            
              <hr>
            
              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <div class="field is-grouped">
                      <div class="control">
                        <button id="customer-submit" type="submit" class="button is-info is-small">
                          <span>Sauver</span>
                        </button>
                      </div>
                      <div class="control">
                        <button id="customer-cancer" type="button" class="button is-danger is-light is-small">
                          <span>Annuler</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>

            
            {% comment %} Recapchat input {% endcomment %}
            <input type="hidden" name="g-recaptcha-response" id='recaptcha'>
            <script src="https://www.google.com/recaptcha/api.js?render={{RECAPTCHA_PUBLIC_KEY}}"></script>
            
            
          </div>
        </div>

        <!-- Content ... -->
      </section>
      
    </div>
</div>







<script type="text/javascript">

  $(document).ready(function () {
    $("#customer-form").submit(function (event) {
        event.preventDefault()
        var formData = new FormData(this);
       grecaptcha.execute('{{RECAPTCHA_PUBLIC_KEY}}').then(function (token) {
        
            
            formData.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value);
            formData.append('recap', token);

            $.ajax({
                type: "POST",
                url: "{% url 'app:createOrUpdateCustomer' %}",
                processData: false,
                contentType: false,
                complete: function () {
                },
                data: formData,

                error: function (data) {
                    $("#customer-submit").removeClass("is-loading");
                    $("#customer-submit").attr("disabled", false);
                    $("#customer-cancel").attr("disabled", false);

                    Swal.fire({
                        title: "Erreur",
                        text: "Une erreur s'est produite lors de la soumission du formulaire.",
                        icon: "error",
                    });

                    console.log(data)

                },
                beforeSend: function () {

                    $("#customer-submit").addClass("is-loading");
                    $("#customer-submit").attr("disabled", true);
                    $("#customer-cancel").attr("disabled", true);
                },
                success: function (data) {

                    $("#customer-submit").removeClass("is-loading");
                    $("#customer-submit").attr("disabled", false);
                    $("#customer-cancel").attr("disabled", false);


                    if (data['status'] == "success") {
                        Swal.fire({
                            title: "Réussit",
                            text: data.message,
                            icon: "success",
                            timer: 1000,
                        });
                        document.getElementById("customer-form").reset()
                        
                        if($("#forContract").val() != "true"){
                          goTo("{% url 'app:customers' %}")
                          closePopup('customer-modal')
                        }else{
                          $("#customer-autocomplete").val(data.customer.name);
                          $("#customerContractId").val(data.customer.id);
                          $("#customer-suggestions").hide();
                          closePopup('customer-modal')
                        }
                        
                        
                    } else {
                        Swal.fire({
                            title: "Erreur",
                            text: data.message,
                            icon: "error",
                        });
                    }



                }
            });
        });
        return false;
   });
});

</script>