{% 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
          <select id="table_select_PAC" class="form-control form-control-sm">
            <option value="00">Todos</option>
            <option value="01">EDICOM</option>
            <option value="02">Comercio Dig.</option>
          </select>
        </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>

<div id='id_filters' style="display: None;">{% for i,v in filters.items %}&{{i}}={{v}}{% endfor%}</div>

{% endblock content %}
    

{% block scripts %}
    <script>
      window.addEventListener("load", (event)=>{
        let PAC = '{{PAC}}'
        if(PAC !="None"){
          table_select_PAC.value=PAC
        }
      })
      let filters = document.getElementById('id_filters').textContent

      table_select_PAC.addEventListener('change',(event)=>{
        let anc = document.getElementById('home_id')
        anc.href=''
        let url = `?PAC=${event.target.value}${filters}`
        anc.href=url
        anc.click()
      })
        
      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 %}