@extends('layouts.app')
@push('page_css')
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            corePlugins: {
                preflight: false, // Prevent Bootstrap conflicts
            },
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            500: '#14b8a6',
                            600: '#0d9488',
                            900: '#134e4a',
                        }
                    }
                }
            }
        }
    </script>
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
@endpush
@section('content')
<div class="bg-slate-50 text-slate-800 antialiased min-h-screen font-sans" dir="rtl" style="text-align: right;">
    <main class="max-w-screen-2xl mx-auto p-6 lg:p-8 space-y-8">
        <!-- 1. Header Area -->
        <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl lg:text-3xl font-bold text-slate-900 tracking-tight">{{ __('نظرة عامة') }}</h1>
                <p class="text-sm text-slate-500 mt-1">{{ __('راقب أداء الوساطة وعملياتك اليومية.') }}</p>
            </div>
            <div class="flex items-center gap-3">
                <div class="relative">
                    <form method="GET" action="{{ route('home') }}" id="timeFilterForm" class="m-0">
                        <div class="flex items-center relative">
                            <i data-lucide="calendar" class="w-4 h-4 text-slate-500 absolute right-3 pointer-events-none"></i>
                            <select name="period" onchange="document.getElementById('timeFilterForm').submit()" class="appearance-none bg-white border border-slate-200 text-slate-700 py-2 pr-9 pl-8 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 cursor-pointer">
                                <option value="24hours" {{ request('period') == '24hours' ? 'selected' : '' }}>{{ __('آخر 24 ساعة') }}</option>
                                <option value="week" {{ request('period') == 'week' ? 'selected' : '' }}>{{ __('آخر أسبوع') }}</option>
                                <option value="30days" {{ request('period', '30days') == '30days' ? 'selected' : '' }}>{{ __('آخر شهر') }}</option>
                                <option value="all" {{ request('period') == 'all' ? 'selected' : '' }}>{{ __('الكل') }}</option>
                            </select>
                            <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 absolute left-3 pointer-events-none"></i>
                        </div>
                    </form>
                </div>
                <button class="flex items-center gap-2 bg-brand-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-500 transition-colors shadow-sm shadow-brand-500/30">
                    <i data-lucide="download" class="w-4 h-4"></i>
                    {{ __('تصدير التقرير') }}
                </button>
            </div>
        </header>
        <!-- 2. Row 1 - The KPI Ribbon -->
        <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <x-kpi-card 
                title="{{ __('إجمالي العمولات') }}" 
                value="{{ number_format($stats['credit'] ?? 0, 2) }} LYD" 
                trend="12%" 
            />
            <x-kpi-card 
                title="{{ __('عدد الحجوزات') }}" 
                value="{{ number_format($stats['total_bookings'] ?? 0) }}" 
                icon="calendar-check"
                iconBg="bg-blue-50"
                iconColor="text-blue-500"
            />
            <x-kpi-card 
                title="{{ __('الكروت المستعملة') }}" 
                value="{{ number_format($stats['redeemed_vouchers'] ?? 0) }}" 
                icon="credit-card"
                iconBg="bg-purple-50"
                iconColor="text-purple-500"
                subtext="<span class='text-purple-600 font-medium'>{{ number_format($stats['redeemed_vouchers_value'] ?? 0, 2) }} LYD</span> {{ __('إجمالي القيمة') }}"
            />
            <x-kpi-card 
                title="{{ __('مستحقات معلقة (شركات)') }}" 
                value="{{ number_format($stats['total_company_owed_pending'] ?? 0, 2) }} LYD" 
                icon="clock"
                iconBg="bg-amber-50"
                iconColor="text-amber-500"
                subtext="{{ __('بانتظار التحصيل من شركات التوزيع') }}"
            />
            <x-kpi-card 
                title="{{ __('أرباح شركات الكروت') }}" 
                value="{{ number_format($stats['total_company_profit'] ?? 0, 2) }} LYD" 
                icon="trending-up"
                iconBg="bg-emerald-50"
                iconColor="text-emerald-500"
            />
            <x-kpi-card 
                title="{{ __('المستحق للملاك') }}" 
                value="{{ number_format($stats['debt'] ?? 0, 2) }} LYD" 
                icon="wallet"
                iconBg="bg-rose-50"
                iconColor="text-rose-500"
                subtext="<span class='text-rose-600 font-medium'>{{ __('بانتظار التسوية') }}</span>"
            />
            <x-kpi-card 
                title="{{ __('إجمالي المبالغ المدفوعة') }}" 
                value="{{ number_format($stats['total_paid'] ?? 0, 2) }} LYD" 
                icon="check-circle"
                iconBg="bg-teal-50"
                iconColor="text-teal-500"
            />
            <x-kpi-card 
                title="{{ __('العقارات النشطة') }}" 
                value="{{ count($properties_stats ?? []) }}" 
                icon="home"
                iconBg="bg-indigo-50"
                iconColor="text-indigo-500"
                subtext="<span class='text-emerald-600 font-semibold'>85%</span> {{ __('نسبة الإشغال') }}"
            />
        </section>
        <!-- 4. Row 3 - Action & Insights -->
        <section class="grid grid-cols-1 lg:grid-cols-1 gap-6 pb-12">
            <!-- Left Panel: Booking Requests -->
            <div class="bg-white border border-slate-100 rounded-xl shadow-sm overflow-hidden flex flex-col">
                <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-white">
                    <div>
                        <h2 class="text-base font-bold text-slate-900">{{ __('طلبات الحجوزات') }}</h2>
                    </div>
                    <a href="{{ route('admin.booking_requests') }}" class="text-xs font-semibold text-brand-600 hover:text-brand-700">{{ __('عرض الكل') }}</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-right text-sm whitespace-nowrap">
                        <thead class="bg-slate-50/50 text-slate-500 text-xs font-semibold">
                            <tr>
                                <th class="px-6 py-3">{{ __('رقم الحجز / الحالة') }}</th>
                                <th class="px-6 py-3">{{ __('اسم العقار / الزبون') }}</th>
                                <th class="px-6 py-3">{{ __('القيمة / تاريخ الدخول') }}</th>
                                <th class="px-6 py-3 text-left">{{ __('إجراء') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-slate-700">
                            @forelse($pending_bookings ?? [] as $booking)
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="font-bold text-slate-900">#{{ $booking->id }}</span>
                                        <span class="text-xs {{ $booking->state_id == 6 ? 'text-amber-500' : 'text-blue-500' }} font-medium mt-0.5">
                                            {{ $booking->state_id == 6 ? __('انتظار الدفع') : __('انتظار موافقة الهوست') }}
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="font-medium text-slate-900">{{ $booking->detail->title ?? __('غير معروف') }}</span>
                                        <span class="text-xs text-slate-500 mt-0.5">{{ $booking->customer->name ?? __('غير معروف') }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-col">
                                        <span class="font-bold text-emerald-600">{{ number_format($booking->total_amount, 2) }} LYD</span>
                                        <span class="text-xs text-slate-500 mt-0.5">{{ \Carbon\Carbon::parse($booking->start_date)->format('Y-m-d') }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-left">
                                    <div class="flex justify-end gap-2">
                                        <a href="{{ route('tblBookingResorts.show', $booking->id) }}" class="p-1.5 text-blue-500 hover:bg-blue-50 rounded-md transition-colors" title="{{ __('عرض التفاصيل') }}">
                                            <i data-lucide="eye" class="w-4 h-4"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="px-6 py-8 text-center text-slate-500 text-sm">
                                    {{ __('لا توجد طلبات حجوزات معلقة في الوقت الحالي.') }}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Right Panel: Live Activity Feed -->
            <div class="hidden bg-white border border-slate-100 rounded-xl shadow-sm overflow-hidden flex flex-col h-[400px]">
                <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-white z-10">
                    <div>
                        <h2 class="text-base font-bold text-slate-900">{{ __('سجل النشاطات الحي') }}</h2>
                        <p class="text-xs text-slate-500 mt-0.5">{{ __('أحدث أحداث المنصة') }}</p>
                    </div>
                </div>
                <div class="p-6 overflow-y-auto custom-scrollbar flex-1">
                    <ul class="relative border-r border-slate-200 mr-3 space-y-6">
                        @php
                            // Dummy feed data for demonstration
                            $activities = [
                                ['title' => 'تم تأكيد حجز جديد', 'desc' => 'الزبون M. Ali قام بحجز Sunset Paradise Villa.', 'time' => 'الآن', 'icon' => 'check', 'color' => 'emerald'],
                                ['title' => 'تمت تسوية العمولة', 'desc' => 'تمت معالجة دفعة TLync بقيمة 450.00 LYD.', 'time' => 'قبل 25 دقيقة', 'icon' => 'dollar-sign', 'color' => 'blue'],
                                ['title' => 'تم تقديم عقار جديد', 'desc' => 'المالك Omar F. قام بتقديم منتجع جديد للمراجعة.', 'time' => 'قبل ساعتين', 'icon' => 'file-text', 'color' => 'amber'],
                                ['title' => 'تسجيل مستخدم جديد', 'desc' => 'تم التحقق من حساب زبون جديد عبر OTP.', 'time' => 'قبل 5 ساعات', 'icon' => 'user-plus', 'color' => 'slate'],
                            ];
                        @endphp
                        @forelse($activities as $activity)
                        <li class="pr-6 relative">
                            <div class="absolute w-6 h-6 bg-{{ $activity['color'] }}-100 rounded-full flex items-center justify-center border-4 border-white -right-[13px] top-0 shadow-sm">
                                <i data-lucide="{{ $activity['icon'] }}" class="w-3 h-3 text-{{ $activity['color'] }}-600"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-medium text-slate-900">{{ __($activity['title']) }}</span>
                                <span class="text-xs text-slate-500 mt-0.5">{{ __($activity['desc']) }}</span>
                                <span class="text-[10px] text-slate-400 mt-1.5 font-medium uppercase tracking-wider">{{ __($activity['time']) }}</span>
                            </div>
                        </li>
                        @empty
                        <li class="pr-6 relative text-sm text-slate-500">
                            {{ __('لا توجد نشاطات حديثة.') }}
                        </li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </section>
    </main>
</div>
@push('page_scripts')
    <script>
        lucide.createIcons();
    </script>
@endpush
@endsection