@extends('admin.layout')
@section('title', 'Pengguna')
@section('subtitle', 'Akun customer')

@section('content')
    <x-flash />

    <div class="flex flex-wrap items-center gap-2 mb-4">
        <form method="GET" class="ml-auto">
            <input name="q" value="{{ request('q') }}" placeholder="Cari nama / HP / email…"
                   class="w-64 max-w-full rounded-xl border border-line px-3.5 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
        </form>
        {{-- Ekspor mengikuti pencarian yang sedang aktif, bukan seluruh tabel. --}}
        <x-export-buttons :csv="route('admin.users.export', ['format' => 'csv'] + request()->only('q'))"
                          :pdf="route('admin.users.export', ['format' => 'pdf'] + request()->only('q'))" />
        <a href="{{ route('admin.users.create') }}"
           class="px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
            + Tambah pengguna
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-line overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left font-semibold px-5 py-3">Nama</th>
                        <th class="text-left font-semibold px-5 py-3">No. HP</th>
                        <th class="text-left font-semibold px-5 py-3">Email</th>
                        <th class="text-left font-semibold px-5 py-3">Area</th>
                        <th class="text-left font-semibold px-5 py-3">Terdaftar</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-line">
                    @forelse ($users as $user)
                        @php $area = $user->addresses->first(); @endphp
                        <tr class="hover:bg-canvas transition">
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-3">
                                    <span class="w-8 h-8 rounded-full bg-brand-soft text-brand-dark grid place-items-center text-xs font-bold">{{ $user->initials() }}</span>
                                    <div>
                                        <div class="font-semibold">{{ $user->name }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-3">{{ $user->phone }}</td>
                            <td class="px-5 py-3 text-sub">{{ $user->email ?? '—' }}</td>
                            <td class="px-5 py-3 text-sub max-w-[260px]">
                                @if ($area)
                                    <div class="font-semibold text-ink text-xs">{{ $area->label }}</div>
                                    <div class="truncate">{{ $area->detail }}</div>
                                    @if ($user->addresses->count() > 1)
                                        <div class="text-xs">+{{ $user->addresses->count() - 1 }} alamat lain</div>
                                    @endif
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-5 py-3 text-sub">{{ $user->created_at?->format('d M Y') }}</td>
                            <td class="px-5 py-3 text-right whitespace-nowrap">
                                @php($impact = $user->deletionImpact())
                                <div class="flex items-center justify-end gap-3">
                                    <a href="{{ route('admin.users.edit', $user) }}" class="text-brand font-semibold hover:text-brand-dark">Ubah</a>
                                    {{-- Peringatannya menyebut apa yang akan hilang, bukan cuma
                                         "yakin?". Menghapus akun bersih dan menghapus akun yang
                                         sudah lama bertransaksi sangat berbeda akibatnya, dan
                                         admin perlu tahu yang mana sebelum menekan. --}}
                                    <form method="POST" action="{{ route('admin.users.destroy', $user) }}"
                                          onsubmit="return confirm(@js($impact
                                              ? "Hapus permanen {$user->name}?\n\nIkut terhapus: ".implode(', ', $impact).".\n\nTindakan ini tidak bisa dibatalkan."
                                              : "Hapus permanen {$user->name}?\n\nTindakan ini tidak bisa dibatalkan."))">
                                        @csrf @method('DELETE')
                                        <button class="font-semibold text-red-500 hover:text-red-600">Hapus</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-5 py-8 text-center text-sub">Tidak ada data.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <x-pagination :paginator="$users" unit="pengguna" />
@endsection