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

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


              <div class="field">
                    <label class="label is-small">Contrat</label>
                    <div class="control has-icons-left">
                      <div class="select is-fullwidth">
                        <select name="contract" required>
                          {% for c in contracts %}
                            <option value="{{ c.id }}">{{ c.uuid }} - {{c.customer.name}} - {{c.type}}</option>
                          {% endfor %}
                        </select>
                      </div>
                      <span class="icon is-small is-left"><i class="mdi mdi-map"></i></span>
                    </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"  or field.type == "number" %}
                              <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 %} {% if field.type == 'number' %} value="{{field.min}}" min="{{field.min}}" max= "{{field.max}}" step="{{field.step}}" {% endif %}>
                                  {% comment %} <span class="icon is-small is-left"><i class="mdi mdi-account"></i></span> {% endcomment %}
                                </p>
                              </div>
                            {% endif %}
                            
                            {% if field.type == 'date' %}

                            <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 has-icons-left">
                                <input class="input" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %}  >
                                <span class="icon is-small is-left"><i class="mdi mdi-calendar-check"></i></span>
                              </p>
                            </div>
                            
                            {% endif %}


                            {% if field.type == 'select' %}
                              <div class="field">
                                <label class="label is-small">{{field.label}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                                <div class="control ">
                                  <div class="select is-fullwidth">
                                    <select name="{{field.name}}" {% if field.required %} required {% endif %} {% if field.disabled %} disabled {% endif %}>
                                      <option value="">Sélectionner {{field.label}}</option>
                                      {% for key, label in field.options %}
                                        <option value="{{ key }}">{{ label }}</option>
                                      {% endfor %}
                                    </select>
                                  </div>
                                  
                                </div>
                              </div>
                            {% endif %}


                        {% endfor %}
                        </div>
                      </div>
                        
                    
                    {% endfor %}
                    
                <hr>
              
              {% endfor %}

              <div class="field is-horizontal">
                <div class="field-body is-flex is-flex-direction-row is-justify-content-center">
                  <div class="field">
                    <label class="label is-small">Pièce jointe Justificatif (pdf)</label>
                    
                    <p class="control">
                      <input type="file" name="employeePdf" accept="application/pdf" class="input">

                    </p>
                  </div>
                  

                </div>
              </div>

              <hr>

  
              <div class="field is-grouped is-grouped-right">
                <p class="control">
                  <button type="submit" id="employee-submit" class="button is-info is-small">
                    <span class="icon"><i class="mdi mdi-content-save"></i></span>
                    <span>Enregistrer</span>
                  </button>
                </p>
                <p class="control">
                  <button id="employee-cancel" type="button" class="button is-light is-small " onclick="closePopup('employee-modal')">
                    <span>Annuler</span>
                  </button>
                </p>
              </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>


{% include "partials/customers/customer-form.html" %}
  


<script type="text/javascript">

  $("#forContract").val("true") //  

  $(document).ready(function () {
    $("#employee-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:createOrUpdateEmployee' %}",
                processData: false,
                contentType: false,
                complete: function () {
                },
                data: formData,

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

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

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


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



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






// // autocomplete

//   $(document).ready(function () {
      
//       $("#customer-autocomplete").on("keydown", function () {
          
//           $("#customerContractId").val("");
//           console.log( "reset "+ $("#customerContractId").val())
//           $("#customer-suggestions").hide();
//       });
       
//       $("#customer-autocomplete").on("keyup", function () {


//           let search = $(this).val();
//           if (search.length < 2) {
//               $("#customer-suggestions").hide();


//               return;
//           }
  
//           $.ajax({
//               url: "{% url 'app:customersAutocomplete' %}",
//               type: "POST",
//               data: {
//                   search: search,
//                   csrfmiddlewaretoken: "{{ csrf_token }}"
//               },
//               success: function (response) {
//                   if (response.status === "success") {
//                       console.log(response.data.customers)
//                       let suggestions = response.data.customers;
//                       let suggestionsBox = $("#customer-suggestions");
//                       suggestionsBox.empty();
  
//                       if (suggestions.length > 0) {
//                           suggestions.forEach(function (customer) {
//                               suggestionsBox.append(`
//                                   <div class="dropdown-item customer-suggestion" data-id="${customer.id}" data-name="${customer.name} ">
//                                      <i class="mdi mdi-account"></i> &nbsp; ${customer.code} ${customer.name} (${customer.phone})
//                                   </div>
//                               `);
//                           });
//                           suggestionsBox.show();
//                       } else {
//                           suggestionsBox.hide();
//                       }
//                   }
//               }
//           });
//       });
  
//       $(document).on("click", ".customer-suggestion", function () {
//           let fullName = $(this).data("name");
//           let customerId = $(this).data("id");
  
//           $("#customer-autocomplete").val(fullName);
//           $("#customerContractId").val(customerId);
//           $("#customer-suggestions").hide();

//           console.log(customerId)
//           console.log($("#customerContractId").val())
//       });
  
//       $(document).click(function (e) {
//           if (!$(e.target).closest("#customer-autocomplete, #customer-suggestions").length) {
//               $("#customer-suggestions").hide();
//           }
//       });
//   });
  
  

</script>