@extends('layouts.navigation')
@section('styles')
<link rel="stylesheet" href="{{asset("assets/css/intlTelInput.css")}}">
<link rel="stylesheet" href="{{asset("assets/css/candidate/_register_candidate.css")}}">
@endsection
@section('content')
<!-- Sign up Section Start -->
<div class="signup-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="signup-form" id="form-register">
                    <div class="row">
                        <div for="reg_name" class="form-group col-lg-12">
                            <label class="required">Nombre(s)</label>
                            <input type="text" class="form-control" id="reg_name" name="reg_name" placeholder="Nombre" required>
                        </div>
                        <div for="reg_lastname" class="form-group col-lg-6">
                            <label class="required">Apellidos paterno</label>
                            <input type="text" class="form-control" id="reg_lastname" name="reg_lastname" placeholder="Apellido paterno" required>
                        </div>
                        <div for="reg_lastname" class="form-group col-lg-6">
                            <label class="required">Apellido materno</label>
                            <input type="text" class="form-control" id="reg_lastname2" name="reg_lastname2" placeholder="Apellido materno" required>
                        </div>
                    </div>

                    <div for="reg_email" class="form-group">
                        <label class="required">Correo electrónico</label>
                        <input type="email" class="form-control" id="reg_email" name="reg_email" placeholder="Correo electrónico" required>
                    </div>

                    <div class="form-group">
                        <label for="reg_phone" class="required">Número de teléfono</label>
                        <div class="col-12">
                            <input id="reg_phone" name="reg_phone" type="tel" placeholder="" class="form-control input-field" data-intl-tel-input-id="telephone">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="reg_password" class="required">Contraseña</label>
                            <div class="password-wrapper">
                                <input type="password" class="form-control" id="reg_password" name="reg_password" placeholder="Contraseña" required />
                                <div class="toggle-button" id="toggle_password" data-input="reg_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>

                        <div class="form-group col-lg-6">
                            <label for="reg_password_confirmation" class="required">Confirmar contraseña</label>
                            <div class="password-wrapper">
                                <input type="password" class="form-control" id="reg_password_confirmation" name="reg_password_confirmation" placeholder="Contraseña" required />
                                <div class="toggle-button" id="toggle_password_confirmation" data-input="reg_password_confirmation">
                                    <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>
                    </div>

                    <div class="form-group accept-account pt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" checked />
                            <label class="" for="remember_me">Recuérdame</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="accept_account" name="accept_account" value="1" checked />
                            <label class="" for="accept_account">Acepto el <a href="https://mexicanpeoplehr.com/privacy-policy" target="_blank" class="l-change">Aviso de Privacidad</a></label>
                        </div>
                    </div>
                    <input type="hidden" id="recaptchaResponseRegister" name="recaptchaResponseRegister">
                    <input type="hidden" id="recaptcha_site_key_val" value="{{env('reCAPTCHA_site_key')}}">
                    <div class="form-group recaptcha_hidden d-flex flex-column justify-content-center	mt-8 mb-5">
                        <div class="signup-btn text-center">
                            <button type="submit" id="button_register">
                                <span id="span-register">Registrarse</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-signup text-center">
                        <span>Or sign up 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> ¿Ya tienes una cuenta? <a href="/login"> Ingresa aquí <i class='bx bx-chevrons-right bx-fade-right'></i></a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Sign Up Section End -->
@endsection

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