<div>
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('النظرة المالية العامة') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('ملخص الإيرادات والمصروفات والأرباح') }} — {{ $periodLabel }}</p>
        </div>
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto">
            <select wire:model.live="branch_id" class="w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="">{{ __('كل الفروع') }}</option>
                @foreach($branches as $branch)
                    <option value="{{ $branch->id }}">{{ $branch->name_ar }}</option>
                @endforeach
            </select>
            <select wire:model.live="period" class="w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="today">{{ __('اليوم') }}</option>
                <option value="this_week">{{ __('هذا الأسبوع') }}</option>
                <option value="this_month">{{ __('هذا الشهر') }}</option>
                <option value="last_month">{{ __('الشهر الماضي') }}</option>
                <option value="this_quarter">{{ __('هذا الربع') }}</option>
                <option value="this_year">{{ __('هذا العام') }}</option>
            </select>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="flex flex-wrap gap-2 mb-4">
        @can('expenses.create')
        <a href="{{ route('expenses.create') }}" wire:navigate
           class="inline-flex items-center gap-1.5 px-3 py-2 bg-red-50 border border-red-200 text-red-700 rounded-lg hover:bg-red-100 text-xs font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            {{ __('تسجيل مصروف') }}
        </a>
        <a href="{{ route('revenue.external.create') }}" wire:navigate
           class="inline-flex items-center gap-1.5 px-3 py-2 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-lg hover:bg-emerald-100 text-xs font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            {{ __('تسجيل إيراد خارجي') }}
        </a>
        @endcan
        @can('invoices.list')
        <a href="{{ route('invoices.list') }}" wire:navigate
           class="inline-flex items-center gap-1.5 px-3 py-2 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg hover:bg-blue-100 text-xs font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            {{ __('الفواتير') }}
        </a>
        @endcan
        @can('pos.list')
        <a href="{{ route('pos.history') }}" wire:navigate
           class="inline-flex items-center gap-1.5 px-3 py-2 bg-purple-50 border border-purple-200 text-purple-700 rounded-lg hover:bg-purple-100 text-xs font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            {{ __('سجل المبيعات (الإيصالات)') }}
        </a>
        @endcan
        @can('expenses.create')
        <a href="{{ route('expenses.list') }}" wire:navigate
           class="inline-flex items-center gap-1.5 px-3 py-2 bg-amber-50 border border-amber-200 text-amber-700 rounded-lg hover:bg-amber-100 text-xs font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
            </svg>
            {{ __('سجل المصروفات') }}
        </a>
        @endcan
    </div>

    {{-- Loading overlay --}}
    <div wire:loading.class="opacity-50 pointer-events-none" class="transition-opacity">

    {{-- Row 1: Summary Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Total Revenue --}}
        <div class="bg-white rounded-xl shadow-sm border border-emerald-200 p-3 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 bg-emerald-50 rounded-lg flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500">{{ __('الإيرادات') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-emerald-700 truncate" dir="ltr">{{ number_format($revenue['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p>
                </div>
            </div>
            @if($revenue['refunds'] > 0)
            <div class="mt-2 pt-2 border-t border-gray-100 space-y-0.5">
                <div class="flex justify-between text-xs text-gray-500">
                    <span>{{ __('إجمالي المحصّل') }}</span>
                    <span dir="ltr">{{ number_format($revenue['gross'] / 100, 0) }}</span>
                </div>
                <div class="flex justify-between text-xs text-orange-600">
                    <span>− {{ __('استردادات للعملاء') }} ({{ $revenue['refund_count'] }})</span>
                    <span dir="ltr">{{ number_format($revenue['refunds'] / 100, 0) }}</span>
                </div>
            </div>
            @else
            <p class="text-xs text-gray-400 mt-2" dir="ltr">{{ number_format($revenue['transaction_count']) }} {{ __('عملية') }}</p>
            @endif
        </div>

        {{-- Total Expenses --}}
        <div class="bg-white rounded-xl shadow-sm border border-red-200 p-3 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 bg-red-50 rounded-lg flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500">{{ __('المصروفات') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-red-700 truncate" dir="ltr">{{ number_format($expenses['total'] / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span></p>
                </div>
            </div>
            <p class="text-xs text-gray-400 mt-2">{{ __('رواتب + إيجارات + مشتريات + مصروفات تشغيلية') }}</p>
        </div>

        {{-- Net Profit/Loss --}}
        @php $netProfit = $revenue['total'] - $expenses['total']; @endphp
        <div class="bg-white rounded-xl shadow-sm border {{ $netProfit >= 0 ? 'border-blue-200' : 'border-orange-200' }} p-3 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 {{ $netProfit >= 0 ? 'bg-blue-50' : 'bg-orange-50' }} rounded-lg flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 {{ $netProfit >= 0 ? 'text-blue-600' : 'text-orange-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500">{{ __('صافي الربح/الخسارة') }}</p>
                    <p class="text-lg sm:text-xl font-bold {{ $netProfit >= 0 ? 'text-blue-700' : 'text-orange-700' }} truncate" dir="ltr">
                        {{ $netProfit >= 0 ? '+' : '' }}{{ number_format($netProfit / 100, 2) }} <span class="text-sm font-normal">{{ __('ج.م') }}</span>
                    </p>
                </div>
            </div>
        </div>

        {{-- Collection Rate --}}
        <div class="bg-white rounded-xl shadow-sm border border-purple-200 p-3 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="w-11 h-11 bg-purple-50 rounded-lg flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500">{{ __('نسبة التحصيل') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-purple-700" dir="ltr">{{ $collectionRate['rate'] }}%</p>
                </div>
            </div>
            @if($collectionRate['overdue_count'] > 0)
            <p class="text-xs text-red-500 mt-2">
                {{ $collectionRate['overdue_count'] }} {{ __('فاتورة متأخرة') }} ({{ number_format($collectionRate['overdue_amount'] / 100, 0) }} {{ __('ج.م') }})
            </p>
            @endif
        </div>
    </div>

    {{-- Row 2: Break-Even + Expense Breakdown --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Break-Even Gauge --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('نقطة التعادل') }}</h3>
            @if($breakEven['has_data'])
                <div class="relative">
                    {{-- Progress ring visual --}}
                    <div class="flex items-center justify-center mb-4">
                        <div class="relative w-40 h-40">
                            <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                                <circle cx="50" cy="50" r="42" stroke="#e5e7eb" stroke-width="10" fill="none"/>
                                <circle cx="50" cy="50" r="42"
                                    stroke="{{ $breakEven['is_profitable'] ? '#10b981' : '#f59e0b' }}"
                                    stroke-width="10" fill="none"
                                    stroke-dasharray="{{ $breakEven['percentage'] * 2.64 }} 264"
                                    stroke-linecap="round"/>
                            </svg>
                            <div class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-3xl font-bold {{ $breakEven['is_profitable'] ? 'text-emerald-600' : 'text-amber-600' }}" dir="ltr">{{ $breakEven['percentage'] }}%</span>
                                <span class="text-xs text-gray-500">{{ $breakEven['is_profitable'] ? __('مربح') : __('نحو التعادل') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">{{ __('التكاليف الثابتة الشهرية') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($breakEven['fixed_costs'] / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">{{ __('الإيرادات الحالية') }}</span>
                            <span class="font-medium text-emerald-600" dir="ltr">{{ number_format($breakEven['current_revenue'] / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                        @if(!$breakEven['is_profitable'])
                        <div class="flex justify-between pt-2 border-t border-gray-100">
                            <span class="text-gray-600 font-medium">{{ __('المتبقي للتعادل') }}</span>
                            <span class="font-bold text-amber-600" dir="ltr">{{ number_format($breakEven['remaining'] / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                        @else
                        <div class="flex justify-between pt-2 border-t border-gray-100">
                            <span class="text-gray-600 font-medium">{{ __('فائض فوق التعادل') }}</span>
                            <span class="font-bold text-emerald-600" dir="ltr">+{{ number_format(($breakEven['current_revenue'] - $breakEven['fixed_costs']) / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-500 text-sm">{{ $breakEven['message'] }}</p>
                    <a href="{{ route('facilities.list') }}" wire:navigate class="inline-block mt-3 text-sm text-blue-600 hover:text-blue-700 font-medium">
                        {{ __('أضف تكاليف المنشآت') }} &larr;
                    </a>
                </div>
            @endif
        </div>

        {{-- Expense Breakdown --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('تفاصيل المصروفات') }}</h3>
                @can('expenses.create')
                <a href="{{ route('expenses.create') }}" wire:navigate class="text-xs text-blue-600 hover:text-blue-700 font-medium">+ {{ __('تسجيل مصروف') }}</a>
                @endcan
            </div>
            @if($expenses['total'] > 0)
                <div class="space-y-4">
                    {{-- One itemised line per real cost, largest first. Every line
                         states its source so no figure is unexplained. --}}
                    @foreach($expenses['lines'] as $line)
                    @php $pct = $expenses['total'] > 0 ? round(($line['total'] / $expenses['total']) * 100) : 0; @endphp
                    <div>
                        <div class="flex justify-between items-start text-sm mb-1 gap-3">
                            <div class="min-w-0">
                                <span class="text-gray-700 font-medium">{{ __($line['label']) }}</span>
                                @if($line['count'])
                                <span class="text-xs text-gray-400">({{ $line['count'] }} {{ __('عملية') }})</span>
                                @endif
                                <p class="text-xs text-gray-400 mt-0.5 truncate">{{ __($line['source']) }}</p>
                            </div>
                            <span class="font-medium whitespace-nowrap" dir="ltr">{{ number_format($line['total'] / 100, 0) }} {{ __('ج.م') }} <span class="text-gray-400">({{ $pct }}%)</span></span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2.5">
                            <div class="{{ $line['color'] }} h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>
                    @endforeach

                    {{-- Total Bar --}}
                    <div class="pt-3 border-t border-gray-100">
                        <div class="flex justify-between text-sm">
                            <span class="font-semibold text-gray-700">{{ __('الإجمالي') }}</span>
                            <span class="font-bold text-red-600" dir="ltr">{{ number_format($expenses['total'] / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد مصروفات مسجلة في هذه الفترة') }}</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Row 3: Monthly P&L Chart --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('الأرباح والخسائر — آخر ٦ أشهر') }}</h3>
        <div class="overflow-x-auto">
            <div class="min-w-[600px]">
                {{-- Chart header --}}
                <div class="flex items-center gap-4 mb-4 text-xs">
                    <span class="flex items-center gap-1"><span class="w-3 h-3 bg-emerald-500 rounded-sm"></span> {{ __('الإيرادات') }}</span>
                    <span class="flex items-center gap-1"><span class="w-3 h-3 bg-red-400 rounded-sm"></span> {{ __('المصروفات') }}</span>
                    <span class="flex items-center gap-1"><span class="w-3 h-3 bg-blue-500 rounded-sm"></span> {{ __('صافي الربح') }}</span>
                </div>

                {{-- Bar chart --}}
                @php
                    $maxVal = max(1, collect($monthlyPL)->max('income'), collect($monthlyPL)->max('expenses'));
                @endphp
                <div class="grid grid-cols-6 gap-3">
                    @foreach($monthlyPL as $month)
                    <div class="text-center">
                        {{-- Bars --}}
                        <div class="relative h-40 flex items-end justify-center gap-1 mb-2">
                            <div class="w-5 bg-emerald-400 rounded-t transition-all" style="height: {{ ($month['income'] / $maxVal) * 100 }}%" title="{{ number_format($month['income'] / 100, 0) }} {{ __('ج.م') }}"></div>
                            <div class="w-5 bg-red-300 rounded-t transition-all" style="height: {{ ($month['expenses'] / $maxVal) * 100 }}%" title="{{ number_format($month['expenses'] / 100, 0) }} {{ __('ج.م') }}"></div>
                        </div>
                        {{-- Label --}}
                        <p class="text-xs text-gray-500 truncate">{{ $month['label'] }}</p>
                        {{-- Profit/Loss --}}
                        <p class="text-xs font-bold mt-1 {{ $month['profit'] >= 0 ? 'text-emerald-600' : 'text-red-600' }}" dir="ltr">
                            {{ $month['profit'] >= 0 ? '+' : '' }}{{ number_format($month['profit'] / 100, 0) }}
                        </p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Row 4: Facility Costs Table + Revenue Sources --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Facility Costs Detail --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('تكاليف المنشآت') }}</h3>
                <span class="text-sm font-medium text-gray-500" dir="ltr">{{ number_format($facilityCosts['total_monthly'] / 100, 0) }} {{ __('ج.م/شهر') }}</span>
            </div>
            @if(count($facilityCosts['facilities']) > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-100">
                                <th class="pb-2 text-start text-xs font-medium text-gray-500">{{ __('المنشأة') }}</th>
                                <th class="pb-2 text-start text-xs font-medium text-gray-500">{{ __('الفرع') }}</th>
                                <th class="pb-2 text-end text-xs font-medium text-gray-500">{{ __('شهري') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @foreach($facilityCosts['facilities'] as $f)
                            <tr>
                                <td class="py-2 text-gray-700">{{ $f['name'] }}</td>
                                <td class="py-2 text-gray-500">{{ $f['branch'] }}</td>
                                <td class="py-2 text-end font-medium" dir="ltr">{{ number_format($f['monthly_cost'] / 100, 0) }} {{ __('ج.م') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="border-t border-gray-200">
                                <td colspan="2" class="pt-3 font-semibold text-gray-700">{{ __('الإجمالي') }}</td>
                                <td class="pt-3 text-end font-bold text-red-600" dir="ltr">{{ number_format($facilityCosts['total_monthly'] / 100, 0) }} {{ __('ج.م') }}</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="pt-1 text-xs text-gray-400">{{ __('سنوياً') }}</td>
                                <td class="pt-1 text-end text-xs text-gray-500" dir="ltr">{{ number_format($facilityCosts['total_yearly'] / 100, 0) }} {{ __('ج.م') }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @else
                <div class="text-center py-6">
                    <p class="text-sm text-gray-500">{{ __('لم يتم تحديد تكاليف شهرية لأي منشأة') }}</p>
                    <a href="{{ route('facilities.list') }}" wire:navigate class="inline-block mt-2 text-sm text-blue-600 hover:text-blue-700 font-medium">{{ __('تعديل المنشآت') }}</a>
                </div>
            @endif
        </div>

        {{-- Revenue by Source --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('مصادر الإيرادات') }}</h3>
            @if(count($revenueBySource) > 0)
                <div class="space-y-3">
                    @php $maxSource = max(1, collect($revenueBySource)->max('total')); @endphp
                    @foreach($revenueBySource as $source)
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ $source['source'] }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($source['total'] / 100, 0) }} {{ __('ج.م') }}</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="bg-emerald-500 h-2 rounded-full" style="width: {{ ($source['total'] / $maxSource) * 100 }}%"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                {{-- Fallback: show payment method breakdown --}}
                @if(count($revenue['by_method']) > 0)
                <p class="text-xs text-gray-400 mb-3">{{ __('تفصيل حسب طريقة الدفع') }}</p>
                <div class="space-y-3">
                    @php
                        $methodLabels = ['cash' => 'نقدي', 'card' => 'بطاقة', 'bank_transfer' => 'تحويل بنكي', 'wallet' => 'محفظة', 'online' => 'أونلاين', 'cheque' => 'شيك', 'other' => 'أخرى'];
                        $maxMethod = max(1, collect($revenue['by_method'])->max('total'));
                    @endphp
                    @foreach($revenue['by_method'] as $pm)
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ $methodLabels[$pm['method']] ?? $pm['method'] }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($pm['total'] / 100, 0) }} {{ __('ج.م') }} <span class="text-gray-400">({{ $pm['count'] }})</span></span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: {{ ($pm['total'] / $maxMethod) * 100 }}%"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-6">
                    <p class="text-sm text-gray-500">{{ __('لا توجد إيرادات مسجلة في هذه الفترة') }}</p>
                </div>
                @endif
            @endif
        </div>
    </div>

    {{-- Row 5: Expense Categories + Recent Expenses --}}
    @if(count($expenses['by_category']) > 0 || $expenses['recent_expenses']->isNotEmpty())
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Expense by Category --}}
        @if(count($expenses['by_category']) > 0)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('المصروفات حسب الفئة') }}</h3>
                <a href="{{ route('expenses.list') }}" wire:navigate class="text-xs text-blue-600 hover:text-blue-700 font-medium">{{ __('عرض الكل') }}</a>
            </div>
            @php
                $maxCat = max(1, collect($expenses['by_category'])->max('total'));
                $catColors = ['maintenance' => 'bg-orange-500', 'supplies' => 'bg-cyan-500', 'transport' => 'bg-indigo-500', 'food_beverage' => 'bg-yellow-500', 'sports_equipment' => 'bg-green-500', 'printing' => 'bg-pink-500', 'cleaning' => 'bg-teal-500', 'medical' => 'bg-red-500', 'utilities' => 'bg-violet-500', 'other' => 'bg-gray-500'];
            @endphp
            <div class="space-y-3">
                @foreach($expenses['by_category'] as $cat)
                @php $catKey = $cat['category'] instanceof \App\Domain\Financial\Enums\ExpenseCategory ? $cat['category']->value : $cat['category']; @endphp
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">{{ $cat['label'] }}</span>
                        <span class="font-medium" dir="ltr">{{ number_format($cat['total'] / 100, 0) }} {{ __('ج.م') }} <span class="text-gray-400">({{ $cat['count'] }})</span></span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="{{ $catColors[$catKey] ?? 'bg-gray-500' }} h-2 rounded-full" style="width: {{ ($cat['total'] / $maxCat) * 100 }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Recent Expenses --}}
        @if($expenses['recent_expenses']->isNotEmpty())
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('آخر المصروفات المسجلة') }}</h3>
                @can('expenses.create')
                <a href="{{ route('expenses.create') }}" wire:navigate class="text-xs text-blue-600 hover:text-blue-700 font-medium">+ {{ __('جديد') }}</a>
                @endcan
            </div>
            <div class="space-y-2 max-h-[350px] overflow-y-auto">
                @foreach($expenses['recent_expenses'] as $exp)
                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                    <div class="shrink-0 w-9 h-9 bg-red-100 rounded-full flex items-center justify-center">
                        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-800 truncate">{{ $exp->description }}</p>
                        <p class="text-xs text-gray-500">
                            {{ $exp->category->label() }}
                            @if($exp->recipient_name) — {{ $exp->recipient_name }} @endif
                            &middot; {{ $exp->expense_date->translatedFormat('j M') }}
                        </p>
                    </div>
                    <span class="text-sm font-bold text-red-600 whitespace-nowrap" dir="ltr">{{ number_format($exp->amount / 100, 2) }} {{ __('ج.م') }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
    @endif

    {{-- Row 6: Revenue Breakdown (Subscriptions vs Products) --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Subscription Revenue --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('إيرادات الاشتراكات') }}</h3>
                <span class="text-lg font-bold text-emerald-600" dir="ltr">{{ number_format($revenueBreakdown['subscription_revenue'] / 100, 0) }} {{ __('ج.م') }}</span>
            </div>
            @if(count($revenueBreakdown['top_programs']) > 0)
                <p class="text-xs text-gray-400 mb-3">{{ __('أعلى البرامج إيراداً') }}</p>
                <div class="space-y-2.5">
                    @php $maxProgram = max(1, collect($revenueBreakdown['top_programs'])->max('total')); @endphp
                    @foreach($revenueBreakdown['top_programs'] as $program)
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600 truncate flex-1 me-2">{{ $program->program_name }}</span>
                            <span class="font-medium whitespace-nowrap" dir="ltr">{{ number_format($program->total / 100, 0) }} {{ __('ج.م') }}
                                <span class="text-gray-400 text-xs">({{ $program->subscriber_count }} {{ __('مشترك') }})</span>
                            </span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="bg-emerald-500 h-1.5 rounded-full" style="width: {{ ($program->total / $maxProgram) * 100 }}%"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-6">
                    <p class="text-sm text-gray-500">{{ __('لا توجد بيانات اشتراكات في هذه الفترة') }}</p>
                </div>
            @endif
        </div>

        {{-- Product Revenue --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm sm:text-base font-semibold text-gray-800">{{ __('إيرادات المنتجات') }}</h3>
                <span class="text-lg font-bold text-blue-600" dir="ltr">{{ number_format($revenueBreakdown['product_revenue'] / 100, 0) }} {{ __('ج.م') }}</span>
            </div>
            @if(count($revenueBreakdown['by_product']) > 0)
                <p class="text-xs text-gray-400 mb-3">{{ __('تفصيل حسب المنتج') }}</p>
                <div class="space-y-2.5">
                    @php $maxProduct = max(1, collect($revenueBreakdown['by_product'])->max('total')); @endphp
                    @foreach($revenueBreakdown['by_product'] as $product)
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600 truncate flex-1 me-2">{{ $product->product_name }}</span>
                            <span class="font-medium whitespace-nowrap" dir="ltr">{{ number_format($product->total / 100, 0) }} {{ __('ج.م') }}
                                <span class="text-gray-400 text-xs">({{ (int) $product->units_sold }} {{ __('وحدة') }})</span>
                            </span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-1.5">
                            <div class="bg-blue-500 h-1.5 rounded-full" style="width: {{ ($product->total / $maxProduct) * 100 }}%"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-6">
                    <p class="text-sm text-gray-500">{{ __('لا توجد مبيعات منتجات في هذه الفترة') }}</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Row 7: Key Financial Metrics --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('مؤشرات مالية') }}</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
            <div class="p-3 bg-gray-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('مشتركين نشطين') }}</p>
                <p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format($financialMetrics['active_participants']) }}</p>
            </div>
            <div class="p-3 bg-green-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('مشتركين جدد') }}</p>
                <p class="text-xl font-bold text-green-700" dir="ltr">+{{ number_format($financialMetrics['new_participants']) }}</p>
            </div>
            <div class="p-3 bg-blue-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('اشتراكات نشطة') }}</p>
                <p class="text-xl font-bold text-blue-700" dir="ltr">{{ number_format($financialMetrics['active_enrollments']) }}</p>
            </div>
            <div class="p-3 bg-indigo-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('اشتراكات جديدة') }}</p>
                <p class="text-xl font-bold text-indigo-700" dir="ltr">+{{ number_format($financialMetrics['new_enrollments']) }}</p>
            </div>
            <div class="p-3 bg-red-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('إلغاءات') }}</p>
                <p class="text-xl font-bold text-red-600" dir="ltr">{{ number_format($financialMetrics['cancelled_enrollments']) }}</p>
            </div>
            <div class="p-3 bg-orange-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('معدل الإلغاء') }}</p>
                <p class="text-xl font-bold text-orange-600" dir="ltr">{{ $financialMetrics['churn_rate'] }}%</p>
            </div>
            <div class="p-3 bg-emerald-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('متوسط إيراد/مشترك') }}</p>
                <p class="text-lg font-bold text-emerald-700" dir="ltr">{{ number_format($financialMetrics['avg_revenue_per_participant'] / 100, 0) }} {{ __('ج.م') }}</p>
            </div>
            <div class="p-3 bg-teal-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('متوسط يومي') }}</p>
                <p class="text-lg font-bold text-teal-700" dir="ltr">{{ number_format($financialMetrics['daily_avg_revenue'] / 100, 0) }} {{ __('ج.م') }}</p>
            </div>
            <div class="p-3 bg-amber-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('إجمالي المستحق') }}</p>
                <p class="text-lg font-bold text-amber-700" dir="ltr">{{ number_format($financialMetrics['total_outstanding'] / 100, 0) }} {{ __('ج.م') }}</p>
            </div>
            <div class="p-3 bg-violet-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('متوسط الفاتورة') }}</p>
                <p class="text-lg font-bold text-violet-700" dir="ltr">{{ number_format($financialMetrics['avg_invoice'] / 100, 0) }} {{ __('ج.م') }}</p>
            </div>
            <div class="p-3 {{ $financialMetrics['profit_margin'] >= 0 ? 'bg-emerald-50' : 'bg-red-50' }} rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('هامش الربح') }}</p>
                <p class="text-xl font-bold {{ $financialMetrics['profit_margin'] >= 0 ? 'text-emerald-700' : 'text-red-700' }}" dir="ltr">{{ $financialMetrics['profit_margin'] }}%</p>
            </div>
            <div class="p-3 bg-sky-50 rounded-lg text-center">
                <p class="text-xs text-gray-500 mb-1">{{ __('متوسط أيام التحصيل') }}</p>
                <p class="text-xl font-bold text-sky-700" dir="ltr">{{ $financialMetrics['avg_days_to_collect'] }} {{ __('يوم') }}</p>
            </div>
        </div>
    </div>

    {{-- Row 8: Collection Rate Progress --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('معدل تحصيل الفواتير') }}</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
            <div class="text-center">
                <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفوترة') }}</p>
                <p class="text-xl sm:text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($collectionRate['invoiced'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p>
            </div>
            <div class="text-center">
                <p class="text-sm text-gray-500 mb-1">{{ __('تم تحصيله') }}</p>
                <p class="text-xl sm:text-2xl font-bold text-emerald-600" dir="ltr">{{ number_format($collectionRate['collected'] / 100, 0) }} <span class="text-sm font-normal text-gray-500">{{ __('ج.م') }}</span></p>
            </div>
            <div class="text-center">
                <p class="text-sm text-gray-500 mb-1">{{ __('نسبة التحصيل') }}</p>
                <p class="text-xl sm:text-2xl font-bold {{ $collectionRate['rate'] >= 80 ? 'text-emerald-600' : ($collectionRate['rate'] >= 50 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $collectionRate['rate'] }}%</p>
            </div>
        </div>
        {{-- Progress bar --}}
        <div class="mt-4 w-full bg-gray-100 rounded-full h-3">
            <div class="h-3 rounded-full transition-all {{ $collectionRate['rate'] >= 80 ? 'bg-emerald-500' : ($collectionRate['rate'] >= 50 ? 'bg-amber-500' : 'bg-red-500') }}" style="width: {{ $collectionRate['rate'] }}%"></div>
        </div>
    </div>

    </div>{{-- end loading overlay --}}
</div>
