@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg border-0">
                <div class="card-body text-center p-5">
                    <!-- Icona di errore -->
                    <div class="mb-4">
                        <i class="fas fa-ban text-danger" style="font-size: 4rem;"></i>
                    </div>
                    
                    <!-- Titolo dell'errore -->
                    <h1 class="display-4 text-danger font-weight-bold mb-3">
                        Errore 403
                    </h1>
                    
                    <!-- Sottotitolo -->
                    <h2 class="h4 text-muted mb-4">
                        Accesso Negato
                    </h2>
                    
                    <!-- Messaggio descrittivo -->
                    <p class="lead text-muted mb-4">
                        Non hai i permessi necessari per accedere a questa risorsa. Se ritieni che questo sia un errore, contatta l'amministratore del sistema.
                    </p>
                    
                    <!-- Dettagli tecnici (solo in ambiente di sviluppo) -->
                    @if(config('app.debug') && isset($exception))
                        <div class="alert alert-info text-left mb-4">
                            <h5 class="alert-heading">Dettagli dell'errore:</h5>
                            <p class="mb-1"><strong>Messaggio:</strong> {{ $exception->getMessage() }}</p>
                            @if(auth()->check())
                                <p class="mb-1"><strong>Utente:</strong> {{ auth()->user()->name }} (ID: {{ auth()->user()->id }})</p>
                            @endif
                            <p class="mb-0"><strong>URL:</strong> {{ request()->url() }}</p>
                        </div>
                    @endif
                    
                    <!-- Azioni disponibili -->
                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                        <!-- Pulsante per tornare alla home -->
                        <a href="{{ url('/') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-home mr-2"></i>
                            Torna alla Home
                        </a>
                        
                        <!-- Pulsante per tornare indietro -->
                        <button onclick="history.back()" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Torna Indietro
                        </button>
                        
                        <!-- Pulsante per contattare l'amministratore -->
                        <a href="mailto:{{ config('app.support_email') }}" class="btn btn-outline-danger btn-lg">
                            <i class="fas fa-user-shield mr-2"></i>
                            Contatta Admin
                        </a>
                    </div>
                    
                    <!-- Informazioni aggiuntive -->
                    <div class="mt-5 pt-4 border-top">
                        <p class="text-muted small mb-2">
                            Se ritieni di avere i permessi necessari, effettua nuovamente l'accesso o contatta l'amministratore.
                        </p>
                        <p class="text-muted small mb-0">
                            ID Errore: {{ uniqid() }} | Timestamp: {{ now()->format('d/m/Y H:i:s') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stili personalizzati per la pagina di errore -->
<style>
    .card {
        border-radius: 15px;
        overflow: hidden;
    }
    
    .card-body {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .btn {
        border-radius: 25px;
        padding: 12px 24px;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .text-danger {
        color: #dc3545 !important;
    }
    
    .fas {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
    
    /* Animazione per l'icona di errore */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    .fas.fa-ban {
        animation: shake 1s infinite;
    }
    
    /* Responsive design */
    @media (max-width: 768px) {
        .display-4 {
            font-size: 2.5rem;
        }
        
        .btn-lg {
            padding: 10px 20px;
            font-size: 0.9rem;
        }
        
        .d-flex {
            flex-direction: column;
        }
        
        .gap-3 {
            gap: 1rem !important;
        }
    }
</style>
@endsection