<div class="modal " id="user-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 utilisateur
            </p>
            
            <button class="delete" onclick="closePopup('user-modal')" aria-label="close"></button>
          </header>

          <div class="card-content">
            <form method="post" id="user-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="field is-horizontal">
                        <div class="field-body">
                          <div class="field">
                            <label class="label is-small">Type d'utilisateur</label>
                            <div class="control  ">
                              <div class="select is-fullwidth">
                                <select name="type" required>
                                  <option value="">Type d'utilisateur</option>
                                  {% for key, label in user_types %}
                                    <option value="{{ key }}">{{ label }}</option>
                                  {% endfor %}
                                </select>
                              </div>
                              
                            </div>
                          </div>
                    </div>
              </div>

              {% for group in form  %}
                <div class="subtitle is-6 mb-2" style="font-size:10px">{{group.name}}</div>
                
                    {% for gf in group.fields  %}
                      <div class="field is-horizontal">
                        <div class="field-body">
                        {% for field  in gf  %}
                        
                            {% if field.type == 'input' or field.type == 'text' or field.type == 'email' or field.type == "tel" %}
                              <div class="field">
                                <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                                <p class="control is-expanded ">
                                  <input class="input" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %}>
                                  {% comment %} <span class="icon is-small is-left"><i class="mdi mdi-account"></i></span> {% endcomment %}
                                </p>
                              </div>
                            {% endif %}
                        {% endfor %}
                        </div>
                      </div>
                        
                    {% endfor %}
                    
              
              {% endfor %}

              <hr>
            
              <div class="field is-horizontal">
                <div class="field-body">
                  <div class="field">
                    <div class="field is-grouped">
                      <div class="control">
                        <button id="user-submit" type="submit" class="button is-info is-small">
                          <span>Sauver</span>
                        </button>
                      </div>
                      <div class="control">
                        <button onclick="closePopup('user-modal')" id="user-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 () {
    $("#user-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:createOrUpdateUser' %}",
                processData: false,
                contentType: false,
                complete: function () {
                },
                data: formData,

                error: function (data) {
                    $("#user-submit").removeClass("is-loading");
                    $("#user-submit").attr("disabled", false);
                    $("#user-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 () {

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

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


                    if (data['status'] == "success") {
                        Swal.fire({
                            title: "Réussit",
                            text: data.message,
                            icon: "success",
                            timer: 1000,
                        });
                        document.getElementById("user-form").reset()
                        
                          goTo("{% url 'app:users' %}")
                          closePopup('user-modal')
                        
                        
                        
                    } else {
                        Swal.fire({
                            title: "Erreur",
                            text: data.message,
                            icon: "error",
                        });
                    }



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

</script>