@extends('admin.layout')

@section('title', 'Login Admin')

@section('content')
    <div class="mx-auto grid max-w-6xl items-center gap-8 lg:grid-cols-[1.1fr_0.9fr]">
        <section class="space-y-6">
            <div class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-4 py-1 text-xs font-medium uppercase tracking-[0.3em] text-sky-200">
                Acceso privado
            </div>

            <div class="max-w-2xl space-y-4">
                <h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                    Bienvenido al panel de administración.
                </h2>
                <p class="text-lg leading-8 text-slate-300">
                    Gestiona usuarios, juegos, balances y transacciones desde un único dashboard.
                </p>
            </div>

            <div class="grid gap-4 sm:grid-cols-3">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4 shadow-soft">
                    <p class="text-sm text-slate-400">Seguridad</p>
                    <p class="mt-2 text-xl font-semibold text-white">Login protegido</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4 shadow-soft">
                    <p class="text-sm text-slate-400">Control</p>
                    <p class="mt-2 text-xl font-semibold text-white">Solo admins</p>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4 shadow-soft">
                    <p class="text-sm text-slate-400">Vista rápida</p>
                    <p class="mt-2 text-xl font-semibold text-white">KPIs en vivo</p>
                </div>
            </div>
        </section>

        <section class="rounded-3xl border border-white/10 bg-slate-900/70 p-8 shadow-soft backdrop-blur-xl">
            <div class="mb-6">
                <h3 class="text-2xl font-semibold text-white">Ingresar</h3>
                <p class="mt-2 text-sm text-slate-400">Usa el usuario administrador creado por el seeder.</p>
            </div>

            @if ($errors->any())
                <div class="mb-5 rounded-2xl border border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('admin.login.submit') }}" class="space-y-4">
                @csrf

                <div>
                    <label for="email" class="mb-2 block text-sm font-medium text-slate-300">Email</label>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        value="{{ old('email') }}"
                        class="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-sky-400 focus:ring-2 focus:ring-sky-400/20"
                        placeholder="admin@example.com"
                        required
                    >
                </div>

                <div>
                    <label for="password" class="mb-2 block text-sm font-medium text-slate-300">Contraseña</label>
                    <input
                        id="password"
                        name="password"
                        type="password"
                        class="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white outline-none transition placeholder:text-slate-500 focus:border-sky-400 focus:ring-2 focus:ring-sky-400/20"
                        placeholder="password"
                        required
                    >
                </div>

                <label class="flex items-center gap-3 text-sm text-slate-300">
                    <input type="checkbox" name="remember" value="1" class="h-4 w-4 rounded border-white/20 bg-white/10 text-sky-500 focus:ring-sky-400">
                    Recordarme
                </label>

                <button
                    type="submit"
                    class="w-full rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-400 px-4 py-3 font-semibold text-slate-950 transition hover:brightness-110"
                >
                    Entrar al panel
                </button>
            </form>

            <div class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-slate-300">
                <p class="font-medium text-white">Credenciales por defecto</p>
                <p class="mt-1">Email: <span class="text-sky-300">admin@example.com</span></p>
                <p>Contraseña: <span class="text-sky-300">password</span></p>
            </div>
        </section>
    </div>
@endsection