<?php $__env->startSection('content'); ?>
<div x-data="{
    showEditModal: <?php echo e($errors->any() ? 'true' : 'false'); ?>,
    editItem: {
        id: '<?php echo e(old('id') ?? ''); ?>',
        name: '<?php echo e(old('name') ?? ''); ?>',
        phone: '<?php echo e(old('phone') ?? ''); ?>',
        address: '<?php echo e(old('address') ?? ''); ?>',
        titik_koordinat: '<?php echo e(old('titik_koordinat') ?? ''); ?>'
    }
}">
    <div class="space-y-6">
        
        <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="<?php echo e(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>

        
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
            
            <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="<?php echo e(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="<?php echo e($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>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(!empty($search)): ?>
                        <a href="<?php echo e(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>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php 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"><?php echo e($customers->count()); ?></span>
                </div>
            </div>

            
            <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">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                        <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">
                                        <?php echo e(strtoupper(substr($customer->name, 0, 1))); ?>

                                    </div>
                                    <div>
                                        <p class="font-black text-slate-700 text-sm leading-tight"><?php echo e($customer->name); ?></p>
                                        <p class="text-[9px] text-slate-400 font-bold tracking-wider uppercase mt-1"><?php echo e($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>
                                    <?php echo e($customer->phone ?? 'Tidak ada WA'); ?>

                                </div>
                                <div class="text-slate-400 mt-1.5 max-w-sm truncate text-xs font-medium">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php 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);
                                            }
                                        ?>
                                        <a href="<?php echo e($mapsUrl); ?>" 
                                           target="_blank" 
                                           class="text-blue-600 hover:text-blue-800 hover:underline inline-flex items-center gap-1"
                                           title="<?php echo e(!empty($koordinat) ? 'Lihat di Maps (Koordinat GPS)' : 'Cari di Maps (Alamat Teks)'); ?>">
                                            <i data-lucide="<?php echo e(!empty($koordinat) ? 'map-pin' : 'navigation'); ?>" class="w-3 h-3 shrink-0 text-slate-400"></i>
                                            <span><?php echo e($customer->address); ?></span>
                                        </a>
                                    <?php else: ?>
                                        —
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php 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: '<?php echo e($customer->customers_id); ?>',
                                                name: '<?php echo e(addslashes($customer->name)); ?>',
                                                phone: '<?php echo e($customer->phone); ?>',
                                                address: '<?php echo e(addslashes($customer->address)); ?>',
                                                titik_koordinat: '<?php echo e($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="<?php echo e(route('admin.pelanggan.destroy', $customer->customers_id)); ?>" method="POST" class="m-0 p-0">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('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>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                        <tr>
                            <td colspan="3" class="py-12 text-center text-slate-400 font-bold italic">Belum ada data pelanggan</td>
                        </tr>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </tbody>
                </table>
            </div>

            
            <div class="block md:hidden divide-y divide-slate-100">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                <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">
                                <?php echo e(strtoupper(substr($customer->name, 0, 1))); ?>

                            </div>
                            <div>
                                <h4 class="font-bold text-slate-850 text-sm leading-tight"><?php echo e($customer->name); ?></h4>
                                <span class="text-[9px] text-slate-400 font-bold tracking-wider uppercase block mt-1"><?php echo e($customer->customers_id); ?></span>
                            </div>
                        </div>
                        <div class="flex items-center gap-1.5">
                                <button @click="editItem = {
                                            id: '<?php echo e($customer->customers_id); ?>',
                                            name: '<?php echo e(addslashes($customer->name)); ?>',
                                            phone: '<?php echo e($customer->phone); ?>',
                                            address: '<?php echo e(addslashes($customer->address)); ?>',
                                            titik_koordinat: '<?php echo e($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="<?php echo e(route('admin.pelanggan.destroy', $customer->customers_id)); ?>" method="POST" class="m-0 p-0">
                                     <?php echo csrf_field(); ?>
                                     <?php echo method_field('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><?php echo e($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">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php 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);
                                        }
                                    ?>
                                    <a href="<?php echo e($mapsUrl); ?>" target="_blank" class="text-blue-600 hover:underline break-all">
                                        <?php echo e($customer->address); ?>

                                    </a>
                                <?php else: ?>
                                    <span class="italic text-slate-400">Belum ada alamat</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                <div class="p-12 text-center text-slate-400 font-bold italic text-sm">
                    Belum ada data pelanggan
                </div>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        </div>
    </div>

    
    <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="`<?php echo e(url('/admin/pelanggan')); ?>/${editItem.id}`" method="POST" class="p-8 space-y-4">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('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">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-xs mt-1 block font-bold"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </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">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-xs mt-1 block font-bold"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </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>
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['address'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-xs mt-1 block font-bold"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </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">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['titik_koordinat'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="text-red-500 text-xs mt-1 block font-bold"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </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>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('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>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin_sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\LPG\resources\views/admin/pelanggan.blade.php ENDPATH**/ ?>