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

{% block title %} Employé Ecolux BTP {% 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>
    document.getElementById('menu-employees').classList.add('is-active')
    </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; ">Employés</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
                {% if user.cuser.type == "CUSTOMER_DRH" or user.cuser.type == "CUSTOMER_ASSISTANT"  %}
                <button onclick="openPopup('employee-modal')" class="button is-info is-dark is-small">Nouvel employé</button>
              {% endif %}
            </div> 
          </div>
        </div>

    </section>

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

      <div class="card m-3 has-table">
        <header class="card-header">
          <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
            Employés
          </p>
          <a href="#" class="card-header-icon">
            {% comment %} <span class="icon"><i class="mdi mdi-reload"></i></span> {% endcomment %}

            
            <div class="field is-horizontal">
                <div class="field-body">
                    {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PRESTA" or user.cuser.type == "ADMIN_PROD"  %}

                        <div class="field">
                          <div class="control">
                            <div class="select is-fullwidth is-small">
                              <select id="customer-filter">
                                <option value="">Tous les entreprises</option>
                                {% for c in customers %}
                                  <option value="{{ c.id }}">{{ c.getCode }} {{ c.name }}  </option>
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                        </div> 

                        <div class="field">
                          <div class="control">
                            <div class="select is-fullwidth is-small">
                              <select id="state-filter">
                                <option value="">Tous les états</option>
                                {% for key,value in states %}
                                  <option value="{{ key }}">{{ value }}</option>
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                        </div> 

                    {% endif %}


                </div>
            </div>
            
            
          </a>
        </header>
        <div class="card-content p-3" style="min-height: 80vh;">
            
          <div class="b-table has-pagination">
            <div class="table-wrapper has-mobile-cards">
              <table id="employees-table" class="table is-striped is-hoverable ">
                <thead>
                <tr>
                  <th>Code employé</th>
                  {% comment %} <th>Apporteur</th> {% endcomment %}
                  <th>Nom </th>
                  <th>Clause</th>
                  <th>Sexe</th>
                  <th>Email</th>
                  <th>Télephone</th>
                  {% comment %} <th>Date de naissance</th> {% endcomment %}
                  <th>Type de contrat</th>
                  <th>Etat</th>
                  <th></th>
                </tr>
                </thead>
                
              </table>
            </div>
            
            

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

      <script>
        $(document).ready(function () {
          const employee_table = $('#employees-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
              url: "{% url 'app:getEmployees' %}",
              type: "POST",
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
              data: function (d) {
                d.customer = $('#customer-filter').val();
                d.statefilter = $('#state-filter').val();
              }
            },
            language: {
              url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            },
            columns: [
              { data: "code" },
             // { data: "partner" },
              { data: "name" },
              { data: "clause" },
              { data: "sex" },
              { data: "email" },
              { data: "phone" },
             // { data: "birthdate" },
              { data: "contractType" },
              { data: "state" },
              { data: "actions", orderable: false, searchable: false }
            ]
          });

          $('#customer-filter').change(function () {
          
            employee_table.ajax.reload();
          
          
          })
          $('#state-filter').change(function () {
          
            employee_table.ajax.reload();
          
          
          })
        });


        


          function deleteEmployee(path) {
            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) {
                  goTo(path)
    
              } else {
    
    
              }
          });
          }

          function deleteEmployee(path) {
            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) {
                  goTo(path)
    
              } else {
    
    
              }
          });
          }

          function submitEmployee(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment soumettre le contrat? ",
              
              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) {
                  goTo(path)
    
              } else {
    
    
              }
          });
          }

          function validEmployee(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment valider le contrat? ",
              
              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) {
                  goTo(path)
    
              } else {
    
    
              }
          });
          }
          
      
    </script>


     
    {% include "partials/employees/employee-form.html" %}

{% endblock content %}