@extends('layouts.login')

@section('content')
	
<div class="ajaxLoading"></div>
	    
	<div class="form-signin">
			
			<p class="message alert alert-danger " style="display:none;"></p>	
	 
		    	@if(Session::has('status'))
		    		@if(session('status') =='success')
		    			<p class="alert alert-success">
							{!! Session::get('message') !!}
						</p>
					@else
						<p class="alert alert-danger">
							{!! Session::get('message') !!}
						</p>
					@endif		
				@endif

			<ul class="parsley-error-list">
				@foreach($errors->all() as $error)
					<li>{{ $error }}</li>
				@endforeach
			</ul>		
	

		
		<div id="tab-sign-in" class="authentication-form">




	 		{!! Form::open(array('url'=>'user/signin', 'class'=>'form-material','id'=>'LoginAjax' , 'parsley-validate'=>'','novalidate'=>' ')) !!}

	 		<div style="width: 100%;text-align:center;">
            <div class="input-container" >
            <i class="fa-solid fa-house fa-2x" style=";width:40px;padding: 5px;font-size:22px;background-color:#cfd0d1;border-color:#cfd0d1"></i>
            <input type="email" id="inputEmail" class="input-field"  name="email"  placeholder="{{ __('core.email') }}" required autofocus  style="font-size: 14px;font-family:'Urbanist',sans-serif;">
            </div>
	   
	        <div class="input-container" style="margin-top: -5px;">
            <i class="fa-solid fa-music fa-2x" style="width:40px;padding: 5px;font-size:22px;background-color:#cfd0d1;border-color:#cfd0d1"></i>
            <input type="password" id="inputPassword"  name="password" class="input-field" placeholder="{{ __('core.password') }}" required style="font-size: 14px;font-family:'Urbanist',sans-serif;">
            </div>
            </div>

			@if(config('sximo.cnf_recaptcha') =='true') 
			<div class="form-group has-feedback  animated fadeInLeft delayp1">
				<label class="text-left"> Are u human ? </label>	
				<div class="g-recaptcha" data-sitekey="6Le2bjQUAAAAABascn2t0WsRjZbmL6EnxFJUU1H_"></div>				
				<div class="clr"></div>
			</div>	
		 	@endif	
		 	<div class="text-center" style="margin-top:50px;margin-bottom:25px;">
			 	<button class="btn btn-info" type="submit" style="width:28%;font-family:'Poiret One',sans-serif;background-color:#e8ad2c;border-color:#e8ad2c;font-weight: 700;font-size: 13px;display: inline-block;box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;border-radius: 10px;"> ENTRAR </button> 
			</div> 	




			<div class=" pt-2 pb-2 " >					       
					<p class="text-center ">						
						<a href="javascript:void(0)" class="forgot" style="font-size:11px;font-family:'Poiret One',sans-serif;text-shadow:0px 0px 2px #5c5c5c;color:#4e5d69;"> OLVIDO LA CONTRASE&Ntilde;A? </a> 
						<div style="display:none;">
						<a href="{{ url('user/register')}}"> @lang('core.registernew') </a>
						</div>
						
					</p>
					
			</div>	
			
		
			
			
			
			<div class="animated fadeInUp delayp1">
				<div class="form-group  "style="display:none;">
					@if($socialize['google']['client_id'] !='' || $socialize['twitter']['client_id'] !='' || $socialize['facebook'] ['client_id'] !='') 
					
					<p class="text-muted text-center"><b> {{ Lang::get('core.loginsocial') }} </b>	  </p>
					
					<div style="padding:15px 0; text-align: center;">
						@if($socialize['facebook']['client_id'] !='') 
						<a href="{{ url('user/socialize/facebook')}}" class="btn btn-circle btn-success"><i class="ti-facebook"></i> </a>
						@endif
						@if($socialize['google']['client_id'] !='') 
						<a href="{{ url('user/socialize/google')}}" class="btn btn-circle btn-danger"><i class="ti-google"></i> </a>
						@endif
						@if($socialize['twitter']['client_id'] !='') 
						<a href="{{ url('user/socialize/twitter')}}" class="btn btn-circle  btn-info"><i class="ti-twitter"></i> </a>
						@endif
					</div>
					@endif
				</div>	


               <div style="display: none">
			  <p style="padding:5px 0" class="text-center">
			  <a href="{{ url('')}}"> {{ Lang::get('core.backtosite') }} </a>  
		   		</p>
		      </div>
		   
		   	</div>	
		   </form>			
		</div>
		

		<div class=" m-t" id="tab-forgot" style="display: none">				
			{!! Form::open(array('url'=>'user/request', 'class'=>'form-vertical form-material', 'parsley-validate'=>'','novalidate'=>' ')) !!}
			   <div class="form-group has-feedback">
			   <div class="">
			        <div style="width: 60%;margin:auto;text-align:center;font-family:'Poiret One',sans-serif;color:black;text-shadow:0px 0px 1px #5c5c5c;" >
					<label>Ingresa tu Correo Electrónico y reciviras un email para continuar con el proceso de recuparación.</label>
					</div>
					<div class="input-container" style="margin-bottom:20px;margin-top:10px;">
                    <i class="fa-solid fa-house fa-2x" style=";width:40px;padding: 5px;font-size:22px;background-color:#ededed;border-color:#ededed"></i>
					<input type="text" id="credit_email" name="credit_email" placeholder="{{ Lang::get('core.email') }}" required autofocus  style="font-size: 14px;font-family:'Urbanist',sans-serif;" class="input-field" required/>
				    
				   
				    
				    </div>
				
				</div> 	
				</div>
				<div class="form-group has-feedback" style="width: 80%;margin:auto;text-align: center;margin-top:-20px;" >    
					<a href="javascript:;" class="forgot btn   p-2 mb-5  rounded-4" style="margin:5px;font-family:'Poiret One',sans-serif;width:28%;background-color:#d1603b; border-color:#d1603b;font-weight: 600;font-size: 11px;display: inline-block;border-radius: 10px;color:white;box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;"> CANCELAR </a>     
			      <button type="submit" class="btn   p-2 mb-5  rounded-4" style="margin:5px;font-family:'Poiret One',sans-serif;width:28%;background-color:#4e90bf;border-color:#4e90bf;font-weight: 600;font-size: 11px;display: inline-block;border-radius: 10px;color:white;box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;"> ENVIAR </button>        
			  </div>
			  
			  <div class="clr"></div>

			  
			</form>		
		</div>

    <div style="position:absolute;top:94vh;margin-right:-153px;left: 49%;transform: translate(-50%, -50%)">
        <div style="display: inline-block;"><img src="{{ URL::asset('officeimage/codigo.png') }}" style="width:60%;margin-top:-4px;margin-right:-22px;"></div>    
        <div style="display: inline-block;color:#355678;text-shadow:0px 0px 1px #5c5c5c;margin-left:-20px">Version: 2.0</div>
        </div>
		
	</div>
	
	
    

