ilycats/resources/views/pages/admin/roles/index.blade.php

<x-app-layout>
    {{-- Container utama: Menggunakan max-w-6xl agar lebih lega dan mx-auto untuk center --}}
    <div class="max-w-6xl mx-auto px-6 py-10 space-y-8">
        
        {{-- 1. HEADER SECTION: Diberi jarak mt-4 agar tidak menempel ke atas --}}
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 px-2 mt-4">
            <div class="space-y-2">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full border border-indigo-100">
                    <i class="fas fa-shield-alt text-[10px]"></i>
                    <span class="text-[9px] font-black uppercase tracking-widest">Security Module</span>
                </div>
                <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Pengelolaan Hak Akses</h2>
                <p class="text-sm text-slate-400 font-medium italic">Konfigurasi matriks perizinan dan otoritas sistem ilycats.</p>
            </div>

            {{-- Tombol Tambah --}}
            @can('check-access', ['roles', 'create'])
            <div class="shrink-0">
                <a href="{{ route('admin.roles.create') }}" class="inline-flex items-center justify-center px-6 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-2xl shadow-xl shadow-indigo-100 transition-all active:scale-95 tracking-widest uppercase">
                    <i class="fas fa-plus-circle mr-2 text-base"></i> TAMBAH ROLE BARU
                </a>
            </div>
            @endcan
        </div>

        {{-- 2. TABEL ROLE: Menggunakan Card dengan shadow yang lebih soft --}}
        <div class="bg-white border border-slate-200 rounded-[3rem] shadow-sm overflow-hidden">
            <div class="overflow-x-auto custom-scrollbar">
                <table class="w-full text-left border-collapse min-w-[800px]">
                    <thead class="bg-slate-50 border-b border-slate-100">
                        <tr>
                            <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Identitas Hak Akses</th>
                            <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Slug Identitas</th>
                            <th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Otoritas Matriks</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-50">
                        @foreach($roles as $role)
                        <tr class="hover:bg-slate-50/50 transition-all group">
                            {{-- Nama Hak Akses --}}
                            <td class="px-10 py-6">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-indigo-600 group-hover:text-white border border-slate-200 group-hover:border-indigo-500 transition-all duration-300 shadow-sm">
                                        <i class="fas fa-user-tag text-sm"></i>
                                    </div>
                                    <div>
                                        <span class="text-sm font-black text-slate-800 uppercase tracking-tight block">{{ $role->name }}</span>
                                        <span class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">Tingkat Hak Akses Sistem</span>
                                    </div>
                                </div>
                            </td>

                            {{-- Slug --}}
                            <td class="px-10 py-6">
                                <span class="px-3 py-1.5 bg-slate-100 text-slate-500 text-[9px] font-black rounded-lg border border-slate-200/60 tracking-wider font-mono">
                                    {{ $role->slug }}
                                </span>
                            </td>

                            {{-- Aksi --}}
                            <td class="px-10 py-6">
                                <div class="flex justify-end items-center gap-3">
                                    
                                    {{-- Configuration --}}
                                    @can('check-access', ['roles', 'update'])
                                    <a href="{{ route('admin.roles.edit', $role->id) }}" 
                                       class="inline-flex items-center gap-2 px-5 py-2.5 bg-white text-indigo-600 border-2 border-indigo-50 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 rounded-xl text-[9px] font-black uppercase tracking-widest transition-all shadow-sm active:scale-95 group/btn">
                                        <i class="fas fa-cog group-hover/btn:rotate-90 transition-transform duration-500"></i> Configuration
                                    </a>
                                    @endcan

                                    {{-- Delete --}}
                                    @can('check-access', ['roles', 'delete'])
                                        @if($role->slug !== 'admin')
                                        <form id="delete-form-{{ $role->id }}" action="{{ route('admin.roles.destroy', $role->id) }}" method="POST" class="inline">
                                            @csrf @method('DELETE')
                                            <button type="button" 
                                                    onclick="confirmDeleteRole({{ $role->id }}, '{{ addslashes($role->name) }}')" 
                                                    class="w-10 h-10 flex items-center justify-center text-slate-300 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all" 
                                                    title="Hapus Role">
                                                <i class="fas fa-trash-alt text-xs"></i>
                                            </button>
                                        </form>
                                        @endif
                                    @endcan

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

        {{-- 3. FOOTER INFO: Memberikan kesan seimbang di bawah --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-6 bg-indigo-900 rounded-[2.5rem] text-white shadow-xl shadow-indigo-100 flex items-center gap-5">
                <div class="w-12 h-12 bg-indigo-800 rounded-2xl flex items-center justify-center text-xl shrink-0">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div>
                    <p class="text-[10px] font-black uppercase tracking-widest opacity-60 mb-1">Pemberitahuan</p>
                    <p class="text-xs font-bold leading-relaxed">Perubahan pada matriks izin akan langsung berdampak pada seluruh staf yang terkait.</p>
                </div>
            </div>

            <div class="p-6 bg-slate-50 border border-slate-200 rounded-[2.5rem] flex items-center gap-5 italic">
                <div class="w-12 h-12 bg-white border border-slate-200 rounded-2xl flex items-center justify-center text-slate-400 text-xl shrink-0">
                    <i class="fas fa-user-lock"></i>
                </div>
                <div>
                    <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Keamanan Data</p>
                    <p class="text-xs font-bold text-slate-500">Pastikan role Administrator tidak kehilangan akses Read pada modul Hak Akses.</p>
                </div>
            </div>
        </div>

    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmDeleteRole(id, name) {
            Swal.fire({
                title: 'Hapus Role?',
                html: `Konfirmasi penghapusan permanen untuk:<br><b class="text-rose-600 text-lg">${name}</b>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f43f5e',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                customClass: {
                    popup: 'rounded-[2.5rem]',
                    title: 'font-black text-slate-800 uppercase tracking-tighter'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(`delete-form-${id}`).submit();
                }
            });
        }

        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'BERHASIL',
                text: "{{ session('success') }}",
                showConfirmButton: false,
                timer: 2500,
                toast: true,
                position: 'top-end',
                customClass: { popup: 'rounded-2xl shadow-xl' }
            });
        @endif
    </script>
    @endpush
</x-app-layout>