{% extends 'backoffice/base.html' %}

{% block title %} Employé {{employee.cuser.user.first_name}} {{employee.cuser.user.last_name}} {% endblock  %}

{% block metaseo %} 

        <meta name="robots" content="index, follow, ">
        <meta name="title" content="">

        <meta name="description"
        content="">

        <meta property="og:title" content="" />

        <meta name="keywords" content=''>
        
{% endblock %}

{% block content %}

<script>

    {% if user.cuser.type == "EMPLOYEE"  %}
      document.getElementById('menu-contracts').classList.add('is-active');
    {% else %}
      document.getElementById('menu-employees').classList.add('is-active');
    {% endif %}

    var benefs = [
      
    ];

    {% for benef in benefs %}

      benefs.push({
        "index": "beneficiary{{benef.id}}",
        "id": "{{benef.id}}",
      });
    {% endfor %}
    

    function addBenef() {
    var benef_el = document.getElementById("employee-benef");
    var benef = document.createElement("div");
    var index = benefs.length + 1;

    benef.id = "benef"+index;
    var newDiv = document.createElement("div");
    
    
    newDiv.className = "field is-horizontal";
    
    
    newDiv.innerHTML = `
        <div class="field-body">
          <div class="field">
            <label class="label is-small">Nom</label>
            <p class="control is-expanded ">
              <input class="input" type="text" name="benefName`+index+`" placeholder="Nom" required>
            </p>
          </div>
          <div class="field">
            <label class="label is-small">Téléphone</label>
            <p class="control is-expanded ">
              <input class="input" type="text" name="benefPhone`+index+`" placeholder="Téléphone" required>
            </p>
          </div>
          <div class="field">
            <label class="label is-small">Adresse</label>
            <p class="control is-expanded ">
              <input class="input" type="text" name="benefAddress`+index+`" placeholder="Adresse" required>
            </p>
          </div>
        </div> `;
      
      
      
      if (benefs.length > 0) {
        benef.appendChild(document.createElement("hr"));
      }
      
      benef.appendChild(newDiv);

      newDiv = document.createElement("div");

      newDiv.className = "field is-horizontal";
      newDiv.id = "benef" + index + "2";

      newDiv.innerHTML = `
        <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="benefBirthdate`+index+`" 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">Pourcentage *</label>
                <p class="control is-expanded ">
                  <input class="input" type="number" min="1" max="100"  name="benefPercentage`+index+`" placeholder="Pourcentage" required>
                </p>
          </div>
          <div class="field">
              <label class="label is-small">Nationalité *</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select name="benefNationality`+index+`" 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> `;
      
      benef.appendChild(newDiv);
      

      if (benefs.length > 0) {
        benef.innerHTML += `<span onclick ="deleteBenef(`+index+`)" style="cursor:pointer;" class="tag noprint is-danger is-small">Supprimer</span>`
      }
      
      benef_el.appendChild(benef);
      benefs.push({
        id:-1,
        index: index +"",
        name: "benefName"+index,
        birthdate: "benefBirthdate"+index,
        phone: "benefPhone"+index,
        address: "benefAddress"+index,
        percentage: "benefPercentage"+index,});

      console.log(benefs);
    }

    </script>
    <section class="section is-title-bar" >

        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <ul >
                <li style="font-size: 15px !important; ">AZ</li>
                <li style="font-size: 15px !important; "><a href="{% url 'app:employees' %}">Employés</a> </li>
                <li style="font-size: 15px !important; ">{{employee.cuser.user.first_name}} {{employee.cuser.user.last_name}}</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              {% if employee.state == "INITIAL" and user.cuser.type == "EMPLOYEE" %}
                  <button onclick="window.location.href=`{% url 'app:changeEmployeeStatus' %}?employeeId={{employee.id}}&status=PENDING&next=single`" class="button is-info is-dark is-small">Soumettre ma fiche</button>
              {% endif %}
              {% if employee.state == "PENDING"   %}
                  {% if  user.cuser.type == "CUSTOMER_DRH" %}
                    <button onclick="window.location.href=`{% url 'app:changeEmployeeStatus' %}?employeeId={{employee.id}}&status=SUBMITTED&next=single`" class="button is-info is-dark is-small">Soumettre l'employé</button>
                  {% endif %}
              {% endif %}

              {% if employee.state == "SUBMITTED"  %}
                  {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD" or user.cuser.type == "ADMIN_PRESTA"   %}
                    <button onclick="window.location.href=`{% url 'app:changeEmployeeStatus' %}?employeeId={{employee.id}}&status=ACCEPTED&next=single`" class="button is-success is-dark is-small">valider l'employé</button>
                  {% endif %}
                  
              {% endif %}

              {% comment %} <button  type="button" class="button is-warning is-light is-small " onclick="printElement('contract-print')">Imprimer</button>
                 {% endcomment %}
              
            </div>
          </div>
        </div>

    </section>

    <div class="container" style="min-height: 85vh;">

      <div id="contract-print" class="card m-3 has-table">
        <header class="card-header">
          <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-list-box-outline"></i></span>
            {{employee.contract.libelle}} - {{employee.cuser.user.first_name}} {{employee.cuser.user.last_name}} 
          </p>
          <a href="#" class="card-header-icon">
            
            {% comment %} States {% endcomment %}
            État de la souscription: &nbsp;
            {% if employee.state == "INITIAL" %}
              <span class="tag is-light is-small">Initial</span>
            {% endif %}
            {% if employee.state == "PENDING" %}
              <span class="tag is-warning is-small">En attente de validation</span>
            {% endif %}
            {% if employee.state == "SUBMITTED" %}
              <span class="tag is-info is-small">Soumis</span>
            {% endif %}
            {% if employee.state == "ACCEPTED" %}
              <span class="tag is-success is-small">Validé</span>
            {% endif %}

          </a>
        </header>
        <div class="card-content p-3 px-6" style="min-height: 80vh;">
            
            <form method="post" id="employee-form" enctype="multipart/form-data">
              {% csrf_token %}
              <input type="hidden" name="action" value="update">
              <input type="hidden" name="employeeId" value="{{ employee.id }}">
              <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 disabled>
                            <option selected value="{{ employee.contract.id }}">{{ employee.contract.uuid }} - {{employee.contract.customer.name}} - {{employee.contract.type}}</option>
                        </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 {% if field.disabled %} disabled {% endif %} value ="{{field.value}}" class="input" type="{{field.type}}" name="{{field.name}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %} {% if field.type == 'number' %}  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 {% if field.disabled %} disabled {% endif %} value ="{{field.value}}"  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 {{field.actions}} value ="{{field.value}}" 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 }}" {% if field.value != '' and field.value == key %}selected{% endif %} >{{ label }}</option>
                                      {% endfor %}
                                    </select>
                                  </div>
                                  
                                </div>
                              </div>
                            {% endif %}


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


              {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD" or user.cuser.type == "ADMIN_PRESTA" %}

              {% comment %} <div class="field is-horizontal noprint">
                <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)  {% if employee.contractFile %}<a href="{{employee.contractFile.url}}">&nbsp;&nbsp; Voir document</a>{% endif %} </label>
                    
                    <p class="control">
                      <input type="file" name="contractFile" accept="application/pdf" class="input">
                    </p>

                  </div>
                  

                </div>
              </div>

              <hr> {% endcomment %}
              {% endif %}

              <div id="beneficiary-block" style="display: {% if employee.clause == 'GENERIC' %}none{% else %}block{% endif %};">
              
              
                <div class="subtitle is-6 mb-2" style="font-size:10px">Bénéficiaires</div>

                

                <div id="employee-benef"  >
                  
                  {% if benefs  %} 

                      {% for b in benefs  %}

                        <div id="benefbeneficiary{{b.id}}">
                        <div class="field is-horizontal">
                          <div class="field-body">
                            
                            <div class="field">
                            <label class="label is-small">Nom</label>
                            <p class="control is-expanded ">
                              <input {{benefDisabled}} value="{{b.name}}" class="input" type="text" name="benefName{{b.toJSON.index}}" placeholder="Nom" required>
                            </p>
                            </div>
                            <div class="field">
                              <label class="label is-small">Téléphone</label>
                              <p class="control is-expanded ">
                                <input {{benefDisabled}} value="{{b.phone}}" class="input" type="text" name="benefPhone{{b.toJSON.index}}" placeholder="Téléphone" required>
                              </p>
                            </div>
                            <div class="field">
                              <label class="label is-small">Adresse</label>
                              <p class="control is-expanded ">
                                <input {{benefDisabled}} value ="{{b.address}}" class="input" type="text" name="benefAddress{{b.toJSON.index}}" placeholder="Adresse" required>
                              </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 {{benefDisabled}} value='{{ b.toJSON.birthdate }}' class="input" type="date" name="benefBirthdate{{b.toJSON.index}}" 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">Pourcentage *</label>
                                  <p class="control is-expanded ">
                                    <input {{benefDisabled}} value="{{b.percentage}}" class="input" type="number" min="1" max="100"  name="benefPercentage{{b.toJSON.index}}" placeholder="Pourcentage" required>
                                  </p>
                            </div>
                            <div class="field">
                                <label class="label is-small">Nationalité *</label>
                                <div class="control has-icons-left">
                                  <div class="select is-fullwidth">
                                    <select {{benefDisabled}} name="benefNationality{{b.toJSON.index}}" required>
                                      <option value="" >Nationalité</option> 
                                      {% for nat in nationalities %}
                                        <option {% if nat == b.nationality %}selected{% endif %} 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>

                        {% if user.cuser.type == "EMPLOYEE" %}
                        <span onclick ="deleteBenef('beneficiary{{b.id}}')" style="cursor:pointer;" class="tag noprint is-danger is-small">Supprimer</span>
                        {% endif %}


                      </div>

                      <br>
                      {% endfor %}
                  
                  {% else %}

                    {% if user.cuser.type == "EMPLOYEE" and employee.clause == "SPECIFIC"  %}

                    <script>
                    addBenef();
                    </script>
                    
                    {% elif user.cuser.type != "EMPLOYEE" %}
                    <div class="notification is-light">
                      Aucun bénéficiaire n'est ajouté.
                    </div>
                    {% endif %}
                    
                    
                  {% endif %}

                </div>
                <hr>
                {% if user.cuser.type == "EMPLOYEE" %}
                    <span onclick="addBenef()" style="cursor:pointer" class="tag noprint is-info is-small mb-5">Ajouter un nouveau bénéficiaires</span>
                {% endif %}

                
              </div>
              
              
              <div id="generic-clause" class="" {% if employee.clause != "GENERIC" %} style="display:none;" {% endif %}>
                
                <div class="field is-horizontal">
                  <div class="field-body">
                    <div class="field">
                      <label class="label is-small">Clause Générique</label>
                      <p class="control is-expanded">
                        <input class="input"  {% if user.cuser.type != "EMPLOYEE" %}disabled{% endif %} type="text" list="clauseDescriptions" name="clauseDescription" value="{{employee.clauseDescription}}">
                        <datalist id="clauseDescriptions">
                          {% for key, value in clause_generic %}
                            <option value="{{key}}">{{value}}</option>
                          {% endfor %}
                        </datalist>
                      </p>
                      
                    </div>
                  </div>
                </div>
                <hr>
                
              </div>
              

              {% for groupedQuestion in questions  %}

              <div class="subtitle is-6 mb-5" style="font-size:18px">{{groupedQuestion.title}}</div>

              {% for field in groupedQuestion.items  %}

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

                    {% if   field.type == 'text' or field.type == 'email' or field.type == "tel"  or field.type == "number" %}
                               
                    <div class="field">
                      <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      <p class="control is-expanded ">
                        <input {{questionDisabled}}    value ="{{field.valueTemp}}" class="input" type="{{field.type}}" name="question{{field.id}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %} {% if field.type == 'number' %}  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.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                    <p class="control is-expanded has-icons-left">
                      <input {{questionDisabled}} {% if field.disabled %} disabled {% endif %} value ="{{field.valueTemp}}"  class="input" type="{{field.type}}" name="question{{field.id}}" 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.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      <div class="control ">
                        <div class="select is-fullwidth">
                          <select {{questionDisabled}} value ="{{field.valueTemp}}" name="question{{field.id}}" {% if field.required %} required {% endif %} {% if field.disabled %} disabled {% endif %}>
                            <option value="OUI">OUI</option>
                            <option value="NON">NON</option>
                          </select>
                        </div>
                        
                      </div>
                    </div>
                  {% endif %}
                  {% if field.type == 'radio' %}
                    <div class="field">
                      <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      
                      <div class="control">
                        <label class="radio">
                          <input {{questionDisabled}} type="radio" {% if field.valueTemp == 'OUI' %}checked{% endif %} {% if field.required %}required{% endif %} name="question{{field.id}}" value='OUI' />
                          OUI
                        </label>
                        <label class="radio">
                          <input {{questionDisabled}} type="radio" {% if field.valueTemp == 'NON' %}checked{% endif %} {% if field.required %}required{% endif %} name="question{{field.id}}" value='NON' />
                          NON
                        </label>
                      </div>


                    </div>
                  {% endif %}

                  </div>
                </div>


                {% comment %} SUB question {% endcomment %}

                {% for field in field.subQuestion.all  %}

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

                    {% if   field.type == 'text' or field.type == 'email' or field.type == "tel"  or field.type == "number" %}
                               
                    <div class="field" id="field-question{{field.id}}">
                      <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      <p class="control is-expanded ">
                        <input {{questionDisabled}}  {% if field.disabled %} disabled {% endif %} value ="{% for a in answers  %}{% if a.question == field  %}{{a.getAnswer}}{% endif %}{% endfor %}" class="input" type="{{field.type}}" name="question{{field.id}}" placeholder="{{field.label}}" {% if field.required %} required {% endif %} {% if field.type == 'number' %}   {% 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" id="field-question{{field.id}}">
                    <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                    <p class="control is-expanded has-icons-left">
                      <input {{questionDisabled}} {% if field.disabled %} disabled {% endif %} value ="{% for a in answers  %}{% if a.question == field  %}{{a.getAnswer}}{% endif %}{% endfor %}"  class="input" type="{{field.type}}" name="question{{field.id}}" 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" id="field-question{{field.id}}">
                      <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      <div class="control ">
                        <div class="select is-fullwidth">
                          <select {{questionDisabled}} value ="{{field.valueTemp}}" name="question{{field.id}}" {% if field.required %} required {% endif %} {% if field.disabled %} disabled {% endif %}>
                            <option {% for a in answers  %}{% if a.question == field and a.answer == "OUI"  %}checked{% endif %}{% endfor %} value="OUI">OUI</option>
                            <option {% for a in answers  %}{% if a.question == field and a.answer == "NON"  %}checked{% endif %}{% endfor %} value="NON">NON</option>
                          </select>
                        </div>
                        
                      </div>
                    </div>
                  {% endif %}

                  {% if field.type == 'radio' %}
                    <div class="field" id="field-question{{field.id}}">
                      <label class="label is-small">{{field.question}} {% if field.required %}<span style="color:red !important">*</span> {% endif %}</label>
                      
                      <div class="control">
                        <label class="radio">
                          <input {{questionDisabled}} {% for a in answers  %}{% if a.question == field and a.answer == "OUI"  %}checked{% endif %}{% endfor %} type="radio" {% if field.required %}required{% endif %} name="question{{field.id}}" value='OUI' />
                          OUI
                        </label>
                        <label class="radio">
                          <input {{questionDisabled}} type="radio" {% for a in answers  %}{% if a.question == field and a.answer == "NON"  %}checked{% endif %}{% endfor %} name="question{{field.id}}" value='NON'/>
                          NON
                        </label>
                      </div>

                    </div>
                  {% endif %}

                  </div>
                </div>
                
                
                <script>

                  function updateRequirements(){
                    $('form :input').each(function () {
                        if (!$(this).is(':visible')) {
                            $(this).prop('required', false);
                        }
                    });
                  }

                  if ($('input[name="question{{field.getParentId}}"]:checked').val() == "OUI") {
                    $("#field-question{{field.id}}").show();
                  } else {
                    $("#field-question{{field.id}}").hide();
                  }
                  updateRequirements();

                  $("input[name='question{{field.getParentId}}']").change(function() {
                    showSubQuestions("field-question{{field.id}}", $('input[name="question{{field.getParentId}}"]:checked').val());
                    updateRequirements();
                  });

                  
                  
                  
                </script>
                
                {% endfor %}
              
              {% endfor %}
              
              {% endfor %}
              
              


  
              <div class="field is-grouped is-grouped-right noprint">
                <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="window.location.href=``">
                    <span>Annuler</span>
                  </button>
                </p>
              </div>

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

          </div>
        </div>
      </div>
      



      
<script type="text/javascript">

  function showSubQuestions(name,value){

    //console.log("showSubQuestions", name, value);
    if (value === "OUI") {
      $('#'+name).show();
    } else {
      $('#'+name).hide();
    }
    

  }
  
  

  $(document).ready(function () {
    $("#employee-form").submit(function (event) {
        event.preventDefault()

        // delete required hidden fields


        var formData = new FormData(this);

        formData.append('benefs', JSON.stringify(benefs));

        {% comment %} reCAPTCHA {% endcomment %}
       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()
                        {% comment %} actualise {% endcomment %}
                       window.location.href = "{% url 'app:getEmployee' %}?employeeId={{employee.id}}";
                        {% comment %} actualise {% endcomment %}
                        
                    } else {
                        Swal.fire({
                            title: "Erreur",
                            text: data.message,
                            icon: "error",
                        });
                    }



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



function deleteBenef(index) {
        console.log(index)
        Swal.fire({
          title: " Confirmation",
          text: " Voulez vous vraiment confirmer? ",
          
          showCancelButton: true,
          confirmButtonColor: "#3e8ed0",
          cancelButtonColor: "#d33",
          confirmButtonText: "Confirm",
          cancelButtonText: "Annuler",
          // preConfirm: (response) => {

          //     if (!response) {
          //         Swal.showValidationMessage("Tapez delete pour confirmer");
          //     }
          // },
      }).then((result) => {
          if (result.isConfirmed) {
              
              var benef_el = document.getElementById("employee-benef");
              var benef = document.getElementById("benef"+index);
              benef_el.removeChild(benef);
              benefs = benefs.filter(function(ben) {
                return ben.index != index;
              });

          } else {


          }
      });
      }
    
 function changeClause() {
  
Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment changer le clause ? ",
              
              showCancelButton: true,
              confirmButtonColor: "#3e8ed0",
              cancelButtonColor: "#d33",
              confirmButtonText: "Confirm",
              cancelButtonText: "Annuler",
              
          }).then((result) => {
              if (result.isConfirmed) {
                
                const clause = $("select[name='clause']").val();
                  if (clause == "SPECIFIC") {
                    $("#beneficiary-block").show();
                    addBenef();
                    $("#generic-clause").hide();
                  } else {
                    $("#beneficiary-block").hide();
                    document.getElementById("employee-benef").innerHTML = "";
                    $("#generic-clause").show();
                    benefs = [];
                  }

                  //$("#employee-form").submit();
                }else {
    
    
              }
          });
 }



  

</script>
{% endblock content %}