@php
    $user = auth()->user();

    if ($user->hasRole('super-admin')) $layout = 'layouts.superadmin';
    elseif ($user->hasRole('advisor')) $layout = 'layouts.advisor';
    elseif ($user->hasRole('moderator')) $layout = 'layouts.moderator';
    else $layout = 'layouts.member';

    $type   = $type   ?? request('type','all');     // all | high | mod | absence | report
    $status = $status ?? request('status','all');   // all | pending | approved | rejected
    $from   = $from   ?? request('from','');
    $to     = $to     ?? request('to','');
    $qText  = $qText  ?? request('q','');
@endphp

@extends($layout)
@section('title','طلباتي')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-3 sm:px-6 py-6 rtl">
    <div class="max-w-6xl mx-auto space-y-5">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl border border-fuchsia-500/25
                    bg-gradient-to-br from-slate-950 via-fuchsia-950/25 to-slate-950
                    shadow-xl shadow-fuchsia-500/10 p-5 sm:p-6 text-white">
            <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-fuchsia-400/12 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-sky-400/10 blur-3xl"></div>

            <div class="flex items-start justify-between gap-3">
                <div class="space-y-1">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/15 text-[11px] font-bold">
                        <i class="fa-solid fa-inbox"></i>
                        <span>لوحة طلباتي — الكل في مكان واحد</span>
                    </div>

                    <h1 class="text-xl sm:text-2xl font-extrabold">طلباتي</h1>
                    <p class="text-[12px] sm:text-sm text-white/75">
                        طلبات الإدارة • المشرف • الغياب • البلاغات/الاعتراضات — مرتبة من الأحدث للأقدم.
                    </p>
                </div>

                <div class="text-right">
                    <div class="text-[11px] text-white/60">ضمن الفلاتر</div>
                    <div class="text-2xl font-extrabold">{{ number_format((int)($kpis['total'] ?? 0)) }}</div>
                </div>
            </div>

            {{-- KPIs --}}
            <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-8 gap-2">
                @php
                    $pill = function($label,$val,$cls,$icon){
                        return "
                        <div class='rounded-2xl border border-white/10 bg-white/5 px-3 py-2'>
                            <div class='text-[10px] text-white/60 flex items-center gap-1'>
                                <i class=\"fa-solid {$icon}\"></i><span>{$label}</span>
                            </div>
                            <div class='text-sm font-extrabold {$cls}'>{$val}</div>
                        </div>";
                    };
                @endphp

                {!! $pill('معلّق',   (int)($kpis['pending'] ?? 0),  'text-amber-200',  'fa-clock') !!}
                {!! $pill('مقبول',   (int)($kpis['approved'] ?? 0), 'text-emerald-200','fa-circle-check') !!}
                {!! $pill('مرفوض',   (int)($kpis['rejected'] ?? 0), 'text-rose-200',   'fa-circle-xmark') !!}
                {!! $pill('إدارة عليا', (int)($kpis['high'] ?? 0),  'text-fuchsia-200','fa-crown') !!}
                {!! $pill('المشرف',  (int)($kpis['mod'] ?? 0),      'text-sky-200',    'fa-user-shield') !!}
                {!! $pill('غياب',    (int)($kpis['absence'] ?? 0),  'text-indigo-200', 'fa-calendar-days') !!}
                {!! $pill('بلاغات',  (int)($kpis['report'] ?? 0),   'text-orange-200', 'fa-flag') !!}
                {!! $pill('الإجمالي',(int)($kpis['total'] ?? 0),    'text-white',      'fa-layer-group') !!}
            </div>

            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-6 gap-2">
                <select name="type" class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                    <option value="all"     @selected($type==='all')>الكل</option>
                    <option value="high"    @selected($type==='high')>طلبات الإدارة العليا</option>
                    <option value="mod"     @selected($type==='mod')>طلبات المشرف</option>
                    <option value="absence" @selected($type==='absence')>طلبات الغياب</option>
                    <option value="report"  @selected($type==='report')>بلاغات/اعتراضات</option>
                </select>

                <select name="status" class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">
                    <option value="all"      @selected($status==='all')>كل الحالات</option>
                    <option value="pending"  @selected($status==='pending')>قيد المراجعة</option>
                    <option value="approved" @selected($status==='approved')>مقبول</option>
                    <option value="rejected" @selected($status==='rejected')>مرفوض</option>
                </select>

                <input name="from" type="date" value="{{ $from }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <input name="to" type="date" value="{{ $to }}"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <input name="q" value="{{ $qText }}" placeholder="بحث.. (موضوع/هدف/تفاصيل)"
                       class="w-full rounded-xl bg-white/5 border border-white/10 text-white/90 text-sm px-3 py-2">

                <button class="px-4 py-2 rounded-xl bg-fuchsia-500 hover:bg-fuchsia-600 text-white text-sm font-bold">
                    تطبيق
                </button>
            </form>
        </div>

        {{-- LIST --}}
        @if($items->count())
            <div class="space-y-4">
                @foreach($items as $it)
                    @php
                        $kind = (string)($it['kind'] ?? 'other');
                        $st   = (string)($it['status'] ?? 'pending');

                        $statusLabel = match($st){
                            'approved' => 'مقبول',
                            'rejected' => 'مرفوض',
                            default    => 'قيد المراجعة',
                        };

                        $statusCls = match($st){
                            'approved' => 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200',
                            'rejected' => 'bg-rose-500/15 border-rose-400/25 text-rose-200',
                            default    => 'bg-amber-500/15 border-amber-400/25 text-amber-200',
                        };

                        $kindLabel = match($kind){
                            'high'   => 'الإدارة العليا',
                            'mod'    => 'المشرف',
                            'absence'=> 'طلب غياب',
                            'report' => 'بلاغ/اعتراض',
                            default  => 'طلب',
                        };

                        $kindIcon = match($kind){
                            'high'   => 'fa-crown',
                            'mod'    => 'fa-user-shield',
                            'absence'=> 'fa-calendar-days',
                            'report' => 'fa-flag',
                            default  => 'fa-inbox',
                        };

                        $title = (string)($it['title'] ?? 'بدون عنوان');
                        $subtitle = trim((string)($it['subtitle'] ?? ''));
                        $target = trim((string)($it['target'] ?? ''));

                        $dt = $it['created_at'] ?? null;
                        $dateTxt = $dt ? \Carbon\Carbon::parse($dt)->format('Y-m-d H:i') : '—';

                        $route = (string)($it['route'] ?? '#');
                        $isClickable = $route !== '#';
                    @endphp

                    <div class="relative overflow-hidden rounded-3xl border border-white/10
                                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                                shadow-lg shadow-black/30">
                        <div class="absolute inset-0 bg-white/[0.03] pointer-events-none"></div>

                        <div class="p-4 sm:p-5 text-white">
                            <div class="flex items-start justify-between gap-3">
                                <div class="space-y-1 min-w-0">

                                    {{-- Badges --}}
                                    <div class="flex flex-wrap items-center gap-2">
                                        <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $statusCls }} text-[11px] font-bold">
                                            <i class="fa-solid {{ $st==='approved'?'fa-circle-check':($st==='rejected'?'fa-circle-xmark':'fa-clock') }}"></i>
                                            <span>{{ $statusLabel }}</span>
                                        </div>

                                        <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border border-white/10 bg-white/5 text-[11px] font-bold text-white/80">
                                            <i class="fa-solid {{ $kindIcon }}"></i>
                                            <span>{{ $kindLabel }}</span>
                                        </div>

                                        @if($target !== '')
                                            <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border border-white/10 bg-black/20 text-[11px] font-bold text-white/75">
                                                <i class="fa-solid fa-user"></i>
                                                <span>{{ $target }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    {{-- Title --}}
                                    <div class="text-[13px] sm:text-base font-extrabold leading-snug break-words">
                                        {{ $title }}
                                    </div>

                                    {{-- Subtitle --}}
                                    @if($subtitle !== '')
                                        <div class="text-[12px] sm:text-sm text-white/70 break-words">
                                            {{ $subtitle }}
                                        </div>
                                    @endif

                                    {{-- Meta --}}
                                    <div class="text-[11px] text-white/60 flex flex-wrap gap-2 items-center">
                                        <span class="inline-flex items-center gap-1">
                                            <i class="fa-regular fa-clock"></i>
                                            <span>{{ $dateTxt }}</span>
                                        </span>
                                        <span class="text-white/30">•</span>
                                        <span class="inline-flex items-center gap-1">
                                            <i class="fa-solid fa-hashtag"></i>
                                            <span>#{{ (int)($it['id'] ?? 0) }}</span>
                                        </span>
                                    </div>
                                </div>

                                {{-- CTA --}}
                                <div class="text-right">
                                    @if($isClickable)
                                        <a href="{{ $route }}"
                                           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                                                  bg-white/5 border border-white/10 hover:bg-white/10
                                                  text-white text-[12px] font-bold transition">
                                            <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                            فتح
                                        </a>
                                    @else
                                        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                                                     bg-black/20 border border-white/10 text-white/50 text-[12px] font-bold">
                                            <i class="fa-solid fa-ban"></i>
                                            لا يوجد رابط
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- Mini note --}}
                            <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-3 text-[12px] text-white/70">
                                <div class="flex flex-wrap gap-2">
                                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/10">
                                        الحالة: {{ $statusLabel }}
                                    </span>
                                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/10">
                                        النوع: {{ $kindLabel }}
                                    </span>
                                    <span class="px-2 py-1 rounded-xl bg-black/20 border border-white/10">
                                        الترتيب: الأحدث للأقدم
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-2">
                {{ $items->links() }}
            </div>
        @else
            <div class="rounded-3xl border border-white/10 bg-white/5 p-10 text-center text-white/70">
                لا يوجد طلبات ضمن هذه الفلاتر.
            </div>
        @endif

    </div>
</div>
@endsection