@extends('layouts.app')

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

@push('styles')
<style>
    .kccl-card {
        max-width: 600px;
        margin: 50px auto;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    .kccl-card-header {
        background: #f44336; /* red danger tone */
        color: #fff;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 600;
    }

    .kccl-card-header i {
        font-size: 24px;
    }

    .kccl-card-body {
        padding: 30px;
        text-align: center;
    }

    .kccl-card-body p {
        color: #6c757d;
        margin-bottom: 25px;
        font-size: 15px;
        line-height: 1.6;
    }

    .kccl-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .kccl-btn {
        border-radius: 6px;
        font-weight: 500;
        padding: 8px 20px;
        transition: all 0.2s;
    }

    .kccl-btn-back {
        background: #6c757d;
        color: #fff;
    }
    .kccl-btn-back:hover {
        background: #5a6268;
    }

    .kccl-btn-home {
        background: #007bff;
        color: #fff;
    }
    .kccl-btn-home:hover {
        background: #0069d9;
    }

    .kccl-card-footer {
        border-top: 1px solid #eee;
        background: #fafafa;
        padding: 12px 20px;
        font-size: 13px;
        color: #666;
        text-align: center;
    }
</style>
@endpush

@section('content')
<div class="kccl-card">
    <!-- Header -->
    <div class="kccl-card-header">
        <i class="las la-shield-alt"></i>
        Access Denied
    </div>

    <!-- Body -->
    <div class="kccl-card-body">
        <p>
            @if(isset($message))
                {{ $message }}
            @else
                You don't have permission to access this page. Please contact your administrator 
                if you believe this is a mistake.
            @endif
        </p>

        <div class="kccl-actions">
            <button onclick="window.history.back()" class="kccl-btn kccl-btn-back">
                <i class="las la-arrow-left"></i> Go Back
            </button>
            <a href="{{ route('admin.dashboard') }}" class="kccl-btn kccl-btn-home">
                <i class="las la-home"></i> Dashboard
            </a>
        </div>
    </div>

    <!-- Footer -->
    @if(auth()->check())
    <div class="kccl-card-footer">
        Logged in as: <strong>{{ auth()->user()->name }}</strong> | 
        Role: <strong>{{ auth()->user()->roles->first()->name ?? 'No Role' }}</strong>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    // Auto redirect after 10 seconds if no action
    setTimeout(function() {
        if (document.referrer) {
            window.history.back();
        } else {
            window.location.href = "{{ route('admin.dashboard') }}";
        }
    }, 10000);
</script>
@endpush