{{-- resources/views/superadmin/daily-operations/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'غرفة العمليات اليومية')
@section('page-title', '🧭 غرفة العمليات اليومية — القيادة العليا')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50
            dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- HERO --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-16 w-56 h-56 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-10 w-64 h-64 rounded-full bg-sky-400/15 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-5 sm:py-6 lg:py-7 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="space-y-3">
                    <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 px-3 py-1 text-xs sm:text-[13px] font-medium">
                        <i class="fa-solid fa-compass text-xs"></i>
                        <span>غرفة العمليات اليومية — High Command</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 dark:text-slate-50">
                        لوحة متابعة <span class="text-emerald-600 dark:text-emerald-400">يوم القيادة</span> في جيش الوفاء الذهبي
                    </h1>

                    <p class="text-sm sm:text-[15px] text-slate-600 dark:text-slate-300 max-w-2xl">
                        من هنا تتابع الإدارة العليا نبض اليوم: إشعارات مهمة، قضايا حرجة، وحالة التفاعل العام
                        في الفريق لحظة بلحظة.
                    </p>

                    <p class="text-xs text-slate-500 dark:text-slate-400">
                        اليوم: {{ $today->isoFormat('dddd D MMMM YYYY') }} — الساعة الآن: {{ $now->format('H:i') }}
                    </p>
                </div>

                {{-- كروت إحصائيات سريعة --}}
                <div class="w-full lg:w-80">
                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-700 px-4 py-3">
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-1">أعضاء نشطين بالنظام</p>
                            <p class="text-xl font-extrabold text-slate-900 dark:text-slate-50">
                                {{ number_format($stats['total_members']) }}
                            </p>
                        </div>
                        <div class="rounded-2xl bg-sky-50 dark:bg-sky-900/40 border border-sky-200/70 dark:border-sky-700 px-4 py-3">
                            <p class="text-[11px] text-sky-700 dark:text-sky-200 mb-1">إشعارات اليوم</p>
                            <p class="text-xl font-extrabold text-sky-700 dark:text-sky-200">
                                {{ $stats['today_notifications'] }}
                            </p>
                        </div>
                        <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/40 border border-rose-200/70 dark:border-rose-700 px-4 py-3">
                            <p class="text-[11px] text-rose-700 dark:text-rose-200 mb-1">قضايا MemberCare اليوم</p>
                            <p class="text-xl font-extrabold text-rose-700 dark:text-rose-200">
                                {{ $stats['today_membercare_cases'] }}
                            </p>
                        </div>
                        <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/40 border border-amber-200/70 dark:border-amber-700 px-4 py-3">
                            <p class="text-[11px] text-amber-700 dark:text-amber-200 mb-1">إشعارات أمس</p>
                            <p class="text-xl font-extrabold text-amber-700 dark:text-amber-200">
                                {{ $stats['yesterday_notifications'] }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- شبكة رئيسية: قضايا + تايم لاين + ملخص اليوم --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- قضايا اليوم الحرجة (MemberCare) --}}
            <div class="lg:col-span-1 space-y-3">
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm">
                    <div class="px-4 sm:px-5 py-3 flex items-center justify-between border-b border-slate-100 dark:border-slate-800">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                            <i class="fa-solid fa-hands-holding-heart text-rose-500"></i>
                            <span>قضايا اليوم — MemberCare</span>
                        </h2>
                    </div>

                    @if($todayCases->isEmpty())
                        <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
                            لا توجد قضايا مسجّلة اليوم.
                        </div>
                    @else
                        <div class="px-4 sm:px-5 py-3 space-y-3 max-h-[380px] overflow-y-auto">
                            @foreach($todayCases as $case)
                                <div class="rounded-xl bg-slate-50 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-700 px-3 py-2.5">
                                    <div class="flex items-center justify-between gap-2">
                                        <div class="flex flex-col">
                                            <span class="text-xs font-semibold text-slate-900 dark:text-slate-50">
                                                القضية #{{ $case->id }}
                                            </span>
                                            @if(!empty($case->title ?? null))
                                                <span class="text-[11px] text-slate-600 dark:text-slate-300 line-clamp-1">
                                                    {{ $case->title }}
                                                </span>
                                            @endif
                                        </div>
                                        <span class="text-[10px] text-slate-500 dark:text-slate-400">
                                            {{ $case->created_at?->format('H:i') }}
                                        </span>
                                    </div>
                                    @if(!empty($case->status ?? null))
                                        <div class="mt-1.5">
                                            <span class="inline-flex items-center gap-1 rounded-full bg-rose-50/80 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300 text-[10px] px-2 py-0.5">
                                                <i class="fa-solid fa-circle-exclamation text-[9px]"></i>
                                                <span>الحالة: {{ $case->status }}</span>
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- تايم لاين اليوم (إشعارات + نقاط أساسية) --}}
            <div class="lg:col-span-2 space-y-3">
                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm">
                    <div class="px-4 sm:px-5 py-3 flex items-center justify-between border-b border-slate-100 dark:border-slate-800">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                            <i class="fa-solid fa-timeline text-sky-500"></i>
                            <span>تايم لاين اليوم — Events & Notifications</span>
                        </h2>
                    </div>

                    @if($todayNotifications->isEmpty())
                        <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
                            لا يوجد إشعارات مسجلة لهذا اليوم بعد.
                        </div>
                    @else
                        <div class="px-4 sm:px-5 py-4 space-y-3 max-h-[420px] overflow-y-auto">
                            @foreach($todayNotifications as $notif)
                                @php
                                    $type = $notif->type ?? 'info';
                                    $typeClasses = match($type) {
                                        'success' => 'border-emerald-200 bg-emerald-50/80 text-emerald-800 dark:border-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200',
                                        'warning' => 'border-amber-200 bg-amber-50/80 text-amber-800 dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
                                        'danger'  => 'border-rose-200 bg-rose-50/80 text-rose-800 dark:border-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
                                        default   => 'border-sky-200 bg-sky-50/80 text-sky-800 dark:border-sky-700 dark:bg-sky-900/40 dark:text-sky-200',
                                    };
                                    $iconClass = match($type) {
                                        'success' => 'fa-circle-check',
                                        'warning' => 'fa-triangle-exclamation',
                                        'danger'  => 'fa-circle-xmark',
                                        default   => 'fa-circle-info',
                                    };
                                @endphp

                                <div class="flex gap-3">
                                    <div class="mt-1">
                                        <div class="w-2 h-2 rounded-full bg-sky-400"></div>
                                    </div>
                                    <div class="flex-1 rounded-xl border px-3 py-2.5 text-xs sm:text-[13px] {{ $typeClasses }}">
                                        <div class="flex items-center justify-between gap-2 mb-1">
                                            <div class="flex items-center gap-1.5">
                                                <i class="fa-solid {{ $iconClass }} text-[11px]"></i>
                                                <span class="font-semibold">
                                                    إشعار #{{ $notif->id }}
                                                </span>
                                            </div>
                                            <span class="text-[10px] opacity-80">
                                                {{ $notif->created_at?->format('H:i') }}
                                            </span>
                                        </div>
                                        <p class="leading-relaxed">
                                            {{ $notif->message }}
                                        </p>
                                        @if($notif->action_url)
                                            <div class="mt-2">
                                                <a href="{{ $notif->action_url }}"
                                                   class="inline-flex items-center gap-1 text-[11px] underline-offset-2 hover:underline">
                                                    <span>فتح الوجهة المرتبطة</span>
                                                    <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- 🔔 قسم إشعارات اليوم (موحّد في آخر الصفحة) --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="px-4 sm:px-5 py-3 flex items-center justify-between border-b border-slate-100 dark:border-slate-800">
                <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                    <i class="fa-solid fa-bell-on text-amber-500"></i>
                    <span>ملخّص إشعارات اليوم — High Command View</span>
                </h2>
                <span class="text-[11px] text-slate-500 dark:text-slate-400">
                    المجموع: {{ $todayNotifications->count() }}
                </span>
            </div>

            @if($todayNotifications->isEmpty())
                <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
                    لا يوجد إشعارات لعرضها اليوم.
                </div>
            @else
                <div class="px-4 sm:px-5 py-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($todayNotifications as $notif)
                        @php
                            $type = $notif->type ?? 'info';
                            $badgeClasses = match($type) {
                                'success' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200',
                                'warning' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
                                'danger'  => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
                                default   => 'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-200',
                            };
                        @endphp

                        <div class="rounded-xl bg-slate-50/80 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-700 px-3 py-2.5 text-xs sm:text-[13px] flex flex-col gap-1.5">
                            <div class="flex items-center justify-between gap-2">
                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $badgeClasses }}">
                                    <i class="fa-solid fa-bell text-[9px]"></i>
                                    <span>{{ strtoupper($type) }}</span>
                                </span>
                                <span class="text-[10px] text-slate-500 dark:text-slate-400">
                                    {{ $notif->created_at?->format('H:i') }}
                                </span>
                            </div>
                            <p class="line-clamp-2 text-slate-800 dark:text-slate-100">
                                {{ $notif->message }}
                            </p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</div>
@endsection