<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div
                    class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-violet-500/10 to-indigo-600/10 rounded-full blur-xl">
                </div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                        Manajemen Role
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="shield" class="w-4 h-4 inline mr-2"></i>
                    Kelola hak akses pengguna dalam sistem
                </p>
            </div>

            <div class="flex items-center gap-4">
                <a href="<?php echo e(route('dashboard')); ?>"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    <span>Kembali</span>
                </a>
                <a href="<?php echo e(route('roles.create')); ?>"
                    class="px-4 py-2.5 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>Tambah Role</span>
                </a>
            </div>
        </div>

        <!-- Flash Messages -->
        <?php if(session('success')): ?>
            <div
                class="mb-6 p-4 bg-gradient-to-r from-green-500/10 to-emerald-600/10 border border-green-500/20 rounded-2xl flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center">
                    <i data-lucide="check-circle" class="w-5 h-5"></i>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-green-700 dark:text-green-400"><?php echo e(session('success')); ?></p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-green-500 hover:text-green-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div
                class="mb-6 p-4 bg-gradient-to-r from-red-500/10 to-rose-600/10 border border-red-500/20 rounded-2xl flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center">
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-red-700 dark:text-red-400"><?php echo e(session('error')); ?></p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        <?php endif; ?>

        <!-- Main Card -->
        <div class="group relative">
            <div
                class="absolute -inset-1 bg-gradient-to-r from-violet-600/10 to-indigo-600/10 rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500">
            </div>
            <div
                class="relative bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">

                <!-- Filter Section -->
                <div class="p-6 border-b border-slate-100 dark:border-white/5 bg-slate-50/50 dark:bg-white/5">
                    <form method="GET" action="<?php echo e(route('roles.index')); ?>" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="md:col-span-2">
                                <label
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pencarian</label>
                                <div class="relative">
                                    <i data-lucide="search"
                                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                    <input type="text" name="search" value="<?php echo e(request('search')); ?>"
                                        placeholder="Cari nama role..."
                                        class="w-full pl-10 pr-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm focus:ring-2 focus:ring-violet-500">
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end gap-2">
                            <button type="submit"
                                class="px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-lg text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2">
                                <i data-lucide="filter" class="w-4 h-4"></i> Filter
                            </button>

                            <?php if(request()->has('search')): ?>
                                <a href="<?php echo e(route('roles.index')); ?>"
                                    class="px-4 py-2 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i> Reset
                                </a>
                            <?php endif; ?>
                        </div>
                    </form>
                </div>

                <!-- Table Section -->
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-white/5 border-b">
                                <th class="py-4 px-6 w-12">
                                    <input type="checkbox" id="selectAll"
                                        class="w-4 h-4 text-violet-600 rounded">
                                </th>
                                <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">No
                                </th>
                                <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">Nama Role
                                </th>
                                <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">Jumlah User
                                </th>
                                <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">
                                    Dibuat</th>
                                <th class="text-left py-4 px-6 text-xs font-semibold text-slate-500 uppercase">Aksi
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y">
                            <?php $__empty_1 = true; $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $role): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <?php
                                    $badgeClass = match($role->name) {
                                        'superadmin' => 'bg-purple-500/10 text-purple-600',
                                        'admin' => 'bg-blue-500/10 text-blue-600',
                                        'manager keuangan' => 'bg-amber-500/10 text-amber-600',
                                        'keuangan' => 'bg-emerald-500/10 text-emerald-600',
                                        default => 'bg-slate-500/10 text-slate-600',
                                    };
                                ?>
                                <tr
                                    class="hover:bg-slate-50/50 dark:hover:bg-white/5 <?php echo e($role->name === 'superadmin' ? 'bg-purple-50/30 dark:bg-purple-900/10' : ''); ?>">
                                    <td class="py-4 px-6">
                                        <?php if($role->name !== 'superadmin'): ?>
                                            <input type="checkbox" name="role_ids[]" value="<?php echo e($role->id); ?>"
                                                class="role-checkbox w-4 h-4 text-violet-600 rounded">
                                        <?php else: ?>
                                            <span class="text-xs text-purple-400" title="Superadmin tidak dapat dipilih">
                                                <i data-lucide="lock" class="w-4 h-4"></i>
                                            </span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="py-4 px-6 font-mono text-sm"><?php echo e($roles->firstItem() + $index); ?></td>
                                    <td class="py-4 px-6">
                                        <span class="px-3 py-1 text-xs rounded-lg <?php echo e($badgeClass); ?>">
                                            <?php echo e(ucfirst($role->name)); ?>

                                        </span>
                                        <?php if($role->name === 'superadmin'): ?>
                                            <span class="ml-2 text-xs text-purple-400">(Tidak dapat diubah)</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="py-4 px-6">
                                        <span class="px-2 py-1 bg-violet-500/10 text-violet-600 rounded-lg text-xs font-medium">
                                            <?php echo e($role->users_count ?? $role->users()->count()); ?> User
                                        </span>
                                    </td>
                                    <td class="py-4 px-6 text-sm">
                                        <?php echo e($role->created_at ? $role->created_at->format('d M Y') : '-'); ?>

                                    </td>
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-2">
                                            <a href="<?php echo e(route('roles.show', $role->id)); ?>"
                                                class="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition"
                                                title="Detail">
                                                <i data-lucide="eye" class="w-4 h-4"></i>
                                            </a>

                                            <?php if($role->name !== 'superadmin'): ?>
                                                <a href="<?php echo e(route('roles.edit', $role->id)); ?>"
                                                    class="p-2 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition"
                                                    title="Edit">
                                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                                </a>
                                                <button type="button"
                                                    onclick="confirmDelete(<?php echo e($role->id); ?>, '<?php echo e($role->name); ?>')"
                                                    class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition"
                                                    title="Hapus">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            <?php else: ?>
                                                <span class="p-2 text-slate-400 cursor-not-allowed" title="Tidak dapat diubah">
                                                    <i data-lucide="lock" class="w-4 h-4"></i>
                                                </span>
                                                <span class="p-2 text-slate-400 cursor-not-allowed" title="Tidak dapat dihapus">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="6" class="py-12 text-center text-slate-500">
                                        <i data-lucide="shield" class="w-12 h-12 mx-auto mb-3 text-slate-400"></i>
                                        <p>Tidak ada data role</p>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination & Actions -->
                <div class="p-6 border-t">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div class="flex items-center gap-4">
                            <span class="text-sm text-slate-500" id="selectedCount">0 role dipilih</span>
                            <button type="button" onclick="clearSelection()"
                                class="text-xs text-violet-600 hover:underline">Hapus pilihan</button>
                            <button type="button" onclick="bulkDelete()"
                                class="px-4 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                                id="bulkDeleteBtn" disabled>
                                <i data-lucide="trash-2" class="w-4 h-4 inline mr-1"></i>
                                Hapus Terpilih
                            </button>
                        </div>
                        <div>
                            <?php echo e($roles->withQueryString()->links('vendor.pagination.tailwind')); ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Delete Individual -->
    <form id="delete-form" method="POST" style="display: none;">
        <?php echo csrf_field(); ?>
        <?php echo method_field('DELETE'); ?>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            // Select All
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.role-checkbox');
            const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
            const selectedCount = document.getElementById('selectedCount');

            function updateSelectedCount() {
                const checked = document.querySelectorAll('.role-checkbox:checked').length;
                selectedCount.textContent = checked + ' role dipilih';
                bulkDeleteBtn.disabled = checked === 0;
            }

            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    checkboxes.forEach(cb => {
                        cb.checked = this.checked;
                    });
                    updateSelectedCount();
                });
            }

            checkboxes.forEach(cb => {
                cb.addEventListener('change', updateSelectedCount);
            });

            window.clearSelection = function() {
                checkboxes.forEach(cb => cb.checked = false);
                if (selectAll) selectAll.checked = false;
                updateSelectedCount();
            };
        });

        function confirmDelete(roleId, roleName) {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                html: `Apakah Anda yakin ingin menghapus role <strong>${roleName}</strong>?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('delete-form');
                    form.action = `/roles/${roleId}`;
                    form.submit();
                }
            });
        }

        function bulkDelete() {
            const selectedIds = Array.from(document.querySelectorAll('.role-checkbox:checked')).map(cb => cb.value);

            if (selectedIds.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih minimal 1 role',
                    confirmButtonColor: '#f59e0b'
                });
                return;
            }

            Swal.fire({
                title: 'Konfirmasi Hapus Massal',
                html: `Apakah Anda yakin ingin menghapus <strong>${selectedIds.length}</strong> role?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('/roles/bulk-destroy', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                ids: selectedIds
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: data.message,
                                    confirmButtonColor: '#10b981',
                                    timer: 2000
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal!',
                                    text: data.message,
                                    confirmButtonColor: '#ef4444'
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Kesalahan!',
                                text: 'Terjadi kesalahan saat menghapus data',
                                confirmButtonColor: '#ef4444'
                            });
                        });
                }
            });
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\Users\User\Documents\K2-PROJECTS\k2-sipema\resources\views/roles/index.blade.php ENDPATH**/ ?>