{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .:: Estado de Cajas
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaPrincipal").attr('class','dropdown active');
  $("#navEstadoCajas").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="card">
        <div class="card-head card-head-xs style-default"> <strong>ESTADO DE CAJAS</strong></div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div class="alert alert-success alert-dismissible" role="alert" align="left">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style=" font-size:30px;"><span aria-hidden="true">&times;</span></button>
                <strong>Atención</strong><br>
                El sistema revisa las cajas de forma automática todos los <strong>DOMINGOS</strong> a las 3:30 AM
              </div>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-2">
              <button type="button" class="btn btn-block btn-primary" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
            </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                  <div class="table-responsive">
                    <table class="table table-bordered" style="text-align: left;">
                        <thead>
                          <tr>
                            <th>Base</th>
                            <th>Operador</th>
                            <th>Fecha de Revision</th>
                            <th>Estado</th>
                            <th>Descripcion</th>
                          </tr>
                        </thead>
                        <tbody id="listaE">
                            
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
          <br>
        </div>
      </div>
  </div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Detalles</h4>
        </div>
        <div class="modal-body">
          <p>
            <div class="col-md-12 col-sm-12" >
                <div class="panel panel-info">
                  <div class="panel-heading" align="center"> <h4>Detalle de Cliente</h4></div>
                  <form>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-12">
                          <h4 class="bg-success" align="center">
                            <!--&nbsp;-->
                            Datos del cliente
                          </h4>
                        </div>
                      </div>
                      <p></p>
                      <div class="row">
                        <div class="col-md-2 col-md-offset-1" >
                          <h5> Id Cliente: </h5>
                        </div>
                        <div class="col-md-3">
                          <input type="text" class="form-control" id="txtIdcli" disabled="disabled" name ="IdCliente">
                          <p></p>
                        </div>
                        <div class="col-md-2">
                          <h5 id="dniRUC"> DNI/RUC:</h5>
                        </div>
                        <div class="col-md-3">
                           <input type="text" class="form-control" id="txtDNIcli" disabled="disabled" name="DniCli">
                        </div>

                      </div>
                      <br>
                     <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <h5>Tipo de Persona:</h5>
                      </div>
                      <div class="col-md-9">
                      
                        <div class="radio col-md-12">
                            <label>
                                <input type="radio" name="TipoPersona" id="rbNatural" name="sample" value="Natural" disabled>
                                <i class="input-helper"></i>
                                Persona Natural
                            </label>
                        
                            <label>
                            
                                <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" disabled>
                                <i class="input-helper"></i>
                                Persona Jurídica
                            </label>
                            
                        </div>
                      </div>                            
                    </div> 
                      <!--<div class="row">
                         <div class="col-md-8 col-md-offset-1">
                            <label class="radio-inline">
                              <input type="radio" name="TipoPersona" id="rbNatural" value="Natural" disabled> Persona Natural
                            </label>
                            <label class="radio-inline">
                              <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" disabled> Persona Juridica
                            </label>
                            <p></p>
                        </div>
                      </div>-->
                      <p></p>
                      <div class="row">
                          <div class="col-md-2 col-md-offset-1"> 
                            <h5 id="nombreRazon">Nombres:</h5> 
                          </div>
                          <div class="col-md-3">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtNombre" name="NombreCli">  
                            </div>
                          </div> 
                      </div>
                      
                      <p></p>
                      <div class="row" id="campoAp2">
                          <div class="col-md-2 col-md-offset-1" > 
                            <h5>Ap. Paterno:</h5> 
                          </div>
                          <div class="col-md-3">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtAPcli" name="PaternoCli">  
                          </div> 
                          </div>
                          <div class="col-md-2" > 
                            <h5>Ap. Materno:</h5> 
                          </div>
                          <div class="col-md-3">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtAMcli" name="MaternoCli">
                            </div>  
                          </div> 
                      </div>
                      <p></p>
                        <div class="row">
                          <div class="col-md-2 col-md-offset-1" > 
                            <h5>Teléfono:</h5> 
                          </div>
                          <div class="col-md-3">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtTelcli"name="TelefonoCli">  
                          </div>
                          </div> 
                          <!--
                          <div class="col-md-2" > 
                            <h5>Celular</h5> 
                          </div>
                          <div class="col-md-3">
                            <input type="text" class="form-control" id="txtCelcli" name="CelularCli">  
                          </div> -->
                      </div>
                      <p></p>
                      <div class="row">
                          <div class="col-md-2 col-md-offset-1" > 
                            <h5>Dirección:</h5> 
                          </div>
                          <div class="col-md-6">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtDirCli" name="DircCli">
                            </div>         
                          </div> 
                      </div>
                      <p></p>
                      <div class="row">
                          <div class="col-md-4 col-md-offset-1" > 
                            <h5>Fecha de nacimiento:</h5> 
                          </div>
                           <div class="col-md-4">
                           <div class="fg-line">
                              <input type='text' class="form-control" id='datetimepicker1' name="fechaNaCli" />
                            </div>
                            </div>
                            <script type="text/javascript">

                              $(document).ready(function (){
                                $('#datetimepicker1').datetimepicker({
                                  locale: 'es',
                                  format: 'YYYY-MM-DD'
                                });
                              });
                            </script>
                          
                      </div>
                      <p></p>
                      <div class="row">
                        <!--
                          <div class="col-md-3 col-md-offset-1"> 
                            <h5>Ciudad Natal</h5> 
                          </div>
                          <div class="col-md-3">
                            <input type="text" class="form-control" id="txtCiuNcli">  
                          </div> -->
                          <div class="col-md-2 col-md-offset-1" > 
                            <h5>Email:</h5> 
                          </div>
                          <div class="col-md-4">
                          <div class="fg-line">
                             <input type="email" class="form-control" id="txtEmail" placeholder="Email" name="Emailcli">  </div>
                          </div> 
                      </div>
                      <p></p>
                       <div class="row">
                          <div class="col-md-2 col-md-offset-1" > 
                            <h5>DREM:</h5> 
                          </div>
                          <div class="col-md-6">
                          <div class="fg-line">
                            <input type="text" class="form-control" id="txtDremcli" name="DremCli" >
                            </div>         
                          </div> 
                      </div>
                      <p></p>
                      <div class="row">
                        <div class="col-md-4 col-md-offset-2 col-xs-4 col-xs-offset-2">
                          <button class="btn btn-primary btn-block" type="button"id="modificar" value="Guardar" data-dismiss="modal">Guardar</button>
                        </div>
                        <div class="col-md-4 col-xs-4"> 
                          <button class="btn btn-danger  btn-block" type="button"id="CancelarMod" value="Cancelar" data-dismiss="modal">Cancelar</button>
                        </div>

                      </div>
                      <p></p>
                    </div>
                  </form>
                </div>
            </div>
          </p>
        </div>

        <div class="modal-footer">
          <hr>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>

        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    /*
    ajax_Clientes();
    $(document).on("click",".filaCli",function(){
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaCli');
      $("#"+num).attr('class','filaCli info');
      $("#txtIdcli").val(Aux[filaI].pk);
      if(Aux[filaI].fields.tipo_persona == 'Natural'){
        $("#dniRUC").text("DNI");
        $("#nombreRazon").text("Nombres");
        $("#rbNatural").prop("checked", true);
        $("#txtDNIcli").attr('value',Aux[filaI].fields.dni);
        $("#campoAp1").show();
        $("#campoAp2").show();
      }
      else{
        $("#dniRUC").text("RUC");
        $("#nombreRazon").text("Razon Social");
        $("#rbJuridica").prop("checked", true);
        $("#txtDNIcli").attr('value',Aux[filaI].fields.dni);
        $("#campoAp1").hide();
        $("#campoAp2").hide();
      }
      $("#txtDNIcli").attr('value',Aux[filaI].fields.dni)
      $("#txtNombre").prop('value',Aux[filaI].fields.nombre);
      $("#txtAPcli").prop('value',Aux[filaI].fields.Apellido_paterno);
      $("#txtAMcli").prop('value',Aux[filaI].fields.Apellido_materno);
      $("#txtTelcli").prop('value',Aux[filaI].fields.telefono);
      //$("#txtCelcli").prop('value',Aux[filaI].cel);
      $("#txtDirCli").prop('value',Aux[filaI].fields.direccion);
      $("#datetimepicker1").prop('value',Aux[filaI].fields.fecha_nacimiento);
      //$("#txtCiuNcli").prop('value',Aux[filaI].ciudadN);
      $("#txtEmail").prop('value',Aux[filaI].fields.email);
      $("#txtDremcli").prop('value',Aux[filaI].fields.drem);
    });
    $("#btnRefrescar").click(function(){
      ajax_Clientes();
    });
  
    $("#modificar").click(function(){
        EnviarModificacion();
    });

    function EnviarModificacion(){
      $.ajax({
        //data:{'id':$("#txtIdcli").val(),"DNI":$("#txtDNIcli").val()},
        data: {'IdCliente':$("#txtIdcli").val(),'DniCli':$("#txtDNIcli").val(),'TipoPersona':$('input:radio[name=TipoPersona]:checked').val(),'NombreCli':$("#txtNombre").val(),'PaternoCli':$("#txtAPcli").val(),'MaternoCli':$("#txtAMcli").val(),'TelefonoCli':$("#txtTelcli").val(),'DircCli':$("#txtDirCli").val(),'fechaNaCli':$("#datetimepicker1").val(),'EmailCli':$("#txtEmail").val(),'DremCli':$("#txtDremcli").val()},
        url:'/Admin/modificarCliente_ajax/',                                  
        type:'GET',
        dataType:'text',
        success: function(data){
           if(data=='exito'){
            $("#ExitoCambiar").prop('class','bg-info');
            $("#ExitoCambiar").text("Modificacion Exitosa");
            //$("#ExitoCambiar").show();
            ajax_Clientes();
           }
           else{
            $("#ExitoCambiar").prop('class','bg-danger');
            $("#ExitoCambiar").text("Fallo Modificacion :(" + data);
            //$("#ExitoCambiar").show();
           }
        }
      });
     }

    */
    ajax_Estado();
    $("#btnRefrescar").click(function(){
      ajax_Estado();
    });
    function ajax_Estado(){
      $.ajax({
        url:'/lista_estados_cajas_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var estado=''
          var html ="";
          for(var i=0;i<data.length;i++){
              if(data[i].es =='incorrecto'){
                estado='danger';
              }
              if (data[i].es =='cierrenoverificado'){
                estado='warning';
              }
              if (data[i].es =='correcto'){
                estado='success';
              }
    
                
              html += '<tr class="filaE '+estado+'" id="'+i+'"><td>'+data[i].b+'</td><td>'+data[i].op+'</td><td>'+data[i].f+'</td><td>'+data[i].es +'</td><td>'+data[i].dsc+'</td></tr>';
          }                        
          //html+='</tbody></table>';
          $('#listaE').html(html);
        }
      });
    }
  });
</script>
{% endblock content1 %}