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

{% block title %} 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-customers').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; ">Clients</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              <button onclick="openPopup('customer-modal')" class="button is-info is-dark is-small">Ajouter un client</button>
            </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>
                Clients
              </p>
              <a href="#" class="card-header-icon">
                <span class="icon"><i class="mdi mdi-reload"></i></span>
              </a>
            </header>
            <div class="card-content">

              {% if count < 1 %}
                <p class="subtitle is-5 my-4 has-text-centered">Vous n'avez aucun client.</p>
                
              {% else %}
              <div class="b-table has-pagination">
                <div class="table-wrapper has-mobile-cards">
                  <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
                    <thead>
                    <tr>
                      <th class="is-checkbox-cell">
                        {% comment %} <label class="b-checkbox checkbox">
                          <input type="checkbox" value="false">
                          <span class="check"></span>
                        </label> {% endcomment %}
                      </th>
                      <th></th>
                      <th>Code</th>
                      <th>Prénom Nom</th>
                      <th>Sexe</th>
                      <th>Téléphone</th>
                      <th>Lieu de naissance</th>
                      <th>Banque</th>
                      <th>Créé le</th>
                      <th></th>
                    </tr>
                    </thead>
                    <tbody>

                      {% for c in customers %}

                      <tr>
                        <td class="is-checkbox-cell">
                          <label class="b-checkbox checkbox">
                            <input type="checkbox" value="false">
                            <span class="check"></span>
                          </label>
                        </td>
                        <td class="is-image-cell is-user-avatar">
                          {% if c.cuser.image  %}
                          <img style="width: 30px;height:30px" src="{{c.cuser.image.url}}"
                              alt=" ">
                          {% else %}
                          <img style="width: 30px;height:30px" src="https://api.dicebear.com/9.x/initials/svg?seed={{c.cuser.user.first_name}} {{c.cuser.user.last_name}}"
                              alt="{{c.cuser.user.first_name}} {{c.cuser.user.last_name}}">
                          {% endif %}
                        </td>
                        <td data-label="Code">{{c.getCode}}</td>
                        <td data-label="Prénom et nom">{{c.cuser.user.first_name}} {{c.cuser.user.last_name}}</td>
                        
                        <td data-label="Sexe"> {{c.sex}} </td>
                        <td data-label="Téléphone">{{c.cuser.phone}}</td>
                        <td data-label="Lieu de naissance">{{c.birthplace}}</td>
                        <td data-label="Banque">{{c.bank.name}}</td>

                        <td data-label="Date de naissance">{{c.birthdate|date:"d/m/Y"}}</td>
                        
                        {% comment %} <td data-label="Status" class="is-status-cell">
                          <span class="tag is-success">Active</span>
                        
                        {% comment %} <td data-label="Progress" class="is-progress-cell">
                          <progress max="100" class="progress is-small is-info" value="79">79</progress>
                        </td> {% endcomment %}
                        
                        <td class="is-actions-cell">
                          <div class="buttons is-right">
                            <button class="button is-small is-info is-light " type="button">
                              <span class="icon"><i class="mdi mdi-pencil-box"></i></span>
                            </button>
                            <button onclick="deleteCustomer(`{% url 'app:deleteCustomer' %}?customerId={{c.id}}`)" class="button is-small is-danger is-light jb-modal" data-target="sample-modal" type="button">
                              <span class="icon is-medium"><i class="mdi mdi-trash-can"></i></span>
                            </button>
                          </div>
                        </td>
                      </tr>
                      
                      {% endfor %}
                    
                    
                    
                    

                    </tbody>
                  </table>
                </div>
                
                {% comment %} pagination {% endcomment %}

                {% if nbpage > 1 %}

                    <div class="notification">
                      <div class="level">
                        <div class="level-left">
                          <div class="level-item">
                            <div class="buttons has-addons">

                              {% if customers.has_previous %}
                                  <button onclick="goTo('?page={{ customers.previous_page_number }}')" type="button" class="button ">{{ customers.previous_page_number }}</button>
                              {% endif %}

                              <button type="button" class="button is-active">{{customers.number}}</button>

                              {% if customers.has_next %}
                                  <button onclick="goTo('?page={{ customers.next_page_number }}')" type="button" class="button">{{ customers.next_page_number }}</button>
                              {% endif %}
                            </div>
                          </div>
                        </div>
                        <div class="level-right">
                          <div class="level-item">
                            <small>Page {{customers.number}} sur {{nbpage}}</small>
                          </div>
                        </div>
                      </div>
                    </div>

                  {% endif %}

              </div>
              {% endif %}
            </div>
          </div>


    </div>


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



    <script>

      function deleteCustomer(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 {


          }
      });
      }
    </script> 
{% endblock content %}