{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Compra Material
{% endblock titulo %}
{% block content1 %}
<script type="text/javascript"> 
  $("#navCajaMaterial").attr('class','dropdown active');
  $("#navCompra").attr('class','active');
</script> 
<link href="{% static 'Bootstrap1/css/jquery.ml-keyboard.css' %}" rel="stylesheet">
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
</style>
<div class="row">
  <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading panel-material"><strong>Compra de Oro</strong></div>
        <div class="panel-body">
            <div class="row">
              <div class="col-md-4 col-md-offset-4">
                <form id="formulario"  data-toggle="validator" role="form">
                  <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="DniRucCln" 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="NombreCln" 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="PaternoCln" 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="MaternoCln" 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-6" id="panelDatosCompra">
                        <div class="panel panel-default">
                              <div class="panel-heading"><strong>Datos de Compra</strong></div>
                              <div class="panel-body">
                                 <style type="text/css">
                                    button{
                                      margin:3px;
                                    }
                                    button{
                                     display: inline-block;
                                     border:1px solid #FF0A0A;
                                     color: #FF0000;
                                     border-radius: 30px;
                                     -webkit-border-radius: 30px;
                                     -moz-border-radius: 30px;
                                     font-family: Verdana;
                                     width: auto;
                                     height: auto;
                                     font-size: 16px;
                                     padding: 10px 17px;
                                     background-color: #FCFAF9;
                                    }
                                    button:hover, button:active{
                                     border:1px solid #FFFFFF;
                                     color: #FFFDFC;
                                     background-color: #FC0000;
                                    }
                                </style>
                                <div class="row">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                        <div class="fg-line">
                                          <div class="input-group">
                                            <span class="input-group-addon"><label>PESO</label></span>
                                            <input type="text" class="form-control input" id="Cpeso" style="height: 30px; font-size: 20px;" autocomplete="off" placeholder="en gramos"required>
                                         
                                         </div>
                                         <div class="form-control-feedback" style="text-align:left;" ></div>
                                        </div>
                                      </div>
                                      <div class="numpad">
                                        <div id="container">
                                          <div>
                                            <button class="btn-numpad shuffle">1</button>
                                            <button class="btn-numpad shuffle">2</button>
                                            <button class="btn-numpad shuffle">3</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad shuffle">4</button>
                                            <button class="btn-numpad shuffle">5</button>
                                            <button class="btn-numpad shuffle">6</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad shuffle">7</button>
                                            <button class="btn-numpad shuffle">8</button>
                                            <button class="btn-numpad shuffle">9</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad del"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span></button>
                                            <button class="btn-numpad shuffle">0</button>
                                            <button class="btn-numpad shuffle">.</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div> 
                                    
                                </div>
                                <p></p>
                                <div class="row">
                                    <div class="col-md-10">
                                      <div class="form-group">
                                      <div class="fg-line">
                                        <div class="input-group">
                                          <span class="input-group-addon"><label>PRECIO / gramo</label></span>
                                           <input type="text" class="form-control input2" id="Cpresio" style="height: 30px; font-size: 20px;" autocomplete="off" placeholder="precio por gramo" required>
                                        </div>
                                        <div class="form-control-feedback" style="text-align:left;" ></div>
                                      </div>
                                      </div>
                                      <div class="numpad2">
                                        <div id="container">
                                          <div>
                                            <button class="btn-numpad shuffle">1</button>
                                            <button class="btn-numpad shuffle">2</button>
                                            <button class="btn-numpad shuffle">3</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad shuffle">4</button>
                                            <button class="btn-numpad shuffle">5</button>
                                            <button class="btn-numpad shuffle">6</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad shuffle">7</button>
                                            <button class="btn-numpad shuffle">8</button>
                                            <button class="btn-numpad shuffle">9</button>
                                          </div>
                                          <div>
                                            <button class="btn-numpad del"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span></button>
                                            <button class="btn-numpad shuffle">0</button>
                                            <button class="btn-numpad shuffle">.</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="col-md-2" style="padding-right: 0px;padding-left: 0px;">
                                      <div class="select">
                                        <select class="form-control" id="moneda">
                                            <option value="soles">soles</option>
                                            <option value="dolares">dolares</option>
                                        </select> 
                                      </div>  
                                    </div>
                                </div>
                                <p></p>
                                 <div class="row">
                                    <div class="col-md-8">
                                      <div class="input-group">
                                        <span class="input-group-addon"><label>TOTAL</label></span>
                                        <input type="text" class="form-control" id="Ctotal"  style="height: 30px; font-size: 20px;" readonly="readonly" >
                                      </div>
                                    </div> 
                                </div>
                                <p></p>
                                <div class="row">
                                    <div class="col-md-3" > 
                                      <label>Observaciones</label> 
                                    </div>
                                    <div class="col-md-9">
                                    <div class="fg-line">
                                      <textarea class="form-control" rows="2" placeholder="OBSERVACIONES"id="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>
                  <p></p>
                -->
                  <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"><strong>Registrar Compra</strong></button>
                    </div>

                  </div>
                  <p></p>
                  <div class="row" style="height: 220px;">
                    
                  </div>
                </form>
              </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>
                              <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 -->
        </div>
      </div>
  </div>
</div>
<script  type="text/javascript">
    var dialog="";
    var Aux='';
    var fila=0;
    var auto=["123456","1111"];
    var clicking =false,clicking2 =false;
    var input=null;
    $(document).ready(function (){
      $("#modal_formulario").prop("class","modal-dialog");
      $("#panelDatosCliente").hide();
      $("#panelDatosCompra").prop("class","col-md-12");
      $("#campoChk").click(function(){
        if($("#ts4").prop( "checked" )){
          $("#modal_formulario").prop("class","modal-dialog modal-lg");
          $("#panelDatosCliente").show();
          $("#panelDatosCompra").prop("class","col-md-6");
        }
        else{
          $("#modal_formulario").prop("class","modal-dialog");
          $("#panelDatosCliente").hide();
          $("#panelDatosCompra").prop("class","col-md-12");
        }
      });
      
      $('#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;
        }
      });
      $('#myModal').modal('show');
      function calcular(){
        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);
        }
      }
      $('#Cpeso').keyup(function(){
        calcular();
      })
      $('#Cpresio').keyup(function(){
        calcular();
      })
      $("#guardar").click(function(){
        $(this).prop('disabled',true)
        bootbox.confirm({
            message: "¿Realizar Compra?",
            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>'
                    });

                    EnviarCompra();
                }
                 
            }
        });
      })
      function EnviarCompra(){
        $(".numpad").fadeOut("slow");
        $(".numpad2").fadeOut("slow");
        $.ajax({
            data: {'IdCliente':$('#IdCliente').val(),'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:'/RegistrarCompra_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){

                console.log(data);

                if(data=='exito'){

                  bootbox.alert({ 
                    message: "Operación exitosa. Compra Realizada",
                    className: 'bb-alternate-modal'
                  });

                  dialog.modal('hide');
                  fila=fila+1;

                  prepararImpresion('','',$('#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").prop('disabled',false)
            },
            error: function(xhr, textStatus, errorThrown) {
                    
                    console.log(xhr.responseText);
            },
        });
      }

      function limpiar_modal(){
        $('#txtDNI').val(null);
        $('#txtNombre').val(null);
        $('#txtAP').val(null);
        $('#txtAM').val(null);
        $('#Cpeso').val(null);
        $('#Cpresio').val(null);
        $('#Ctotal').val(null);
        $('#obs').val(null);
        $("#formulario").validator('validate');
      }
      //
      
      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();
      })
      //******************
    
      //*****************
      $(".numpad").hide();
      $('.input').click(function(){
          $("#formulario").validator('validate');
          clicking2 =false;
          $(".numpad2").fadeOut("slow");
          $('.numpad').fadeToggle('fast');
          if(!clicking){
            clicking= true;
            input = $(this);
          }
          else{
            clicking= false;
            input = null;
          }
      });
      $('.del').click(function(e){
          e.preventDefault();
          input.val(input.val().substring(0,input.val().length - 1));
          calcular();
      });
      $('.shuffle').click(function(e){
        e.preventDefault();
        input.val(input.val() + $(this).text());
        calcular();
      });
    // input 2
    
      $(".numpad2").hide();
      $('.input2').click(function(){
          $("#formulario").validator('validate');
          $(".numpad").fadeOut("slow");
          clicking =false;
          $('.numpad2').fadeToggle('fast');
          if(!clicking2){
            clicking2= true;
            input = $(this);
          }
          else{
            clicking2= false;
            input = null;
          }
      });
      // teclado en pantalla
      $('#obs').mlKeyboard({layout: 'es_ES',active_shift: false});
      $('#txtDNI').mlKeyboard({layout: 'es_ES',active_shift: false});
    });
</script>
<script src="{% static 'Bootstrap1/js/jquery.ml-keyboard.js' %}"></script>
{% endblock content1 %}