{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Venta Material
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial").attr('class','dropdown active');
  $("#navVenta").attr('class','active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
</style>
<div class="row" id="Result">
  <div class="col-md-12">
    {% ifnotequal resultado '' %}
    {% ifequal resultado 'exito' %}
    <div class="alert alert-success" role="alert" align="center">
      <h4>OPERACION EXITOSA!!</h4>
    </div>
    {% else %}
    <div class="alert alert-danger" role="alert" align="center">
      <h4>{{resultado}}</h4>
    </div>
    {% endifequal %}
    {% endifnotequal %}
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3" id="panel-main">
      <div class="panel panel-default">
        <div class="panel-heading panel-material"><strong>Venta de Oro</strong></div>
        <div class="panel-body">
          <form id="formulario" action="/Ventas/" method="POST" data-toggle="validator" role="form">{% csrf_token %}
            <div class="row">
                <div class="col-md-6" id="panelDatosCliente">
                    <div class="panel panel-default" id="panel_solicitante">
                      <div class="panel-heading" id="grupoS"> 
                        <b>DATOS DEL CLIENTE <span id="cabecera_soli"></span></b> 
                      </div>
                      <div class="panel-body">
                        <input type="text" class="hidden" name="IdCliente" id="IdCliente">
                        <div class="row">
                          <div class="col-md-12">
                                <label style="margin-bottom: 0px;">
                                    <input type="radio" name="TipoPersona" id="rbNatural" value="Natural" required checked>
                                    Persona Natural 
                                </label>
                                <label style="margin-bottom: 0px;">
                                    <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required>
                                    Persona Jurídica
                                </label>
                          </div>                            
                        </div>
                        <P></P>
                        <div class="row">
                          <div class="col-md-7">
                            <div class="form-group">
                              <div class="input-group">
                                <div class="input-group-addon"><label id="dniRUC">DNI: </label></div>
                                <input type="text" class="form-control" id="txtDNI" name="dni" data-minlength="8" data-maxlength="11" data-provide="typeahead" autocomplete="off">
                              </div>
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <div class="help-block with-errors"></div>
                            </div>              
                             <p></p>
                          </div>
                          <div class="col-md-4">
                            <button class="btn btn-primary btn-block btn-xs" id="btn_limpiar_soli">Limpiar</button>
                          </div>
                        </div>
                        <div class="row">
                           <div class="col-md-12">
                            <div class="form-group">
                              <div class="input-group">
                                <div class="input-group-addon"><label id="nombreRazon">Nombres: </label></div>
                                <input type="text" class="form-control mayuscula" id="txtNombre" name="nom" data-provide="typeahead" autocomplete="off" required>
                              </div>
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <div class="help-block with-errors"></div>
                             </div>                             
                            <p></p>
                          </div>
                        </div>
                        <div class="row" id="campoAp">
                          <div class="col-md-12">
                            <div class="form-group">
                              <div class="input-group">
                                <div class="input-group-addon"><label>A. Paterno:</label></div>
                                <input type="text" class="form-control mayuscula" id="txtAP" name="ap" data-provide="typeahead" autocomplete="off" required>
                              </div>
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <div class="help-block with-errors"></div>
                            </div>
                            <p></p>
                          </div>
                        </div>

                        <div class="row" id="campoAm">
                            <div class="col-md-12">
                              <div class="form-group">
                                <div class="input-group">
                                  <div class="input-group-addon"><label>A. Materno:</label></div>
                                  <input type="text" class="form-control mayuscula" id="txtAM" name="am" data-provide="typeahead" autocomplete="off">
                                </div>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                                <div class="help-block with-errors"></div>
                              </div>                             
                              <p></p>
                            </div>
                        </div>

                      </div>
                    </div>
                </div>
                <div class="col-md-12" id="panelDatosVenta">
                  <div class="panel panel-default">
                      <div class="panel-heading"><strong>Datos de Compra</strong></div>
                        <div class="panel-body">
                          <div class="row myb-4">
                            <div class="col-md-12">
                              <div class="form-group">
                                <div class="input-group">
                                  <div class="input-group-addon"><label>Peso: </label></div>
                                  <input type="text" class="form-control t-monto" id="Cpeso" name="peso" placeholder="en gramos"required>
                                </div>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                               <div class="help-block with-errors"></div>
                              </div> 
                            </div>
                          </div>
                          <div class="row myb-4">
                            <div class="col-md-9">
                              <div class="form-group">
                                <div class="input-group">
                                  <div class="input-group-addon"><label>Precio/Gramo: </label></div>
                                  <input type="text" class="form-control t-monto" id="Cpresio" name="precio" placeholder="precio por gramo" required>
                                </div>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                               <div class="help-block with-errors"></div>
                              </div> 
                            </div>
                            <div class="col-md-2" style="padding-right: 0px;padding-left: 0px;">
                                <div class="select">
                                  <select class="form-control" name="moneda" id="moneda">
                                      <option value="soles">soles</option>
                                      <option value="dolares">dolares</option>
                                  </select> 
                                </div>  
                              </div>
                          </div>
                          <div class="row myb-4">
                            <div class="col-md-12">
                              <div class="form-group">
                                <div class="input-group">
                                  <div class="input-group-addon"><label>SubTotal: </label></div>
                                  <input type="text" class="form-control" id="Ctotal" name="total" readonly="readonly" >
                                </div>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                               <div class="help-block with-errors"></div>
                              </div> 
                            </div>
                          </div>
                          <div class="row hidden">
                             <div class="col-md-1 col-xs-1 hidden" style="z-index: -10;">
                              <select class="form-control" name="transac">
                                <option value="{{transac}}"></option>
                              </select>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-3" > 
                              <label>Total a pagar:</label> 
                            </div>
                            <div class="col-md-6">
                              <label style="font-size: 25px; color:blue;" id="lbl-total">0.00</label>
                            </div>
                          </div>
                          <div class="row">
                              <div class="col-md-12" > 
                                <label>Observaciones</label> 
                              </div>
                              <div class="col-md-12">
                              <div class="fg-line">
                                <textarea class="form-control" rows="2" placeholder="OBSERVACIONES"id="obs" name="obs"></textarea > </div>       
                              </div> 
                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row"> 
              <div class="col-md-10 col-md-offset-1">
                <div id="campoChk"  class="checkbox"> 
                    <label>
                      <input id="ts4" type="checkbox" value="success-inverse1"> Habilitar Datos del Cliente
                    </label>
                </div> 
               </div> 
            </div>
              <div class="row">
              <div class="col-md-4 col-md-offset-4">
                <button class="btn btn-success btn-block btn-sm" type="button"id="guardar">Registrar venta</button>
              </div>

            </div>
            
          </form>
        </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 VENTA</u></h4></td></tr>
            </table>
            <table>
              <tr>
                <td>{{SITE_URL}}</td>
                <td style="padding-left: 20px;">R/I: <span id="re-sp-nre">{{nre}}</span></td>
              </tr>
            </table>
            <p id="nomCliente">{{nom}} {{ap}} {{am}}</p>
            <p id="dniCliente">{{dni}}</p>
            <table>
              <tr>
                <td>Peso(g):&nbsp;</td>
                <td  id="pes" nowrap>{{peso}}</td>
              </tr>
              <tr>
                <td>Precio/Gramo:&nbsp;</td>
                <td id="pres" nowrap>{{precio}}</td>
              </tr>
              <!--
              <tr>
                <td><b>Subtotal: </b></td>
                <td nowrap id="tot" >{{total}}</td>
              </tr>
              <tr>
                <td><b>Adelanto: </b></td>
                <td nowrap id="re-adelanto"></td>
              </tr>
              -->
              <tr>
                <td><b>Total: </b></td>
                <td nowrap><h4 id="re-importe" >{{importe}}</h4></td>
              </tr>
              <tr>
                <td nowrap>&nbsp;</td>
                <td nowrap>&nbsp;</td>
              </tr>
            </table>
            
            <table>
              <tr>
                <td>OP. {{ nombre_usuario }}</td>
              </tr>
            </table>
            <table style="width: 100%;"> 
              <tr>
                <td style="text-align: left;" id="re-fecha">{{fecha}}</td>
                <td style="text-align: right;" id="re-hora">{{hora}}</td>
              </tr> 
            </table>
          </div>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script  type="text/javascript" charset="utf-8">
    var fila=0;
    $(document).ready(function (){

      $("#panelDatosCliente").hide();
      $("#panelDatosVenta").prop("class","col-md-12");
      $("#panel-main").prop("class","col-md-6 col-md-offset-3");
      $("#campoChk").click(function(){
        if($("#ts4").prop( "checked" )){
          
          $("#panelDatosCliente").show();
          $("#panelDatosVenta").prop("class","col-md-6");
          $("#panel-main").prop("class","col-md-10 col-md-offset-1");
        }
        else{

          $("#panelDatosCliente").hide();
          $("#panelDatosVenta").prop("class","col-md-12");
          $("#panel-main").prop("class","col-md-6 col-md-offset-3");
        }
      });

      $('#txtDNI').numeric();
      $('#Cpeso').numeric();
      $('#Cpresio').numeric();
      $('input').on('keypress', function(e){
          if(e.keyCode == 13)
          {
            var inputs = $(this).parents("form").eq(0).find(":input.form-control");
            var idx = inputs.index($(this));
            if (idx == inputs.length - 1) {
              inputs[0].select()
            } 
            else {
              inputs[idx + 1].focus(); //  handles submit buttons
              //inputs[idx + 1].select();
            }
            return false;
          }
        });
      
      $('#Cpeso').keyup(function(){
        if($('#Cpeso').val()!=null && $('#Cpeso').val()!=''){
          if( $('#Cpresio').val()!=null && $('#Cpresio').val()!=''){
            $('#Ctotal').val(Math.trunc(parseFloat($('#Cpeso').val())*parseFloat($('#Cpresio').val())));

          }
          else{
            $('#Ctotal').val(0);
          }
        }
        else{
          $('#Ctotal').val(0);
        }
        $("#lbl-total").text($('#Ctotal').val());
      })
      $('#Cpresio').keyup(function(){
        if($('#Cpeso').val()!=null && $('#Cpeso').val()!=''){
          if( $('#Cpresio').val()!=null && $('#Cpresio').val()!=''){
            $('#Ctotal').val(Math.trunc(parseFloat($('#Cpeso').val())*parseFloat($('#Cpresio').val())));
          }
          else{
            $('#Ctotal').val(0);
          }
        }
        else{
          $('#Ctotal').val(0);
        }
        $("#lbl-total").text($('#Ctotal').val());
      })
      function EnviarVenta(){
        $.ajax({
            data: {'dni':$('#txtDNI').val(),'nom':$('#txtNombre').val(),'ap':$('#txtAP').val(),'am':$('#txtAM').val(),'moneda':$('#moneda').val(),'peso':$('#Cpeso').val(),'presio':$('#Cpresio').val(),'total':$('#Ctotal').val(),'obs':$("#obs").val()},
            url:'/RegistrarVenta_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
                if(data=='exito'){
                  
                  bootbox.alert({ 
                    message: "Operación exitosa. Venta Realizada",
                    className: 'bb-alternate-modal'
                  });

                  dialog.modal('hide');

                  prepararImpresion($('#txtDNI').val(),($('#txtNombre').val()+', '+$('#txtAP').val()+' '+$('#txtAM').val()),$('#moneda').val(),$('#Cpeso').val(),$('#Cpresio').val(),$('#Ctotal').val(),$("#obs").val());
                  $("#platillaI").printThis();

                  limpiar_modal();
                  }
                else{
                  bootbox.alert({ 
                    message: "Error "+data,
                    className: 'bb-alternate-modal'
                  });

                  dialog.modal('hide');
                }
            }
        });
      }
      

      $("#guardar").click(function(){
        bootbox.confirm({
              message: "¿Realizar Venta?",
              className: 'bb-alternate-modal',
              buttons: {
                  confirm: {
                      label: '<i class="fa fa-check"></i> Aceptar',
                      className: 'btn-success'
                  },
                  cancel: {
                      label: '<i class="fa fa-times"></i> Cancelar',
                      className: 'btn-danger'
                  }
              },
              callback: function (result) {
                   if(result) {
                      dialog=bootbox.dialog({
                          message: '<p><i class="fa fa-spin fa-spinner"></i> Realizando Operación...</p>'
                      });

                      $("#formulario").submit();
                  }
                   
              }
          });
      })
      //
      
      function prepararImpresion(pos0,pos1,pos2,pos3,pos4,pos5){
        var mr="";
        if(pos2=="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(pos1!=null && pos1.trim()!=","){
            $("#nomCliente").html('<b>Cliente: </b>'+pos1.toString());
          }else{
             $("#nomCliente").html('<b>Cliente: </b>'+"Cliente Eventual");
          }
          
          $("#pes").text(pos3);
          $("#pres").text(pos4.toString()+mr);
          $("#tot").text(pos5.toString()+mr);
          $("#fepa").text('fecha: '+textofecha);
          $("#hopa").text(textohora);
      }
      //********
      //****************************************************
      //
      function datos_solicitante(){
        return $("#txtDNI").val()+' '+$("#txtNombre").val()+' '+$("#txtAP").val()+' '+$("#txtAM").val()
      }
      function limpiar_solicitante(){
        $("#IdCliente").prop('value',null);
        $("#txtDNI").prop('value',null);
        $("#txtNombre").prop('value',null);
        $("#txtAP").prop('value',null);
        $("#txtAM").prop('value',null);
      }
      
      $("#txtDNI").change(function() {
        var current = $("#txtDNI").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtDNI").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")

          }
        } else {
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")

        }

        
      }); 

      var autoSolicitante_dni= $('#txtDNI').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_dni_ajax/', { query: query }, function (data) {
                return process(data);
            },'json');
        }
      });
      //*** nombre
      $("#txtNombre").change(function() {
        var current = $("#txtNombre").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtNombre").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")

          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }

        
      }); 

      var autoSolicitante_nombre= $('#txtNombre').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_nombre_ajax/', { query: query,'ap':$("#txtAP").val(),'am':$("#txtAM").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      // paterno
      $("#txtAP").change(function() {
        var current = $("#txtAP").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtAP").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
             $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }

        
      }); 

      var autoSolicitante_ap= $('#txtAP').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_paterno_ajax/', { query: query,'no':$("#txtNombre").val(),'am':$("#txtAM").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      // materno
      $("#txtAM").change(function() {
        var current = $("#txtAM").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtAM").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")

          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {

           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")

        }

        
      }); 

      var autoSolicitante_ami= $('#txtAM').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_materno_ajax/', { query: query,'ap':$("#txtAP").val(),'no':$("#txtNombre").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      $("#btn_limpiar_soli").click(function(e){
        e.preventDefault();
        limpiar_solicitante();
      })
      //******************
      {% ifnotequal resultado '' %}
        {% ifequal resultado 'exito' %}
             $("#platillaI").printThis();
        {% endifequal %}
      {% endifnotequal %}
    });
</script>
{% endblock content1 %}