@extends('layouts.auth-mundial')

@section('title', 'Ingresar | Mundial 2026')
@section('background', asset('img/estadio.jpg'))

@section('top-link')
    <a href="{{ route('registro') }}" class="auth-link-top">
        <i class="fa-solid fa-user-plus"></i> Crear cuenta
    </a>
@endsection

@section('info')
    <div class="auth-badge">
        <i class="fa-solid fa-right-to-bracket"></i>
        Ingreso de participantes
    </div>

    <h1>
        Vuelve al <span>camino mundialista</span>
    </h1>

    <p>
        Ingresa para continuar tus pronósticos, revisar tus llaves y competir
        en el ranking general del Mundial 2026.
    </p>

    <div class="auth-mini-cards">
        <div class="auth-mini-card">
            <i class="fa-solid fa-calendar-check"></i>
            <h5>Calendario completo</h5>
            <span>Pronostica desde grupos hasta la final.</span>
        </div>

        <div class="auth-mini-card">
            <i class="fa-solid fa-ranking-star"></i>
            <h5>Ranking general</h5>
            <span>Compite con todos los participantes.</span>
        </div>
    </div>
@endsection

@section('panel-title')
    <h2>Ingresar</h2>
    <p class="subtitle">Accede con tu correo y contraseña.</p>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            {{ $errors->first() }}
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

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

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

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

        <div class="form-check mb-3">
            <input type="checkbox" name="remember" class="form-check-input" id="remember">
            <label for="remember" class="form-check-label">Recordarme</label>
        </div>

        <button type="submit" class="btn btn-auth">
            <i class="fa-solid fa-right-to-bracket"></i> Ingresar
        </button>
    </form>

    <div class="text-center mt-3">
        ¿No tienes cuenta?
        <a href="{{ route('registro') }}" class="auth-link">Regístrate</a>
    </div>
@endsection