@forelse ($keanggotaan as $index => $item)
    <tr class="hover:bg-indigo-50 transition-colors duration-150">
        <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
            {{ $keanggotaan->firstItem() + $index }}
        </td>
        <td class="px-6 py-3 whitespace-nowrap">
            <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-sm font-semibold">
                    {{ substr($item->user->name ?? 'A', 0, 1) }}
                </div>
                <div class="ml-3">
                    <div class="text-sm font-medium text-gray-900">{{ $item->user->name ?? 'N/A' }}</div>
                    <div class="text-xs text-gray-500">{{ $item->user->email ?? 'N/A' }}</div>
                </div>
            </div>
        </td>
        <td class="px-6 py-3 whitespace-nowrap">
            <div class="text-sm font-medium text-gray-900">
                {{ $item->nomor_anggota ?? '-' }}
            </div>
        </td>
        <td class="px-6 py-3 whitespace-nowrap">
            @php
                $statusColors = [
                    'aktif' => 'bg-green-100 text-green-800',
                    'pending' => 'bg-yellow-100 text-yellow-800',
                    'nonaktif' => 'bg-red-100 text-red-800',
                    'ditolak' => 'bg-gray-100 text-gray-800',
                ];
                $statusColor = $statusColors[$item->status] ?? 'bg-gray-100 text-gray-800';
            @endphp
            <div class="flex items-center gap-2">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $statusColor }}">
                    {{ ucfirst($item->status) }}
                </span>
                @if(auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                    @if($item->status === 'pending')
                        <div class="flex items-center gap-1">
                            <form action="{{ route('keanggotaan.update-status', $item) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin menyetujui keanggotaan ini?')">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="aktif">
                                <button type="submit" 
                                        class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-green-100 hover:bg-green-200 text-green-600 transition-all duration-200 hover:scale-110"
                                        title="Setujui">
                                    <i class="fas fa-check text-xs"></i>
                                </button>
                            </form>
                            <form action="{{ route('keanggotaan.update-status', $item) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin menolak keanggotaan ini?')">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="ditolak">
                                <button type="submit" 
                                        class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110"
                                        title="Tolak">
                                    <i class="fas fa-times text-xs"></i>
                                </button>
                            </form>
                        </div>
                    @else
                        <form action="{{ route('keanggotaan.update-status', $item) }}" method="POST" class="inline">
                            @csrf
                            @method('PATCH')
                            <select name="status" 
                                    onchange="if(confirm('Apakah Anda yakin ingin mengubah status keanggotaan ini?')) { this.form.submit(); } else { this.value = '{{ $item->status }}'; }"
                                    class="text-xs font-semibold px-2 py-1 rounded border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 cursor-pointer">
                                <option value="pending" {{ $item->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="aktif" {{ $item->status === 'aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="nonaktif" {{ $item->status === 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                <option value="ditolak" {{ $item->status === 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                        </form>
                    @endif
                @endif
            </div>
        </td>
        <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-600">
            <div class="flex items-center">
                <i class="fas fa-calendar-alt mr-1.5 text-gray-400 text-xs"></i>
                {{ $item->tanggal_bergabung ? $item->tanggal_bergabung->format('d M Y') : '-' }}
            </div>
        </td>
        <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-600">
            <div class="flex items-center">
                <i class="fas fa-calendar-times mr-1.5 text-gray-400 text-xs"></i>
                {{ $item->tanggal_berakhir ? $item->tanggal_berakhir->format('d M Y') : '-' }}
            </div>
        </td>
        <td class="px-6 py-3 whitespace-nowrap text-center">
            <div class="flex items-center justify-center gap-2">
                <a href="{{ route('keanggotaan.show', $item) }}" 
                   class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-100 hover:bg-blue-200 text-blue-600 transition-all duration-200 hover:scale-110"
                   title="Detail">
                    <i class="fas fa-eye text-sm"></i>
                </a>
                <a href="{{ route('keanggotaan.edit', $item) }}" 
                   class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-yellow-100 hover:bg-yellow-200 text-yellow-600 transition-all duration-200 hover:scale-110"
                   title="Edit">
                    <i class="fas fa-edit text-sm"></i>
                </a>
                @if(auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                    <form action="{{ route('keanggotaan.destroy', $item) }}" 
                          method="POST" 
                          class="inline"
                          onsubmit="return confirm('Apakah Anda yakin ingin menghapus keanggotaan ini?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110"
                                title="Hapus">
                            <i class="fas fa-trash text-sm"></i>
                        </button>
                    </form>
                @endif
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="7" class="px-6 py-12 text-center">
            <div class="flex flex-col items-center">
                <div class="bg-gray-100 rounded-full p-6 mb-4">
                    <i class="fas fa-users text-4xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada keanggotaan</h3>
                <p class="text-gray-600 mb-4">Belum ada keanggotaan yang ditambahkan</p>
                <a href="{{ route('keanggotaan.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Keanggotaan Pertama
                </a>
            </div>
        </td>
    </tr>
@endforelse