<div x-data>

    
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Customer</h1>
            <p class="text-sm text-slate-500 mt-0.5">Kelola seluruh customer terdaftar dan tamu.</p>
        </div>
    </div>

    
    <div class="flex flex-wrap gap-2 mb-4">
        <button type="button" wire:click="$set('filterStatus', '')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                <?php echo e($filterStatus === '' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'); ?>">
            Semua
        </button>
        <button type="button" wire:click="$set('filterStatus', 'active')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                <?php echo e($filterStatus === 'active' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'); ?>">
            Aktif
        </button>
        <button type="button" wire:click="$set('filterStatus', 'inactive')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                <?php echo e($filterStatus === 'inactive' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'); ?>">
            Tidak Aktif
        </button>
        <button type="button" wire:click="$set('filterStatus', 'has_order')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                <?php echo e($filterStatus === 'has_order' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'); ?>">
            Sudah Pernah Order
        </button>
        <button type="button" wire:click="$set('filterStatus', 'no_order')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                <?php echo e($filterStatus === 'no_order' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'); ?>">
            Belum Pernah Order
        </button>
    </div>

    
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-slate-500 mb-1">Cari</label>
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-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 0z"/>
                    </svg>
                    <input wire:model.live.debounce.400ms="search" type="text"
                        placeholder="Nama / Email / No. HP..."
                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Urutkan</label>
                <select wire:model.live="sortBy"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                    <option value="newest">Terbaru</option>
                    <option value="oldest">Terlama</option>
                    <option value="name_asc">Nama A-Z</option>
                    <option value="name_desc">Nama Z-A</option>
                    <option value="spent_desc">Total Belanja Terbesar</option>
                    <option value="spent_asc">Total Belanja Terkecil</option>
                </select>
            </div>
        </div>
    </div>

    
    <div wire:loading.flex wire:target="filterStatus, search, sortBy, perPage"
        class="items-center gap-2 text-sm text-slate-400 mb-3">
        <svg class="animate-spin w-4 h-4 text-orange-500" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        Memuat data...
    </div>

    
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden" wire:loading.class="opacity-60" wire:target="filterStatus, search, sortBy, perPage">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Customer</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Nomor HP</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Email</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Total Pesanan</th>
                        <th class="text-right px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Total Belanja</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Bergabung</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Status</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $customer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-slate-50 transition-colors" wire:key="customer-<?php echo e($customer->type); ?>-<?php echo e($customer->id); ?>">
                            
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                                        <span class="text-orange-700 font-bold text-sm">
                                            <?php echo e(strtoupper(substr($customer->name, 0, 1))); ?>

                                        </span>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-medium text-slate-800 truncate max-w-44"><?php echo e($customer->name); ?></p>
                                        <p class="text-xs text-slate-400">
                                            <?php echo e($customer->type === 'user' ? 'Member' : 'Guest'); ?>

                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-slate-600 whitespace-nowrap"><?php echo e($customer->phone ?? '—'); ?></td>
                            <td class="px-4 py-3 text-slate-600"><?php echo e($customer->email ?? '—'); ?></td>
                            <td class="px-4 py-3 text-center text-slate-700 font-medium"><?php echo e($customer->orders_count); ?></td>
                            <td class="px-4 py-3 text-right text-slate-800 font-semibold whitespace-nowrap">
                                Rp <?php echo e(number_format($customer->orders_sum, 0, ',', '.')); ?>

                            </td>
                            <td class="px-4 py-3 text-slate-600 whitespace-nowrap">
                                <?php echo e($customer->joined_at?->format('d M Y') ?? '—'); ?>

                            </td>
                            <td class="px-4 py-3 text-center">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($customer->type === 'user'): ?>
                                    <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold
                                        <?php echo e($customer->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'); ?>">
                                        <?php echo e($customer->is_active ? 'Aktif' : 'Tidak Aktif'); ?>

                                    </span>
                                <?php else: ?>
                                    <span class="text-slate-400 text-xs">—</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="<?php echo e(route('admin.customer.show', ['type' => $customer->type, 'id' => $customer->id])); ?>" wire:navigate
                                        class="p-1.5 text-slate-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
                                        title="Detail">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    </a>

                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($customer->type === 'user'): ?>
                                        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('customer.deactivate')): ?>
                                            <button type="button" wire:click="toggleActive('user', <?php echo e($customer->id); ?>)"
                                                class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
                                                title="<?php echo e($customer->is_active ? 'Nonaktifkan' : 'Aktifkan'); ?>">
                                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($customer->is_active): ?>
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                                    </svg>
                                                <?php else: ?>
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75l6 6 9-13.5"/>
                                                    </svg>
                                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                            </button>
                                        <?php endif; ?>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="8" class="px-4 py-16 text-center">
                                <svg class="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                                </svg>
                                <p class="text-slate-400">Belum ada data customer.</p>
                            </td>
                        </tr>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </tbody>
            </table>
        </div>

        
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-slate-100">
            <div class="flex items-center gap-2 text-sm text-slate-500">
                <span>Tampilkan</span>
                <select wire:model.live="perPage"
                    class="px-2 py-1 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>data per halaman</span>
            </div>
            <div><?php echo e($customers->links()); ?></div>
        </div>
    </div>

    <?php if (isset($component)) { $__componentOriginal30b09ba64d8f9e6b0023e860875d7bb6 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal30b09ba64d8f9e6b0023e860875d7bb6 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.admin.toast','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('admin.toast'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal30b09ba64d8f9e6b0023e860875d7bb6)): ?>
<?php $attributes = $__attributesOriginal30b09ba64d8f9e6b0023e860875d7bb6; ?>
<?php unset($__attributesOriginal30b09ba64d8f9e6b0023e860875d7bb6); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal30b09ba64d8f9e6b0023e860875d7bb6)): ?>
<?php $component = $__componentOriginal30b09ba64d8f9e6b0023e860875d7bb6; ?>
<?php unset($__componentOriginal30b09ba64d8f9e6b0023e860875d7bb6); ?>
<?php endif; ?>
</div>
<?php /**PATH C:\laragon\www\titipin-babe\resources\views/livewire/admin/customer/index.blade.php ENDPATH**/ ?>