@extends('layouts.app')

@section('content')
<style>
    /* Force rounded corners for all dashboard cards and containers */
    .premium-card {
        border-radius: 32px !important;
        overflow: hidden !important;
    }
    .premium-alert {
        border-radius: 16px !important;
    }
</style>

<div class="px-6 py-8 space-y-10 bg-[#0a0a0a] min-h-screen">
    
    <!-- HEADER: Page Title -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-white/5 pb-8" style="margin-top: 15px;">
        <div>
            <h1 class="text-3xl font-black text-white tracking-tight uppercase">{{ app()->getLocale() == 'ar' ? 'لوحة تحكم المحاسب' : 'Accountant Dashboard' }}</h1>
            <p class="text-sm text-gray-500 mt-2 font-medium">{{ app()->getLocale() == 'ar' ? 'نظرة شاملة على الأداء المالي والرقابة اليومية' : 'Comprehensive view of financial performance & daily oversight' }}</p>
        </div>
        <div class="flex items-center gap-4 bg-white/5 p-2 rounded-2xl border border-white/10" style="border-radius: 16px !important;">
            <div class="px-4 py-2 bg-[#d4af37] rounded-xl text-black font-black text-xs uppercase tracking-tighter" style="border-radius: 12px !important;">
                {{ now()->translatedFormat('d M Y') }}
            </div>
            <div class="h-6 w-px bg-white/10"></div>
            <div class="px-4">
                <select onchange="window.location.href='?branch_id=' + this.value" 
                        class="bg-transparent border-none text-gray-400 font-bold text-xs uppercase tracking-widest focus:ring-0 cursor-pointer p-0 appearance-none outline-none">
                    <option value="all" {{ ($selectedBranchId == 'all' || !$selectedBranchId) ? 'selected' : '' }} class="bg-[#111] text-white">
                        {{ app()->getLocale() == 'ar' ? 'جميع الفروع المتاحة' : 'All Assigned Branches' }}
                    </option>
                    @foreach($assignedBranches as $branch)
                        <option value="{{ $branch->id }}" {{ $selectedBranchId == $branch->id ? 'selected' : '' }} class="bg-[#111] text-white">
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <!-- 1. ALERT CENTER (Conditional) -->
    @php
        $has_alerts = $alerts['unconfirmed_vouchers'] > 0 || $alerts['late_payments'] > 0 || 
                      $alerts['discrepancy'] || $alerts['profit_drop'] || $alerts['missing_depreciation'];
    @endphp

    @if($has_alerts)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        @if($alerts['unconfirmed_vouchers'] > 0)
            <div class="bg-amber-500/5 border border-amber-500/20 p-4 flex items-center gap-4 hover:bg-amber-500/10 transition-all premium-alert">
                <span class="p-3 bg-amber-500/20 rounded-xl text-xl" style="border-radius: 12px !important;">⚠️</span>
                <div>
                    <div class="text-[10px] font-black text-amber-500/60 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'سندات معلقة' : 'Pending Vouchers' }}</div>
                    <div class="text-lg font-black text-amber-500">{{ $alerts['unconfirmed_vouchers'] }}</div>
                </div>
            </div>
        @endif

        @if($alerts['late_payments'] > 0)
            <div class="bg-red-500/5 border border-red-500/20 p-4 flex items-center gap-4 hover:bg-red-500/10 transition-all premium-alert">
                <span class="p-3 bg-red-500/20 rounded-xl text-xl" style="border-radius: 12px !important;">⏳</span>
                <div>
                    <div class="text-[10px] font-black text-red-500/60 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'دفعات متأخرة' : 'Late Payments' }}</div>
                    <div class="text-lg font-black text-red-500">{{ $alerts['late_payments'] }}</div>
                </div>
            </div>
        @endif

        @if($alerts['discrepancy'])
            <div class="bg-orange-500/5 border border-orange-500/20 p-4 flex items-center gap-4 hover:bg-orange-500/10 transition-all premium-alert">
                <span class="p-3 bg-orange-500/20 rounded-xl text-xl" style="border-radius: 12px !important;">⚖️</span>
                <div>
                    <div class="text-[10px] font-black text-orange-500/60 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'فرق مالي' : 'Audit Gap' }}</div>
                    <div class="text-lg font-black text-orange-500">{{ number_format($vouchers['discrepancy'], 0) }}</div>
                </div>
            </div>
        @endif

        @if($alerts['profit_drop'])
            <div class="bg-red-600/5 border border-red-600/20 p-4 flex items-center gap-4 hover:bg-red-600/10 transition-all premium-alert">
                <span class="p-3 bg-red-600/20 rounded-xl text-xl" style="border-radius: 12px !important;">📉</span>
                <div>
                    <div class="text-[10px] font-black text-red-600/60 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'هبوط أرباح' : 'Profit Drop' }}</div>
                    <div class="text-lg font-black text-red-600"> > 20% </div>
                </div>
            </div>
        @endif

        @if($alerts['missing_depreciation'])
            <div class="bg-purple-500/5 border border-purple-500/20 p-4 flex items-center gap-4 hover:bg-purple-500/10 transition-all premium-alert">
                <span class="p-3 bg-purple-500/20 rounded-xl text-xl" style="border-radius: 12px !important;">🚗</span>
                <div>
                    <div class="text-[10px] font-black text-purple-500/60 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'إهلاك ناقص' : 'Depr. Missing' }}</div>
                    <div class="text-lg font-black text-purple-500">GAP</div>
                </div>
            </div>
        @endif
    </div>
    @endif

    <!-- 2. DAILY PERFORMANCE CARDS (CORE KPIs) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Daily Receipts -->
        <div class="relative group bg-[#111] p-8 border border-white/5 hover:border-[#d4af37]/30 transition-all duration-500 premium-card">
            <div class="flex flex-col h-full justify-between">
                <div class="flex items-center justify-between mb-8">
                    <div class="flex flex-col">
                        <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'مقبوضات اليوم' : 'Daily Receipts' }}</span>
                        <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'النقد الداخل' : 'Inflow' }}</h4>
                    </div>
                    <div class="w-12 h-12 flex items-center justify-center bg-[#d4af37]/10 rounded-2xl text-[#d4af37] border border-[#d4af37]/20">
                        <i class="fa-solid fa-receipt text-xl"></i>
                    </div>
                </div>
                <div>
                    <div class="flex items-baseline gap-2 mb-2">
                        <span class="text-4xl font-black text-white tracking-tighter">{{ number_format($daily['receipts'], 0) }}</span>
                        <span class="text-xs font-bold text-[#d4af37] uppercase">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-[9px] font-bold text-white/20 uppercase tracking-widest border-t border-white/5 pt-4">
                        <span class="w-1.5 h-1.5 rounded-full bg-[#d4af37]"></span>
                        <span>{{ $daily['receipt_count'] }} {{ app()->getLocale() == 'ar' ? 'سندات نشطة' : 'Active Vouchers' }}</span>
                    </div>
                </div>
            </div>
            <!-- Background Decoration -->
            <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-[#d4af37]/5 rounded-full blur-2xl group-hover:bg-[#d4af37]/10 transition-all"></div>
        </div>

        <!-- Daily Expenses -->
        <div class="relative group bg-[#111] p-8 border border-white/5 hover:border-red-500/30 transition-all duration-500 premium-card">
            <div class="flex flex-col h-full justify-between">
                <div class="flex items-center justify-between mb-8">
                    <div class="flex flex-col">
                        <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'مصروفات اليوم' : 'Daily Expenses' }}</span>
                        <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'النقد الخارج' : 'Outflow' }}</h4>
                    </div>
                    <div class="w-12 h-12 flex items-center justify-center bg-red-500/10 rounded-2xl text-red-500 border border-red-500/20">
                        <i class="fa-solid fa-money-bill-transfer text-xl"></i>
                    </div>
                </div>
                <div>
                    <div class="flex items-baseline gap-2 mb-2">
                        <span class="text-4xl font-black text-white tracking-tighter">{{ number_format($daily['expenses'], 0) }}</span>
                        <span class="text-xs font-bold text-red-500 uppercase">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-[9px] font-bold text-white/20 uppercase tracking-widest border-t border-white/5 pt-4">
                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
                        <span>{{ $daily['expense_count'] }} {{ app()->getLocale() == 'ar' ? 'سندات صرف' : 'Expenses' }}</span>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-red-500/5 rounded-full blur-2xl group-hover:bg-red-500/10 transition-all"></div>
        </div>

        <!-- Daily Net Movement -->
        <div class="relative group bg-[#111] p-8 border border-white/5 hover:border-blue-400/30 transition-all duration-500 premium-card">
            <div class="flex flex-col h-full justify-between">
                <div class="flex items-center justify-between mb-8">
                    <div class="flex flex-col">
                        <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'صافي حركة اليوم' : 'Net Movement' }}</span>
                        <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'الرصيد التشغيلي' : 'Ops Balance' }}</h4>
                    </div>
                    <div class="w-12 h-12 flex items-center justify-center bg-blue-400/10 rounded-2xl text-blue-400 border border-blue-400/20">
                        <i class="fa-solid fa-chart-line text-xl"></i>
                    </div>
                </div>
                <div>
                    <div class="flex items-baseline gap-2 mb-2">
                        <span class="text-4xl font-black {{ $daily['net'] >= 0 ? 'text-green-400' : 'text-red-400' }} tracking-tighter">{{ number_format($daily['net'], 0) }}</span>
                        <span class="text-xs font-bold text-gray-600 uppercase">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-[9px] font-bold text-white/20 uppercase tracking-widest border-t border-white/5 pt-4">
                        <span class="w-1.5 h-1.5 rounded-full {{ $daily['net'] >= 0 ? 'bg-green-400' : 'bg-red-400' }}"></span>
                        <span>{{ app()->getLocale() == 'ar' ? 'تحديث لحظي' : 'Real-time update' }}</span>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-blue-400/5 rounded-full blur-2xl group-hover:bg-blue-400/10 transition-all"></div>
        </div>

        <!-- Active Contracts -->
        <div class="relative group bg-[#111] p-8 border border-white/5 hover:border-emerald-400/30 transition-all duration-500 premium-card">
            <div class="flex flex-col h-full justify-between">
                <div class="flex items-center justify-between mb-8">
                    <div class="flex flex-col">
                        <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'عقود نشطة حالياً' : 'Active Contracts' }}</span>
                        <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'إجمالي التأجير' : 'Total Rental' }}</h4>
                    </div>
                    <div class="w-12 h-12 flex items-center justify-center bg-emerald-400/10 rounded-2xl text-emerald-400 border border-emerald-400/20">
                        <i class="fa-solid fa-key text-xl"></i>
                    </div>
                </div>
                <div>
                    <div class="flex items-baseline gap-2 mb-2">
                        <span class="text-4xl font-black text-white tracking-tighter">{{ $contracts['active'] }}</span>
                        <span class="text-xs font-bold text-emerald-400 uppercase">{{ app()->getLocale() == 'ar' ? 'عقد' : 'Contract' }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-[9px] font-bold text-red-500/60 uppercase tracking-widest border-t border-white/5 pt-4">
                        <span class="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span>
                        <span>{{ $contracts['overdue_unpaid'] }} {{ app()->getLocale() == 'ar' ? 'متأخرة السداد' : 'Overdue' }}</span>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-emerald-400/5 rounded-full blur-2xl group-hover:bg-emerald-400/10 transition-all"></div>
        </div>
    </div>

    <!-- 3. MAIN ANALYTICS GRID: MONTHLY & DISTRIBUTION -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <!-- Monthly Summary Breakdown (8 columns) -->
        <div class="lg:col-span-8 bg-[#111] p-10 border border-white/5 shadow-2xl relative premium-card">
            <div class="flex items-center justify-between mb-10">
                <h3 class="text-sm font-black text-white uppercase tracking-[0.3em] border-l-4 border-[#d4af37] pl-4">{{ app()->getLocale() == 'ar' ? 'تحليل الأداء الشهري' : 'Monthly Analysis' }}</h3>
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                    <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'محدث للآن' : 'Real-time Data' }}</span>
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <!-- Card: Revenue -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-white/10 transition-all group" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'إيرادات الشهر' : 'Revenue' }}</div>
                    <div class="text-xl font-black text-white mb-2">{{ number_format($monthly_revenue, 0) }}</div>
                    <div class="flex items-center gap-1 text-[10px] font-bold {{ $revenue_change >= 0 ? 'text-green-400' : 'text-red-400' }}">
                        <span>{{ $revenue_change >= 0 ? '↑' : '↓' }} {{ abs(round($revenue_change, 1)) }}%</span>
                        <span class="text-white/20 ml-1">Vs Last Month</span>
                    </div>
                </div>

                <!-- Card: Maintenance -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-white/10 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'مصاريف الصيانة' : 'Maintenance' }}</div>
                    <div class="text-xl font-black text-white">{{ number_format($monthly_maintenance, 0) }}</div>
                    <div class="w-full bg-white/5 h-1 rounded-full mt-4 overflow-hidden">
                        <div class="bg-orange-500 h-full" style="width: 45%"></div>
                    </div>
                </div>

                <!-- Card: Insurance -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-white/10 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'مصاريف التأمين' : 'Insurance' }}</div>
                    <div class="text-xl font-black text-white">{{ number_format($monthly_insurance, 0) }}</div>
                    <div class="w-full bg-white/5 h-1 rounded-full mt-4 overflow-hidden">
                        <div class="bg-blue-500 h-full" style="width: 30%"></div>
                    </div>
                </div>

                <!-- Card: Salaries -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-white/10 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'الرواتب والأجور' : 'Salaries' }}</div>
                    <div class="text-xl font-black text-white">{{ number_format($monthly_salaries, 0) }}</div>
                    <div class="w-full bg-white/5 h-1 rounded-full mt-4 overflow-hidden">
                        <div class="bg-purple-500 h-full" style="width: 60%"></div>
                    </div>
                </div>

                <!-- Card: Depreciation -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-white/10 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'إهلاك الأسطول' : 'Depreciation' }}</div>
                    <div class="text-xl font-black text-white">{{ number_format($monthly_depreciation, 0) }}</div>
                    <div class="text-[9px] text-gray-600 font-bold mt-2 uppercase tracking-tighter">{{ $depreciation['cars_count'] }} Vehicles Covered</div>
                </div>

                <!-- Card: Operating Profit -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-green-500/20 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-green-500/70 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'الربح التشغيلي' : 'Operating Profit' }}</div>
                    <div class="text-xl font-black text-green-400">{{ number_format($operating_profit, 0) }}</div>
                    <div class="text-[8px] text-gray-600 font-bold mt-2 uppercase tracking-tighter">Excluding Depreciation</div>
                </div>

                <!-- Card: Net Profit -->
                <div class="bg-gradient-to-br from-[#d4af37]/10 to-transparent p-6 border border-[#d4af37]/20 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-[#d4af37] uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'صافي الربح النهائي' : 'Net Profit' }}</div>
                    <div class="text-xl font-black text-white">{{ number_format($net_profit, 0) }}</div>
                    <div class="text-[8px] text-[#d4af37]/50 font-black mt-2 uppercase tracking-[0.2em]">Post Depreciation</div>
                </div>

                <!-- Card: Expenses -->
                <div class="bg-white/5 p-6 border border-white/5 hover:border-red-500/20 transition-all" style="border-radius: 24px !important;">
                    <div class="text-[9px] font-black text-red-500/70 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'إجمالي المصاريف' : 'Total Expenses' }}</div>
                    <div class="text-xl font-black text-red-400">{{ number_format($monthly_expenses, 0) }}</div>
                    <div class="text-[8px] text-gray-600 font-bold mt-2 uppercase tracking-tighter">Current Month Total</div>
                </div>
            </div>
        </div>

        <!-- Expense Distribution Chart (4 columns) -->
        <div class="lg:col-span-4 bg-[#111] p-10 border border-white/5 shadow-2xl flex flex-col items-center premium-card">
            <h3 class="text-sm font-black text-white uppercase tracking-[0.3em] self-start border-l-4 border-blue-500 pl-4 mb-10">{{ app()->getLocale() == 'ar' ? 'توزيع المصروفات' : 'Expense Distribution' }}</h3>
            <div class="h-64 w-full relative">
                <canvas id="expenseChart"></canvas>
            </div>
            <div class="mt-8 grid grid-cols-2 gap-x-8 gap-y-2 w-full">
                @foreach($expense_distribution->take(4) as $item)
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full" style="background-color: {{ ['#d4af37', '#ff6b9d', '#00c8ff', '#ffa500'][($loop->index % 4)] }}"></span>
                    <span class="text-[10px] font-bold text-gray-500 truncate">{{ $item['name'] }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- 4. OPERATIONAL MONITORING: 4 COLUMNS GRID -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10" style="margin-bottom: 15 px;">
        
        <!-- Contracts Monitoring -->
        <div class="bg-[#111] p-8 border border-white/5 shadow-xl group hover:border-[#d4af37]/20 transition-all premium-card relative overflow-hidden h-full">
            <div class="flex items-center justify-between mb-8">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'متابعة العقود' : 'Contracts' }}</span>
                    <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'أداء التأجير' : 'Rental Performance' }}</h4>
                </div>
                <div class="w-10 h-10 flex items-center justify-center bg-amber-500/10 rounded-xl text-amber-500 border border-amber-500/20">
                    <i class="fa-solid fa-folder-open text-lg"></i>
                </div>
            </div>
            
            <div class="space-y-6">
                <div class="flex justify-between items-end border-b border-white/5 pb-4">
                    <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'متوسط قيمة العقد' : 'Avg Contract' }}</span>
                    <div class="flex items-baseline gap-1">
                        <span class="text-xl font-black text-white">{{ number_format($contracts['avg_value'], 0) }}</span>
                        <span class="text-[9px] font-bold text-gray-600">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                </div>
                <div class="flex justify-between items-end">
                    <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'إيراد التأجير' : 'Rental Revenue' }}</span>
                    <div class="flex items-baseline gap-1">
                        <span class="text-xl font-black text-white">{{ number_format($monthly_revenue, 0) }}</span>
                        <span class="text-[9px] font-bold text-gray-600">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-4 -right-4 w-20 h-20 bg-amber-500/5 rounded-full blur-2xl transition-all group-hover:bg-amber-500/10"></div>
        </div>

        <!-- Customer Monitoring -->
        <div class="bg-[#111] p-8 border border-white/5 shadow-xl group hover:border-purple-500/20 transition-all premium-card relative overflow-hidden h-full">
            <div class="flex items-center justify-between mb-8">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'متابعة العملاء' : 'Customers' }}</span>
                    <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'العملاء النشطون' : 'Active Base' }}</h4>
                </div>
                <div class="w-10 h-10 flex items-center justify-center bg-purple-500/10 rounded-xl text-purple-500 border border-purple-500/20">
                    <i class="fa-solid fa-users text-lg"></i>
                </div>
            </div>

            <div class="space-y-6">
                <div class="flex justify-between items-center bg-white/[0.03] px-5 py-4 rounded-[20px] border border-white/5">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'إجمالي النشطين' : 'Total Active' }}</span>
                    <span class="text-lg font-black text-white leading-none">{{ $customers['active_customers'] }}</span>
                </div>
                <div class="px-1">
                    <div class="text-[9px] font-black text-purple-400 uppercase tracking-[0.2em] mb-4">{{ app()->getLocale() == 'ar' ? 'أعلى العملاء إيراداً' : 'Top Performers' }}</div>
                    @forelse($customers['top_customers'] as $customer)
                    <div class="flex items-center justify-between mb-3 group/item">
                        <span class="text-[10px] font-medium text-gray-400 group-hover/item:text-white transition-colors truncate w-32">{{ $customer->name }}</span>
                        <span class="text-[10px] font-black text-white tabular-nums">{{ number_format($customer->rentals_sum_total_amount, 0) }}</span>
                    </div>
                    @empty
                    <div class="text-[9px] text-gray-700 italic">No data available</div>
                    @endforelse
                </div>
            </div>
            <div class="absolute -bottom-4 -right-4 w-20 h-20 bg-purple-500/5 rounded-full blur-2xl transition-all group-hover:bg-purple-500/10"></div>
        </div>

        <!-- Invoices & Vouchers -->
        <div class="bg-[#111] p-8 border border-white/5 shadow-xl group hover:border-blue-500/20 transition-all premium-card relative overflow-hidden h-full">
            <div class="flex items-center justify-between mb-8">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'الفواتير والسندات' : 'Transactions' }}</span>
                    <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'حالة السداد' : 'Audit & Posting' }}</h4>
                </div>
                <div class="w-10 h-10 flex items-center justify-center bg-blue-500/10 rounded-xl text-blue-500 border border-blue-500/20">
                    <i class="fa-solid fa-file-invoice text-lg"></i>
                </div>
            </div>

            <div class="space-y-3">
                <div class="flex justify-between items-center px-5 py-3 bg-white/[0.03] rounded-[18px] border border-white/5 hover:border-red-500/20 transition-all">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'فواتير غير مسددة' : 'Unpaid' }}</span>
                    <span class="px-3 py-1 bg-red-500/20 text-red-500 rounded-lg text-[10px] font-black">{{ $vouchers['unpaid_invoices'] }}</span>
                </div>
                <div class="flex justify-between items-center px-5 py-3 bg-white/[0.03] rounded-[18px] border border-white/5 hover:border-amber-500/20 transition-all">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'سندات للمراجعة' : 'To Review' }}</span>
                    <span class="px-3 py-1 bg-amber-500/20 text-amber-500 rounded-lg text-[10px] font-black">{{ $vouchers['review_needed'] }}</span>
                </div>
                <div class="flex justify-between items-center px-5 py-3 bg-white/[0.03] rounded-[18px] border border-white/5 hover:border-blue-500/20 transition-all">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'سندات غير مرحلة' : 'Unposted' }}</span>
                    <span class="px-3 py-1 bg-blue-500/20 text-blue-500 rounded-lg text-[10px] font-black">{{ $vouchers['unconfirmed_vouchers'] }}</span>
                </div>
            </div>
            <div class="absolute -bottom-4 -right-4 w-20 h-20 bg-blue-500/5 rounded-full blur-2xl transition-all group-hover:bg-blue-500/10"></div>
        </div>

        <!-- Depreciation Center -->
        <div class="bg-[#111] p-8 border border-white/5 shadow-xl group hover:border-rose-500/20 transition-all premium-card relative overflow-hidden h-full">
            <div class="flex items-center justify-between mb-8">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-white/30 uppercase tracking-[0.2em] mb-1">{{ app()->getLocale() == 'ar' ? 'مركز الإهلاك' : 'Depreciation' }}</span>
                    <h4 class="text-xs font-bold text-white/80">{{ app()->getLocale() == 'ar' ? 'إهلاك الأصول' : 'Asset Decay' }}</h4>
                </div>
                <div class="w-10 h-10 flex items-center justify-center bg-rose-500/10 rounded-xl text-rose-500 border border-rose-500/20">
                    <i class="fa-solid fa-chart-area text-lg"></i>
                </div>
            </div>

            <div class="space-y-6">
                <div class="flex flex-col px-1">
                    <span class="text-[10px] font-bold text-gray-600 uppercase tracking-widest mb-1">{{ app()->getLocale() == 'ar' ? 'الإهلاك المتراكم' : 'Accumulated' }}</span>
                    <div class="flex items-baseline gap-1">
                        <span class="text-2xl font-black text-white">{{ number_format($depreciation['total_accumulated'], 0) }}</span>
                        <span class="text-[9px] font-bold text-rose-500">{{ $defaultCurrency->symbol_ar }}</span>
                    </div>
                </div>
                <div class="pt-6 border-t border-white/5 px-1">
                    <div class="flex justify-between items-center mb-3">
                        <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'تأثير الإهلاك' : 'Profit Impact' }}</span>
                        <span class="text-xs font-black text-rose-500">{{ round($depreciation['impact_on_profit'], 1) }}%</span>
                    </div>
                    <div class="w-full bg-white/5 h-1.5 rounded-full overflow-hidden">
                        <div class="bg-gradient-to-r from-rose-600 to-rose-400 h-full" style="width: {{ min(100, $depreciation['impact_on_profit']) }}%"></div>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-4 -right-4 w-20 h-20 bg-rose-500/5 rounded-full blur-2xl transition-all group-hover:bg-rose-500/10"></div>
        </div>
    </div>

    <!-- 5. FINANCIAL POSITION & LIQUIDITY (WIDE SECTION) -->
    <div class="bg-[#111] p-10 border border-white/5 shadow-2xl mt-[20px] mb-12 premium-card">
        <div class="flex items-center gap-4 mb-10" >
            <div class="w-1 h-6 bg-blue-500 rounded-full" ></div>
            <h2 class="text-sm font-black text-white uppercase tracking-[0.3em]">{{ app()->getLocale() == 'ar' ? 'السيولة والمركز المالي' : 'Financial Position & Liquidity' }}</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Cash -->
            <div class="bg-white/[0.02] p-6 rounded-3xl border border-white/5 flex flex-col items-center text-center">
                <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'الرصيد النقدي' : 'Cash' }}</span>
                <div class="flex items-baseline gap-1">
                    <span class="text-3xl font-black text-white">{{ number_format($liquidity['cash'], 0) }}</span>
                    <span class="text-[10px] font-bold text-green-500">{{ $defaultCurrency->symbol_ar }}</span>
                </div>
            </div>

            <!-- Bank -->
            <div class="bg-white/[0.02] p-6 rounded-3xl border border-white/5 flex flex-col items-center text-center">
                <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'أرصدة البنوك' : 'Banks' }}</span>
                <div class="flex items-baseline gap-1">
                    <span class="text-3xl font-black text-white">{{ number_format($liquidity['bank'], 0) }}</span>
                    <span class="text-[10px] font-bold text-blue-500">{{ $defaultCurrency->symbol_ar }}</span>
                </div>
            </div>

            <!-- Receivables -->
            <div class="bg-white/[0.02] p-6 rounded-3xl border border-white/5 flex flex-col items-center text-center">
                <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'الذمم المدينة' : 'Receivables' }}</span>
                <div class="flex items-baseline gap-1">
                    <span class="text-3xl font-black text-white">{{ number_format($liquidity['receivables'], 0) }}</span>
                    <span class="text-[10px] font-bold text-amber-500">{{ $defaultCurrency->symbol_ar }}</span>
                </div>
            </div>

            <!-- Liabilities -->
            <div class="bg-white/[0.02] p-6 rounded-3xl border border-white/5 flex flex-col items-center text-center">
                <span class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">{{ app()->getLocale() == 'ar' ? 'التزامات (30 يوم)' : 'Liabilities' }}</span>
                <div class="flex items-baseline gap-1">
                    <span class="text-3xl font-black text-red-500">{{ number_format($liquidity['liabilities_30d'], 0) }}</span>
                    <span class="text-[10px] font-bold text-red-900/50">{{ $defaultCurrency->symbol_ar }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            cutout: '80%'
        };

        let expenseData = {!! json_encode($expense_distribution) !!};
        
        // If no data, show a placeholder to prove the chart is working
        if (expenseData.length === 0) {
            expenseData = [{name: "{{ app()->getLocale() == 'ar' ? 'بانتظار بيانات المصروفات' : 'Awaiting Expense Data' }}", amount: 1}];
        }
        
        new Chart(document.getElementById('expenseChart'), {
            type: 'doughnut',
            data: {
                labels: expenseData.map(d => d.name),
                datasets: [{
                    data: expenseData.map(d => d.amount),
                    backgroundColor: expenseData[0].name.includes('Awaiting') || expenseData[0].name.includes('بانتظار') 
                        ? ['#333'] 
                        : ['#d4af37', '#ff6b9d', '#00c8ff', '#ffa500', '#00d084', '#9966ff'],
                    borderWidth: 0,
                    hoverOffset: 15,
                    borderColor: '#111'
                }]
            },
            options: chartOptions
        });
    });
</script>
@endpush
@endsection