@extends('layouts.admin')

@section('title', 'Data Pelanggan')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-gray-900">Data Pelanggan</h1>
            <p class="text-sm text-gray-500 mt-0.5">Admin dan kasir dapat mendaftarkan pelanggan. Perubahan data master hanya untuk admin.</p>
        </div>
        <a href="{{ route('admin.customers.create') }}"
           class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold rounded-xl px-4 py-2.5 transition shadow-sm">
            <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="M12 4v16m8-8H4"/>
            </svg>
            Tambah Pelanggan
        </a>
    </div>

    <form method="GET" class="max-w-md">
        <div class="relative">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 105 11a6 6 0 0012 0z"/>
            </svg>
            <input type="text" name="search" value="{{ $search }}" placeholder="Cari nama, kode, WhatsApp, email"
                   class="w-full rounded-xl border border-gray-200 pl-9 pr-4 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
        </div>
    </form>

    <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100 text-left">
                        <th class="px-5 py-3 font-semibold text-gray-600">Kode</th>
                        <th class="px-5 py-3 font-semibold text-gray-600">Nama</th>
                        <th class="px-5 py-3 font-semibold text-gray-600">Kontak</th>
                        <th class="px-5 py-3 font-semibold text-gray-600">Status</th>
                        <th class="px-5 py-3 font-semibold text-gray-600 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($customers as $customer)
                    <tr class="hover:bg-gray-50/60 transition">
                        <td class="px-5 py-3 text-xs font-mono text-brand-600">{{ $customer->code ?: '-' }}</td>
                        <td class="px-5 py-3">
                            <p class="font-semibold text-gray-900">{{ $customer->name }}</p>
                            @if($customer->address)
                            <p class="text-xs text-gray-400 truncate max-w-[260px]">{{ $customer->address }}</p>
                            @endif
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-600">
                            <p>{{ $customer->whatsapp ?: '-' }}</p>
                            <p class="text-xs text-gray-400">{{ $customer->email ?: 'Tanpa email' }}</p>
                        </td>
                        <td class="px-5 py-3">
                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold {{ $customer->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                                {{ $customer->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-right">
                            @if(auth()->user()?->isAdmin())
                            <a href="{{ route('admin.customers.edit', $customer) }}"
                               class="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg px-3 py-1.5 transition">
                                Edit
                            </a>
                            @else
                            <span class="text-xs text-gray-400">Lihat saja</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-5 py-10 text-center text-sm text-gray-400">Belum ada data pelanggan.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{ $customers->links() }}
</div>
@endsection