@section('title', __('Registro de Cliente'))
@section('vendor-style')
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
@endsection

@section('page-style')
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
<style>
    .d-flex.justify-content-center.absolute.inset-0.items-center.bg-white-50 {
        background-color: rgba(255, 255, 255, 0.5);
    }
</style>
@endsection

@section('vendor-script')
 
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection

<x-public-layout :breadcrumbs="$breadcrumbs" :page-configs="$pageConfigs">
    <form action="{{ route("register.store") }}" method="post">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="mb-1">
                    <h5 class="mb-0">Verificación de Correo electrónico del Solicitante</h5>
                    <small class="text-muted">Ingrese su Correo electrónico</small>
                </div>
                <div class="row g-1">
                    @if(session()->has('message'))
                    <div class="col-md-12">
                        <div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
                            <div class="alert-body">
                                {{ session()->get('message') }}
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="Cerrar"></button>
                        </div>
                    </div>
                    @endif
                    <div class="col-sm-4">
                        <x-form-label class="form-label" model="email" for="email" required="true">
                            <x-slot name="label">Correo electrónico</x-slot>
                            <input type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                id="email" name="email" minlength="2" data-length="50" maxlength="50"
                                value="{{ old('email') }}" required autofocus />
                        </x-form-label>
                    </div>
                    <div class="col-sm-12">
                        <x-form-label class="form-label" model="g-recaptcha-response" required="true">
                            <x-slot name="label">Validación de Captcha</x-slot>
                            {!! NoCaptcha::renderJs() !!}
                            <div class="g-recaptcha" data-sitekey="6Lf0zmkhAAAAAKkyKibFPPXQVmHXNaBOcUidLuc5"></div>
                        </x-form-label>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                <div class="d-flex justify-content-between">
                    <a class="btn btn-dark" href="{{ route('login') }}">
                        <i class="fas fa-user-shield align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block">Iniciar sesión</span>
                    </a>
                    <button type="submit" class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">Continuar</span>
                        <i class="fas fa-chevron-right align-middle ms-sm-25 ms-0"></i>
                    </button>
                </div>
            </div>
        </div>
    </form>
</x-public-layout>