@extends('layout.error')

@section('title', 'Servicio no disponible - 503')

@section('content')
<div class="card border-warning shadow-lg">
    <div class="card-header card-icatep-rojo2">
        <h4 class="mb-0 text-white">
            <i class="bx bx-wrench"></i> Error 503 - Servicio no disponible
        </h4>
    </div>
    <div class="card-body text-center py-5">
        <div class="mb-4">
            <i class="bx bx-wrench text-icatep-rojo2" style="font-size: 100px;"></i>
        </div>
        
        <h1 class="display-1 text-icatep-rojo2 fw-bold">503</h1>
        <h3 class="text-warning mb-3">Sistema en mantenimiento</h3>
        
        <p class="text-muted mb-4">
            El sistema SICCAP está temporalmente fuera de servicio por mantenimiento programado.
        </p>

        <div class="alert alert-light border mb-4" role="alert">
            <small class="text-muted">
                <strong>Información importante:</strong>
                <ul class="text-start mt-2 mb-0">
                    <li>Estamos realizando mejoras en el sistema</li>
                    <li>El servicio se restablecerá en breve</li>
                    <li>Tus datos están seguros y protegidos</li>
                    <li>Por favor, intenta acceder más tarde</li>
                </ul>
            </small>
        </div>

        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="javascript:window.top.location.reload()" class="btn btn-icatep-rojo1">
                <i class="bx bx-refresh"></i> Reintentar
            </a>
        </div>
    </div>
    <div class="card-footer text-center bg-light">
        <small class="text-muted">
            <i class="bx bx-time"></i> Tiempo estimado de restablecimiento: consulta con el administrador
        </small>
    </div>
</div>

@push('scripts')
<script>
    // Reintentar automáticamente después de 2 minutos
    setTimeout(function() {
        console.log('Reintentando conexión automáticamente...');
        window.location.reload();
    }, 120000); // 2 minutos
</script>
@endpush
@endsection