<?php $__env->startSection('title', 'Manajemen Pelanggan & Booking - Admin MY HUB'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-8 pb-12" x-data="{ 
    showEditModal: false, 
    editCustomer: { id: null, name: '', email: '', phone: '' } 
}">
    <!-- Header -->
    <div class="bg-surface-container-lowest border border-outline-variant/80 rounded-3xl p-6 sm:p-8 shadow-sm">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <div class="flex items-center gap-2 text-xs font-bold text-secondary uppercase tracking-wider mb-1">
                    <a href="<?php echo e(route('admin.dashboard')); ?>" class="hover:underline">Dashboard</a>
                    <span>/</span>
                    <span>Pelanggan &amp; Booking</span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-on-surface tracking-tight">Manajemen Pelanggan &amp; Riwayat Booking</h1>
                <p class="text-xs sm:text-sm text-on-surface-variant mt-1">Pantau seluruh profil pelanggan terdaftar, riwayat reservasi cuci mobil/motor, serta kelola data akun pelanggan.</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="<?php echo e(route('admin.dashboard')); ?>"
                    class="inline-flex items-center gap-1.5 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface px-4 py-2.5 text-xs font-bold border border-outline-variant transition-colors">
                    <span class="material-symbols-outlined text-[16px]">dashboard</span>
                    <span>Kembali ke Dashboard</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Error / Status Alerts -->
    <?php if($errors->any()): ?>
        <div class="rounded-2xl bg-rose-50 border border-rose-200 p-4 text-xs font-semibold text-rose-800 space-y-1">
            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <p class="flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[16px]">error</span>
                    <span><?php echo e($error); ?></span>
                </p>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    <?php endif; ?>

    <!-- KPI Metric Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="p-5 rounded-2xl bg-surface-container-lowest border border-outline-variant/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider block">Total Pelanggan</span>
                <span class="text-2xl font-black text-secondary mt-1 block"><?php echo e($stats['total_customers']); ?></span>
                <span class="text-[11px] text-on-surface-variant mt-0.5 block">Akun customer terdaftar</span>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-amber-50 border border-amber-200 flex items-center justify-center text-[#92690B]">
                <span class="material-symbols-outlined text-2xl">group</span>
            </div>
        </div>

        <div class="p-5 rounded-2xl bg-surface-container-lowest border border-outline-variant/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider block">Pelanggan Aktif</span>
                <span class="text-2xl font-black text-emerald-700 mt-1 block"><?php echo e($stats['active_bookers']); ?></span>
                <span class="text-[11px] text-on-surface-variant mt-0.5 block">Pernah melakukan booking</span>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-200 flex items-center justify-center text-emerald-700">
                <span class="material-symbols-outlined text-2xl">verified_user</span>
            </div>
        </div>

        <div class="p-5 rounded-2xl bg-surface-container-lowest border border-outline-variant/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider block">Total Reservasi Masuk</span>
                <span class="text-2xl font-black text-on-surface mt-1 block"><?php echo e($stats['total_bookings']); ?></span>
                <span class="text-[11px] text-on-surface-variant mt-0.5 block">Seluruh riwayat booking</span>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-blue-50 border border-blue-200 flex items-center justify-center text-blue-700">
                <span class="material-symbols-outlined text-2xl">local_car_wash</span>
            </div>
        </div>

        <div class="p-5 rounded-2xl bg-surface-container-lowest border border-outline-variant/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider block">Total Nilai Transaksi</span>
                <span class="text-xl sm:text-2xl font-black text-secondary mt-1 block">Rp <?php echo e(number_format($stats['total_revenue'], 0, ',', '.')); ?></span>
                <span class="text-[11px] text-on-surface-variant mt-0.5 block">Akumulasi cuci lunas</span>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-amber-50 border border-amber-200 flex items-center justify-center text-[#92690B]">
                <span class="material-symbols-outlined text-2xl">payments</span>
            </div>
        </div>
    </div>

    <!-- Filter & Search Toolbar -->
    <div class="bg-surface-container-lowest border border-outline-variant/80 rounded-3xl p-5 shadow-sm">
        <form method="GET" action="<?php echo e(route('admin.customers.index')); ?>" class="flex flex-col sm:flex-row items-center justify-between gap-4">
            <!-- Search Bar -->
            <div class="relative w-full sm:w-96">
                <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-[18px] text-on-surface-variant">search</span>
                <input type="text" name="q" value="<?php echo e($search); ?>" placeholder="Cari nama, email, no HP, plat nomor, kode booking..."
                    class="w-full pl-10 pr-4 py-2 rounded-xl bg-surface-container-low border border-outline-variant text-xs sm:text-sm text-on-surface placeholder-on-surface-variant/60 focus:border-secondary focus:bg-white focus:outline-none">
            </div>

            <div class="flex items-center gap-3 w-full sm:w-auto justify-between sm:justify-end">
                <!-- Sorting dropdown -->
                <div class="flex items-center gap-2">
                    <label for="sort" class="text-xs font-bold text-on-surface-variant shrink-0">Urutkan:</label>
                    <select id="sort" name="sort" onchange="this.form.submit()"
                        class="rounded-xl bg-surface-container-low border border-outline-variant px-3 py-2 text-xs font-semibold text-on-surface focus:border-secondary focus:bg-white focus:outline-none">
                        <option value="latest" <?php echo e($sortBy === 'latest' ? 'selected' : ''); ?>>Terbaru Bergabung</option>
                        <option value="most_bookings" <?php echo e($sortBy === 'most_bookings' ? 'selected' : ''); ?>>Booking Terbanyak</option>
                        <option value="highest_spending" <?php echo e($sortBy === 'highest_spending' ? 'selected' : ''); ?>>Total Belanja Tertinggi</option>
                        <option value="name_asc" <?php echo e($sortBy === 'name_asc' ? 'selected' : ''); ?>>Nama (A - Z)</option>
                        <option value="oldest" <?php echo e($sortBy === 'oldest' ? 'selected' : ''); ?>>Terlama</option>
                    </select>
                </div>

                <?php if($search !== '' || $sortBy !== 'latest'): ?>
                    <a href="<?php echo e(route('admin.customers.index')); ?>"
                        class="text-xs font-bold text-rose-600 hover:underline inline-flex items-center gap-1">
                        <span class="material-symbols-outlined text-[14px]">clear</span>
                        <span>Reset</span>
                    </a>
                <?php endif; ?>
            </div>
        </form>
    </div>

    <!-- Customer List Cards -->
    <?php if($customers->isEmpty()): ?>
        <div class="bg-surface-container-lowest border border-outline-variant/80 rounded-3xl p-12 text-center text-on-surface-variant space-y-3 shadow-sm">
            <span class="material-symbols-outlined text-5xl text-slate-400 block mx-auto">person_off</span>
            <p class="text-base font-bold text-on-surface">Tidak Ada Data Pelanggan Ditemukan</p>
            <p class="text-xs text-on-surface-variant">
                <?php if($search !== ''): ?>
                    Tidak ada pelanggan yang sesuai dengan pencarian "<?php echo e($search); ?>". Silakan coba kata kunci lain.
                <?php else: ?>
                    Belum ada pengguna dengan akun customer yang terdaftar di sistem.
                <?php endif; ?>
            </p>
        </div>
    <?php else: ?>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            <?php $__currentLoopData = $customers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cust): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="bg-surface-container-lowest border border-outline-variant/80 rounded-3xl p-5 sm:p-6 flex flex-col justify-between space-y-5 shadow-sm hover:border-secondary transition-all group">
                    <div>
                        <!-- Header & Avatar -->
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#D9A72A] to-[#C59B27] flex items-center justify-center text-white font-bold text-base shadow-sm ring-2 ring-amber-200 shrink-0">
                                    <?php echo e(strtoupper(substr($cust->name, 0, 2))); ?>

                                </div>
                                <div class="min-w-0">
                                    <h3 class="text-sm font-extrabold text-on-surface truncate"><?php echo e($cust->name); ?></h3>
                                    <div class="flex items-center gap-1 text-[11px] text-on-surface-variant mt-0.5 truncate">
                                        <span class="material-symbols-outlined text-[13px]">mail</span>
                                        <span class="truncate"><?php echo e($cust->email); ?></span>
                                    </div>
                                    <?php if($cust->phone): ?>
                                        <div class="flex items-center gap-1 text-[11px] text-secondary font-semibold mt-0.5">
                                            <span class="material-symbols-outlined text-[13px]">call</span>
                                            <span><?php echo e($cust->phone); ?></span>
                                        </div>
                                    <?php else: ?>
                                        <span class="text-[10px] text-slate-400 italic block mt-0.5">No HP belum diisi</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <span class="text-[10px] px-2.5 py-0.5 rounded-full font-bold bg-amber-50 text-[#92690B] border border-amber-200 shrink-0">
                                Customer
                            </span>
                        </div>

                        <!-- Statistics badges -->
                        <div class="grid grid-cols-2 gap-2 mt-4 pt-3 border-t border-outline-variant/60 text-xs">
                            <div class="p-2.5 rounded-xl bg-surface-container-low border border-outline-variant/60">
                                <span class="text-[10px] text-on-surface-variant uppercase font-bold block">Total Reservasi</span>
                                <span class="text-base font-extrabold text-on-surface mt-0.5 block">
                                    <?php echo e($cust->carwash_bookings_count); ?>x Cuci
                                </span>
                            </div>
                            <div class="p-2.5 rounded-xl bg-surface-container-low border border-outline-variant/60">
                                <span class="text-[10px] text-on-surface-variant uppercase font-bold block">Total Belanja</span>
                                <span class="text-base font-extrabold text-secondary mt-0.5 block">
                                    Rp <?php echo e(number_format($cust->total_spent ?? 0, 0, ',', '.')); ?>

                                </span>
                            </div>
                        </div>

                        <div class="mt-3 text-[11px] text-on-surface-variant flex items-center justify-between">
                            <span>Bergabung:</span>
                            <span class="font-semibold text-on-surface"><?php echo e($cust->created_at->translatedFormat('d M Y')); ?></span>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="pt-3 border-t border-outline-variant/60 space-y-2">
                        <a href="<?php echo e(route('admin.customers.show', $cust->id)); ?>"
                            class="w-full inline-flex items-center justify-center gap-1.5 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-white py-2 px-3 text-xs font-bold shadow-sm shadow-[#C59B27]/20 transition-all">
                            <span class="material-symbols-outlined text-[16px]">receipt_long</span>
                            <span>Lihat Riwayat &amp; Kelola Booking</span>
                        </a>

                        <div class="flex items-center gap-2">
                            <!-- Edit Customer Info Modal Trigger -->
                            <button type="button"
                                @click="editCustomer = { id: <?php echo e($cust->id); ?>, name: '<?php echo e(addslashes($cust->name)); ?>', email: '<?php echo e(addslashes($cust->email)); ?>', phone: '<?php echo e(addslashes($cust->phone ?? '')); ?>' }; showEditModal = true;"
                                class="flex-1 inline-flex items-center justify-center gap-1 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface py-1.5 text-xs font-bold border border-outline-variant transition-colors">
                                <span class="material-symbols-outlined text-[14px]">edit</span>
                                <span>Edit Akun</span>
                            </button>

                            <!-- Delete Customer Form -->
                            <form method="POST" action="<?php echo e(route('admin.customers.destroy', $cust->id)); ?>"
                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun pelanggan \'<?php echo e(addslashes($cust->name)); ?>\'? (Hanya dapat dihapus bila tidak ada reservasi aktif yang sedang berjalan).');">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                    class="inline-flex items-center justify-center gap-1 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 px-3 py-1.5 text-xs font-bold transition-colors"
                                    title="Hapus Akun Pelanggan">
                                    <span class="material-symbols-outlined text-[14px]">delete</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <div class="pt-4">
            <?php echo e($customers->links()); ?>

        </div>
    <?php endif; ?>

    <!-- MODAL: Edit Data Pelanggan -->
    <div x-show="showEditModal" style="display: none;" class="relative z-50" role="dialog" aria-modal="true">
        <div x-show="showEditModal"
            x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
            @click="showEditModal = false"
            class="fixed inset-0 bg-black/50 backdrop-blur-xs"></div>

        <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 lg:p-8 flex items-center justify-center">
            <div x-show="showEditModal"
                x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                class="w-full max-w-lg bg-surface-container-lowest border border-outline-variant rounded-3xl p-6 sm:p-8 shadow-2xl space-y-6">
                
                <div class="flex items-center justify-between border-b border-outline-variant/60 pb-3">
                    <h3 class="text-lg font-extrabold text-on-surface">Edit Data Profil Pelanggan</h3>
                    <button type="button" @click="showEditModal = false" class="text-on-surface-variant hover:text-on-surface">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>

                <form method="POST" :action="'<?php echo e(url('/admin/customers')); ?>/' + editCustomer.id" class="space-y-4 text-xs sm:text-sm">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PUT'); ?>

                    <div>
                        <label for="edit_name" class="block font-bold text-on-surface mb-1">Nama Lengkap *</label>
                        <input type="text" id="edit_name" name="name" x-model="editCustomer.name" required
                            class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3.5 py-2.5 text-on-surface placeholder-on-surface-variant/50 focus:border-secondary focus:bg-white focus:outline-none">
                    </div>

                    <div>
                        <label for="edit_email" class="block font-bold text-on-surface mb-1">Alamat Email *</label>
                        <input type="email" id="edit_email" name="email" x-model="editCustomer.email" required
                            class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3.5 py-2.5 text-on-surface placeholder-on-surface-variant/50 focus:border-secondary focus:bg-white focus:outline-none">
                    </div>

                    <div>
                        <label for="edit_phone" class="block font-bold text-on-surface mb-1">Nomor WhatsApp / HP</label>
                        <input type="text" id="edit_phone" name="phone" x-model="editCustomer.phone" placeholder="Contoh: 081234567890"
                            class="block w-full rounded-xl bg-surface-container-low border border-outline-variant px-3.5 py-2.5 text-on-surface placeholder-on-surface-variant/50 focus:border-secondary focus:bg-white focus:outline-none">
                    </div>

                    <div class="pt-3 flex items-center justify-end gap-3 border-t border-outline-variant/60">
                        <button type="button" @click="showEditModal = false"
                            class="rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface px-4 py-2.5 font-bold transition-colors">
                            Batal
                        </button>
                        <button type="submit"
                            class="rounded-xl bg-secondary hover:bg-secondary/90 text-on-secondary px-5 py-2.5 font-bold shadow-sm transition-all">
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

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