@extends('layouts.app')

@section('title', 'Unauthorized Access')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="text-center mt-5">
                <!-- Error Icon -->
                <div class="error-icon mb-4">
                    <i class="fas fa-exclamation-triangle fa-5x text-warning"></i>
                </div>

                <!-- Error Message -->
                <div class="error-message mb-4">
                    <h1 class="display-4 text-danger">401</h1>
                    <h2 class="h3 text-dark mb-3">Unauthorized Access</h2>
                    <p class="lead text-muted">
                        You do not have permission to access this resource. 
                        Please contact your administrator if you believe this is an error.
                    </p>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons mb-4">
                    <a href="{{ route('dashboard') }}" class="btn btn-primary btn-lg mr-3">
                        <i class="fas fa-home"></i> Go to Dashboard
                    </a>
                    <a href="{{ route('login.admin') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="fas fa-sign-in-alt"></i> Login
                    </a>
                </div>

                <!-- Help Information -->
                <div class="help-info">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-question-circle"></i>
                                Need Help?
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Contact Support</h6>
                                    <p class="small text-muted">
                                        <i class="fas fa-envelope"></i> support@eirs.gov.ng<br>
                                        <i class="fas fa-phone"></i> +234 123 456 7890
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <h6>System Requirements</h6>
                                    <p class="small text-muted">
                                        <i class="fas fa-browser"></i> Modern web browser<br>
                                        <i class="fas fa-user-shield"></i> Valid user account
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Session Information -->
                @if(Auth::check())
                <div class="session-info mt-4">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> Current Session</h6>
                        <p class="mb-1"><strong>User:</strong> {{ Auth::user()->name ?? 'Unknown' }}</p>
                        <p class="mb-1"><strong>Email:</strong> {{ Auth::user()->email ?? 'Unknown' }}</p>
                        <p class="mb-0"><strong>Role:</strong> {{ Auth::user()->role ?? 'User' }}</p>
                    </div>
                </div>
                @endif

                <!-- Logout Option -->
                @if(Auth::check())
                <div class="logout-option mt-3">
                    <form method="POST" action="{{ route('login.logout') }}" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </button>
                    </form>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.error-icon {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.error-message h1 {
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.action-buttons .btn {
    min-width: 150px;
    margin: 0.5rem;
}

.help-info .card {
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.help-info .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
    border: none;
}

.session-info .alert {
    border-radius: 10px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logout-option .btn {
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .action-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .help-info .row {
        text-align: center;
    }
    
    .help-info .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .error-message h2 {
        color: #e9ecef !important;
    }
    
    .error-message p {
        color: #adb5bd !important;
    }
    
    .help-info .card {
        background-color: #343a40;
        color: #e9ecef;
    }
    
    .help-info .card-body {
        background-color: #343a40;
    }
    
    .help-info .text-muted {
        color: #adb5bd !important;
    }
}
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Add some interactive effects
    $('.action-buttons .btn').hover(
        function() {
            $(this).addClass('shadow-lg');
        },
        function() {
            $(this).removeClass('shadow-lg');
        }
    );

    // Auto-redirect after 30 seconds (optional)
    var redirectTimer = setTimeout(function() {
        window.location.href = '{{ route("dashboard") }}';
    }, 30000);

    // Clear timer if user interacts with the page
    $(document).on('click keypress', function() {
        clearTimeout(redirectTimer);
    });

    // Log the unauthorized access attempt
    console.log('Unauthorized access attempt detected');
    
    // You could also send this to your analytics/logging service
    if (typeof gtag !== 'undefined') {
        gtag('event', 'unauthorized_access', {
            'event_category': 'security',
            'event_label': 'unauthorized_page_access'
        });
    }
});
</script>
@endsection