@extends('layouts.web')

@section('main')
<div class="breadcrumb-area breadcrumb-img bg-img" data-bg="{{ asset('images/cabeceras/bg_cuenta.jpg') }}">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-wrap">
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="{{ route('index') }}"><i class="fa fa-home"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Registro de usuario</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="login-register-wrapper section-padding">
    <div class="container">
        <div class="member-area-from-wrap">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="login-reg-form-wrap sign-up-form">
                        <h4>Ingresa tus datos</h4>
                        <form action="{{ url('register') }}" method="post" id="form_registro">
                            @csrf
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="single-input-item">
                                        <label for="nombre" class="required">Nombre</label>
                                        <input id="nombre" class="form-control @error('nombre') is-invalid @enderror"
                                            name="nombre" type="text" placeholder="Nombre"
                                            value="{{ old('nombre') }}" />
                                        @error('nombre')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="single-input-item">
                                        <label for="paterno" class="required">Apellido Paterno</label>
                                        <input type="text" id="paterno"
                                            class="form-control @error('paterno') is-invalid @enderror" name="paterno"
                                            value="{{ old('paterno') }}" placeholder="Apellido Paterno" />
                                        @error('paterno')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="single-input-item">
                                        <label for="materno" class="required">Apellido Materno</label>
                                        <input type="text" id="materno" name="materno"
                                            class="form-control @error('materno') is-invalid @enderror"
                                            value="{{ old('materno') }}" placeholder="Apellido Materno" />
                                        @error('materno')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="single-input-item">
                                        <label for="telefono" class="required">Teléfono</label>
                                        <input type="text" id="telefono" name="telefono"
                                            class="form-control @error('telefono') is-invalid @enderror"
                                            value="{{ old('telefono') }}" placeholder="Teléfono" />
                                        @error('telefono')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="single-input-item">
                                        <label for="email" class="required">Correo electrónico</label>
                                        <input type="email" id="email" name="email" placeholder="Correo electrónico"
                                            value="{{ old('email') }}"
                                            class="form-control @error('email') is-invalid @enderror" />
                                        @error('email')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="single-input-item">
                                        <label for="password" class="required">Contraseña</label>
                                        <input type="password" id="password"
                                            class="form-control @error('password') is-invalid @enderror" name="password"
                                            placeholder="Contraseña" />
                                        @error('password')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="single-input-item">
                                        <label for="password_confirmation" class="required">Confirmar Contraseña</label>
                                        <input type="password" id="password_confirmation" name="password_confirmation"
                                            placeholder="Confirmar Contraseña*"
                                            class="form-control @error('password_confirmation') is-invalid @enderror " />
                                        @error('password_confirmation')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="single-input-item">
                                <div class="login-reg-form-meta">
                                    <div class="remember-meta">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" {{ old('terminos') ? 'checked' : '' }}
                                                class="custom-control-input form-control" id="terminos" name="terminos">
                                            <label class="custom-control-label" for="terminos">
                                                <a href="#" target="_blank">Acepto Términos y Condiciones</a>
                                            </label>
                                            @error('terminos')
                                            <span
                                                class="invalid-feedback d-block pl-2"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type='hidden' name='recaptcha_token' id='recaptcha_token' class="@error('recaptcha_token') is-invalid @enderror">
                            @error('recaptcha_token')
                                <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                            @enderror
                            <div class="single-input-item">
                                <button class="btn btn-sqr" id="btn-submit" type="submit"> Crear Cuenta </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
@parent
<script src="https://www.google.com/recaptcha/api.js?render=6LfDbaoUAAAAAOWzba55_oWd0ZcyCGctbhwXaeqW"></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6LfDbaoUAAAAAOWzba55_oWd0ZcyCGctbhwXaeqW').then(function (token) {
            document.getElementById("recaptcha_token").value = token;
        });
    });

</script>
@endsection