@extends('layouts.auth')

@section('page_title', __('Crear cuenta'))

@section('auth_nav')
    <a href="{{ route('login') }}" class="btn btn-sm rt-btn-cherry px-3">{{ __('Ya tengo cuenta') }}</a>
@endsection

@section('content')
    <div class="rt-auth-card rt-auth-card--focus">
        <h1 class="rt-auth-card-title">{{ __('Crear cuenta') }}</h1>
        <p class="rt-auth-card-lead mb-0">{{ __('Únete para comprar entradas y seguir tus eventos en Regiticket.') }}</p>

        <div class="rt-auth-divider"></div>

        <form method="POST" action="{{ route('register') }}" class="rt-auth-form">
            @csrf

            <div class="mb-3">
                <label for="name" class="rt-auth-label">{{ __('Nombre') }}</label>
                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus placeholder="{{ __('Tu nombre') }}">

                @error('name')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            <div class="mb-3">
                <label for="email" class="rt-auth-label">{{ __('Correo electrónico') }}</label>
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="nombre@ejemplo.com">

                @error('email')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            @include('partials.rt-password-field', [
                'name' => 'password',
                'id' => 'password',
                'label' => __('Contraseña'),
                'autocomplete' => 'new-password',
                'placeholder' => __('Mínimo 8 caracteres'),
                'showMeter' => true,
                'minlength' => 8,
            ])

            @include('partials.rt-password-field', [
                'name' => 'password_confirmation',
                'id' => 'password-confirm',
                'label' => __('Confirmar contraseña'),
                'autocomplete' => 'new-password',
                'placeholder' => __('Repite la contraseña'),
                'showMeter' => false,
                'errorKey' => 'password',
                'silentError' => true,
                'wrapperClass' => 'mb-4',
                'minlength' => 8,
            ])

            <button type="submit" class="btn btn-sm rt-btn-cherry w-100 mb-3">{{ __('Registrarme') }}</button>

            <p class="text-center small text-secondary mb-0">
                {{ __('¿Ya tienes cuenta?') }}
                <a class="rt-auth-link" href="{{ route('login') }}">{{ __('Iniciar sesión') }}</a>
            </p>
        </form>
    </div>
@endsection

@push('scripts')
    @if ($errors->any())
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const errorMessages = {!! json_encode($errors->all()) !!};
                Swal.fire({
                    icon: 'error',
                    title: @json(__('¡Atención!')),
                    html: '<div class="text-start small mt-2">' + 
                          '<ul class="mb-0">' + 
                          errorMessages.map(msg => '<li>' + msg + '</li>').join('') + 
                          '</ul>' + 
                          '</div>',
                    confirmButtonColor: '#b91830',
                    confirmButtonText: @json(__('Entendido')),
                });
            });
        </script>
    @endif
@endpush
