<x-admin-layout title="Preview Portal Pelanggan" subtitle="Buka tampilan portal sebagai pelanggan untuk audit UX tanpa login pelanggan.">
    <section class="rounded-lg bg-white p-5 shadow-sm">
        <form class="flex gap-3">
            <input name="q" value="{{ $search }}" placeholder="Cari nama / nomor HP pelanggan" class="flex-1 rounded-md border px-3 py-2 text-sm">
            <button class="rounded-md border px-4 py-2 text-sm">Cari</button>
        </form>
    </section>

    <section class="mt-5 overflow-hidden rounded-lg bg-white shadow-sm">
        <table class="w-full text-left text-sm">
            <thead class="bg-slate-100 text-slate-600">
            <tr><th class="p-3">Pelanggan</th><th>HP</th><th>Order</th><th>Request</th><th>Status</th><th class="text-right p-3">Aksi</th></tr>
            </thead>
            <tbody class="divide-y">
            @forelse ($customers as $customer)
                <tr>
                    <td class="p-3 font-medium">{{ $customer->name }}</td>
                    <td>{{ $customer->phone }}</td>
                    <td>{{ $customer->orders_count }}</td>
                    <td>{{ $customer->order_requests_count }}</td>
                    <td><span class="rounded-full border px-2 py-0.5 text-xs {{ $customer->is_active ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">{{ $customer->is_active ? 'Aktif' : 'Nonaktif' }}</span></td>
                    <td class="p-3 text-right"><a href="{{ route('portal-preview.customer', $customer) }}" class="rounded-md bg-slate-900 px-3 py-2 text-xs font-medium text-white">Preview Portal</a></td>
                </tr>
            @empty
                <tr><td colspan="6" class="p-6 text-center text-slate-500">Belum ada pelanggan.</td></tr>
            @endforelse
            </tbody>
        </table>
    </section>

    <div class="mt-4">{{ $customers->links() }}</div>
</x-admin-layout>
