{% extends "base.html" %}
{% load static %}
{% block titulo %}
Lista de Operaciones Sunat
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navC").attr('class','dropdown active');
</script>

<div class="row">
  <div class="col-md-12" >
      <div class="cpanel panel-default" >
        <div class="panel-heading panel-toolbar">
          <strong>LISTA DE OPERACIONES SUNAT</strong>
          <div class="toolbar">
            <button type="button" class="btn btn-default btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
          </div>
        </div>
        <div class="panel-body">
          <div class="row ">
            <div class="col-md-4">
                <button class="btn btn-default btn-sm" id="btn-enviar" style="display:none">Solicitar Envio Sunat</button>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1">
              <button type="button" class="btn btn-info btn-block btn-sm" id="btnRefrescar">Recargar</button>
            </div>
            <div class="col-md-6">
              <label style="margin-bottom: 0px;">
                  <input class="form-check-input" name="filtroRB" type="radio" id="rb-activo" value="activo" checked >
                  Activos
              </label>
              <label style="margin-bottom: 0px;">
                  <input class="form-check-input" name="filtroRB" type="radio" id="rb-todos-f" value="fecha" >
                  Por fecha
              </label>
              <label style="margin-bottom: 0px;">
                  <input class="form-check-input" name="filtroRB" type="radio" id="rb-todos-n" value="nombre" >
                  Por DNI / Nombre y Apellidos
              </label>
            </div>

          </div>
          <div class="row" id="div-fechas">
            
            <div class="col-md-2" align="right">
              <h5>Filtrar Por</h5>
            </div>
            <div class="col-md-2">
              <div class="select">
                <select class="form-control form-control-sm" id="comboFiltroF">
                  <option value="h">Hoy</option>
                  <option value="f">Fecha</option>
                  <option value="ef">Entre Fechas</option>
                </select>
              </div>
              <p></p>
            </div>
            <div class="col-md-2">
              <input type='text' class=" form-control" id="txtfecha1" autocomplete="off">
            </div>
            <div class="col-md-2">
              <input type='text' class="form-control" id="txtfecha2"  autocomplete="off">
            </div>
            <div class="col-md-1">
              <button type="button" class=" btn btn-block btn-outline-danger btn-sm" id="btn-cosultar"><i class="fa fa-search"></i> Buscar</button>

            </div>

          </div>
          <div class="row" id="div-nombres">
            <div class="col-md-2" align="right">
              <h5>Filtrar Por</h5>
            </div>
            <div class="col-md-2">
              <input type='text' class="form-control"id="filtro_razon" autocomplete="off" placeholder="DNI/Nombre o Apellidos">
            </div>
            <div class="col-md-1">
              <button type="button" class=" btn btn-block btn-outline-warning btn-sm" id="btn-cosultar-razon"><i class="fa fa-search"></i> Buscar</button>

            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>Fecha<br>Operacion</th>
                          <th>Fecha<br>Envio</th>
                          <th>Fecha<br>Error</th>
                          <th>Operacion</th>
                          <th>Serie</th>
                          <th>N°</th>
                          <th>cliente</th>
                          <th>Doc.</th>
                          <th>Monto<br>Declarado</th>
                          <th>IGV</th>
                          <th>RUC</th>
                          <th>Caja</th>
                          <th>Estado</th>
                        </tr>
                      </thead>
                      <tbody id="listaT">
        
                      </tbody>
                      <tfoot>
                        <th colspan="8" style="text-align: right;">Total Monto Declarado: </th>
                        <th id="tr-total">0.00</th>
                        <th colspan="4"></th>
                      </tfoot>
                  </table>
                </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<script type="text/javascript">
  var listaT=[] ,indexT=0;
  var tipo_fi="a";
  var tipo_ope ="R;" // B F
  document.addEventListener('DOMContentLoaded', function() {

    
    function format_cu(num){
        let formatter = new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' });
        return formatter.format(num);
    }
   
    
    function redondeo(valor,d){
      return Number(Math.round(valor+'e'+d)+'e-'+d);
    }
    
    $('#txtfecha1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txtfecha2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    //
    $("#txtfecha1").hide();
    $("#txtfecha2").hide();
    //
    $("#comboFiltroF").change(function(){
      if($("#comboFiltroF").val()=="ef"){
        $("#txtfecha1").show();
        $("#txtfecha1").prop("value","");
        $("#txtfecha2").show();
        $("#txtfecha2").prop("value","");
      }
      if($("#comboFiltroF").val()=="f"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").show();
        $("#txtfecha2").hide();
      }
      if($("#comboFiltroF").val()=="h"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").hide();
        $("#txtfecha2").prop("value","");
        $("#txtfecha2").hide();
      }
    });

    check_tipo_filtro();
    //--
    function check_tipo_filtro(){
      console.log("asa");
      if(document.getElementById('rb-activo').checked){
        $("#div-fechas").hide();
        $("#div-nombres").hide();
        tipo_fi="a";
        fetch_trans_filtro_simple();
      }

      if(document.getElementById('rb-todos-f').checked){
        $("#div-fechas").show();
        $("#div-nombres").hide();
        tipo_fi="f";
      }

      if(document.getElementById('rb-todos-n').checked){
        $("#div-fechas").hide();
        $("#div-nombres").show();
        tipo_fi="n";
      }

    }

    document.getElementById('rb-activo').onchange=function(){
      check_tipo_filtro();
    }
    document.getElementById('rb-todos-f').onchange=function(){
      check_tipo_filtro();
    }
    document.getElementById('rb-todos-n').onchange=function(){
      check_tipo_filtro();
    }
    document.getElementById("btn-cosultar").onclick=function(){
      fetch_trans_filtro_simple();
    }
    document.getElementById("btn-cosultar-razon").onclick=function(){
      fetch_trans_filtro_simple();
    }
    $("#btnRefrescar").click(() => {
      fetch_trans_filtro_simple();
    })
    //fetch_trans_filtro_simple();
    //---

    function fetch_trans_filtro_simple(){
      let url = new URL('{{BASE_URL}}/lista_operaciones_sunat_fetch/');
      url.search = new URLSearchParams({
        'tipo':tipo_fi,
        'filtro': document.getElementById('comboFiltroF').value,
        'F1': document.getElementById('txtfecha1').value,
        'F2': document.getElementById('txtfecha2').value,
        'razon':document.getElementById("filtro_razon").value
      });

      fetch(url)
      .then(function(response){
        if(response.ok){
          return response.json();
        }
        else{
          console.log('Respuesta de red OK.');
          return {exito:'error',data:[]}
        }
      })
      .then(function(data) {

          listaT = data.lista;
          let html = '';
          let status_st='';
          for(var i=0;i<data.lista.length;i++){
            status_st ='';
            if(data.lista[i].estado=='enviado'){
              status_st= 'table-success'
            }
            if(data.lista[i].estado=='rechazado'){
              status_st= 'table-danger'
            }

            html += '<tr class="filaC '+status_st+'" id="'+i+'"><td>'+data.lista[i].fecha_emision+'</td><td>'+data.lista[i].fecha_envio+'</td><td>'+data.lista[i].fecha_error+'</td><td>'+data.lista[i].tipo+'</td><td>'+data.lista[i].serie +'</td><td>'+data.lista[i].correlativo +'</td><td>'+data.lista[i].razon +'</td><td>'+data.lista[i].nro_doc +'</td><td>'+format_cu(data.lista[i].m_total)+'</td><td>'+format_cu(data.lista[i].m_igv)+'</td><td>'+data.lista[i].estado +'</td><td>'+data.lista[i].ruc +'</td><td>'+data.lista[i].caja +'</td></tr>';
          }
        
          document.getElementById("listaT").innerHTML=html ;
          $("#tr-total").text(format_cu(data.total_de));
          
      })
      .catch(function(error) {
        console.log('Hubo un problema con la petición Fetch:' + error.message);
      });

    }
    document.getElementById("btn-enviar").onclick = function(){
      fetch_soclicitar_envio_sunat();
    }

    function fetch_soclicitar_envio_sunat(){
        fetch('{{BASE_URL}}/enviar_sunat_invoices/')
        .then(function(response){
          if(response.ok){
            return response.json();
          }
          else{
            console.log('Respuesta de red OK.');
            return {exito:'error',data:[]}
          }
        })
        .then(function(data) {
            M.toast({html: data.exito});
            
        })
        .catch(function(error) {
          console.log('Hubo un problema con la petición Fetch:' + error.message);
        });
      }

  });
</script>

{% endblock content1 %}