@extends('layouts.app')

@section('content')
<div class="container-fluid d-flex justify-content-center" style="padding-top: 60px;">
    <div style="max-width: 460px; width: 100%;">

        <div class="text-center mb-3">
            <h4 class="fw-bold text-dark mb-0">Configuración</h4>
            <p class="text-muted mb-0">{{ now()->locale('es')->isoFormat('dddd, D [de] MMMM [de] YYYY') }}</p>
        </div>

        <div class="card border-0 shadow-lg overflow-hidden">
            <div style="background: linear-gradient(135deg, #1e1b3a, #2d1b5e); padding: 40px 20px; text-align:center;">
                <div style="width:70px;height:70px;background:#ff8c00;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 8px 24px rgba(255,140,0,.4);">
                    <i class="bi bi-lock-fill text-white" style="font-size:32px;"></i>
                </div>
                <h4 class="text-white fw-bold mb-1">Acceso a Configuración</h4>
                <p class="text-white-50 mb-0" style="font-size:.85rem;">Área restringida — solo administradores</p>
            </div>

            <div class="card-body p-4">
                @if(session('error'))
                    <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
                @endif

                @if($bloqueado)
                    <div class="text-center py-3">
                        <i class="bi bi-hourglass-split text-danger" style="font-size:2rem;"></i>
                        <p class="fw-bold text-danger mt-2 mb-1">Bloqueado temporalmente</p>
                        <p class="text-muted small mb-0">Demasiados intentos fallidos. Intenta de nuevo en unos minutos.</p>
                    </div>
                @else
                    <form action="{{ route('config.pin.verify') }}" method="POST">
                        @csrf
                        <label class="form-label fw-bold small">
                            <i class="bi bi-key-fill me-1"></i> Ingresa el PIN de acceso
                        </label>
                        <input type="password" name="pin" class="form-control form-control-lg text-center fw-bold" style="letter-spacing:6px; font-size:1.4rem;" maxlength="20" autofocus required inputmode="numeric">
                        <p class="text-muted small mt-2 mb-3">El PIN es sensible a mayúsculas y minúsculas</p>
                        <button type="submit" class="btn btn-success w-100 fw-bold py-2">
                            <i class="bi bi-unlock-fill me-1"></i> Ingresar
                        </button>
                    </form>
                @endif

                <div class="text-center mt-3">
                    <a href="{{ route('dashboard') }}" class="text-muted small text-decoration-none">
                        <i class="bi bi-arrow-left"></i> Volver al Dashboard
                    </a>
                </div>
            </div>

            <div class="text-center py-2 bg-light border-top">
                <span class="text-muted" style="font-size:.72rem;">
                    Máx. {{ \App\Http\Controllers\ConfigPinController::MAX_INTENTOS }} intentos · Bloqueo de {{ \App\Http\Controllers\ConfigPinController::BLOQUEO_MINUTOS }} min tras fallos
                </span>
            </div>
        </div>
    </div>
</div>
@endsection