@extends('layout.layout')

@php
    $title    = 'Data Pelanggan';
    $subTitle = 'Manajemen Pelanggan';
    // Pastikan file JS ini ada untuk fitur search/sorting table kamu
    $script   = '<script src="' . asset('assets/js/data-table.js') . '"></script>';
@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">Data Master Pelanggan</h6>
                </div>

                <div class="card-body p-6">
                    <div class="overflow-x-auto">
                        <table id="selection-table" class="w-full border border-neutral-200 dark:border-neutral-600 rounded-lg border-separate">
                            <thead>
                            <tr class="bg-neutral-50 dark:bg-neutral-700">
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left w-16 font-bold">No.</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Nama</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Email</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">No. Telp</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">No. Meteran</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold">Status</th>
                                <th class="text-neutral-800 dark:text-white px-4 py-3 text-left font-semibold text-center">Aksi</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($data as $index => $user)
                            <tr class="border-b border-neutral-200 dark:border-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition">
                                <td class="px-4 py-3 text-sm">{{ $data->firstItem() + $index }}</td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <h6 class="text-base mb-0 font-medium text-neutral-800 dark:text-white">{{ $user->name }}</h6>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">{{ $user->email }}</td>
                                <td class="px-4 py-3 text-sm text-neutral-600 dark:text-neutral-400">{{ $user->profile->phone_number ?? 'Belum Diatur' }}</td>
                                <td class="px-4 py-3 text-sm font-mono font-semibold text-neutral-800 dark:text-neutral-200">{{ $user->meteran->nomor_seri ?? '-' }}</td>
                                <td class="px-4 py-3">
                                    @if($user->status == 'aktif')
                                        <span class="bg-success-100 dark:bg-success-900/30 text-success-600 dark:text-success-400 px-3 py-1 rounded-full font-medium text-xs border border-success-200">Aktif</span>
                                    @else
                                        <span class="bg-danger-100 dark:bg-danger-900/30 text-danger-600 dark:text-danger-400 px-3 py-1 rounded-full font-medium text-xs border border-danger-200">Nonaktif</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <a href="{{ route('DataPelanggan.show', $user->id) }}" 
                                    class="w-9 h-9 bg-primary-50 dark:bg-primary-600/10 text-primary-600 dark:text-primary-400 rounded-lg inline-flex items-center justify-center hover:bg-primary-600 hover:text-white transition shadow-sm"
                                    title="Lihat Detail">
                                        <iconify-icon icon="iconamoon:eye-light" class="text-xl"></iconify-icon>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-20 text-neutral-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <iconify-icon icon="heroicons:inbox" class="text-6xl mb-3 opacity-20"></iconify-icon>
                                        <p class="text-lg font-semibold text-neutral-400">Belum ada data pelanggan</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                        </table>
                    </div>

                    {{-- Link Pagination --}}
                    <div class="mt-6">
                        {{ $data->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection