@extends('layout.layout')

@php
    $title    = 'Verifikasi Pelanggan';
    $subTitle = 'Persetujuan Akun Baru';
@endphp

@section('content')

<div class="grid grid-cols-12 gap-6">
    <div class="col-span-12">
        <div class="card border-0 overflow-hidden">
            <div class="card-header flex justify-between items-center px-6 py-4 border-b">
                <h6 class="card-title mb-0 text-lg font-semibold">Daftar Verifikasi Pelanggan</h6>
                <span class="bg-warning-100 text-warning-600 px-3 py-1 rounded-full text-sm font-medium">
                    {{ $data->total() }} Menunggu
                </span>
            </div>

            <div class="card-body p-6">
                <div class="overflow-x-auto">
                    <table class="w-full border border-neutral-200 dark:border-neutral-600 rounded-lg">
                        <thead>
                            <tr class="bg-neutral-50 dark:bg-neutral-700">
                                <th class="px-4 py-3 text-left font-bold">No.</th>
                                <th class="px-4 py-3 text-left font-semibold">Nama</th>
                                <th class="px-4 py-3 text-left font-semibold">Email</th>
                                <th class="px-4 py-3 text-left font-semibold">No. Telp</th>
                                <th class="px-4 py-3 text-left font-semibold">Tgl Daftar</th>
                                <th class="px-4 py-3 text-center font-semibold">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($data as $index => $user)
                            <tr class="border-b border-neutral-200 hover:bg-neutral-50 transition">
                                <td class="px-4 py-3 text-sm">{{ $data->firstItem() + $index }}</td>
                                <td class="px-4 py-3 font-medium text-neutral-800">{{ $user->name }}</td>
                                <td class="px-4 py-3 text-sm">{{ $user->email }}</td>
                                <td class="px-4 py-3 text-sm">{{ $user->profile->phone_number ?? '-' }}</td>
                                <td class="px-4 py-3 text-sm">{{ $user->created_at->translatedFormat('d M Y, H:i') }}</td>
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center justify-center gap-2">
                                       
                                        {{-- Tombol Detail --}}
                                        <a href="{{ route('verifikasi.show', $user->id) }}" class="w-8 h-8 bg-primary-50 text-primary-600 rounded-lg inline-flex items-center justify-center hover:bg-primary-600 hover:text-white transition">
                                            <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                                        </a>
                                    </div>
                                </td>
                            </tr>   
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-16 text-neutral-500">         
                                    <div class="flex flex-col items-center justify-center">
                                        <iconify-icon icon="iconamoon:check-circle-1-light" class="text-5xl block mx-auto mb-2 text-success-400"></iconify-icon>
                                        <p class="font-semibold">Tidak ada pelanggan menunggu verifikasi</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-6">{{ $data->links() }}</div>
            </div>
        </div>
    </div>
</div>

@endsection