<script type="text/javascript">
	$(document).ready(function(){

		$('.forgot').on('click',function(){
			$('#tab-forgot').toggle();
			$('#tab-sign-in').toggle();
		})
		var form = $('#LoginAjax'); 
		form.parsley();
		form.submit(function(){
			
			if(form.parsley().isValid()){			
				var options = { 
					dataType:      'json', 
					beforeSubmit :  showRequest,
					success:       showResponse  
				}  
				$(this).ajaxSubmit(options); 
				return false;
							
			} else {
				return false;
			}		
		
		});

	});

function showRequest()
{
	$('.ajaxLoading').show();		
}  
function showResponse(data)  {		
	
	if(data.status == 'success')
	{
		window.location.href = data.url;	
		$('.ajaxLoading').hide();
	} else {
		$('.message').html(data.message)	
		$('.ajaxLoading').hide();
		$('.message').show(data.message)	
		return false;
	}	
}	
</script>

<style>

.fa-house::before {
 /* content: url("https://intelpropertyrd.com/entrenamientoactual/public/iconimage/settingsmenu.png");*/
  
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 5px;
    content: "";
    background: url({{url('officeimage/email4.png')}}) no-repeat 0 0;
    filter: drop-shadow(1px 1px 1px #1c1c1c);
    background-size: 85%; 
    margin-top:2px;
    margin-bottom:-5px;
    margin-left:1px;
  

}

.fa-music::before {
 /* content: url("https://intelpropertyrd.com/entrenamientoactual/public/iconimage/settingsmenu.png");*/
  
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 5px;
    content: "";
    background: url({{url('officeimage/candado.png')}}) no-repeat 0 0;
    filter: drop-shadow(1px 1px 1px #1c1c1c);
    background-size: 103%; 
    margin-top:-1px;
    margin-bottom:0px;
    margin-left:-2px;
  

}


.la-envelope::before {
 /* content: url("https://intelpropertyrd.com/entrenamientoactual/public/iconimage/settingsmenu.png");*/
  
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 5px;
    content: "";
    background: url({{url('officeimage/email4.png')}}) no-repeat 0 0;
    filter: drop-shadow(1px 1px 1px #1c1c1c);
    background-size: 85%; 
    margin-top:2px;
    margin-bottom:-5px;
    margin-left:1px;
  

}






* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 85%;
  margin-bottom: 20px;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  height: 43px;
  
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

   border-radius: 10px;
   overflow: hidden;
    
  
  
}

.icon {
  padding: 8px;
  background: #4a7cb5;
  color: white;
  min-width: 50px;
  text-align: center;
  
}

.input-field{
  width: 100%;
  padding: 10px;
  outline: none;
  border:0;
}

/*.input-field:focus {
  border: 2px solid #4a7cb5;
  border-radius: 0px 10px 10px 0px;
}*/
 

::placeholder { /* Firefox, Chrome, Opera */
    color: #474747;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #474747;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: #474747;
}
    
    
</style>
@stop