@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';
    }

    $status = $status ?? request('status','');
    $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-cyan-500/25
                    bg-gradient-to-br from-slate-950 via-cyan-950/40 to-slate-950
                    shadow-xl shadow-cyan-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-cyan-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-fuchsia-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-tower-broadcast"></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-4 lg:grid-cols-8 gap-2">
                @php
                    $pill = fn($label,$val,$cls) => "
                        <div class='rounded-2xl border border-white/10 bg-white/5 px-3 py-2'>
                            <div class='text-[10px] text-white/60'>{$label}</div>
                            <div class='text-sm font-extrabold {$cls}'>{$val}</div>
                        </div>
                    ";
                @endphp
                {!! $pill('غير مؤكد',  (int)($kpis['scheduled'] ?? 0), 'text-sky-200') !!}
                {!! $pill('معلّق',     (int)($kpis['pending'] ?? 0),   'text-amber-200') !!}
                {!! $pill('مؤكد',      (int)($kpis['confirmed'] ?? 0), 'text-emerald-200') !!}
                {!! $pill('غياب بعذر', (int)($kpis['missed_excuse'] ?? 0), 'text-yellow-200') !!}
                {!! $pill('غياب بدون', (int)($kpis['missed_noexcuse'] ?? 0), 'text-rose-200') !!}
                {!! $pill('ساعات مؤكدة', number_format((float)($kpis['confirmed_hours'] ?? 0), 2), 'text-cyan-200') !!}
                {!! $pill('نقاط', (int)($kpis['points_sum'] ?? 0), 'text-fuchsia-200') !!}
                {!! $pill('إجمالي', (int)($kpis['total'] ?? 0), 'text-white') !!}
            </div>

            {{-- Filters --}}
            <form method="GET" class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-2">
                <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="" @selected($status==='')>كل الحالات</option>
                    <option value="pending_proof"  @selected($status==='pending_proof')>معلق: إثبات</option>
                    <option value="pending_excuse" @selected($status==='pending_excuse')>معلق: عذر</option>
                    <option value="scheduled"      @selected($status==='scheduled')>غير مؤكد</option>
                    <option value="confirmed"      @selected($status==='confirmed')>مؤكد</option>
                    <option value="missed_excuse"  @selected($status==='missed_excuse')>لم يفتح بعذر</option>
                    <option value="missed_no_excuse" @selected($status==='missed_no_excuse')>لم يفتح بدون عذر</option>
                    <option value="proof_rejected" @selected($status==='proof_rejected')>الإثبات مرفوض</option>
                    <option value="excuse_rejected" @selected($status==='excuse_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">

                <div class="flex gap-2">
                    <input name="q" value="{{ $qText }}" placeholder="بحث بعنوان/وصف/سلوت.."
                           class="flex-1 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-cyan-500 hover:bg-cyan-600 text-white text-sm font-bold">
                        تطبيق
                    </button>
                </div>
            </form>
        </div>

        {{-- LIST --}}
        @if($lives->count())
            <div class="space-y-4">
                @foreach($lives as $live)
                    @php
                        $statusKey  = (string)($live->status ?? '');
                        $statusTxt  = $live->status_text ?? 'غير محدد';

                        $badgeCls = match($statusKey) {
                            'confirmed' => 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200',
                            'pending_proof','pending_excuse' => 'bg-amber-500/15 border-amber-400/25 text-amber-200',
                            'scheduled' => 'bg-sky-500/15 border-sky-400/25 text-sky-200',
                            'missed_excuse' => 'bg-yellow-500/15 border-yellow-400/25 text-yellow-200',
                            'missed_no_excuse','proof_rejected','excuse_rejected' => 'bg-rose-500/15 border-rose-400/25 text-rose-200',
                            default => 'bg-white/10 border-white/15 text-white/75',
                        };

                        $icon = match($statusKey) {
                            'confirmed' => 'fa-circle-check',
                            'pending_proof','pending_excuse' => 'fa-hourglass-half',
                            'scheduled' => 'fa-calendar',
                            'missed_excuse' => 'fa-triangle-exclamation',
                            'missed_no_excuse','proof_rejected','excuse_rejected' => 'fa-circle-xmark',
                            default => 'fa-circle-info',
                        };

                        $date = $live->scheduled_date_ymd ?? optional($live->scheduled_date)->format('Y-m-d');
                        $time = $live->scheduled_time_hm ?? '—';
                        $dur  = $live->formatted_duration ?? 'غير محدد';
                        $pts  = (int)($live->points_earned ?? 0);

                        $excuse = trim((string)($live->excuse_reason ?? ''));
                        $hasExcuse = $excuse !== '';
                    @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">
                                    <div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border {{ $badgeCls }} text-[11px] font-bold">
                                        <i class="fa-solid {{ $icon }}"></i>
                                        <span>{{ $statusTxt }}</span>
                                    </div>

                                    <div class="text-[12px] sm:text-sm text-white/85">
                                        <span class="text-white/60">التاريخ:</span>
                                        <span class="font-extrabold">{{ $date }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">الوقت:</span>
                                        <span class="font-extrabold">{{ $time }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">المدة:</span>
                                        <span class="font-extrabold">{{ $dur }}</span>
                                        <span class="mx-2 text-white/30">•</span>
                                        <span class="text-white/60">النقاط:</span>
                                        <span class="font-extrabold {{ $pts>0?'text-emerald-200':($pts<0?'text-rose-200':'text-white') }}">
                                            {{ $pts>0?'+':'' }}{{ $pts }}
                                        </span>
                                    </div>

                                    @if(!empty($live->slot_label))
                                        <div class="text-[12px] sm:text-sm text-cyan-200/90 font-semibold">
                                            السلوت: {{ $live->slot_label }}
                                        </div>
                                    @endif
                                </div>

                                <div class="text-right text-[11px] text-white/60">
                                    <div>رقم</div>
                                    <div class="text-white font-extrabold">#{{ $live->id }}</div>
                                </div>
                            </div>

                            {{-- Excuse --}}
                            @if($hasExcuse)
                                <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-3">
                                    <div class="text-xs font-extrabold text-white/90 mb-1 inline-flex items-center gap-2">
                                        <i class="fa-solid fa-file-signature text-yellow-300"></i>
                                        العذر
                                    </div>
                                    <div class="text-[12px] text-white/75 leading-relaxed">{!! nl2br(e($excuse)) !!}</div>
                                </div>
                            @endif

                            {{-- Proof (قريبًا) --}}
                            <div class="mt-3 rounded-2xl border border-white/10 bg-white/5 p-3">
                                <div class="flex items-center justify-between gap-2 mb-2">
                                    <div class="text-xs font-extrabold text-white/90 inline-flex items-center gap-2">
                                        <i class="fa-solid fa-image text-cyan-300"></i>
                                        إثبات اللايف
                                    </div>
                                    <span class="text-[10px] px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/70">
                                        قريبًا
                                    </span>
                                </div>

                                <div class="rounded-xl border border-white/10 bg-black/10 p-6 text-center text-white/60 text-sm">
                                    سيتم تفعيل عرض صورة الإثبات هنا لاحقاً…
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-2">
                {{ $lives->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