@extends('layouts.dashboardnew')

@section('content')

<div class="login-form-bg h-100">
        <div class="container h-100">
            <div class="row justify-content-center h-100 m-3">
                <div class="col-xl-12">
                    <div class="form-input-content">
                        <div class="card login-form mb-0">
                            <div class="card-body">
                                
                            <div class="d-flex justify-content-center">
                                <div class="col-md-12 text-center">

                                    <img class="img-fluid mb-3" src="{{ asset('fondo/5.jpg') }}" alt="logo" style="height: 150px;">
                                    
                                    @if ( request()->ref != null )
                                      @php
                                         $referred = DB::table($settings->prefijo_wp.'users')->select('display_name')->where('ID', '=', request()->ref)->first();
                                      @endphp
                                      @if ($referred != null)
                                         <h5>Usted esta siendo referido por: <strong>{{ $referred->display_name }}</strong> </h5>
                                      @endif
                                    @endif
                                    

                                </div> 
                            </div>
        
                                <form class="mt-5" method="POST" action="{{ route('autenticacion.save-register') }}">
                                     {{ csrf_field() }}
                                    
                                
                            <div class="row">
                                    
                                <div class="col-md-6">
                                    <div class="row">
                                            
                                        
                                    <div class="col-12">
                                        <div class="form-group">
                                           <h4 class="text-info">Información de contacto</h4>
                                        </div>
                                    </div>  
                                    
                                    <input type="hidden" name="tip" value="2">

                                    @foreach($campos as $campo)
                                       @if($campo->tipo == 'select')
                                       
                                        @if($campo->id == 38)
                                        <div class="col-12"> 
                                            <div class="form-group">
                                                <label>{{$campo->label}}</label>
                                                <select class="form-control fields" name="{{$campo->nameinput}}"
                                                    {{($campo->requerido == 1) ? 'required' : ' '}} onchange="modificarcodigopais(this.value)">
                                                    <option value="" disabled selected>Optional Selections</option>
                                                    @foreach($paises as $pais)
                                                        <option value="{{$pais->id}}"  {{ old($campo->nameinput) == $pais->id ? 'selected' : '' }}>{{$pais->nombre}}</option>
                                                    @endforeach    
                                                </select>
                                            </div>
                                        </div> 
                                        @endif
                                      
                                      
                                      @if($campo->id != 38)
                                      <div class="col-12"> 
                                       <div class="form-group">
                                        <label>{{$campo->label}}</label>
                                        <select class="form-control" name="{{$campo->nameinput}}"
                                            {{($campo->requerido == 1) ? 'required' : ' '}}>
                                            <option value="" disabled selected>Selecciones una opcion</option>
                                            @foreach($valoresSelect as $valores)
                                                @if ($valores['idselect'] == $campo->id)
                                                 <option value="{{$valores['valor']}}" {{ old($campo->nameinput) == $valores['valor'] ? 'selected' : '' }}>{{$valores['valor']}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                       </div>
                                      </div> 
                                      @endif
                                      
                                      
                                       @elseif($campo->tipo == 'number')
                                       
                                        @if($campo->id == 39)
                                        <div class="col-12">
                                            <label for="inlineFormInputGroup">{{$campo->label}} {{($campo->requerido == 1) ? '(*)' : '(Opcional)'}}</label>
                                            <div class="input-group mb-2">
                                                <div class="input-group-prepend">
                                                   <div class="input-group-text dato-adicional"></div>
                                                </div>
                                                   <input type="text" name="{{$campo->nameinput}}" class="form-control telefono" id="inlineFormInputGroup" {{($campo->requerido == 1) ? 'required' : ' '}} value="{{old($campo->nameinput)}}">
                                            </div>
                                        </div>  
                                        @endif
                                        
                                        
                                        @if($campo->id != 39)
                                        <div class="col-12">
                                            <div class="form-group">
                                              <label>{{$campo->label}} {{($campo->requerido == 1) ? '(*)' : '(Opcional)'}}</label>
                                              <input class="form-control " step="1" type="{{$campo->tipo}}" name="{{$campo->nameinput}}" onKeyPress="if(this.value.length== {{(!empty($campo->max)) ? $campo->max : 0}}) return false;" {{($campo->requerido == 1) ? 'required' : ' '}} value="{{old($campo->nameinput)}}">
                                            </div>
                                        </div>
                                        @endif
                                      
                                        @else
                                        @if($campo->input_edad == 1)
                                       <div class="col-12">    
                                        <div class="form-group">
                                           <label>{{$campo->label}}
                                            {{($campo->requerido == 1) ? '(*)' : '(Opcional)'}}</label>
                                           <input class="form-control datepicker-cumpleanos" type="{{$campo->tipo}}"
                                            name="{{$campo->nameinput}}" value="{{old($campo->nameinput)}}"
                                            {{($campo->requerido == 1) ? 'required' : ' '}}>
                                        </div>
                                       </div>    
                                        @else
                                       <div class="col-12">    
                                        <div class="form-group">
                                          <label>{{$campo->label}}
                                            {{($campo->requerido == 1) ? '(*)' : '(Opcional)'}}</label>
                                          <input class="form-control " type="{{$campo->tipo}}"
                                            name="{{$campo->nameinput}}" value="{{old($campo->nameinput)}}"
                                            minlength="{{(!empty($campo->min)) ? $campo->min : ''}}"
                                            maxlength="{{(!empty($campo->max)) ? $campo->max : ''}}"
                                            {{($campo->requerido == 1) ? 'required' : ' '}} @if($campo->id == 5) onkeypress="return check(event)" @endif>
                                        </div>
                                      </div>    
                                        @endif
                                        @endif
                                    @endforeach 
                                    
                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                           <input type="checkbox" name="terms" class="form-check-input">
                                           <label>He leído y Acepto los Términos y Condiciones</label>
                                        
                                            <a href="{{asset('assets/terminosycondiciones.pdf')}}" download>Descargar Términos y Condiciones</a>
                                        </div>    
                                    </div>
                                    
                                </div>
                            </div>     
                            
                            
                            
                            <div class="col-md-6">
                                <div class="row">
                                   
                                <div class="col-12">
                                    <div class="form-group">
                                        <h4 class="text-info">Acceso al Sistema</h4>
                                    </div>
                                </div>
                                   
                                   <div class="col-12">
                                     <div class="form-group">
                                        <label>Correo Electrónico
                                            (*)</label>
                                        <input class="form-control" type="text" name="user_email" value="{{ old('user_email') }}" required>
                                     </div>
                                    </div> 
                                   
                                   <div class="col-12">
                                    <div class="form-group">
                                        <label>Confirmación de Correo Electrónico (*)</label>
                                        <input class="form-control" type="text" name="user_email_confirmation" value="{{ old('user_email_confirmation') }}" required>
                                    </div>
                                  </div>    

                                  <div class="col-10">
                                    <div class="form-group">
                                        <label>Contraseña (*)</label>
                                        <input class="form-control" type="password" name="password" required id="txtPassword" onkeyup="validarPassword(this.value)">
                                    </div>
                                    
                                    <div class="form-group">
                                        <p class="legth">Debe contener minimo 6 Caracteres</p>
                                        <p class="mayuscula">Debe incluir 1 letra mayúsculas</p>
                                        <p class="minuscula">Debe incluir 1 letra minuscula</p>
                                        <p class="especial">Debe incluir números</p>
                                        <p class="simbolo">Debe incluir símbolos</p>
                                    </div>
                                    
                                  </div> 
                                  
                                  
                                  <div class="col-2 mt-5 text-center">
                                    <div class="form-group" onclick="mostrarPassword()">
                                        <i class="fa fa-eye-slash icon" style="font-size: 25px;"></i>
                                    </div>
                                  </div>  
                                  
                                  <div class="col-10">
                                    <div class="form-group">
                                        <label>Confirmación de Contraseña (*)</label>
                                        <input class="form-control" type="password" name="password_confirmation" required id="txtPassword2" onkeyup="validarPassword2(this.value)">
                                    </div>
                                    
                                    <div class="form-group">
                                        <p class="legth2">Debe contener minimo 6 Caracteres</p>
                                        <p class="mayuscula2">Debe incluir 1 letra mayúsculas</p>
                                        <p class="minuscula2">Debe incluir 1 letra minuscula</p>
                                        <p class="especial2">Debe incluir números</p>
                                        <p class="simbolo2">Debe incluir símbolos</p>
                                    </div>
                                    
                                  </div>
                                  
                                  
                                  <div class="col-2 mt-5 text-center">
                                    <div class="form-group" onclick="mostrarPassword2()">
                                        <i class="fa fa-eye-slash icon2" style="font-size: 25px;"></i>
                                    </div>
                                  </div>  

                                    @if (request()->ref == null)
                                    <input type="hidden" name="referred_id" value="1">
                                    @else
                                    <input type="hidden" name="referred_id" value="{{ request()->ref }}">
                                    @endif

                                    @if (!empty(request()->lado))
                                    <input type="hidden" name="ladomatriz" value="{{request()->lado}}" />
                                    @endif

                                    @if ($estructura->tipoestructura == 'binaria')
                                      @if(empty(request()->lado))
                                      <div class="col-12">
                                       <div class="form-group">
                                            <label class="claro" for="">Lado a Ingresar (*)</label>
                                           <select class="form-control " name="ladomatriz" required>
                                           <option value="" disabled selected>Selecciones una opcion</option>
                                           <option value="D">Derecha</option>
                                           <option value="I">Izquierda</option>
                                           </select>
                                       </div>
                                      </div> 
                                      @endif
                                    @endif


                                    @if (empty(request()->tipouser))
                                    <input type="hidden" name="tipouser" value="Normal" />
                                    @else
                                    <input type="hidden" name="tipouser" value="{{ request()->tipouser }}" />
                                    @endif
        
        
                                    @if($settings->recaptcha == 1)
                                    <div class="col-12">
                                        <div class="form-group">
                                           <label>Recaptcha (*)</label>
                                            {!! app('captcha')->display() !!}
                                            @if ($errors->has('g-recaptcha-response'))
                                                <span class="help-block text-danger">
                                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>    
                                    @endif
                                
                                </div>    
                            </div>        
                                    
                                    
                                    <div class="col-md-12">
                                        <div class="d-flex justify-content-center">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                   <button class="btn btn-flat btn-info w-100 block-botton" type="submit">Registrarme</button>
                                                </div>  
                                            </div>      
                                        </div>
                                    </div>     
                                    
                        </div>
                                
                    </form>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

@endsection


@push('script')
<script type="text/javascript">

    function mostrarPassword(){
        var cambio = document.getElementById("txtPassword");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
    }
    
    
    function mostrarPassword2(){
        var cambio = document.getElementById("txtPassword2");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon2').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon2').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
    }
    
    
    function modificarcodigopais(valor){
        
        @foreach($paises as $pais)
           if(valor == '{{ $pais->id }}'){
               $('.telefono').inputmask('999-999-9999'); 
               $('.dato-adicional').text('+ ({{$pais->idface}}) ')
           }
        @endforeach
    }
    
    
