@extends('layout.layout')

@php
    $title    = 'Data Petugas';
    $subTitle = 'Manajemen Petugas Pamsimas';
    $script   = '<script src="' . asset('assets/js/data-table.js') . '"></script>';
@endphp

@section('content')
    <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 Petugas Lapangan</h6>
            {{-- TOMBOL TAMBAH PETUGAS --}}
            <a href="{{ route('DataPetugas.create') }}" class="px-4 py-2 bg-primary-600 text-white rounded-lg flex items-center gap-2 hover:bg-primary-700 transition">
                <iconify-icon icon="mingcute:user-add-line"></iconify-icon>
                Tambah Petugas
            </a>
        </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="px-4 py-3 text-left w-16 font-bold">No.</th>
                            <th class="px-4 py-3 text-left font-semibold">Nama Petugas</th>
                            <th class="px-4 py-3 text-left font-semibold">Email (Username)</th>
                            <th class="px-4 py-3 text-left font-semibold">No. Telp</th>
                            <th class="px-4 py-3 text-left font-semibold">Status</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 dark:border-neutral-600 hover:bg-neutral-50 transition">
                            <td class="px-4 py-3">{{ $data->firstItem() + $index }}</td>
                            <td class="px-4 py-3 font-medium text-neutral-800">{{ $user->name }}</td>
                            <td class="px-4 py-3">{{ $user->email }}</td>
                            <td class="px-4 py-3">{{ $user->profile->phone_number ?? '-' }}</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('DataPetugas.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="6" class="text-center py-10 text-neutral-500">Belum ada petugas.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-6">{{ $data->links() }}</div>
        </div>
    </div>
@endsection