@extends('layouts.app') {{-- أو اسم الليوت الرئيسي عندك --}}

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            
            <div class="mb-4">
                <span class="p-4 bg-warning-subtle rounded-circle d-inline-flex align-items-center justify-content-center border border-warning border-2 shadow-sm" style="width: 100px; height: 100px;">
                    <i class="fa-solid fa-wand-magic-sparkles text-warning fs-1"></i>
                </span>
            </div>

            <h2 class="fw-bold text-dark mb-3">عذراً.. هذه المساحة ليست ضمن نطاق إبداعك!</h2>
            <p class="text-muted fs-5 mx-auto" style="max-width: 600px; line-height: 1.8;">
                أهلاً بك يا فنان. لقد تم تخصيص صلاحياتك بدقة داخل **إطار عملك فقط، وهو المجال الذي برعت وتألقت فيه**. 
                هذه الصفحة خارج نطاق مهامك الحالية، ولكن يمكنك دائماً العودة والتميز في الأقسام المتاحة لك بالأسفل.
            </p>

            <hr class="my-4 border-light-subtle">

            <h5 class="fw-bold text-secondary mb-3 text-start ps-2">
                <i class="fa-solid fa-shield-halved text-primary me-1"></i> صلاحياتك المتاحة حالياً للتميز:
            </h5>

            @if($userPermissions->isEmpty())
                <div class="alert alert-light border rounded-3 text-center p-4">
                    <p class="text-muted mb-0"><i class="fa-solid fa-circle-info me-1"></i> لم يتم تعيين صلاحيات محددة لحسابك بعد، يرجى مراجعة المسؤول المالي أو الإداري لتفعيل دورك.</p>
                </div>
            @else
                <div class="card shadow-sm border-0 rounded-3 bg-white mb-4">
                    <div class="card-body p-3">
                        <div class="d-flex flex-wrap gap-2 justify-content-start">
                            @foreach($userPermissions as $permission)
                                <span class="badge border bg-light text-dark px-3 py-2 rounded-2 d-inline-flex align-items-center gap-1" style="font-size: 0.9rem; font-weight: 500;">
                                    <i class="fa-solid fa-star text-warning" style="font-size: 0.75rem;"></i>
                                    {{ $permission->name_ar ?? $permission->name }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>

<style>
    .bg-warning-subtle { background-color: #fff3e0 !important; }
</style>
@endsection