{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nueva - Transferencia (Administrador)
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navCrearTrans").attr('class','active');
      </script>
      <form  action="/Admin/CrearTransferencia/" method="POST" data-toggle="validator" role="form">{% csrf_token %}
        <div class="row"><br><br><br><br></div>
        <div class="row">
          <div class="col-md-10 col-md-offset-1 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading" align="center"> <h5>Nuevo Transferencia</h5></div>
                <div class="panel-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <div class="alert alert-success" role="alert">
                      <h4>Transferencia Exitosa!!</h4>
                    </div>
                    {% else %}
                    <p class="bg-danger" align="center">
                      :( Fallo transferencia {{resultado}}
                    </p>
                    {% endifequal %}
                    {% endifnotequal %}
                  </div>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <p class="bg-success" align="center">
                                <!--&nbsp;-->
                                Solicitante
                              </p>
                            </div>
                          </div>
                          <div class="row">
                            <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">Clientes</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"> <h5>Clientes</h5></div>
                                            <div class="panel-body">
                                              <div class="row">
                                                <div class="col-md-2 col-md-offset-1">
                                                  <a class="btn btn-default" href="#"role="button">Nuevo</a>
                                                </div>
                                                <div class="col-md-2">
                                                  <a class="btn btn-default" href="#" id="btnRefrescar" role="button">Refrescar</a>
                                                </div>
                                              </div>
                                              <div class="row">
                                                <br>
                                                <p class="bg-success">
                                                  &nbsp;
                                                  <div class="col-md-12">
                                                      <script type="text/javascript">
                                                        var Aux="";
                                                        var filaI =0;
                                                        $(document).ready(function () {
                                                          noCliente();
                                                         $(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 danger');
                                                        });
                                                        $("#btnRefrescar").click(function(){
                                                            ajax_Clientes();
                                                        });
                                                        $("#campoChk").click(function(){
                                                            if($("#noClient").prop('checked')){
                                                              noCliente();
                                                            }
                                                        });
                                                        $("input[name=TipoPersona]").click(function(){
                                                            if($(this).val()=="Natural"){
                                                                $("#dniRUC").text("DNI");
                                                                $("#nombreRazon").text("Nombres");
                                                                $("#campoAp").show();
                                                            }
                                                            else{
                                                                $("#dniRUC").text("RUC");
                                                                $("#nombreRazon").text("Razon Social");
                                                                $("#campoAp").hide();
                                                            }
                                                        });
                                                        $("#btnSelec").click(function(){
                                                            $("#txtId").attr('value',Aux[filaI].pk);
                                                            if(Aux[filaI].fields.tipo_persona == 'Natural'){
                                                              $("#dniRUC").text("DNI");
                                                              $("#nombreRazon").text("Nombres");
                                                              $("#campoAp").show();
                                                              $("#rbNatural").prop('checked',true);
                                                              $("#txtDNI").attr('value',Aux[filaI].fields.dni);
                                                            }
                                                            else{
                                                              $("#dniRUC").text("RUC");
                                                              $("#nombreRazon").text("Razon Social");
                                                              $("#campoAp").hide();
                                                              $("#rbJuridica").prop('checked',true);
                                                              $("#txtDNI").attr('value',Aux[filaI].fields.dni);
                                                            }
                                                            $("#txtNombre").attr('value',Aux[filaI].fields.nombre);
                                                            $("#txtAP").attr('value',Aux[filaI].fields.Apellido_paterno);
                                                            $("#txtAM").attr('value',Aux[filaI].fields.Apellido_materno);
                                                            $("#txtDir").attr('value',Aux[filaI].fields.direccion);
                                                            blokCliente();
                                                        });
                                                        
                                                       function blokCliente(){
                                                            $("#txtId").prop('disabled',true);
                                                            $("input[name=TipoPersona]").prop('disabled',true);
                                                            $("#txtDNI").prop('disabled',true);
                                                            $("#txtNombre").prop('disabled',true);
                                                            $("#txtAP").prop('disabled',true);
                                                            $("#txtAM").prop('disabled',true);
                                                            $("#txtDir").prop('disabled',true);
                                                            $("#campoChk").show();
                                                       };
                                                       function limpiar(){
                                                            $("#txtId").attr('value','');
                                                            $("#txtDNI").attr('value','');
                                                            $("#txtNombre").attr('value','');
                                                            $("#txtAP").attr('value','');
                                                            $("#txtAM").attr('value','');
                                                            $("#txtDir").attr('value','');
                                                       }
                                                       function noCliente(){
                                                            $("#campoId2").prop('disabled',true);
                                                            $("input[name=TipoPersona]").prop('disabled',false);
                                                            $("#txtDNI").prop('disabled',false);
                                                            $("#txtNombre").prop('disabled',false);
                                                            $("#txtAP").prop('disabled',false);
                                                            $("#txtAM").prop('disabled',false);
                                                            $("#txtDir").prop('disabled',false);
                                                            $("#campoChk").hide();
                                                            limpiar();
                                                       };
                                                       ajax_sucursal();
                                                        $("#ComboOficina").focus(function(){
                                                          ajax_oficina($("#ComboSucursal").val());
                                                        });
                                                        $("#ComboSucursal").change(function(){
                                                          ajax_oficina($("#ComboSucursal").val());
                                                        });
                                                        $("#ComboPersonal").focus(function(){
                                                          ajax_Personal();
                                                        });
                                                        function ajax_sucursal(){
                                                          $.ajax({
                                                            url:'/Admin/sucursales_ajax/',
                                                            //async:false,
                                                            type:'GET',
                                                            dataType:'json',
                                                            success: function(data){
                                                            var html ="";
                                                            $("#ComboSucursal").html('');
                                                              for(var i=0;i<data.length;i++){
                                                                html += '<option value="'+data[i].pk+'">'+data[i].pk+'</option>';
                                                              }

                                                            $('#ComboSucursal').html(html);
                                                            }
                                                          });
                                                        };
                                                        //otra funcion
                                                        function ajax_oficina(sucursal){
                                                          $.ajax({
                                                            url:'/Admin/oficinas_ajax/',
                                                            //async:false,
                                                            data:{'idSuc':sucursal},
                                                            type:'GET',
                                                            dataType:'json',
                                                            success: function(data){
                                                            var html ="";
                                                              $("#ComboOficina").html('');
                                                              for(var i=0;i<data.length;i++){
                                                                html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                                                              }
                                                              $('#ComboOficina').html(html);
                                                            }
                                                          });
                                                        };
                                                       function ajax_Clientes(){
                                                        $.ajax({
                                                          url:'/listaClienteT_ajax/',
                                                          //async:false,
                                                          type:'GET',
                                                          dataType:'json',
                                                          success: function(data){
                                                              Aux = data;
                                                              var html ="";
                                                              for(var i=0;i<data.length;i++){
                                                                html += '<tr class="filaCli" id="'+i+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].fields.tipo_persona+'</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 class="table-responsive" id="tablaCli">
                                                        <table class="table table-hover">
                                                            <thead>
                                                               <tr>
                                                                  <th>Nro</th>
                                                                  <th>Tipo P</th>
                                                                  <th>DNI/RUC</th>                       
                                                                  <th>Nombres</th>
                                                                  <th>A Paterno</th>
                                                                  <th>A Materno</th>
                                                                  <th>Telefono</th>
                                                                  <th>Direccion</th>
                                                                  <th>Ciudad Natal</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">
                                                  botones
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                      </div>
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <hr>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                                    <button type="button" class="btn btn-primary" id="btnSelec" data-dismiss="modal">Seleccionar</button>
                                  </div>

                                </div><!-- /.modal-content -->
                              </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                            <div class="col-md-3 col-md-offset-1 col-xs-4">
                              <input type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" value="Clientes">
                            </div>
                          </div>
                          <p></p>
                          <div class="row">
                            <div class="col-md-1">
                              <br>
                            </div>
                            <div class="col-md-2" id="campoId1">
                              <h5>Id Cliente</h5>
                            </div>
                            <div class="col-md-2" id="campoId2">
                                <div class="form-group">
                                  <input type="text" class="form-control" id="txtId" name="IdCliente" placeholder="Id Cliente" disabled>  
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                  <div class="help-block with-errors"></div>    
                                </div>
                                   
                            </div>
                            <p></p>
                            <div class="col-md-5">
                                <div class="form-group">
                                  <label class="radio-inline">
                                    <input type="radio" name="TipoPersona" id="rbNatural" value="Natural" required> Persona Natural
                                  </label>
                                  <label class="radio-inline">
                                    <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required> Persona Juridica
                                  </label>
                                    <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">
                            <div class="col-md-2 col-md-offset-1">
                              <h5 id="dniRUC">DNI</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtDNI" name="DniRucCln" placeholder="DNI/RUC" data-minlength="8">
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                                 <div class="help-block with-errors"></div>
                              </div>              
                               <p></p>
                            </div>
                            <script type="text/javascript">
                            $(document).ready(function(){
                              $('#txtDNI').numeric();                          
                                  //$('#decimal').numeric(","); 
                            });
                          </script>
                            <div class="col-md-2">
                              <h5 id="nombreRazon">Nombres:</h5>
                            </div>
                             <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtNombre" placeholder="Nombres" name="NombreCln" required>
                                 <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-2 col-md-offset-1">
                              <h5>Apellido P:</h5>
                            </div>                                                    
                            <div class="col-md-3">
                              <div class="form-group">
                                  <input type="text" class="form-control" id="txtAP" placeholder="Apellido Paterno" name="PaternoCln" required>
                                  <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-2">
                              <h5>Apellido M:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                  <input type="text" class="form-control" id="txtAM" placeholder="Apellido Materno" name="MaternoCln" required>
                                  <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">
                              <div class="col-md-2 col-md-offset-1">
                                <h5>Direccion:</h5>
                              </div>
                             <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="txtDir" placeholder="Direccion" name="DireccionCln" data-minlength="2">
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                    <div class="help-block with-errors"></div>
                                </div>
                              </div>
                          </div>
                          <div class="col-md-3 col-md-offset-9">
                            <div class="checkbox" id="campoChk">
                              <label>
                                <input type="checkbox" id="noClient"> No es cliente?
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>  
                    </div>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <p class="bg-success" align="center">
                                <!--&nbsp;-->
                                Beneficiado
                              </p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Nombres:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtNombreB" placeholder="Nombres" name="NombreBnf" required>
                                <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">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Apellido P:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtAPB" placeholder="Apellido Paterno" name="PaternoBnf" required>
                                <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-2">
                              <h5>Apellido M:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtAMB" placeholder="Apellido Materno" name="MaternoBnf" required>
                                <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>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <p class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos de Transferencia
                              </p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-xs-4 col-md-offset-1" >
                              <h5>Sucursales</h5> 
                            </div>
                            <div class="col-md-3 col-xs-8" >
                              <select class="form-control" name="SucursalDst" id="ComboSucursal">
                                <option value="nulo"></option>
                              </select>
                              <p></p>
                            </div>
                            <div class="col-md-2 col-xs-5" >
                              <h5>Oficina Destin</h5> 
                            </div>
                            <div class="col-md-3 col-xs-7" >
                              <select class="form-control" name="OficinaDst" id="ComboOficina">
                                <option value="nulo"></option>
                              </select>
                              <p></p>
                            </div>
                            
                          </div>
                          <!--
                          <div class="row">
                             <div class="col-md-2 col-xs-4 col-md-offset-1" >
                              <h5>cajas</h5> 
                            </div>
                            <div class="col-md-3 col-xs-8">
                              <select class="form-control" name="cajaDst" id="comboCajas">
                                <option value="caja2">caja 1</option>
                                <option value="caja1">caja 2</option>
                              </select>
                              <p></p>
                            </div>
                          </div>
                          -->
                          <div class="row"> 
                            <div class="col-md-2 col-xs-4 col-md-offset-1" >
                              <h5>Moneda</h5> 
                            </div>
                            <div class="col-md-3 col-xs-8">
                              <select class="form-control" name="moneda">
                                <option value="soles">Soles</option>
                                <option value="dolares">Dolares</option>
                              </select>
                              <p></p>
                            </div>
                          </div>   
                          <div class="row">
                            <div class="col-md-2 col-xs-4 col-md-offset-1" >
                              <h5>Cantidad</h5> 
                            </div>
                            <div class="col-md-3 col-xs-8">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtCantidad" placeholder="0.00" name="Monto"required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                                <div class="help-block with-errors"></div>
                              </div>                              
                              <p></p>
                            </div>
                            <script type="text/javascript">
                              $(document).ready(function(){
                                $('#txtCantidad').numeric(",");                          
                                    //$('#decimal').numeric(","); 
                              });
                            </script>
                            <div class="col-md-2 col-xs-4" >
                              <h5>Comicion</h5> 
                            </div>
                            <div class="col-md-3 col-xs-8">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtComicion" placeholder="0.00" name="comicion" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                                <div class="help-block with-errors"></div>
                              </div>                              
                              <p></p>
                            </div>
                            <script type="text/javascript">
                              $(document).ready(function(){
                                $('#txtComicion').numeric(",");                          
                                    //$('#decimal').numeric(","); 
                              });
                            </script>
                          </div> 
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Observaciones:</h5>
                            </div>
                            <div class="col-md-8">
                              <div class="form-group">
                                <textarea class="form-control" rows="3" placeholder="OBSERVACIONES" name="obs"></textarea >
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                                <div class="help-block with-errors"></div>
                              </div>
                              
                            </div>
                          </div>  
                          <p></p>
                          <div class="row">
                            <div class="col-md-3 col-md-offset-7 col-xs-4">
                              <button type="button" class="btn btn-default btn-block" id="buCalcular">Calcular</button>
                            </div>
                          </div>                                   
                        </div>
                      </div>  
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-3 col-xs-4 col-xs-offset-2">
                      <input class="btn btn-primary btn-block" type="submit" value="Guardar">
                    </div>
                    <div class="col-md-3 col-xs-4">
                      <input class="btn btn-default btn-block" type="button" value="Cancelar" id="cancelarTrans">
                    </div>
                  </div>

                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
{% endblock content1 %}