@extends('layouts.admin-panel')

@section('title', 'Daftar Pelanggan')
@section('header', 'Pelanggan')
@section('subheader', 'Kelola data pelanggan yang terdaftar di toko Anda.')

@section('content')
<div class="bg-white rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50/50 border-b border-slate-100">
                    <th class="px-8 py-5 text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Pelanggan</th>
                    <th class="px-8 py-5 text-xs font-bold text-slate-500 uppercase tracking-wider">Email & Telepon</th>
                    <th class="px-8 py-5 text-xs font-bold text-slate-500 uppercase tracking-wider">Bergabung</th>
                    <th class="px-8 py-5 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($customers as $customer)
                    <tr class="hover:bg-slate-50/50 transition-colors group">
                        <td class="px-8 py-6">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-700 font-bold border border-purple-200">
                                    {{ strtoupper(substr($customer->name, 0, 1)) }}
                                </div>
                                <span class="font-bold text-slate-900">{{ $customer->name }}</span>
                            </div>
                        </td>
                        <td class="px-8 py-6">
                            <span class="block text-sm text-slate-700 font-medium">{{ $customer->email }}</span>
                            <span class="block text-xs text-slate-500 mt-0.5">{{ $customer->phone ?? '-' }}</span>
                        </td>
                        <td class="px-8 py-6">
                            <span class="text-sm text-slate-500">{{ $customer->created_at->format('d M Y') }}</span>
                        </td>
                        <td class="px-8 py-6 text-right">
                            <a href="{{ route('panel.customers.show', $customer->id) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-50 text-slate-600 hover:bg-purple-600 hover:text-white rounded-xl font-bold text-xs transition-all border border-slate-100">
                                Detail
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-8 py-20 text-center">
                            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                <svg class="w-10 h-10 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            </div>
                            <p class="text-slate-500 font-medium">Belum ada pelanggan terdaftar.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    @if($customers->hasPages())
        <div class="px-8 py-6 border-t border-slate-50 bg-slate-50/30">
            {{ $customers->links() }}
        </div>
    @endif
</div>
@endsection