@extends('layout.error')

@section('title', 'Error del servidor - 500')

@section('content')
<div class="card border-danger shadow-lg">
    <div class="card-header card-icatep-rojo2"">
        <h4 class="mb-0 text-white">
            <i class="bx bx-error-circle"></i> Error 500 - Error interno del servidor
        </h4>
    </div>
    <div class="card-body text-center py-5">
        <div class="mb-4">
            <i class="bx bx-server text-icatep-rojo2" style="font-size: 100px;"></i>
        </div>
        
        <h1 class="display-1 text-icatep-rojo2 fw-bold">500</h1>
        <h3 class="text-icatep-rojo2 mb-3">Algo salió mal en el servidor</h3>
        
        <p class="text-muted mb-4">
            Ha ocurrido un error inesperado en el servidor. Nuestro equipo ha sido notificado automáticamente.
        </p>

        <div class="alert alert-light border mb-4" role="alert">
            <small class="text-muted">
                <strong>¿Qué hacer ahora?</strong>
                <ul class="text-start mt-2 mb-0">
                    <li>Intenta recargar la página en unos momentos</li>
                    <li>Verifica tu conexión a internet</li>
                    <li>Si el error persiste, contacta al soporte técnico</li>
                    <li>El equipo técnico está trabajando para resolverlo</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>
            
            <a href="{{ route('dashboard') }}" class="btn btn-icatep-verde2" target="_top">
                <i class="bx bx-home"></i> Ir al inicio
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Enviar error al log del navegador para debugging
    console.error('Error 500: Error interno del servidor');
</script>
@endpush
@endsection