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

{% block title %} Prestations 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-prestations').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; ">Prestations</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('prestation-modal')" class="button is-info is-dark is-small">Ajouter une prestation</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>
                Prestations
              </p>
              <a href="#" class="card-header-icon is-flex">
                <div class="field is-horizontal">
                    <div class="field-body">

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

                    <div class="field mr-2">
                      <div class="control">
                        <div class="select is-fullwidth is-small">
                          <select id="treated-filter">
                            <option value="">Tous les prestations</option>
                            <option value="{{user.cuser.id}}">Mes prestations</option> 
                          </select>
                        </div>
                      </div>
                    </div> 

                {% endif %}

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

                    <div class="field mr-2">
                      <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 %}
                            {% comment %} <option value="0">Test </option> {% endcomment %}
                          </select>
                        </div>
                      </div>
                    </div> 

                {% endif %}

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

                

                </div>
              </div>
              </a>
            </header>
            <div class="card-content p-3">
              

              <div class="b-table has-pagination">
                <div class="table-wrapper has-mobile-cards">
                  <table id="prestations-table" class="table is-fullwidth is-striped is-hoverable is-fullwidth">
                    <thead>
                    <tr>
                      
                      <th>Code</th>
                      <th>Employé</th>
                      <th>Sexe</th>
                      <th>Téléphone</th>
                      <th>Salaire</th>
                      <th>Date d'effet</th>
                      <th>Status</th>
                      
                      <th></th>
                    </tr>
                    </thead>
                  </table>
                </div>
                
                {% comment %} pagination {% endcomment %}

                

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


    </div>


    {% include "partials/prestations/prestation-form.html" %}



    <script>

      function deletePrestation(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 submitPrestation(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment soumettre la prestation? ",
              
              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 validPrestation(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment valider la prestation ? ",
              
              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 openPrestation(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment commencer le traitement de la prestation ? ",
              
              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 {
    
    
              }
          });
          }



      $(document).ready(function () {
          const prestation_table = $('#prestations-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
              url: "{% url 'app:getPrestations' %}",
              type: "POST",
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
              data: function (d) {
                d.customer = $('#customer-filter').val();
                d.statefilter = $('#state-filter').val();
                d.treatedfilter = $('#treated-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: "employee" },
              { data: "sexe" },
              { data: "phone" },
              { data: "salary" },
              { data: "effectDate" },
              { data: "state" },
              { data: "actions", orderable: false, searchable: false }
            ]
          });

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

    </script> 
{% endblock content %}