<div>
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-800">إتمام الطلب</h1>
        <p class="text-sm text-gray-500 mt-1">راجع طلبك واختر عنوان الشحن وأكمل عملية الشراء</p>
    </div>

    @if($summary->isEmpty())
        <div class="bg-white rounded-2xl border border-gray-200 p-12 text-center">
            <p class="text-gray-500 mb-4">السلة فارغة</p>
            <a href="{{ route('merchant.products') }}" class="inline-block bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-6 py-2.5 rounded-xl transition">
                تصفح المنتجات
            </a>
        </div>
    @else
        <div class="grid lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                {{-- Order Items --}}
                <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-100">
                        <h3 class="font-bold text-gray-800">عناصر الطلب ({{ $summary->itemCount() }})</h3>
                    </div>
                    <div class="divide-y divide-gray-50">
                        @foreach($summary->items as $item)
                            <div class="px-6 py-3 flex items-center gap-4">
                                <div class="shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-100">
                                    @if(!empty($item['image_path']))
                                        <img src="{{ asset('storage/' . $item['image_path']) }}" alt="{{ $item['pattern_name'] }}"
                                             class="w-full h-full object-cover">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-gray-300">
                                            <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="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"/></svg>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-800">{{ $item['product_name'] }} — {{ $item['pattern_name'] }}</p>
                                    <div class="flex items-center gap-2 text-xs text-gray-500 mt-0.5">
                                        <span>{{ $item['quantity'] }} × {{ number_format($item['unit_price'], 2) }} ج.م</span>
                                        <span class="px-2 py-0.5 rounded-full {{ $item['fulfillment_type'] === 'in_stock' ? 'bg-blue-100 text-blue-700' : 'bg-orange-100 text-orange-700' }}">
                                            {{ $item['fulfillment_type'] === 'in_stock' ? 'مخزن' : 'حسب الطلب' }}
                                        </span>
                                    </div>
                                </div>
                                <p class="text-sm font-bold text-gray-800 shrink-0">{{ number_format($item['line_total'], 2) }} ج.م</p>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Shipping Address --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-6">
                    <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        عنوان الشحن
                    </h3>

                    <div class="space-y-3">
                        @if($addresses->count() > 0)
                            <label class="flex items-start gap-3 p-3 rounded-xl border cursor-pointer transition {{ $addressOption === 'default' ? 'border-emerald-300 bg-emerald-50/50' : 'border-gray-200 hover:bg-gray-50' }}">
                                <input type="radio" wire:model.live="addressOption" value="default" class="mt-1 text-emerald-600 focus:ring-emerald-500">
                                <div class="flex-1">
                                    <span class="text-sm font-medium text-gray-800">الشحن لعنوان محفوظ</span>
                                    @if($addressOption === 'default')
                                        <select wire:model.live="selectedAddressId" class="mt-2 w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                                            @foreach($addresses as $addr)
                                                <option value="{{ $addr->id }}">
                                                    {{ $addr->governorate }} — {{ \Illuminate\Support\Str::limit($addr->address_details, 50) }}
                                                    @if($addr->is_default) (الافتراضي) @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>
                            </label>
                        @endif

                        <label class="flex items-start gap-3 p-3 rounded-xl border cursor-pointer transition {{ $addressOption === 'new' ? 'border-emerald-300 bg-emerald-50/50' : 'border-gray-200 hover:bg-gray-50' }}">
                            <input type="radio" wire:model.live="addressOption" value="new" class="mt-1 text-emerald-600 focus:ring-emerald-500">
                            <span class="text-sm font-medium text-gray-800">الشحن لعنوان آخر</span>
                        </label>

                        @if($addressOption === 'new')
                            <div class="grid sm:grid-cols-2 gap-4 mt-3 p-4 bg-gray-50 rounded-xl">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">اسم المحل</label>
                                    <input type="text" wire:model="new_shop_name" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="مثال: محل أحمد">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">المحافظة <span class="text-red-500">*</span></label>
                                    <select wire:model.live="new_governorate" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                                        <option value="">-- اختر المحافظة --</option>
                                        @foreach($governorates as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('new_governorate') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">المركز / المدينة</label>
                                    <input type="text" wire:model="new_city" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">هاتف إضافي</label>
                                    <input type="text" wire:model="new_extra_phone" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                                </div>
                                <div class="sm:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">العنوان بالتفصيل <span class="text-red-500">*</span></label>
                                    <textarea wire:model="new_address_details" rows="2" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm resize-none"></textarea>
                                    @error('new_address_details') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                </div>
                                <div class="sm:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">علامة مميزة</label>
                                    <input type="text" wire:model="new_landmark" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="مثال: بجوار الصيدلية">
                                </div>
                                <div class="sm:col-span-2">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" wire:model="save_new_address" class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                                        <span class="text-sm text-gray-700">حفظ هذا العنوان للمستقبل</span>
                                    </label>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Payment & Points --}}
                <div class="bg-white rounded-2xl border border-gray-200 p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">طريقة الدفع</label>
                        <select wire:model.live="paymentMethodId"
                                class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                            @foreach($paymentMethods as $pm)
                                <option value="{{ $pm->id }}">
                                    {{ $pm->name }}
                                    @if($pm->fee_value > 0)
                                        — {{ $pm->fee_type === 'percentage' ? $pm->fee_value . '%' : number_format($pm->fee_value, 2) . ' ج.م' }} رسوم
                                    @else
                                        — بدون رسوم إضافية
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- بيانات التحويل (لغير الدفع عند الاستلام) --}}
                    @php $selectedPm = $this->selectedPaymentMethod; @endphp
                    @if($selectedPm && !$selectedPm->isCod() && !empty(trim($selectedPm->payment_details ?? '')))
                        <div class="bg-emerald-50/70 rounded-xl p-4 border border-emerald-100">
                            <h4 class="text-sm font-semibold text-emerald-800 mb-2 flex items-center gap-2">
                                <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                بيانات التحويل — {{ $selectedPm->name }}
                            </h4>
                            <div class="relative" x-data="{ paymentText: @js(trim($selectedPm->payment_details)), copied: false }">
                                <pre class="text-sm text-gray-800 whitespace-pre-wrap font-sans leading-relaxed p-3 pr-20 bg-white rounded-lg border border-emerald-100 overflow-x-auto">{{ trim($selectedPm->payment_details) }}</pre>
                                <button type="button"
                                        x-on:click="navigator.clipboard.writeText(paymentText); copied = true; setTimeout(() => copied = false, 1500)"
                                        class="absolute left-2 top-2 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-emerald-100 hover:bg-emerald-200 text-emerald-800 transition">
                                    <span x-text="copied ? 'تم النسخ ✓' : 'نسخ'"></span>
                                </button>
                            </div>
                        </div>
                    @endif

                    {{-- رفع إيصال الدفع (مطلوب لغير النقدي) --}}
                    @if($selectedPm && !$selectedPm->isCod())
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                رفع صورة الإيصال <span class="text-red-500">*</span>
                            </label>
                            <div class="flex items-start gap-3">
                                <input type="file"
                                       wire:model="paymentReceipt"
                                       accept="image/*"
                                       class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100 file:cursor-pointer">
                            </div>
                            @if($paymentReceipt)
                                <p class="mt-2 text-sm text-emerald-600 flex items-center gap-1">
                                    <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="M5 13l4 4L19 7"/></svg>
                                    تم اختيار الصورة
                                </p>
                            @endif
                            @error('paymentReceipt')
                                <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-gray-500">يُقبل: jpg, png, webp — أقصى 5 ميجابايت</p>
                        </div>
                    @endif

                    @if(auth()->user()->points_balance > 0)
                        <div class="bg-amber-50 rounded-xl p-4 border border-amber-100">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <svg class="w-5 h-5 text-amber-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <span class="text-sm font-semibold text-amber-800">رصيد النقاط: {{ number_format(auth()->user()->points_balance) }}</span>
                                </div>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model.live="usePoints" class="rounded border-amber-300 text-amber-600 focus:ring-amber-500">
                                    <span class="text-sm text-amber-700">استبدال نقاط</span>
                                </label>
                            </div>
                            @if($usePoints)
                                <div class="flex items-center gap-3">
                                    <input type="number" wire:model.live.debounce.500ms="pointsToRedeem"
                                           min="0" max="{{ $maxRedeemable }}"
                                           class="flex-1 px-4 py-2 rounded-lg border border-amber-200 focus:border-amber-500 outline-none text-sm"
                                           placeholder="عدد النقاط">
                                    <span class="text-xs text-amber-600">أقصى: {{ $maxRedeemable }}</span>
                                </div>
                                @if($summary->discountFromPoints > 0)
                                    <p class="text-sm text-amber-700 mt-2">خصم: {{ number_format($summary->discountFromPoints, 2) }} ج.م</p>
                                @endif
                            @endif
                        </div>
                    @endif

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">ملاحظات (اختياري)</label>
                        <textarea wire:model="notes" rows="2"
                                  class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm resize-none"
                                  placeholder="أي ملاحظات خاصة بالطلب..."></textarea>
                    </div>
                </div>
            </div>

            {{-- Order Summary --}}
            <div>
                <div class="bg-white rounded-2xl border border-gray-200 p-6 sticky top-24">
                    <h3 class="font-bold text-gray-800 mb-4">ملخص الطلب</h3>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-500">الإجمالي الفرعي</span>
                            <span class="font-semibold">{{ number_format($summary->subtotal, 2) }} ج.م</span>
                        </div>
                        @if($summary->discountFromPoints > 0)
                            <div class="flex justify-between text-amber-600">
                                <span>خصم النقاط ({{ $summary->pointsRedeemed }})</span>
                                <span class="font-semibold">-{{ number_format($summary->discountFromPoints, 2) }} ج.م</span>
                            </div>
                        @endif
                        <div class="flex justify-between {{ $summary->shippingCost > 0 ? 'text-gray-600' : 'text-emerald-600' }}">
                            <span>تكلفة الشحن</span>
                            <span class="font-semibold">
                                @if($summary->shippingCost > 0)
                                    {{ number_format($summary->shippingCost, 2) }} ج.م
                                @else
                                    مجاني
                                @endif
                            </span>
                        </div>
                        @if($summary->paymentFee > 0)
                            <div class="flex justify-between text-gray-600">
                                <span>رسوم الدفع</span>
                                <span class="font-semibold">{{ number_format($summary->paymentFee, 2) }} ج.م</span>
                            </div>
                        @endif
                        <div class="flex justify-between text-emerald-600">
                            <span>نقاط ستكسبها</span>
                            <span class="font-semibold">+{{ $summary->pointsEarned }} نقطة</span>
                        </div>
                        <hr class="border-gray-100">
                        <div class="flex justify-between text-lg">
                            <span class="font-bold text-gray-800">الإجمالي النهائي</span>
                            <span class="font-bold text-emerald-600">{{ number_format($summary->total, 2) }} ج.م</span>
                        </div>
                    </div>
                    <button wire:click="placeOrder" wire:loading.attr="disabled"
                            class="mt-6 w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-medium py-3 rounded-xl transition shadow-lg shadow-emerald-500/25">
                        <span wire:loading.remove wire:target="placeOrder">تأكيد الطلب</span>
                        <span wire:loading wire:target="placeOrder">جاري الإنشاء...</span>
                    </button>
                    <a href="{{ route('merchant.cart') }}" class="mt-3 block text-center text-sm text-gray-500 hover:text-gray-700 transition">
                        العودة للسلة
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>
