{% extends 'layouts/menuc.html' %}

{% block title %}
  {{title}}
{% endblock %}

{% block content %}

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SP1MJ3P87D"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-SP1MJ3P87D');
</script>

<h1 class="text-center display-4 mt-3 fw-bold" style="background-color: #C5CAE9; color: #FBFCFC; font-weight: bold; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);">Facturación</h1>   
<hr> <!--................................................-->

<main class="container">
  <div class="row justify-content-center"> <!-- Se reemplaza box-->
    <div class="col-md-4 col-lg-4 mt-3 text-center" style="border:solid 6px #F1948A; padding: 15px; border-radius: 30px; box-shadow:0 10px 20px rgba(0, 0, 0, 0.5);">
      
      <form action="{% url 'facturas_fecha' %}" method="POST" class="card card-body text-center mt-5" style="border:solid 6px #EAECEE; border-radius: 30px; margin-bottom: 25px;">
      {% csrf_token %}
      
      <label for="title" style="color: #808B96;">Fecha :</label>
      <input type="date" name="start_date" style="border:solid 3px #ABB2B9; padding: 5px; border-radius: 15px; color: #F5B7B1;"/>

      <label for="content" style="color: #808B96;">A la Fecha:</label>
      <input type="date" name="end_date" style="border:solid 3px #ABB2B9; padding: 5px; border-radius: 15px; color: #F5B7B1;"/>

      <hr>

      <button type="submit button" class="btn btn-outline-danger pd-3 justify-content-center" value="buscar" style="border-radius: 15px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);">
        <span class="material-symbols-rounded">manage_search</span>
        BUSCAR
      </button>
      </form>
    </div>
  </div>

<!-----------.....ESTILO ICONOS.....----------->
<style>
  .btn {
    display: flex;
    align-items: center;
  }
      
  .material-icons-round {
    margin-right: 5px;
  }
</style>
<!-----------.....ESTILO ICONOS.....----------->

  <hr class="mt-5"><!--......................................-->
  <div class="form-outline mb-4 mt-5">
    <input type="text" class="form-control form-control-lg" id="datatable-search-input" placeholder="Buscar Consulta. . ." style="border:solid 4px #D6DBDF; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border-radius: 25px;"/>
    <label class="form-label" for="datatable-search-input"></label>
    <blockquote class="blockquote">
    <p class="text-center" style="font-style: italic;">En caso de algún error puedes utilizar <kbd>ctrl + f</kbd> para buscar de manera más específica. </p>
    <footer class="blockquote-footer text-center" style="font-style: italic;"><p>Si deseas encontrar por cantidad, deberas poner una "," en caso de requerirlo.</p>
    </blockquote>
  </div>
  <hr><!--........................................-->
</main>
  <div class="table-responsive" id="datatable">
        <div class="col-md-12 mt-lg-12 mt-3">
          {% if leyenda %}
          </br>
          <h1 class="title text-center mt-2 fw-bold" style="color: #566573; font-weight: bold;">Facturación del: {{fecha_Ini}} al {{fecha_Fin}}:</h1>
    

            <table class="table table-striped table-bordered mt-4 table-responsive"style="border:solid 4px #F1948A;">
              <thead>
                <tr class="table-danger">
                  <th class="text-center">NO. DE FACTURA</th>
                  <th class="text-center">PEDIDO</th>
                  <th class="text-center">DESCRIPCIÓN</th>
                  <th class="text-center">CANTIDAD</th>
                  <th class="text-center">CLIENTE</th>
                  <th class="text-center">CONTACTO</th>
                  <th class="text-center">TELEFONO</th>
                  <th class="text-center">CORREO DEL CONTACTO</th>
                  <th class="text-center">VENDEDOR  QUE LO ATENDIO</th>
                  <th class="text-center">COMO SE CONTACTO EL CLIENTE</th>
                </tr>
              </thead>
              <tbody>
               {% for fila in resultado %}
                <tr>
                  <td class="text-center">{{ fila.0 }}</td>
                  <td class="text-center" style="font-weight: bold;">{{ fila.1 }}</td>
                  <td class="text-center" style="font-style: italic;">{{ fila.2 }}</td>
                  <td class="text-center">{{ fila.3 }}</td>
                  <td class="text-center" style="font-style: italic;">{{ fila.4 }}</td>
                  <td class="text-center">{{ fila.5 }}</td>
                  <td class="text-center">{{ fila.6 }}</td>
                  <td class="text-center">{{ fila.7 }}</td>
                  <td class="text-center" style="font-weight: bold;">{{ fila.8 }}</td>
                  <td class="text-center">{{ fila.9 }}</td>
                  <td class="text-center">{{ fila.10 }}</td>
                </tr>
               {% endfor %}
              </tbody>
            </table>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script>
              $(document).ready(function() {
                  $('#datatable-search-input').on('input', function() {
                    var searchText = $(this).val().toLowerCase();
                    $('#datatable tbody tr').each(function() {
                      var rowText = $(this).text().toLowerCase();
                      if (rowText.indexOf(searchText) === -1) {
                        $(this).hide();
                      } else {
                        $(this).show();
                      }
                    });
                  });
                });
            </script>
      </div>
    </div>
    <footer class=" text-center mt-4" style="background-color: #F5F5F5;">

      <div class="row">
    
        <section class="mb-4 mt-4">
          © 2023 Copyright:
          <a style="color: #B7950B; text-decoration:underline;" href="https://www.lazzarmexico.com/">Lazzarmexico.com</a>
          
        </section>
    
      <div class="text-center p-3 larger-text" style="background-color: rgba(11, 34, 101); font-size: 18px">
          <p style="color: azure;">
              Respeto, Honestidad, Confianza, Responsabilidad, Lealtad
          </p>
      </div>
  
    </footer>
    
    {% endif %}
    {% endblock %}