function validarPassword(password2){
    
    var leg = false;
    var mayuscula = false;
	var minuscula = false;
  	var numero = false;
  	var simbolo = false;
    
   
    for(var i = 0; i<password2.length; i++){
	    if(password2.charCodeAt(i) >= 65 && password2.charCodeAt(i) <= 90){
		   mayuscula = true;
        }else if(password2.charCodeAt(i) >= 97 && password2.charCodeAt(i) <= 122){
		   minuscula = true;
        }else if(password2.charCodeAt(i) >= 48 && password2.charCodeAt(i) <= 57){
		   numero = true;
        }else{
	       simbolo = true;
		}
    }
  
  
    if(password2.length >= 6){
        $('.legth').addClass('text-success');
        leg = true;
    }else{
        $('.legth').removeClass('text-success');
        leg = false;
    }
  
    if(mayuscula == true){
        $('.mayuscula').addClass('text-success');
    }else{
        $('.mayuscula').removeClass('text-success');
        mayuscula = false;
    }
  
    if(minuscula == true){
        $('.minuscula').addClass('text-success');
    }else{
        $('.minuscula').removeClass('text-success');
        minuscula = false;
    }
  
    if(numero == true){
        $('.especial').addClass('text-success');
    }else{
        $('.especial').removeClass('text-success');
        numero = false;
    }
        
    if(simbolo == true){
         $('.simbolo').addClass('text-success');
    }else{
        $('.simbolo').removeClass('text-success');
        numero = false;
    }
      
} 




