@extends('layouts.navigation')
@section('styles')
<link rel="stylesheet" href="{{asset("assets/css/candidate/_login_candidate.css")}}">
@endsection
@section('content')
<!-- Sign In Section Start -->
<div class="signin-section ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-8 offset-md-2 offset-lg-3">
                <form class="signin-form" id="login_candidate">
                    <div class="form-group">
                        <label for="Email">Email</label>
                        <input type="email" id="Email" name="Email" class="form-control" placeholder="Email" autocomplete="on" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="Password" class="required">Contraseña</label>
                        <div class="password-wrapper">
                            <input type="password" class="form-control" id="Password" name="Password" placeholder="Contraseña" required />
                            <div class="toggle-button" id="toggle_password" data-input="Password">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="eye-icon">
                                    <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                                    <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="recaptchaResponse" name="recaptchaResponse">
                    <input type="hidden" id="recaptcha_site_key_val" value="{{env('reCAPTCHA_site_key')}}">
                    
                    <div class="d-grid mb-10 recaptcha_hidden">
                        <div class="signin-btn text-center">
                            <button type="submit" id="login_button">
                                <span id="span-login">Iniciar sesión</span>
                                <span id="span-progress" style="display:none;">Validando...
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </span>
                            </button>
                            
                        </div>
                        <div class="d-flex text-center mt-4">
                            <small class="re-text" style="font-size:60% !important;">
                                Este sitio está protegido por reCAPTCHA y se aplican la <a href="https://policies.google.com/privacy" class="l-change">Política de Privacidad</a> y las <a href="https://policies.google.com/terms" class="l-change">Condiciones del Servicio</a> de Google.
                            </small>
                        </div>
                    </div>

                    <!--div class="other-signin text-center">
                        <span>Or sign in with</span>
                        <ul>
                            <li>
                                <a href="#">
                                    <i class='bx bxl-google'></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class='bx bxl-facebook'></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class='bx bxl-twitter'></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class='bx bxl-linkedin'></i>
                                </a>
                            </li>
                        </ul>
                    </div-->

                    <div class="create-btn text-center">
                        <p>¿Aún no te has registrado?
                            <a href="/register">
                                Crea una cuenta
                                <i class='bx bx-chevrons-right bx-fade-right'></i>
                            </a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Sign In Section End -->
@endsection

@section('scripts')
	<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render={{env('reCAPTCHA_site_key')}}"></script>
    <script defer src="{{asset("assets/js/candidate/_login_candidate.js?r=".rand())}}"></script>
@endsection