{% extends 'base.html' %}



{% block content %}
<h1>Timbres <strong>{{RFC}}</strong> </h1>
<h2>Timbres totales: <strong></strong>{{conteo}}</strong></h2>
<span class="navbar-text mr-2">
{% if filters.datepicker%}
  De fecha: <strong>"{{filters.datepicker}}"</strong>
{% endif %}

{% if filters.datepickerFin %}
  A fecha: <strong>"{{filters.datepickerFin}}"</strong>
{% endif %}
</span>

<br><br>

<table class="table">
    <thead>
      <tr>
        <th scope="col">UUID</th>
        
        <th scope="col">PAC</th>
        <th scope="col">
          <input id="table_tipo" name="tipo" value="True" type="checkbox" class="form-check-input" >
          Tipo CFDI
        </th>
        <th scope="col">Serie/Folio</th>
        <th scope="col">
          <input id="table_fecha" name="fecha" value="True" type="checkbox" class="form-check-input" >
          Fecha
        </th>        
      </tr>
    </thead>
    <tbody>
      {% for obj in lista %}
        <tr class="{% if obj.modo == 'Normal' %}table-success{% endif %}">
            <th scope="row">{{obj.uuid}}</th>            
            <td>{{obj.rfcp}}</td>
            <td>{{obj.tipo}}</td>
            <td>{{obj.serie}}/{{obj.folio}}</td>
            <td>{{obj.created_at|date:"d M Y"}}</td>            
        </tr>
      {% endfor %}    
    </tbody>
</table>

{% endblock content %}
    

{% block scripts %}
    <script>
        table_tipo.addEventListener('click', (event)=>{
            document.getElementById('tipo').checked = table_tipo.checked? true:false;
            if(table_fecha.checked){
                table_fecha.click()
            }
        })
    
        table_fecha.addEventListener('click', (event)=>{
            

            if(dates.hasAttribute("style")){
                dates.removeAttribute('style')
                datepicker.value=''
                datepicker.setAttribute("required",'')
                datepickerFin.value=''

                datepickerFin.setAttribute('required','')
                search.setAttribute("style","display:none;")
                search.value=''
                
            }else{
                dates.setAttribute("style","display:none;")
                search.removeAttribute('style')
                datepicker.removeAttribute('required')
                datepickerFin.removeAttribute('required')
            }
            if(table_tipo.checked && table_fecha.checked){
                table_tipo.checked=false
            }
        })
    </script>
{% endblock scripts %}