<x-filament-panels::page dir="rtl">
    @php
        $data = $this->getReportData();
        $lineData = $data['lineChartData'];
        $pieData = $data['pieChartData'];
        $chartLineData = [
            'labels' => $lineData['labels'],
            'datasets' => [[
                'label' => 'الإيرادات (ج.م)',
                'data' => $lineData['data'],
                'borderColor' => '#10b981',
                'backgroundColor' => 'rgba(16, 185, 129, 0.1)',
            ]],
        ];
        $chartPieData = [
            'labels' => $pieData['labels'],
            'datasets' => [[
                'data' => $pieData['data'],
                'backgroundColor' => $pieData['colors'],
            ]],
        ];
    @endphp

    {{-- Filters --}}
    <x-filament::section heading="الفلاتر" collapsible collapsed>
        <form wire:submit="applyFilters" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label class="fi-fo-field-wrp-label inline-block text-sm font-medium text-gray-950 dark:text-white mb-1">من تاريخ</label>
                    <input type="date" wire:model.live="startDate" class="fi-input block w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm px-3 py-2" />
                </div>
                <div>
                    <label class="fi-fo-field-wrp-label inline-block text-sm font-medium text-gray-950 dark:text-white mb-1">إلى تاريخ</label>
                    <input type="date" wire:model.live="endDate" class="fi-input block w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm px-3 py-2" />
                </div>
                <div>
                    <label class="fi-fo-field-wrp-label inline-block text-sm font-medium text-gray-950 dark:text-white mb-1">المورد</label>
                    <select wire:model.live="supplierId" class="fi-select-input block w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm px-3 py-2">
                        <option value="">كل الموردين</option>
                        @foreach(\App\Models\Supplier::where('is_active', true)->get() as $s)
                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="fi-fo-field-wrp-label inline-block text-sm font-medium text-gray-950 dark:text-white mb-1">التاجر / الوكيل</label>
                    <select wire:model.live="agentId" class="fi-select-input block w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm px-3 py-2">
                        <option value="">كل التجار</option>
                        @foreach(\App\Models\User::where('is_admin', false)->where('is_active', true)->get() as $u)
                            <option value="{{ $u->id }}">{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <x-filament::button type="submit" size="sm">تطبيق الفلاتر</x-filament::button>
        </form>
    </x-filament::section>

    {{-- Stat Cards (Top Row) - 3 cols desktop, 1 mobile --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <x-filament::section class="!p-5">
            <div class="flex items-start gap-3">
                <div class="flex-none w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                    <x-filament::icon :icon="\Filament\Support\Icons\Heroicon::OutlinedBanknotes" class="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">إجمالي الإيرادات</p>
                    <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">{{ number_format($data['totalRevenue'], 2) }} EGP</p>
                    <p class="text-xs text-gray-400 mt-1">صافي بعد النقاط والخصومات</p>
                </div>
            </div>
        </x-filament::section>

        <x-filament::section class="!p-5">
            <div class="flex items-start gap-3">
                <div class="flex-none w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                    <x-filament::icon :icon="\Filament\Support\Icons\Heroicon::OutlinedTruck" class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">الشحن ورسوم الدفع</p>
                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-0.5">{{ number_format($data['totalShippingAndFees'], 2) }} EGP</p>
                    <p class="text-xs text-gray-400 mt-1">إيرادات الشحن والدفع</p>
                </div>
            </div>
        </x-filament::section>

        <x-filament::section class="!p-5">
            <div class="flex items-start gap-3">
                <div class="flex-none w-10 h-10 rounded-lg bg-rose-500/10 flex items-center justify-center">
                    <x-filament::icon :icon="\Filament\Support\Icons\Heroicon::OutlinedCurrencyDollar" class="w-5 h-5 text-rose-600 dark:text-rose-400" />
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">ديون الموردين</p>
                    <p class="text-2xl font-bold text-rose-600 dark:text-rose-400 mt-0.5">{{ number_format($data['totalSupplierDebt'], 2) }} EGP</p>
                    <p class="text-xs text-gray-400 mt-1">الرصيد المستحق للموردين</p>
                </div>
            </div>
        </x-filament::section>

        <x-filament::section class="!p-5">
            <div class="flex items-start gap-3">
                <div class="flex-none w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center">
                    <x-filament::icon :icon="\Filament\Support\Icons\Heroicon::OutlinedChartBar" class="w-5 h-5 text-amber-600 dark:text-amber-400" />
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">تقدير صافي الربح</p>
                    <p class="text-2xl font-bold text-amber-600 dark:text-amber-400 mt-0.5">{{ number_format($data['netProfitEstimate'], 2) }} EGP</p>
                    <p class="text-xs text-gray-400 mt-1">المبيعات - التكلفة - الشحن</p>
                </div>
            </div>
        </x-filament::section>
    </div>

    {{-- Charts (Middle Row) --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {{-- Line Chart --}}
        <x-filament::section heading="أداء المبيعات - آخر 30 يوم" class="overflow-hidden">
            <div
                x-load
                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                class="fi-wi-chart-canvas-ctn relative"
                style="min-height: 300px"
                x-data="chart({
                    cachedData: @js($chartLineData),
                    maxHeight: '300px',
                    options: null,
                    type: 'line',
                })"
            >
                <span x-ref="backgroundColorElement" class="fi-wi-chart-bg-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="borderColorElement" class="fi-wi-chart-border-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="gridColorElement" class="fi-wi-chart-grid-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="textColorElement" class="fi-wi-chart-text-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <canvas x-ref="canvas" style="max-height: 300px"></canvas>
            </div>
        </x-filament::section>

        {{-- Pie Chart --}}
        <x-filament::section heading="المبيعات حسب المحافظة" class="overflow-hidden">
            <div
                x-load
                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                class="fi-wi-chart-canvas-ctn relative"
                style="min-height: 300px"
                x-data="chart({
                    cachedData: @js($chartPieData),
                    maxHeight: '300px',
                    options: null,
                    type: 'pie',
                })"
            >
                <span x-ref="backgroundColorElement" class="fi-wi-chart-bg-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="borderColorElement" class="fi-wi-chart-border-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="gridColorElement" class="fi-wi-chart-grid-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <span x-ref="textColorElement" class="fi-wi-chart-text-color absolute opacity-0 pointer-events-none" aria-hidden="true"></span>
                <canvas x-ref="canvas" style="max-height: 300px"></canvas>
            </div>
        </x-filament::section>
    </div>

    {{-- Recent Transactions Table (Bottom Row) --}}
    <x-filament::section heading="أحدث المعاملات">
        <div class="overflow-x-auto" dir="rtl">
            <table class="w-full text-sm text-right">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-700">
                        <th class="py-3 px-4 text-gray-500 dark:text-gray-400 font-medium">#</th>
                        <th class="py-3 px-4 text-gray-500 dark:text-gray-400 font-medium">التاريخ</th>
                        <th class="py-3 px-4 text-gray-500 dark:text-gray-400 font-medium">التاجر</th>
                        <th class="py-3 px-4 text-gray-500 dark:text-gray-400 font-medium">الحالة</th>
                        <th class="py-3 px-4 text-gray-500 dark:text-gray-400 font-medium">الإجمالي</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data['recentOrders'] as $i => $order)
                        <tr class="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50/50 dark:hover:bg-gray-800/50">
                            <td class="py-3 px-4 text-gray-600 dark:text-gray-300">{{ $i + 1 }}</td>
                            <td class="py-3 px-4 text-gray-600 dark:text-gray-300">{{ $order->created_at->format('Y-m-d H:i') }}</td>
                            <td class="py-3 px-4 text-gray-600 dark:text-gray-300">{{ $order->user?->name ?? '-' }}</td>
                            <td class="py-3 px-4">
                                @php
                                    $isDelivered = $order->status === \App\Models\Order::STATUS_DELIVERED;
                                    $isPending = in_array($order->status, [
                                        \App\Models\Order::STATUS_PENDING,
                                        \App\Models\Order::STATUS_PENDING_SUPPLIER,
                                        \App\Models\Order::STATUS_ORDERED_FROM_SUPPLIER,
                                        \App\Models\Order::STATUS_RECEIVED_FROM_SUPPLIER,
                                        \App\Models\Order::STATUS_PROCESSING,
                                        \App\Models\Order::STATUS_SHIPPING,
                                    ]);
                                @endphp
                                <x-filament::badge
                                    :color="$isDelivered ? 'success' : ($isPending ? 'warning' : ($order->status === 'returned' ? 'danger' : 'gray'))"
                                >
                                    {{ $data['statusLabels'][$order->status] ?? $order->status }}
                                </x-filament::badge>
                            </td>
                            <td class="py-3 px-4 font-medium text-gray-800 dark:text-gray-200">{{ number_format($order->total, 2) }} EGP</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-gray-500 dark:text-gray-400">لا توجد معاملات في الفترة المحددة</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-filament::section>
</x-filament-panels::page>
