{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Listado de Compras Material
{% endblock titulo %}
{% block content1 %}
<script type="text/javascript">
  $("#navCajaMaterial").attr('class','dropdown active');
  $("#navListadoCompras").attr('class','active');
</script> 
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-default">
        <div class="panel-heading panel-toolbar panel-material">
          <strong>Listado Compras de Material</strong>
          <button type="button" class="btn btn-sm btn-warning" id="refrescar"><span class="fa fa-refresh"></span> Actualizar</button>
        </div>
        <div class="panel-body">
          <div class="row myb-4">
            <div class="col-md-1" align="right">
              <label>Filtrar:</label>
            </div>
            <div class="col-md-2">
             <div class="select">
              <select class="form-control" id="comboFiltroF">
                <option value="f">Fecha</option>
                <option value="ef">Entre Fechas</option>
              </select>
              </div>
            </div>
            <div class="col-md-2">
              <input type='text' class=" form-control" id="txtfecha1">
            </div>
            <div class="col-md-2">
              <input type='text' class="form-control" id="txtfecha2">
            </div>
            <div class="col-md-1" align="center">
              <button type="button" class=" btn btn-sm btn-danger" id="buscarF"><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-striped">
                        <thead>
                          <tr>
                            <th>Fecha</th>
                            <th>Cliente</th>
                            <th>Moneda</th>
                            <th>Peso</th>
                            <th>Precio/Gramo</th>
                            <th>Total</th>
                            <th>Observaciones</th>
                            <th>&nbsp;</th>
                          </tr>
                        </thead>
                        <tbody id="listaC">
                            
                        </tbody>
                    </table>
                  </div>
              </div>

          </div>

          <div class="row">
            <div class="col-md-4 col-md-offset-8">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Peso total</th>
                      <th>Promedio</th>
                      <th>Total soles pagados</th>
                    </tr>
                  </thead>
                  <tbody >
                    <tr>
                      <td id="peso_t">0</td>
                      <td id="promedio_t">0</td>
                      <td id="soles_t">0</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
<div id="modalrecibo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div  id="platillaI" style="font-family:'Lucida Console', Monaco, monospace;font-size:13px;">
            <table>
              <tr><td nowrap><h4><u>RECIBO DE COMPRA</u></h4></td></tr>
            </table>
            <h6>Reimpresión</h6>
            <p id="nomCliente"></p>
            <p id="dniCliente"></p>
            <table>
              <tr>
                <td>Peso(g):&nbsp;</td>
                <td  id="pes" nowrap></td>
              </tr>
              <tr>
                <td>Precio/Gramo:&nbsp;</td>
                <td id="pres" nowrap></td>
              </tr>
              <tr>
                <td><b>Total</b></td>
                <td nowrap><h4 id="tot" ></h4></td>
              </tr>
              <tr>
                <td nowrap>&nbsp;</td>
                <td nowrap>&nbsp;</td>
              </tr>
              <tr>
                <td nowrap ><h6 id ="hopa"></h6></td>
                <td nowrap ><h6 id="fepa"></h6></td>
              </tr>
            </table>
          </div>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
  var pagina=1;
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    $('#txtfecha1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txtfecha2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    ajax_Compras();
    /*
    $(document).on("click",".filaC",function(){
      
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaC');
      $(this).attr('class','filaC info');
    });
    */
    $(document).on("click",".reim",function(){
      var num = $(this).attr('id');
      filaI = num;
      prepararImpresion(Aux[filaI].cli,Aux[filaI].moneda,Aux[filaI].peso,Aux[filaI].presio,Aux[filaI].total);
      $("#platillaI").printThis();
    })
    $("#refrescar").click(function(){
      ajax_Compras();
    });
    function ajax_Compras(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        data:{'pg':pagina},
        url:'/listadoCompras_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length-1;i++){
              html += '<tr class="filaC" id="'+i+'"><td>'+data[i].f+'</td><td>'+data[i].cli+'</td><td>'+data[i].moneda+'</td><td>'+data[i].peso +'</td><td>'+data[i].presio+'</td><td>'+data[i].total +'</td><td>'+data[i].obs+'</td><td><button type="button" class=" btn btn-xs btn-primary reim" id="'+i+'"><i class="md md-print" ></i>Reimprimir</button></td></tr>';
          }                        
          //html+='</tbody></table>';
          $('#listaC').html(html);
          $('#peso_t').text(data[data.length-1].peso_t);
          $('#soles_t').text(data[data.length-1].sol_t);
          $('#promedio_t').text((data[data.length-1].sol_t/data[data.length-1].peso_t).toFixed(3));
          $('.table-responsive').waitMe('hide');
        },
        error: function(xhr, textStatus, errorThrown) {
                console.log(xhr.responseText);
        },
      });
    }

    //filtro
    $("#buscarF").click(function(){ 
        ajax_ComprasFiltro();
       });
    $("#txtfecha2").hide();
      $("#comboFiltroF").change(function(){
        if($("#comboFiltroF").val()=="f"){
          $("#txtfecha2").hide();
          $("#txtfecha2").prop("value","");
        }
        if($("#comboFiltroF").val()=="ef"){
          $("#txtfecha2").show();
          $("#txtfecha2").prop("value","");
        }
      });
    function ajax_ComprasFiltro(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
        url:'/listadoComprasFiltro_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          console.log(data);
          Aux = data;
          var html ="";
          for(var i=0;i<data.length-1;i++){
              html += '<tr class="filaC" ><td>'+data[i].f+'</td><td>'+data[i].cli+'</td><td>'+data[i].moneda+'</td><td>'+data[i].peso +'</td><td>'+data[i].presio+'</td><td>'+data[i].total +'</td><td>'+data[i].obs+'</td><td><button type="button" class=" btn btn-block btn-primary reim" id="'+i+'"><i class="md md-print" ></i>Reimprimir</button></td></tr>';
          }
          $('#listaC').html(html);
          $('#peso_t').text(data[data.length-1].peso_t);
          $('#soles_t').text(data[data.length-1].sol_t);
          
          $('#promedio_t').text(data[data.length-1].sol_t/data[data.length-1].peso_t);
          $('.table-responsive').waitMe('hide');
        },
        error: function(xhr, textStatus, errorThrown) {
                console.log(xhr.responseText);
        },
      });
    }

    function prepararImpresion(cli,mo,pe,pre,to){
      var mr="";
      if(mo=="soles")
        {
          mr=" S/."
        }
      else
        {
          mr=" $/."
        }
        var fecha = new Date();
        var mes = [
          "Enero",
          "Febrero",
          "Marzo",
          "Abril",
          "Mayo",
          "Junio",
          "Julio",
          "Agosto",
          "Septiembre",
          "Octubre",
          "Noviembre",
          "Diciembre"
          ];
        var textofecha= fecha.getDate() + "/" + (fecha.getMonth()+1).toString() + "/" + fecha.getFullYear();
        var hora = new Date();
        var textohora = hora.getHours() + ":" + hora.getMinutes();
        /*if(pos0!=null){
          $("#dniCliente").html('<b>DNI: </b>'+pos0.toString());
        }*/
        if(cli!=null && cli.trim()!=","){
          $("#nomCliente").html('<b>Cliente: </b>'+cli.toString());
        }else{
          $("#nomCliente").html('<b>Cliente: </b>'+"Cliente Eventual");
        }
        $("#pes").text(pe);
        $("#pres").text(pre.toString()+mr);
        $("#tot").text(to.toString()+mr);
        $("#fepa").text('fecha: '+textofecha);
        $("#hopa").text(textohora);
    }
    
  });
</script>
{% endblock content1 %}