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

{% block title %} Contrats des clients 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-contracts').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; ">Contrats des clients</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              {% if user.cuser.type == "ADMIN" or user.cuser.type == "ADMIN_PROD"  %}
                <button onclick="openPopup('contract-modal')" class="button is-info is-dark is-small">Nouveau contrat</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>
            Contrats
          </p>
          <a href="#" class="card-header-icon">
            {% comment %} <span class="icon"><i class="mdi mdi-reload"></i></span> {% endcomment %} 
            {% comment %} <div class="field">
              <div class="control">
                <div class="select is-fullwidth is-small">
                  <select id="partner-filter">
                    <option value="">Tous les partenaires</option>
                    {% for partner in partners %}
                      <option value="{{ partner.id }}">{{ partner.getCode }} {{ partner.cuser.user.first_name }} {{ partner.cuser.user.last_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div> {% endcomment %}
            
          </a>
        </header>
        <div class="card-content p-3" style="min-height: 80vh;">
          {% if count < 1 %}
            <p class="subtitle is-5 my-4 has-text-centered">Vous n'avez aucun contrat.</p>
          {% endif %}
          <div class="b-table has-pagination">
            <div class="table-wrapper has-mobile-cards">
              <table id="contracts-table" class="table is-striped is-hoverable ">
                <thead>
                <tr>
                  <th>Code client</th>
                  {% comment %} <th>Apporteur</th> {% endcomment %}
                  <th>Nom Client</th>
                  <th>Période</th>
                  <th>Date début</th>
                  
                  <th>Email</th>
                  <th>Télephone</th>
                  <th>Expire</th>
                  <th>Etat</th>
                  <th></th>
                </tr>
                </thead>
                
              </table>
            </div>
            
            

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

      <script>
        $(document).ready(function () {
          const contract_table = $('#contracts-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
              url: "{% url 'app:getContracts' %}",
              type: "POST",
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
              data: function (d) {
                d.partner = $('#partner-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: "period" },
              { data: "startDate" },
              { data: "email" },
              { data: "phone" },
              { data: "expireAt" },
              { data: "state" },
              { data: "actions", orderable: false, searchable: false }
            ]
          });

          $('#partner-filter').change(function () {
          
            contract_table.ajax.reload();
          
          
          })
        });


        


          function deleteContract(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 deleteContract(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 submitContract(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 validContract(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 {
    
    
              }
          });
          }


          function renewContract(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment renouveler 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/contracts/contract-form.html" %}

{% endblock content %}