<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>

    {{-- 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>
            <p class="text-xs text-gray-400 mt-2" dir="ltr">{{ number_format($revenue['transaction_count']) }} {{ __('عملية') }}</p>
        </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">
            <h3 class="text-sm sm:text-base font-semibold text-gray-800 mb-4">{{ __('تفاصيل المصروفات') }}</h3>
            @if($expenses['total'] > 0)
                <div class="space-y-4">
                    {{-- Facility Costs --}}
                    @php $pct = $expenses['total'] > 0 ? round(($expenses['facility_costs'] / $expenses['total']) * 100) : 0; @endphp
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ __('إيجارات المنشآت') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($expenses['facility_costs'] / 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="bg-amber-500 h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>

                    {{-- Purchase Orders --}}
                    @php $pct = $expenses['total'] > 0 ? round(($expenses['purchase_orders'] / $expenses['total']) * 100) : 0; @endphp
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ __('مشتريات المخزون') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($expenses['purchase_orders'] / 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="bg-blue-500 h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>

                    {{-- Outbound Payments --}}
                    @php $pct = $expenses['total'] > 0 ? round(($expenses['outbound_payments'] / $expenses['total']) * 100) : 0; @endphp
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ __('مدفوعات أخرى') }}</span>
                            <span class="font-medium" dir="ltr">{{ number_format($expenses['outbound_payments'] / 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="bg-purple-500 h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
                        </div>
                    </div>

                    {{-- 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: 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>
