@extends('layouts.admin_sidebar')

@section('content')
<div x-data="{
    showEditModal: {{ $errors->any() ? 'true' : 'false' }},
    editItem: {
        id: '{{ old('id') ?? '' }}',
        name: '{{ old('name') ?? '' }}',
        phone: '{{ old('phone') ?? '' }}',
        address: '{{ old('address') ?? '' }}',
        titik_koordinat: '{{ old('titik_koordinat') ?? '' }}'
    }
}">
    <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">
                <form action="{{ route('admin.pelanggan') }}" method="GET" class="relative flex-1 max-w-md flex gap-2">
                    <div class="relative flex-1">
                        <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" name="search" value="{{ $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>
                    @if(!empty($search))
                        <a href="{{ route('admin.pelanggan') }}" class="px-4 py-3 bg-slate-100 hover:bg-slate-200 rounded-xl text-slate-650 font-bold text-xs flex items-center justify-center transition-colors">
                            Reset
                        </a>
                    @endif
                </form>
                <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 items-center">
                                    <button @click="editItem = {
                                                id: '{{ $customer->customers_id }}',
                                                name: '{{ addslashes($customer->name) }}',
                                                phone: '{{ $customer->phone }}',
                                                address: '{{ addslashes($customer->address) }}',
                                                titik_koordinat: '{{ $customer->titik_koordinat }}'
                                            }; showEditModal = true"
                                            class="p-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-all shadow-md shadow-blue-600/20 active:scale-95"
                                            title="Edit Pelanggan">
                                        <i data-lucide="pencil" class="w-4 h-4"></i>
                                    </button>
                                    <form action="{{ route('admin.pelanggan.destroy', $customer->customers_id) }}" method="POST" class="m-0 p-0">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" onclick="confirmDeleteCustomer(this)"
                                                class="p-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl transition-all shadow-md shadow-red-600/20 active:scale-95"
                                                title="Hapus Pelanggan">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                </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 @click="editItem = {
                                            id: '{{ $customer->customers_id }}',
                                            name: '{{ addslashes($customer->name) }}',
                                            phone: '{{ $customer->phone }}',
                                            address: '{{ addslashes($customer->address) }}',
                                            titik_koordinat: '{{ $customer->titik_koordinat }}'
                                        }; showEditModal = true"
                                        class="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm active:scale-95">
                                    <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
                                </button>
                                 <form action="{{ route('admin.pelanggan.destroy', $customer->customers_id) }}" method="POST" class="m-0 p-0">
                                     @csrf
                                     @method('DELETE')
                                     <button type="button" onclick="confirmDeleteCustomer(this)"
                                             class="p-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors shadow-sm active:scale-95">
                                         <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                     </button>
                                 </form>
                            </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 ===== --}}
    <template x-teleport="body">
        <div x-show="showEditModal" 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="showEditModal = 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="showEditModal = 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 :action="`{{ url('/admin/pelanggan') }}/${editItem.id}`" method="POST" class="p-8 space-y-4">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" :value="editItem.id">
                    
                    <div>
                        <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Nama Pelanggan</label>
                        <input type="text" name="name" :value="editItem.name" @input="editItem.name = $event.target.value" 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" name="phone" :value="editItem.phone" @input="editItem.phone = $event.target.value" 
                               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 name="address" rows="2" :value="editItem.address" @input="editItem.address = $event.target.value"
                                  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="edit_titik_koordinat" name="titik_koordinat" :value="editItem.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="showEditModal = 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"
                            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 text-sm">
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });

    function confirmDeleteCustomer(button) {
        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) {
                button.closest('form').submit();
            }
        });
    }
</script>
@endpush