<x-filament-panels::page>
    <div class="space-y-8">
        @php
            $purchaseOrders = $this->getPurchaseOrders();
        @endphp

        @if($purchaseOrders->isEmpty())
            <x-filament::section>
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                    <h3 class="mt-4 text-lg font-medium text-gray-900">لا توجد أوامر توريد</h3>
                    <p class="mt-2 text-sm text-gray-500">سيظهر هنا أوامر التوريد عند إنشائها من الإدارة</p>
                </div>
            </x-filament::section>
        @else
            @foreach($purchaseOrders as $po)
                <x-filament::section class="overflow-hidden">
                    <x-slot name="heading">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <span class="text-lg font-semibold">أمر شراء #{{ $po->id }}</span>
                            <span class="text-xs font-medium px-3 py-1.5 rounded-full
                                {{ $po->status === 'draft' ? 'bg-amber-100 text-amber-800' : '' }}
                                {{ $po->status === 'confirmed' ? 'bg-blue-100 text-blue-800' : '' }}
                                {{ $po->status === 'received' ? 'bg-emerald-100 text-emerald-800' : '' }}">
                                @switch($po->status)
                                    @case('draft') مسودة @break
                                    @case('confirmed') مؤكد @break
                                    @case('received') تم الاستلام @break
                                    @default {{ $po->status }}
                                @endswitch
                            </span>
                        </div>
                    </x-slot>
                    <x-slot name="description">
                        <span class="text-gray-500">الطلب المرتبط #{{ $po->source_order_id ?? '—' }}</span>
                        <span class="mx-2 text-gray-300">·</span>
                        <span class="text-gray-500">{{ $po->created_at->format('Y-m-d H:i') }}</span>
                    </x-slot>

                    {{-- جدول العناصر بتنسيق موحد --}}
                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <div class="overflow-x-auto">
                            <table class="w-full min-w-[480px]" dir="rtl">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="text-right py-3 px-4 text-xs font-semibold text-gray-600 w-14">الصورة</th>
                                        <th class="text-right py-3 px-4 text-xs font-semibold text-gray-600">المنتج والنقشة</th>
                                        <th class="text-center py-3 px-4 text-xs font-semibold text-gray-600 w-24">الكمية</th>
                                        <th class="text-right py-3 px-4 text-xs font-semibold text-gray-600 w-28">سعر الوحدة</th>
                                        <th class="text-right py-3 px-4 text-xs font-semibold text-gray-600 w-28">الإجمالي</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    @foreach($po->items as $item)
                                        @php
                                            $variant = $item->variant;
                                            $imgPath = $variant?->image_thumbnail ?? $variant?->image_webp ?? $variant?->image;
                                        @endphp
                                        <tr class="bg-white hover:bg-gray-50/50 transition">
                                            <td class="py-3 px-4">
                                                <div class="w-10 h-10 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0 shadow-sm border border-gray-100">
                                                    @if($imgPath)
                                                        <img src="{{ asset('storage/' . $imgPath) }}"
                                                             alt="{{ $variant?->pattern_name }}"
                                                             class="w-full h-full object-cover aspect-square"
                                                             loading="lazy">
                                                    @else
                                                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <p class="font-medium text-gray-900">{{ $variant?->product?->name ?? 'منتج' }}</p>
                                                <p class="text-sm text-gray-500 mt-0.5">{{ $variant?->pattern_name ?? '—' }}{{ $variant?->sku ? ' · ' . $variant->sku : '' }}</p>
                                            </td>
                                            <td class="py-3 px-4 text-center">
                                                <span class="inline-flex items-center justify-center min-w-[2.5rem] font-semibold text-gray-800 bg-gray-100 rounded-lg px-2 py-1">
                                                    {{ $item->quantity }}
                                                </span>
                                                <span class="text-xs text-gray-500 block mt-1">قطعة</span>
                                            </td>
                                            <td class="py-3 px-4 text-right text-sm text-gray-600">
                                                {{ number_format($item->unit_cost, 2) }} ج.م
                                            </td>
                                            <td class="py-3 px-4 text-right font-semibold text-gray-900">
                                                {{ number_format($item->quantity * $item->unit_cost, 2) }} ج.م
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="mt-6 pt-5 border-t border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <p class="text-base font-bold text-gray-800">
                            إجمالي الأمر: <span class="text-emerald-600">{{ number_format($po->total_cost, 2) }} ج.م</span>
                        </p>
                        @if($po->status === 'draft')
                            <button type="button"
                                    wire:click="confirmOrder({{ $po->id }})"
                                    wire:confirm="هل أنت متأكد من تأكيد هذا أمر الشراء؟"
                                    class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition shadow-sm">
                                <svg class="w-5 h-5" 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>
                                تأكيد أمر الشراء
                            </button>
                        @endif
                    </div>
                </x-filament::section>
            @endforeach
        @endif
    </div>
</x-filament-panels::page>
