<div x-data="{
    showModal: @entangle('showModal'),
    isEdit: @entangle('isEdit')
}">
    <div class="space-y-6">
        {{-- ===== PAGE HEADER ===== --}}
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center bg-white p-6 md:p-8 rounded-[2rem] md:rounded-[2.5rem] shadow-sm border border-slate-100 gap-4">
            <div>
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-gas3kg/10 text-gas3kg rounded-full text-[10px] font-black uppercase tracking-wider mb-3">
                    <i data-lucide="users" class="w-3 h-3"></i> Pelanggan
                </div>
                <h1 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none">Master Pelanggan</h1>
                <p class="text-slate-400 text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] mt-2">Kelola data pelanggan dan titik koordinat pengiriman</p>
            </div>
            
            <a href="{{ route('register') }}"
               class="inline-flex items-center justify-center gap-2 bg-gas3kg hover:bg-green-700 text-white font-black text-sm px-6 py-3.5 rounded-xl transition-all shadow-lg shadow-gas3kg/25">
                <i data-lucide="user-plus" class="w-4 h-4"></i> Tambah Pelanggan
            </a>
        </div>

        {{-- ===== DATA TABLE & LIST ===== --}}
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
            {{-- Filter & Total Stats --}}
            <div class="p-6 border-b border-slate-100 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
                <div class="relative flex-1 max-w-md">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                        <i data-lucide="search" class="w-4 h-4 text-slate-400"></i>
                    </div>
                    <input type="text" wire:model.live.debounce.300ms="search"
                           placeholder="Cari nama atau nomor WA..."
                           class="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all">
                </div>
                <div class="text-xs text-slate-400 font-bold bg-slate-50 px-4 py-2 rounded-xl border border-slate-100 self-start sm:self-auto flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-gas3kg animate-pulse"></span>
                    Total Pelanggan: <span class="text-slate-800 font-black">{{ $customers->count() }}</span>
                </div>
            </div>

            {{-- Desktop View --}}
            <div class="hidden md:block overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-slate-50/70 text-slate-400 text-[10px] uppercase font-black tracking-widest border-b border-slate-100">
                            <th class="px-6 py-4">Nama Pelanggan</th>
                            <th class="px-6 py-4">Kontak & Alamat</th>
                            <th class="px-6 py-4 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @forelse($customers as $customer)
                        <tr class="hover:bg-slate-50/60 transition-colors">
                            <td class="px-6 py-4.5">
                                <div class="flex items-center gap-3.5">
                                    <div class="w-10 h-10 rounded-2xl bg-gas3kg/10 text-gas3kg flex items-center justify-center font-black text-sm">
                                        {{ strtoupper(substr($customer->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <p class="font-black text-slate-700 text-sm leading-tight">{{ $customer->name }}</p>
                                        <p class="text-[9px] text-slate-400 font-bold tracking-wider uppercase mt-1">{{ $customer->customers_id }}</p>
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-4.5">
                                <div class="text-xs font-bold text-slate-700 flex items-center gap-1.5">
                                    <i data-lucide="phone" class="w-3.5 h-3.5 text-slate-400"></i>
                                    {{ $customer->phone ?? 'Tidak ada WA' }}
                                </div>
                                <div class="text-slate-400 mt-1.5 max-w-sm truncate text-xs font-medium">
                                    @if(!empty($customer->address))
                                        @php
                                            $koordinat = trim($customer->titik_koordinat ?? '');
                                            if (!empty($koordinat)) {
                                                $mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' . urlencode($koordinat);
                                            } else {
                                                $mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' . urlencode($customer->address);
                                            }
                                        @endphp
                                        <a href="{{ $mapsUrl }}" 
                                           target="_blank" 
                                           class="text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center gap-1"
                                           title="{{ !empty($koordinat) ? 'Lihat di Maps (Koordinat GPS)' : 'Cari di Maps (Alamat Teks)' }}">
                                            <i data-lucide="{{ !empty($koordinat) ? 'map-pin' : 'navigation' }}" class="w-3 h-3 shrink-0 text-slate-400"></i>
                                            <span>{{ $customer->address }}</span>
                                        </a>
                                    @else
                                        —
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4.5 text-right">
                                <div class="flex justify-end gap-2">
                                    <button wire:click="openEditModal('{{ $customer->customers_id }}')"
                                            class="p-2.5 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors"
                                            title="Edit Pelanggan">
                                        <i data-lucide="pencil" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button"
                                            x-on:click="
                                                Swal.fire({
                                                    title: 'Hapus Pelanggan?',
                                                    text: 'Hapus pelanggan ini beserta akun login terkait?',
                                                    icon: 'warning',
                                                    showCancelButton: true,
                                                    confirmButtonColor: '#ef4444',
                                                    cancelButtonColor: '#94a3b8',
                                                    confirmButtonText: 'Ya, Hapus!',
                                                    cancelButtonText: 'Batal'
                                                }).then((result) => {
                                                    if (result.isConfirmed) {
                                                        $wire.delete('{{ $customer->customers_id }}')
                                                    }
                                                })
                                            "
                                            class="p-2.5 bg-red-50 text-red-600 rounded-xl hover:bg-red-100 transition-colors"
                                            title="Hapus Pelanggan">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="py-12 text-center text-slate-400 font-bold italic">Belum ada data pelanggan</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Mobile Responsive Card View --}}
            <div class="block md:hidden divide-y divide-slate-100">
                @forelse($customers as $customer)
                <div class="p-5 space-y-3.5 hover:bg-slate-50/40 transition-colors">
                    <div class="flex justify-between items-start gap-3">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-xl bg-gas3kg/10 text-gas3kg flex items-center justify-center font-black text-xs shrink-0">
                                {{ strtoupper(substr($customer->name, 0, 1)) }}
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-850 text-sm leading-tight">{{ $customer->name }}</h4>
                                <span class="text-[9px] text-slate-400 font-bold tracking-wider uppercase block mt-1">{{ $customer->customers_id }}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-1.5">
                            <button wire:click="openEditModal('{{ $customer->customers_id }}')"
                                    class="p-2 bg-blue-50 text-blue-650 rounded-lg hover:bg-blue-100 transition-colors">
                                <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
                            </button>
                            <button type="button"
                                    x-on:click="
                                        Swal.fire({
                                            title: 'Hapus Pelanggan?',
                                            text: 'Hapus pelanggan ini beserta akun login terkait?',
                                            icon: 'warning',
                                            showCancelButton: true,
                                            confirmButtonColor: '#ef4444',
                                            cancelButtonColor: '#94a3b8',
                                            confirmButtonText: 'Ya, Hapus!',
                                            cancelButtonText: 'Batal'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                $wire.delete('{{ $customer->customers_id }}')
                                            }
                                        })
                                    "
                                    class="p-2 bg-red-50 text-red-650 rounded-lg hover:bg-red-100 transition-colors">
                                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="space-y-2 border-t border-slate-50 pt-3 text-xs">
                        <div class="flex items-center gap-2 text-slate-600 font-semibold">
                            <i data-lucide="phone" class="w-3.5 h-3.5 text-slate-400 shrink-0"></i>
                            <span>{{ $customer->phone ?? 'Tidak ada WA' }}</span>
                        </div>
                        <div class="flex items-start gap-2 text-slate-500 font-medium">
                            <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-400 shrink-0 mt-0.5"></i>
                            <div class="min-w-0 flex-1 leading-normal">
                                @if(!empty($customer->address))
                                    @php
                                        $koordinat = trim($customer->titik_koordinat ?? '');
                                        if (!empty($koordinat)) {
                                            $mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' . urlencode($koordinat);
                                        } else {
                                            $mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' . urlencode($customer->address);
                                        }
                                    @endphp
                                    <a href="{{ $mapsUrl }}" target="_blank" class="text-blue-600 hover:underline break-all">
                                        {{ $customer->address }}
                                    </a>
                                @else
                                    <span class="italic text-slate-400">Belum ada alamat</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="p-12 text-center text-slate-400 font-bold italic text-sm">
                    Belum ada data pelanggan
                </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- ===== MODAL EDIT PELANGGAN ===== --}}
    <div x-show="showModal" x-cloak
         class="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">

        <div class="bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden transform transition-all"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="scale-95 opacity-0"
             x-transition:enter-end="scale-100 opacity-100"
             @click.away="showModal = false">

            <div class="px-8 py-6 border-b border-slate-100 flex items-center justify-between">
                <h2 class="text-lg font-black text-slate-800">Edit Pelanggan</h2>
                <button @click="showModal = false" class="text-slate-400 hover:text-red-500 transition-colors p-1.5 rounded-lg hover:bg-slate-50">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form wire:submit.prevent="save" class="p-8 space-y-4">
                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Nama Pelanggan</label>
                    <input type="text" wire:model.blur="name" required 
                           class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold text-slate-700 text-sm focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all">
                    @error('name') <span class="text-red-500 text-xs mt-1 block font-bold">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">WhatsApp</label>
                    <input type="text" wire:model.blur="phone" 
                           class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold text-slate-700 text-sm focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all">
                    @error('phone') <span class="text-red-500 text-xs mt-1 block font-bold">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Alamat</label>
                    <textarea wire:model.blur="address" rows="2" 
                              class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold text-slate-700 text-sm focus:outline-none focus:border-gas3kg focus:ring-2 focus:ring-gas3kg/10 transition-all resize-none"></textarea>
                    @error('address') <span class="text-red-500 text-xs mt-1 block font-bold">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Titik Koordinat</label>
                    <input type="text" id="titik_koordinat_input" wire:model="titik_koordinat" readonly 
                           class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-100 font-bold text-slate-500 text-sm cursor-not-allowed select-none focus:outline-none transition-all">
                    @error('titik_koordinat') <span class="text-red-500 text-xs mt-1 block font-bold">{{ $message }}</span> @enderror
                </div>

                <div class="pt-4 flex gap-3">
                    <button type="button" @click="showModal = false" 
                            class="flex-1 py-3.5 px-6 bg-slate-100 text-slate-650 rounded-2xl font-bold hover:bg-slate-200 transition-all text-sm">Batal</button>
                    <button type="submit"
                        wire:loading.attr="disabled"
                        wire:target="save"
                        class="flex-1 py-3.5 px-6 bg-gas3kg text-white rounded-2xl font-bold shadow-lg shadow-gas3kg/20 hover:bg-green-700 transition-all disabled:opacity-60 flex items-center justify-center gap-2 text-sm">
                        <span wire:loading.remove wire:target="save">Simpan Perubahan</span>
                        <span wire:loading wire:target="save" class="flex items-center gap-2">
                            <svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            Menyimpan...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@script
<script>
    $wire.on('refresh-lucide', () => {
        setTimeout(() => {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 100);
    });
</script>
@endscript
