{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Liquidar Base
{% endblock titulo %}

{% block content1 %}
<script type="text/javascript">
  $("#navC").attr('class','dropdown active');
</script>

<div class="row min-row">
  {% ifnotequal resultado '' %}
      {% ifequal resultado 'exito' %}
        <div class="col s12">
          <div class="card z-depth-1 green white-text">
            <div class="card-content" style="padding-top: 10px;padding-bottom: 10px;">
              <p>Liquidacion registrado!</p>
            </div>
          </div>
        </div>
      {% else %}
        <div class="col s12">
          <div class="card z-depth-1 red white-text">
            <div class="card-content" style="padding-top: 10px;padding-bottom: 10px;">
              <p>{{ resultado }}</p>
            </div>
          </div>
        </div>
      {% endifequal %}
  {% endifnotequal %}
</div>
<div class="row min-row">
  <div class="input-field min-input-field col s12 m3">
    <select id="ComboOficina" name="oficina">
      
    </select>
    <label class="teal-text">Oficina Destino</label>
  </div>

  <div class="input-field min-input-field col s12 m5">
    <select id="ComboCaja" name="caja">
      <option value="0"></option>
    </select>
    <label class="teal-text">Caja</label>
  </div>
</div>
<div class="row min-row">
  <div class="input-field min-input-field col s6 m3">
      <select id="selectFecha">
          <option value="h"> Hoy </option>
          <option value="f"> Fecha </option>
          <option value="ef"> Entre Fechas </option>
      </select>
      <label class="teal-text">Cerrar caja de:</label>
  </div>
  <div class="input-field min-input-field col s6 m2" id="fecha1">
      <input id="txt-fecha-1" type="text" class="datepicker input-easy" autocomplete="off" >
      <label class="label-input-easy active" for="txt-fecha-1">Desde</label>
  </div>
  <div class="input-field min-input-field col s6 m2" id="fecha2">
      <input id="txt-fecha-2" type="text" class="datepicker input-easy" autocomplete="off">
      <label class="label-input-easy active" for="txt-fecha-2">Hasta</label>
  </div>
  <div class="col s6 m2">
      <button class="btn waves-effect indigo waves-light" id="btn-cosultar"><i class="material-icons left">find_replace</i> Consultar</button>
  </div>
</div>
<div class="row min-row">
  <div class="col s12">
    <h5>Detalle de Liquidacion</h5>
  </div>
</div>
{% endblock content1 %}
{% block javascript %}
<script type="text/javascript">
  var saldo_i_s=0,
      saldo_i_d=0,
      ingreso_s=0,
      ingreso_d=0,
      egreso_s=0,
      egreso_d=0,
      saldo_t_s =0,
      saldo_t_d=0;
  document.addEventListener('DOMContentLoaded', function() {
    function format_cu(num){
        let formatter
         = new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' });
        return formatter.format(num);
    }
    function format_monto(num){
        let formatter = new Intl.NumberFormat('es-PE',{minimumFractionDigits:2});
        return formatter.format(num);
    }
    function format_cu_usd(num){
        let formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
        return formatter.format(num);
    }
    apollo.addClass(document.getElementById("fecha1"),'hidden');
    apollo.addClass(document.getElementById("fecha2"),'hidden');
    //-
    document.getElementById("selectFecha").onchange= function(){
      let Fvalue = document.getElementById("selectFecha").value;
      if(Fvalue==='h'){
          document.getElementById("fecha1").style.display="none";
          document.getElementById("fecha2").style.display="none";
      }
      if(Fvalue==='f'){
          document.getElementById("fecha1").style.display="block";
          document.getElementById("fecha2").style.display="none";
      }
      if(Fvalue==='ef'){
          document.getElementById("fecha1").style.display="block";
          document.getElementById("fecha2").style.display="block";
      }
    }

    fetch_oficinas();
    function fetch_oficinas(){
      fetch('/oficinas_fetch_total_activos/')
      .then(function(response){
        if(response.ok) {
          return response.json();
        }
        else{
          console.log('Respuesta de red OK.');
          return {exito:'error',data:[]}
        }
      })
      .then(function(data) {
        let html ="";
        document.getElementById("ComboOficina").innerHTML="";
        for(var i=0;i<data.length;i++){
          html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
        }
        document.getElementById("ComboOficina").innerHTML = html;
        M.FormSelect.init(document.getElementById("ComboOficina"));
        if(data.length>0){
          fetch_cajas();
        }
        
      })
      .catch(function(error) {
        console.log('Hubo un problema con la petición Fetch:' + error.message);
        M.toast({html: 'Error: Comunniquese con el encargado!'});
      });
    }
    function fetch_cajas(){
      let url = new URL('{{BASE_URL}}/CajasPersonal_ajax/');
        url.search = new URLSearchParams({
          'idOfi':document.getElementById("ComboOficina").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) {
        let html ="";
        document.getElementById("ComboCaja").innerHTML="";
        for(var i=0;i<data.length;i++){
         html += '<option value="'+data[i].pk+'">'+data[i].nombre+' - '+data[i].op+'</option>';
        }
        document.getElementById("ComboCaja").innerHTML = html;
        M.FormSelect.init(document.getElementById("ComboCaja"));
        
      })
      .catch(function(error) {
        console.log('Hubo un problema con la petición Fetch:' + error.message);
        M.toast({html: 'Error: Comunniquese con el encargado!'});
      });
    }
    document.getElementById("ComboOficina").onchange=function(){
      fetch_cajas();
    }
    
  });
</script>
{% endblock javascript %}