@section('title', $showForm ? 'إضافة عميل جديد' : 'العملاء')

<div class="space-y-4">
    <!-- Success Alert -->
    @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(!$showForm)
        <!-- List View -->
        <div class="bg-white border border-slate-100 rounded-3xl p-4 shadow-sm flex items-center gap-3">
            <div class="relative flex-1">
                <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.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#00316D]/10">
            </div>
            <button wire:click="openCreate" class="inline-flex items-center gap-1.5 rounded-xl bg-[#00316D] px-3.5 py-2.5 text-xs font-bold text-white shadow-md shadow-[#00316D]/5 hover:opacity-95 transition-opacity shrink-0">
                <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>

        <!-- Status filter slider -->
        @php
            $statuses = [
                ''                          => 'الكل',
                'completed_in_erp'          => 'نشط / مكتمل',
                'pending_supervisor_review' => 'بانتظار المشرف',
                'pending_admin_erp_entry'   => 'بانتظار الـ ERP',
                'rejected'                  => 'مرفوض',
            ];
        @endphp
        <div class="flex gap-2 overflow-x-auto -mx-1 px-1 pb-1 [&::-webkit-scrollbar]:hidden" style="scrollbar-width:none;">
            @foreach($statuses 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>

        <!-- Customers List -->
        <div class="space-y-3">
            @forelse($customers as $c)
                @php
                    $statusColor = match($c->status) {
                        'completed_in_erp' => 'bg-emerald-50 border-emerald-100 text-emerald-600',
                        'pending_supervisor_review' => 'bg-amber-50 border-amber-100 text-amber-600',
                        'pending_admin_erp_entry' => 'bg-blue-50 border-blue-100 text-[#00316D]',
                        'rejected' => 'bg-red-50 border-red-100 text-red-600',
                        default => 'bg-slate-100 border-slate-200 text-slate-500',
                    };
                    $statusLabel = match($c->status) {
                        'completed_in_erp' => 'نشط / مكتمل في ERP',
                        'pending_supervisor_review' => 'بانتظار المشرف',
                        'pending_admin_erp_entry' => 'بانتظار الإدخال للـ ERP',
                        'rejected' => 'مرفوض',
                        default => 'ملغي',
                    };
                @endphp
                <div class="bg-white rounded-3xl border border-slate-100 p-5 shadow-sm space-y-3">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h4 class="font-bold text-slate-800 text-sm leading-tight">{{ $c->name_ar ?: $c->name }}</h4>
                            @if($c->name_ar)
                                <p class="text-[11px] text-slate-400 mt-0.5">{{ $c->name }}</p>
                            @endif
                            <p class="text-xs text-slate-400 mt-1 font-mono">{{ $c->erp_customer_code ?? 'كود المؤقت: Pending' }}</p>
                        </div>
                        <span class="text-[9px] font-bold px-2.5 py-0.5 rounded-full border {{ $statusColor }} shrink-0">
                            {{ $statusLabel }}
                        </span>
                    </div>

                    <div class="grid grid-cols-2 gap-2 text-xs text-slate-500 pt-3 border-t border-slate-50">
                        <div>
                            <span class="text-[10px] text-slate-400 block mb-0.5">الشخص المسؤول:</span>
                            <span class="font-medium text-slate-700">{{ $c->contact_person ?? '—' }}</span>
                        </div>
                        <div>
                            <span class="text-[10px] text-slate-400 block mb-0.5">رقم الجوال:</span>
                            <span class="font-mono font-medium text-slate-700" dir="ltr">{{ $c->phone }}</span>
                        </div>
                        <div class="col-span-2">
                            <span class="text-[10px] text-slate-400 block mb-0.5">العنوان والمدينة:</span>
                            <span class="font-medium text-slate-700">{{ $c->city }} - {{ $c->district ?? 'حي غير محدد' }}</span>
                        </div>
                    </div>

                    <!-- Create order for this customer (eligible customers only) -->
                    @if($c->status === 'completed_in_erp')
                        <a href="{{ route('agent.orders', ['customer' => $c->id]) }}" wire:navigate
                           class="flex items-center justify-center gap-1.5 rounded-xl bg-[#00316D] py-2.5 text-xs font-bold text-white shadow-md shadow-[#00316D]/10 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" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                            إنشاء طلب لهذا العميل
                        </a>
                    @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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857"/>
                        </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 Form View -->
        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm p-6 space-y-4" x-data="{
            gettingLocation: false,
            fetchGps() {
                this.gettingLocation = true;
                if (!navigator.geolocation) {
                    alert('تحديد الموقع غير مدعوم في هذا المتصفح.');
                    this.gettingLocation = false;
                    return;
                }
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        @this.set('geo_latitude', position.coords.latitude);
                        @this.set('geo_longitude', position.coords.longitude);
                        this.gettingLocation = false;
                    },
                    (error) => {
                        alert('فشل الحصول على الموقع الجغرافي: ' + error.message);
                        this.gettingLocation = false;
                    },
                    { enableHighAccuracy: true, timeout: 8000 }
                );
            }
        }">
            <!-- Form Header -->
            <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>

            <!-- Form Body -->
            <form wire:submit.prevent="save" class="space-y-4 text-xs">
                
                <!-- Main Info -->
                <div class="space-y-3">
                    <div>
                        <label class="block font-bold text-slate-500 mb-1.5">اسم المحل (عربي) *</label>
                        <input wire:model.defer="name_ar" type="text" dir="rtl" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-right focus:outline-none focus:ring-2 focus:ring-[#00316D]/10" placeholder="مثال: ورشة الأمانة المتميزة" required>
                        @error('name_ar') <p class="mt-1 text-[10px] text-red-500 font-semibold">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block font-bold text-slate-500 mb-1.5">اسم المحل (إنجليزي) *</label>
                        <input wire:model.defer="name" type="text" dir="ltr" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-left focus:outline-none focus:ring-2 focus:ring-[#00316D]/10" placeholder="e.g. Al-Amana Premium Workshop" required>
                        @error('name') <p class="mt-1 text-[10px] text-red-500 font-semibold">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">المدينة *</label>
                            <input wire:model.defer="city" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="الرياض" required>
                            @error('city') <p class="mt-1 text-[10px] text-red-500 font-semibold">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">المنطقة / المقاطعة</label>
                            <input wire:model.defer="province" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="الوسطى">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">رقم الجوال *</label>
                            <input wire:model.defer="phone" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none text-left font-mono" placeholder="0500000000" dir="ltr" required>
                            @error('phone') <p class="mt-1 text-[10px] text-red-500 font-semibold">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">الشخص المسؤول</label>
                            <input wire:model.defer="contact_person" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="أحمد الحربي">
                        </div>
                    </div>
                </div>

                <!-- VAT & CR -->
                <div class="space-y-3 pt-3 border-t border-slate-50">
                    <h4 class="font-bold text-[#00316D] text-[10px]">بيانات التسجيل التجاري والضريبي (اختياري)</h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">الرقم الضريبي</label>
                            <input wire:model.defer="vat_number" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none text-left font-mono" placeholder="300000000000003" dir="ltr">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">رقم السجل التجاري</label>
                            <input wire:model.defer="commercial_reg_no" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none text-left font-mono" placeholder="1010000000" dir="ltr">
                        </div>
                    </div>
                    <div>
                        <label class="block font-bold text-slate-500 mb-1.5">البريد الإلكتروني</label>
                        <input wire:model.defer="email" type="email" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none text-left font-mono" placeholder="customer@mail.com" dir="ltr">
                    </div>
                </div>

                <!-- GPS Location capture -->
                <div class="space-y-3 pt-3 border-t border-slate-50">
                    <h4 class="font-bold text-[#00316D] text-[10px]">الموقع الجغرافي GPS *</h4>
                    
                    <div class="flex items-center gap-3">
                        <button type="button" @click="fetchGps" 
                                class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-white py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-50 transition-colors">
                            <svg class="h-4 w-4 text-[#00316D]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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"/></svg>
                            <span x-text="gettingLocation ? 'جاري جلب الإحداثيات…' : 'الحصول على الموقع الحالي'"></span>
                        </button>
                    </div>

                    @if($geo_latitude && $geo_longitude)
                        <div class="rounded-xl bg-emerald-50/50 border border-emerald-100 p-3 text-[10px] font-mono text-emerald-700 flex justify-between">
                            <span>Lat: {{ $geo_latitude }}</span>
                            <span>Lng: {{ $geo_longitude }}</span>
                        </div>
                    @else
                        @error('geo_latitude') 
                            <p class="mt-1 text-[10px] text-red-500 font-semibold">موقع GPS مطلوب لإنشاء العميل.</p> 
                        @enderror
                    @endif
                </div>

                <!-- Address -->
                <div class="space-y-3 pt-3 border-t border-slate-50">
                    <h4 class="font-bold text-[#00316D] text-[10px]">العنوان الوطني</h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">الحي</label>
                            <input wire:model.defer="district" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="الصحافة">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">اسم الشارع</label>
                            <input wire:model.defer="street_name" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="طريق الملك عبدالعزيز">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">رقم المبنى</label>
                            <input wire:model.defer="building_number" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="7430">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-500 mb-1.5">الرمز البريدي</label>
                            <input wire:model.defer="postal_code" type="text" class="w-full rounded-xl border border-slate-200 px-3 py-2.5 focus:outline-none" placeholder="13315">
                        </div>
                    </div>
                </div>

                <!-- Submit -->
                <div class="pt-4">
                    <button type="submit" 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 shadow-[#00316D]/10 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>حفظ طلب الإضافة وإرساله للمراجعة</span>
                    </button>
                </div>

            </form>
        </div>
    @endif
</div>