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

{% block title %} Factures {{user.cuser.insurance_company}} {% 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-invoices').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; ">Factures</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('invoice-modal')" class="button is-info is-dark is-small">Créer une facture</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>
                Factures
              </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="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="invoices-table" class="table is-fullwidth is-striped is-hoverable is-fullwidth">
                    <thead>
                    <tr>
                      
                      <th>Sequence</th>
                      <th>Contrat</th>
                      <th>Du</th>
                      <th>Au</th>
                      <th>Montant</th>
                      <th>Généré le</th>
                      <th>Status</th>
                      
                      <th></th>
                    </tr>
                    </thead>
                  </table>
                </div>
                
                {% comment %} pagination {% endcomment %}

                

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


    </div>


    {% include "partials/invoices/invoice-form.html" %}



    <script>

      function deleteInvoice(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 submitInvoice(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment soumettre la facture? ",
              
              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 validInvoice(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment valider la facture ? ",
              
              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 openInvoice(path) {
            Swal.fire({
              title: " Confirmation",
              text: " Voulez vous vraiment commencer le traitement de la facture ? ",
              
              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 invoice_table = $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
              url: "{% url 'app:getInvoices' %}",
              type: "POST",
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
              data: function (d) {
                d.customer = $('#customer-filter').val();
                d.statefilter = $('#state-filter').val();
                {% comment %} d.treatedfilter = $('#treated-filter').val(); {% endcomment %} 
              }
            },
            language: {
              url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            },
            columns: [
              { data: "sequence" },
             // { data: "partner" },
             // { data: "name" },
              { data: "contract" },
              { data: "start" },
              { data: "end" },
              { data: "amount" },
              { data: "createdAt" },
              { data: "state" },
              { data: "actions", orderable: false, searchable: false }
            ]
          });

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

    </script> 
{% endblock content %}