ilycats/resources/views/pages/users/index.blade.php

<x-app-layout>
    <div class="space-y-6 pb-8">
       
        {{-- SECTION 1: HEADER & TAMBAH USER --}}
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-black text-slate-800 tracking-tight">Manajemen User</h2>
                <p class="text-sm text-slate-500 font-medium italic">Kelola otoritas akses staf cattery.</p>
            </div>

            {{-- PROTEKSI CREATE: Mengikuti matriks izin modul users --}}
            @can('check-access', ['users', 'create'])
            <a href="{{ route('admin.users.create') }}" class="inline-flex items-center px-5 py-3 bg-indigo-600 text-white text-[10px] font-black rounded-xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
                <i class="fas fa-plus mr-2"></i> TAMBAH USER
            </a>
            @endcan
        </div>

        {{-- SECTION 2: TABEL USER --}}
        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
            <table class="w-full text-left">
                <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b">
                    <tr>
                        <th class="px-6 py-4">Nama & Email</th>
                        <th class="px-6 py-4">WhatsApp</th>
                        <th class="px-6 py-4 text-center">Role</th>
                        <th class="px-6 py-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
                    @foreach($users as $user)
                    <tr class="hover:bg-slate-50/50 transition-all">
                        {{-- Identitas --}}
                        <td class="px-6 py-4">
                            <div class="font-black text-slate-800">{{ $user->name }}</div>
                            <div class="text-[10px] text-slate-400 font-bold uppercase">{{ $user->email }}</div>
                        </td>

                        {{-- Kontak --}}
                        <td class="px-6 py-4">
                            <span class="text-xs font-bold text-slate-500">{{ $user->phone ?? '-' }}</span>
                        </td>

                        {{-- Badge Role --}}
                        <td class="px-6 py-4 text-center">
                            <span class="px-3 py-1 rounded-xl text-[10px] font-black uppercase {{ $user->role == 'admin' ? 'bg-indigo-50 text-indigo-600 border border-indigo-100' : 'bg-slate-50 text-slate-500 border border-slate-200' }}">
                                {{ $user->roleModel?->name ?? $user->role ?? '-' }}
                            </span>
                        </td>

                        {{-- Aksi Berbasis Izin --}}
                        <td class="px-6 py-4 text-right">
                            <div class="flex justify-end gap-2">
                                
                                {{-- PROTEKSI EDIT: Mengikuti matriks izin modul users --}}
                                @can('check-access', ['users', 'update'])
                                <a href="{{ route('admin.users.edit', $user->id) }}" class="p-2 text-slate-400 hover:text-amber-600 hover:bg-amber-50 rounded-xl transition-all" title="Edit Profile">
                                    <i class="fas fa-edit text-xs"></i>
                                </a>
                                @endcan

                                {{-- PROTEKSI DELETE: Pengecekan manual 'admin' dihapus agar permission matriks berlaku sepenuhnya --}}
                                @can('check-access', ['users', 'delete'])
                                <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Hapus user ini? Staf ini tidak akan bisa login lagi.')" class="inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="p-2 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all" title="Hapus User">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </button>
                                </form>
                                @endcan

                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- PAGINATION --}}
        <div class="mt-4">
            {{ $users->links() }}
        </div>
    </div>
</x-app-layout>