{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Clientes (Administrador)
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navAdministracion").attr('class','dropdown active');
        $("#navCliens").attr('class','active');
      </script>
     <form action=""> 
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading"> <strong>CLIENTES</strong></div>
                <div class="panel-body">
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoCambiar">
                    </h4>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <a class="btn btn-block btn-primary btn-sm" href="/Admin/CrearCliente/" role="button">Nuevo</a>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-block btn-info btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-10 col-md-offset-1">
                          <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();
                                     }
                                  }
                                });
                               }
  
                               
                              function ajax_Clientes(){
                                $.ajax({
                                  url:'/Admin/listaClienteT_ajax/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="";

                                    for(var i=0;i<data.length;i++){
                                        html += '<tr data-toggle="modal" data-target="#myModal" class="filaCli" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fields.dni+'</td><td>'+data[i].fields.nombre+'</td><td>'+data[i].fields.Apellido_paterno+'</td><td>'+data[i].fields.Apellido_materno +'</td><td>'+data[i].fields.telefono+'</td><td>'+data[i].fields.direccion+'</td><td>'+data[i].fields.fecha_nacimiento+'</td><td>'+data[i].fields.email+'</td><td>'+data[i].fields.drem+'</td></tr>';
                                    }                        
                                    //html+='</tbody></table>';
                                    $('#listaCli').html(html);
                                  }
                                });
                              }
                            });
                          </script>
                          <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>
                          </div>
                          <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>DNI</th>
                                    <th>Nombres</th>
                                    <th>Apellido Paterno</th>
                                    <th>Apellido Materno</th>
                                    <th>Teléfono</th>
                                    <th>Dirección</th>
                                    <th>Cumpleaños</th>
                                    <th>Email</th>
                                    <th>DREM</th>
                                  </tr>
                                </thead>
                                <tbody id="listaCli">
                                    
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1" align="center">
                      <nav>
                        <ul class="pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </form>
{% endblock content1 %}