@section('title', $showForm ? 'إنشاء طلب جديد' : 'الطلبات والعمليات')

<div class="space-y-4" x-data="{
    loadingGeo: null,
    confirmDeliveryGps(orderId) {
        this.loadingGeo = orderId;
        if (!navigator.geolocation) {
            @this.call('confirmDelivery', orderId).then(() => { this.loadingGeo = null; });
            return;
        }
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                @this.call('confirmDelivery', orderId, lat, lng).then(() => {
                    this.loadingGeo = null;
                });
            },
            (error) => {
                // Fail silently on GPS and just confirm delivery
                @this.call('confirmDelivery', orderId).then(() => {
                    this.loadingGeo = null;
                });
            },
            { enableHighAccuracy: true, timeout: 6000 }
        );
    }
}">
    <!-- Alerts -->
    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4 text-xs font-semibold text-emerald-700">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="rounded-2xl bg-red-50 border border-red-100 p-4 text-xs font-semibold text-red-700">
            {{ session('error') }}
        </div>
    @endif

    @if(!$showForm)
        <!-- Search & Filter Controls -->
        <div class="bg-white border border-slate-100 rounded-3xl p-4 shadow-sm space-y-3">
            <div class="relative">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
                </svg>
                <input wire:model.live.debounce.300ms="search" type="text" placeholder="رقم الطلب أو اسم العميل…"
                    class="w-full rounded-xl border border-slate-200 pr-9 pl-4 py-2 text-xs text-slate-700 focus:outline-none">
            </div>

            <!-- Status filter slider -->
            @php
                $orderStatuses = [
                    ''                                 => 'الكل',
                    'handed_to_owner_pending_delivery' => 'جاهز للتوصيل',
                    'pending_credit_control_approval'  => 'بانتظار الائتمان',
                    'pending_warehouse_review'         => 'بانتظار المستودع',
                    'processing_in_warehouse'          => 'قيد التجهيز',
                    'delivered'                        => 'تم التوصيل',
                    'cancelled'                        => 'ملغي',
                ];
            @endphp
            <div class="flex gap-2 overflow-x-auto -mx-1 px-1 pt-2.5 pb-1 border-t border-slate-50 [&::-webkit-scrollbar]:hidden" style="scrollbar-width:none;">
                @foreach($orderStatuses as $val => $label)
                    @php $active = $statusFilter === $val; @endphp
                    <button type="button" wire:click="$set('statusFilter', '{{ $val }}')"
                        class="shrink-0 rounded-full border px-3.5 py-1.5 text-[11px] font-bold transition-colors
                               {{ $active ? 'bg-[#00316D] border-[#00316D] text-white shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50' }}">
                        {{ $label }}
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Orders List -->
        <div class="space-y-3">
            @forelse($orders as $o)
                @php
                    $statusColor = match($o->status) {
                        'handed_to_owner_pending_delivery' => 'bg-emerald-100 border-emerald-200 text-emerald-800 font-bold animate-pulse',
                        'delivered' => 'bg-slate-100 border-slate-200 text-slate-500',
                        'pending_credit_control_approval' => 'bg-amber-50 border-amber-100 text-amber-700',
                        'pending_warehouse_review' => 'bg-blue-50 border-blue-100 text-[#00316D]',
                        'processing_in_warehouse' => 'bg-indigo-50 border-indigo-100 text-indigo-700',
                        default => 'bg-red-50 border-red-100 text-red-600',
                    };
                    $statusLabel = match($o->status) {
                        'handed_to_owner_pending_delivery' => 'جاهز للتوصيل',
                        'delivered' => 'تم التوصيل',
                        'pending_credit_control_approval' => 'بانتظار موافقة الائتمان',
                        'pending_warehouse_review' => 'بانتظار المستودع',
                        'processing_in_warehouse' => 'قيد التجهيز بالمستودع',
                        default => 'ملغي',
                    };
                @endphp

                <div class="bg-white rounded-3xl border border-slate-100 p-5 shadow-sm space-y-4">
                    <!-- Order Header -->
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <span class="text-[10px] text-slate-400 font-mono">{{ $o->order_date_utc ? \Carbon\Carbon::parse($o->order_date_utc)->format('Y/m/d H:i') : '' }}</span>
                            <h4 class="font-extrabold text-slate-800 text-sm mt-0.5">{{ $o->order_number }}</h4>
                            <p class="text-xs text-slate-600 font-bold mt-1">{{ $o->customer->name_ar ?: $o->customer->name }}</p>
                        </div>
                        <span class="text-[9px] font-bold px-2.5 py-0.5 rounded-full border {{ $statusColor }} shrink-0">
                            {{ $statusLabel }}
                        </span>
                    </div>

                    <!-- Items Summary -->
                    <div class="bg-slate-50/50 rounded-2xl p-3 text-xs space-y-1.5 text-slate-500">
                        @foreach($o->lines as $line)
                            <div class="flex justify-between">
                                <span>{{ $line->product_name_snapshot }}</span>
                                <span class="font-bold text-slate-700">x{{ $line->ordered_quantity }} حبة</span>
                            </div>
                        @endforeach
                        <div class="pt-2 border-t border-slate-200 flex justify-between font-bold text-slate-800">
                            <span>الإجمالي (شامل الضريبة):</span>
                            @php
                                $totalPrice = $o->lines->sum(fn($l) => $l->unit_price_snapshot * $l->ordered_quantity * 1.15);
                            @endphp
                            <span class="text-[#00316D]">{{ number_format($totalPrice, 2) }} ر.س</span>
                        </div>
                    </div>

                    <!-- Actions -->
                    @if($o->status == 'handed_to_owner_pending_delivery' || $o->status == 'delivered')
                        <div class="pt-3 border-t border-slate-100 space-y-2">
                            <div class="flex items-center gap-2">
                                <!-- Download Invoice -->
                                <button wire:click="downloadInvoice({{ $o->id }})" 
                                        class="flex-1 h-11 inline-flex items-center justify-center gap-1.5 rounded-xl border border-[#00316D] text-xs font-bold text-[#00316D] hover:bg-slate-50 transition-colors">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                    تحميل الفاتورة
                                </button>
                                
                                <!-- WhatsApp share -->
                                @php
                                    $shareText = "مرحباً عميلنا العزيز، مرفق رابط فاتورتكم رقم " . $o->order_number . " من شركة فالفولين بقيمة " . number_format($totalPrice, 2) . " ر.س.";
                                    $whatsappUrl = "https://api.whatsapp.com/send/?phone=" . preg_replace('/[^0-9]/', '', $o->customer->phone) . "&text=" . urlencode($shareText);
                                @endphp
                                <a href="{{ $whatsappUrl }}" target="_blank" 
                                   class="h-11 w-11 shrink-0 inline-flex items-center justify-center rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-600 hover:bg-emerald-100 transition-colors">
                                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 001.333 4.993L2 22l5.233-1.371a9.936 9.936 0 004.777 1.222h.005c5.507 0 9.99-4.478 9.99-9.985.001-2.668-1.036-5.176-2.924-7.067C17.194 2.909 14.685 2 12.012 2zm5.727 14.043c-.314.887-1.528 1.63-2.106 1.734-.578.103-1.127.185-3.813-.923-3.435-1.417-5.59-4.908-5.76-5.136-.172-.228-1.37-1.821-1.37-3.473 0-1.653.86-2.464 1.167-2.793.308-.33.674-.412.899-.412.226 0 .452.001.648.01.206.01.483-.078.756.592.279.683.953 2.327 1.035 2.492.082.165.138.357.027.579-.109.222-.164.36-.328.552-.164.192-.345.428-.493.573-.164.161-.336.337-.145.666.191.329.851 1.4 1.827 2.27 1.258 1.122 2.316 1.47 2.646 1.636.33.165.522.138.718-.088.195-.227.842-.98 1.068-1.31.226-.329.452-.275.764-.158.314.117 1.986.937 2.327 1.107.34.17.567.253.649.394.083.14.083.813-.231 1.7z"/>
                                    </svg>
                                </a>
                            </div>

                            @if($o->status == 'handed_to_owner_pending_delivery')
                                <button @click="confirmDeliveryGps({{ $o->id }})" 
                                        x-bind:disabled="loadingGeo == {{ $o->id }}"
                                        class="w-full inline-flex items-center justify-center gap-1.5 rounded-xl bg-emerald-600 py-3 text-xs font-bold text-white shadow-md shadow-emerald-600/5 hover:opacity-95 transition-opacity">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                    <span x-text="loadingGeo == {{ $o->id }} ? 'جاري تحديد موقع التوصيل…' : 'تأكيد التوصيل الفعلي للعميل'"></span>
                                </button>
                            @endif
                        </div>
                    @endif
                </div>
            @empty
                <div class="bg-white border border-slate-100 rounded-3xl p-12 text-center shadow-sm space-y-3">
                    <div class="mx-auto h-12 w-12 rounded-full bg-slate-50 text-slate-400 flex items-center justify-center">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                        </svg>
                    </div>
                    <p class="text-xs font-bold text-slate-500">لا توجد طلبات مسجلة</p>
                    <p class="text-[10px] text-slate-400">لإنشاء طلب، افتح شاشة العملاء واختر "إنشاء طلب لهذا العميل" من بطاقة العميل.</p>
                </div>
            @endforelse
        </div>

    @else
        <!-- Create Order Form (Wizard) -->
        <div class="bg-white rounded-3xl border border-slate-100 p-6 shadow-sm space-y-5 text-xs">
            <div class="flex items-center justify-between pb-3 border-b border-slate-100">
                <h3 class="font-bold text-slate-800 text-sm">تفاصيل الطلبية الجديدة</h3>
                <button wire:click="closeForm" class="text-xs font-bold text-[#00316D] hover:underline flex items-center gap-1">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                    <span>إلغاء وعودة</span>
                </button>
            </div>

            <!-- Customer Selection -->
            <div>
                <label class="block font-bold text-slate-500 mb-1.5">العميل *</label>
                @if($selectedCustomer)
                    <!-- Locked: customer came from a customer card / active visit -->
                    <div class="flex items-center gap-3 rounded-xl border border-[#00316D]/15 bg-[#00316D]/5 p-3">
                        <div class="h-9 w-9 rounded-xl bg-[#00316D] text-white flex items-center justify-center shrink-0">
                            <svg class="h-4.5 w-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2M5 21H3m4-14h.01M11 7h2m-2 4h2m-2 4h2"/></svg>
                        </div>
                        <div class="min-w-0">
                            <p class="font-bold text-slate-800 text-sm truncate">{{ $selectedCustomer->name_ar ?: $selectedCustomer->name }}</p>
                            <p class="text-[11px] text-slate-400 truncate">{{ $selectedCustomer->city }} &middot; {{ $selectedCustomer->erp_customer_code ?? 'بانتظار الكود' }}</p>
                        </div>
                    </div>
                @else
                    <select wire:model="customerId" class="w-full rounded-xl border border-slate-200 p-2.5 focus:outline-none">
                        <option value="">-- اختر العميل من القائمة --</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}">{{ $c->name_ar ?: $c->name }} (كود: {{ $c->erp_customer_code }})</option>
                        @endforeach
                    </select>
                @endif
                @error('customerId') <p class="mt-1 text-[10px] text-red-500 font-semibold">{{ $message }}</p> @enderror
            </div>

            <!-- Add Product to Cart -->
            <div class="bg-slate-50/50 border border-slate-100 rounded-2xl p-4 space-y-3">
                <h4 class="font-bold text-[#00316D] text-[10px]">إضافة منتج للسلة</h4>
                
                <div class="space-y-2">
                    <div>
                        <label class="block font-bold text-slate-400 mb-1">المنتج</label>
                        <select wire:model="selectedProductId" class="w-full rounded-xl border border-slate-200 p-2 focus:outline-none">
                            <option value="">-- اختر منتج --</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}">{{ $p->name }} ({{ number_format($p->unit_price, 2) }} ر.س)</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex items-end gap-3">
                        <div class="w-1/3">
                            <label class="block font-bold text-slate-400 mb-1">الكمية</label>
                            <input wire:model="selectedQuantity" type="number" min="1" class="w-full rounded-xl border border-slate-200 p-2 text-center font-bold focus:outline-none">
                        </div>
                        <button type="button" wire:click="addToCart" class="flex-1 h-[38px] inline-flex items-center justify-center gap-1 rounded-xl bg-[#00316D] text-white font-bold hover:opacity-90">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                            <span>إضافة للسلة</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Cart Items Summary -->
            <div class="space-y-2">
                <h4 class="font-bold text-slate-500 text-[10px]">أصناف السلة المضافة:</h4>
                
                @if($this->cart_items->count() > 0)
                    <div class="border border-slate-100 rounded-2xl overflow-hidden">
                        <table class="w-full text-right text-xs">
                            <thead class="bg-slate-50 text-slate-400">
                                <tr>
                                    <th class="p-2">المنتج</th>
                                    <th class="p-2 text-center">الكمية</th>
                                    <th class="p-2 text-left">السعر</th>
                                    <th class="p-2 text-center">حذف</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach($this->cart_items as $item)
                                    <tr class="text-slate-700">
                                        <td class="p-2 font-bold">{{ $item['product']?->name }}</td>
                                        <td class="p-2 text-center font-mono font-bold">{{ $item['quantity'] }}</td>
                                        <td class="p-2 text-left font-mono font-bold">{{ number_format($item['subtotal'], 2) }}</td>
                                        <td class="p-2 text-center">
                                            <button type="button" wire:click="removeFromCart({{ $item['product']->id }})" class="text-red-500 hover:text-red-700 p-1">
                                                <svg class="h-4 w-4 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="p-3 bg-blue-50/50 border border-blue-100 rounded-xl space-y-1.5 text-xs text-slate-600">
                        <div class="flex justify-between">
                            <span>المجموع (قبل الضريبة):</span>
                            <span class="font-mono font-bold text-slate-800">{{ number_format($this->cart_total, 2) }} ر.س</span>
                        </div>
                        <div class="flex justify-between">
                            <span>ضريبة القيمة المضافة (15%):</span>
                            <span class="font-mono font-bold text-slate-800">{{ number_format($this->cart_total * 0.15, 2) }} ر.س</span>
                        </div>
                        <div class="flex justify-between pt-1.5 border-t border-blue-100 font-bold text-slate-800">
                            <span>المجموع الكلي النهائي:</span>
                            <span class="font-mono font-bold text-[#00316D]">{{ number_format($this->cart_total * 1.15, 2) }} ر.س</span>
                        </div>
                    </div>
                @else
                    <div class="p-4 border border-dashed border-slate-200 rounded-2xl text-center text-slate-400">
                        سلة الأصناف فارغة حالياً.
                    </div>
                    @error('cart') <p class="mt-1 text-[10px] text-red-500 font-semibold">يجب إضافة صنف واحد على الأقل للطلب.</p> @enderror
                @endif
            </div>

            <!-- Notes -->
            <div>
                <label class="block font-bold text-slate-500 mb-1.5">ملاحظات إضافية (اختياري)</label>
                <textarea wire:model.defer="notes" rows="2" class="w-full rounded-xl border border-slate-200 p-2.5 focus:outline-none" placeholder="أي ملاحظات تخص التسليم أو طلبات خاصة…"></textarea>
            </div>

            <!-- Submit -->
            <div class="pt-2">
                <button type="button" wire:click="save" 
                        class="w-full inline-flex items-center justify-center gap-1.5 rounded-xl bg-[#00316D] py-3 text-sm font-bold text-white shadow-lg hover:opacity-95 transition-opacity"
                        @if(empty($cart)) disabled @endif>
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    <span>تأكيد وإنشاء طلب البيع</span>
                </button>
            </div>
        </div>
    @endif
</div>