@extends('layouts.auth-mundial')

@section('title', 'Registro | Mundial 2026')
@section('background_name', 'registro')

@section('top-link')
    <a href="{{ route('login') }}" class="auth-link-top">
        <i class="fa-solid fa-right-to-bracket"></i> Ya tengo cuenta
    </a>
@endsection

@section('info')
    <div class="auth-badge">
        <i class="fa-solid fa-user-plus"></i>
        Registro de participante
    </div>

    <h1>
        Crea tu cuenta y pelea por el <span>primer lugar</span>
    </h1>

    <p>
        Regístrate para participar en los pronósticos del Mundial 2026.
        Tu cuenta quedará pendiente hasta que el administrador apruebe tu ingreso.
    </p>

    <div class="auth-mini-cards">
        <div class="auth-mini-card">
            <i class="fa-solid fa-user-check"></i>
            <h5>Validación</h5>
            <span>El administrador aprobará tu cuenta.</span>
        </div>

        <div class="auth-mini-card">
            <i class="fa-solid fa-trophy"></i>
            <h5>Competencia</h5>
            <span>Participa por el primer lugar del ranking.</span>
        </div>
    </div>
@endsection

@section('panel-title')
    <h2>Crear cuenta</h2>
    <p class="subtitle">Completa tus datos para registrarte.</p>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('registro.guardar') }}">
        @csrf

        <div class="mb-3">
            <label class="form-label">Nombre completo</label>
            <input type="text"
                   name="name"
                   class="form-control"
                   value="{{ old('name') }}"
                   required
                   autofocus>
        </div>

        <div class="mb-3">
            <label class="form-label">Correo electrónico</label>
            <input type="email"
                   name="email"
                   class="form-control"
                   value="{{ old('email') }}"
                   required>
        </div>

        <div class="mb-3">
            <label class="form-label">Teléfono</label>
            <input type="text"
                   name="telefono"
                   class="form-control"
                   value="{{ old('telefono') }}">
        </div>

        <div class="mb-3">
            <label class="form-label">Contraseña</label>
            <input type="password"
                   name="password"
                   class="form-control"
                   required>
        </div>

        <div class="mb-3">
            <label class="form-label">Confirmar contraseña</label>
            <input type="password"
                   name="password_confirmation"
                   class="form-control"
                   required>
        </div>

        <button type="submit" class="btn btn-auth">
            <i class="fa-solid fa-user-plus"></i> Registrarme
        </button>
    </form>

    <div class="text-center mt-3">
        ¿Ya tienes cuenta?
        <a href="{{ route('login') }}" class="auth-link">Ingresar</a>
    </div>
@endsection