function validarPassword2(password2){
    
    var leg2 = false;
    var mayuscula2 = false;
	var minuscula2 = false;
  	var numero2 = false;
  	var simbolo2 = false;
    
   
    for(var i = 0; i<password2.length; i++){
	    if(password2.charCodeAt(i) >= 65 && password2.charCodeAt(i) <= 90){
		   mayuscula2 = true;
        }else if(password2.charCodeAt(i) >= 97 && password2.charCodeAt(i) <= 122){
		   minuscula2 = true;
        }else if(password2.charCodeAt(i) >= 48 && password2.charCodeAt(i) <= 57){
		   numero2 = true;
        }else{
	       simbolo2 = true;
		}
    }
  
  
    if(password2.length >= 6){
        $('.legth2').addClass('text-success');
        leg2 = true;
    }else{
        $('.legth2').removeClass('text-success');
        leg2 = false;
    }
  
    if(mayuscula2 == true){
        $('.mayuscula2').addClass('text-success');
    }else{
        $('.mayuscula2').removeClass('text-success');
        mayuscula2 = false;
    }
  
    if(minuscula2 == true){
        $('.minuscula2').addClass('text-success');
    }else{
        $('.minuscula2').removeClass('text-success');
        minuscula2 = false;
    }
  
    if(numero2 == true){
        $('.especial2').addClass('text-success');
    }else{
        $('.especial2').removeClass('text-success');
        numero2 = false;
    }
        
    if(simbolo2 == true){
         $('.simbolo2').addClass('text-success');
    }else{
        $('.simbolo2').removeClass('text-success');
        numero2 = false;
    }
      
}     


    function check(e) {
         tecla = (document.all) ? e.keyCode : e.which;

         //Tecla de retroceso para borrar, siempre la permite
         if (tecla == 8 || tecla == 32) {
             return true;
         }

         // Patrón de entrada, en este caso solo acepta numeros y letras
         patron = /[A-Za-z0-9]/;
         tecla_final = String.fromCharCode(tecla);
         return patron.test(tecla_final);
    }
  
  
</script>
@endpush