@extends('layouts.app')
@section('title', 'Permission Denied')

@push('styles')
<style>
    .pd-wrap { max-width:620px; margin:4rem auto; padding:2rem; text-align:center; }
    .pd-icon { width:84px; height:84px; border-radius:50%; background:rgba(255,71,87,0.12); color:var(--danger,#ff4757); display:inline-flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:1.25rem; }
    .pd-title { font-size:1.6rem; font-weight:800; margin:0 0 0.75rem; }
    .pd-sub { color:var(--text-secondary); font-size:0.95rem; line-height:1.7; }
    .pd-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem 1.75rem; margin:1.5rem 0; text-align:left; }
    .pd-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:0.88rem; }
    .pd-row:last-child { border-bottom:none; }
    .pd-row .lbl { color:var(--text-muted); }
    .pd-row .val { font-family:monospace; color:var(--text-primary); }
    .pd-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
    .pd-btn { display:inline-flex; align-items:center; gap:0.45rem; padding:0.7rem 1.1rem; border-radius:8px; border:1px solid var(--border); font-weight:600; font-size:0.9rem; text-decoration:none; color:var(--text-primary); background:var(--bg-card); }
    .pd-btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
    .pd-hint { font-size:0.82rem; color:var(--text-muted); margin-top:1rem; }
</style>
@endpush

@section('content')
<div class="pd-wrap">
    <div class="pd-icon"><i class="fas fa-lock"></i></div>
    <h1 class="pd-title">You don't have access to this page</h1>
    <p class="pd-sub">
        Your role doesn't include the permission needed to see
        <strong>{{ session('denied_label') ?? 'this page' }}</strong>.
        Ask your business owner to grant it from Roles &amp; Permissions.
    </p>

    @if(session('denied_permission'))
        <div class="pd-card">
            <div class="pd-row"><span class="lbl">Required permission</span><span class="val">{{ session('denied_permission') }}</span></div>
            @if(session('denied_path'))
                <div class="pd-row"><span class="lbl">Page you tried</span><span class="val">/{{ session('denied_path') }}</span></div>
            @endif
            @if($currentStaff)
                <div class="pd-row"><span class="lbl">Your role</span><span class="val">{{ optional($currentStaff->role)->name ?? ucfirst($currentStaff->role ?? 'staff') }}</span></div>
            @endif
        </div>
    @endif

    <div class="pd-actions">
        <a href="{{ route('inventory.dashboard') }}" class="pd-btn pd-btn-primary"><i class="fas fa-house"></i> Go to dashboard</a>
        <a href="javascript:history.back()" class="pd-btn"><i class="fas fa-arrow-left"></i> Go back</a>
    </div>

    <p class="pd-hint">If you think this is a mistake, contact the business owner or administrator.</p>
</div>
@endsection