<!-- resources/views/livewire/permissions-controller.blade.php -->
<div>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #edf2ff;
            --text-primary: #2d3748;
            --text-secondary: #718096;
            --border-color: #e2e8f0;
            --hover-bg: #f7fafc;
            --body-bg: #f8fafc;
            --card-bg: #ffffff;
        }
        
        [data-theme="dark"] {
            --primary-color: #6366f1;
            --primary-light: #312e81;
            --text-primary: #f9fafb;
            --text-secondary: #9ca3af;
            --border-color: #374151;
            --hover-bg: #374151;
            --body-bg: #111827;
            --card-bg: #1f2937;
        }
        
        .dashboard-card {
            border: none;
            border-radius: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
        }
        
        .card-header {
            background: transparent;
            border-bottom: 1px solid var(--border-color);
            padding: 1.25rem 1.5rem;
            font-weight: 600;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #3651c4;
            border-color: #3651c4;
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: #fff;
        }
        
        .btn-outline-info {
            color: #0891b2;
            border-color: #0891b2;
        }
        
        .btn-outline-info:hover {
            background-color: #0891b2;
            color: #fff;
        }
        
        .btn-outline-danger:hover {
            background-color: #ef4444;
            color: #fff;
        }
        
        .table td {
            vertical-align: middle;
        }
        
        .badge-success {
            background: #d1fae5;
            color: #065f46;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-danger {
            background: #fee2e2;
            color: #b91c1c;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .badge-info {
            background: #dbeafe;
            color: #1e40af;
            font-weight: 500;
            padding: 0.35rem 0.65rem;
            border-radius: 30px;
        }
        
        .action-btn {
            padding: 0.25rem 0.8rem;
            font-size: 0.8rem;
            border-radius: 30px;
            margin: 0 2px;
        }
        
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 1rem;
        }
        
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid var(--border-color);
            border-radius: 30px;
            padding: 0.375rem 1rem 0.375rem 2.5rem;
            background-color: var(--card-bg);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 0.8rem center;
            background-size: 16px;
        }
        
        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }
        
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border-color);
            border-radius: 30px;
            padding: 0.375rem 2rem 0.375rem 1rem;
            background-color: var(--card-bg);
            color: var(--text-primary);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.8rem center;
            background-size: 14px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .page-link {
            color: var(--primary-color);
            background-color: var(--card-bg);
            border-color: var(--border-color);
            margin: 0 2px;
            border-radius: 30px;
        }
        
        .modal-content {
            border: none;
            border-radius: 20px;
            background: var(--card-bg);
        }
        
        .modal-header {
            border-bottom: 1px solid var(--border-color);
            padding: 1.5rem;
            border-radius: 20px 20px 0 0;
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .modal-footer {
            border-top: 1px solid var(--border-color);
            padding: 1.5rem;
        }
        
        .modal-body .form-control,
        .modal-body .form-select {
            border-radius: 12px;
            border: 1px solid var(--border-color);
            padding: 0.625rem 1rem;
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.75rem;
        }
        
        .detail-label {
            font-weight: 600;
            width: 120px;
            color: var(--text-secondary);
        }
        
        .detail-value {
            flex: 1;
            color: var(--text-primary);
        }
        
        .livewire-loading {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(67, 97, 238, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        
        @media (max-width: 768px) {
            .detail-row {
                flex-direction: column;
            }
            .detail-label {
                width: 100%;
                margin-bottom: 0.25rem;
            }
        }
    </style>

    <div class="main-content" id="mainContent">
        <div class="container-fluid px-0">
            <!-- Header -->
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-4">
                <div>
                    <h2 class="fw-semibold mb-1">🔐 Permissions Management</h2>
                    <p class="text-muted mb-0">Manage system permissions</p>
                </div>
                <button class="btn btn-primary mt-3 mt-md-0" wire:click="openCreateModal">
                    <i class="bi bi-plus-circle me-2"></i>Add New Permission
                </button>
            </div>

            <!-- Permissions Table -->
            <div class="card dashboard-card">
                <div class="card-header d-flex align-items-center">
                    <i class="bi bi-lock me-2" style="color: var(--primary-color);"></i>
                    System Permissions
                    <span class="ms-2 small text-muted"><?php echo e(count($permissions)); ?> permissions</span>
                    <span wire:loading class="ms-3">
                        <span class="livewire-loading"></span>
                    </span>
                </div>
                <div class="card-body p-3 p-md-4">
                    <div class="table-responsive">
                        <table id="permissionsTable" class="table table-hover" style="width:100%">
                            <thead class="bg-light">
                               
                                    <th>ID</th>
                                    <th>Permission Name</th>
                                    <th>Slug</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th class="text-center">Actions</th>
                                 </thead>
                            <tbody>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $permissions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $perm): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoop($loop->index); ?><?php endif; ?>
                                 
                                      <td>#<?php echo e($perm->id); ?>

                                      <td>
                                          <strong><?php echo e($perm->name); ?></strong>
                                        </div>
                                       </td>
                                       <td><code><?php echo e($perm->slug); ?></code></td>
                                       <td><span class="badge-info"><?php echo e($perm->category); ?></span></td>
                                       <td><?php echo e($perm->description ?: '-'); ?></td>
                                       <td>
                                          <div class="form-check form-switch">
                                              <input class="form-check-input" 
                                                     type="checkbox" 
                                                     wire:change="toggleActive(<?php echo e($perm->id); ?>)" 
                                                     id="active-<?php echo e($perm->id); ?>" 
                                                     <?php echo e($perm->active ? 'checked' : ''); ?>>
                                              <label class="form-check-label small" for="active-<?php echo e($perm->id); ?>">
                                                  <?php echo e($perm->active ? 'Active' : 'Inactive'); ?>

                                              </label>
                                          </div>
                                       </td>
                                      <td class="text-center">
                                          <div class="d-flex gap-1 justify-content-center">
                                              <button class="btn btn-sm btn-outline-info action-btn"
                                                      wire:click="openViewModal(<?php echo e($perm->id); ?>)"
                                                      data-bs-toggle="modal"
                                                      data-bs-target="#viewModal"
                                                      title="View details">
                                                  <i class="bi bi-eye"></i>
                                              </button>
                                              <button class="btn btn-sm btn-outline-primary action-btn"
                                                      wire:click="openEditModal(<?php echo e($perm->id); ?>)"
                                                      data-bs-toggle="modal"
                                                      data-bs-target="#permModal"
                                                      title="Edit permission">
                                                  <i class="bi bi-pencil"></i>
                                              </button>
                                              <button class="btn btn-sm btn-outline-danger action-btn"
                                                      onclick="confirmDelete(<?php echo e($perm->id); ?>, '<?php echo e($perm->name); ?>')"
                                                      title="Delete permission">
                                                  <i class="bi bi-trash"></i>
                                              </button>
                                          </div>
                                       </td>
                                    </tr>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                                    <tr class="text-center">
                                        <td colspan="7" class="py-4 text-muted">
                                            <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                            No permissions found. Click "Add New Permission" to create one.
                                        </td>
                                    </tr>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Permission Modal -->
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($showModal): ?>
    <div class="modal fade show d-block" id="permModal" tabindex="-1" style="display: block; background: rgba(0,0,0,0.5); z-index: 1050;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi <?php echo e($editId ? 'bi-pencil-square' : 'bi-plus-circle'); ?> me-2 text-primary"></i>
                        <?php echo e($editId ? 'Edit Permission' : 'Add New Permission'); ?>

                    </h5>
                    <button type="button" class="btn-close" wire:click="closeModal"></button>
                </div>
                <form wire:submit.prevent="save">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Permission Name <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                       wire:model="name"
                                       placeholder="e.g., View Files"
                                       wire:keyup="autoSlug">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="invalid-feedback"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-medium">Slug <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" 
                                           class="form-control <?php $__errorArgs = ['slug'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                           wire:model="slug"
                                           placeholder="e.g., view-files">
                                    <button class="btn btn-outline-secondary" type="button" wire:click="autoSlug">
                                        <i class="bi bi-magic"></i> Auto
                                    </button>
                                </div>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['slug'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="invalid-feedback"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-medium">Category <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control <?php $__errorArgs = ['category'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                       wire:model="category"
                                       placeholder="e.g., files, users, roles">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['category'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <div class="invalid-feedback"><?php echo e($message); ?></div> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>

                            <div class="col-md-6">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" wire:model="active" id="active">
                                    <label class="form-check-label" for="active">Active</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-medium">Description</label>
                                <textarea class="form-control" 
                                          wire:model="description" 
                                          rows="2"
                                          placeholder="Describe what this permission allows"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" wire:click="closeModal">
                            <i class="bi bi-x-circle me-2"></i>Cancel
                        </button>
                        <button type="submit" class="btn btn-primary" wire:loading.attr="disabled">
                            <span wire:loading.remove>
                                <i class="bi <?php echo e($editId ? 'bi-check-circle' : 'bi-save'); ?> me-2"></i>
                                <?php echo e($editId ? 'Update Permission' : 'Create Permission'); ?>

                            </span>
                            <span wire:loading>
                                <span class="spinner-border spinner-border-sm me-2"></span>
                                <?php echo e($editId ? 'Updating...' : 'Creating...'); ?>

                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <!-- View Permission Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">
                        <i class="bi bi-eye me-2 text-info"></i>
                        Permission Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedPermission): ?>
                        <div class="detail-row">
                            <span class="detail-label">ID:</span>
                            <span class="detail-value">#<?php echo e($selectedPermission->id); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Name:</span>
                            <span class="detail-value fw-medium"><?php echo e($selectedPermission->name); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Slug:</span>
                            <span class="detail-value"><code><?php echo e($selectedPermission->slug); ?></code></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Category:</span>
                            <span class="detail-value"><?php echo e($selectedPermission->category); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Description:</span>
                            <span class="detail-value"><?php echo e($selectedPermission->description ?: 'No description'); ?></span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Status:</span>
                            <span class="detail-value">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedPermission->active): ?>
                                    <span class="badge-success">Active</span>
                                <?php else: ?>
                                    <span class="badge-danger">Inactive</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Created At:</span>
                            <span class="detail-value"><?php echo e($selectedPermission->created_at->format('F j, Y g:i A')); ?></span>
                        </div>
                    <?php else: ?>
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-2"></i>Close
                    </button>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($selectedPermission): ?>
                    <button type="button" class="btn btn-primary" 
                            wire:click="openEditModal(<?php echo e($selectedPermission->id); ?>)"
                            data-bs-toggle="modal"
                            data-bs-target="#permModal"
                            data-bs-dismiss="modal">
                        <i class="bi bi-pencil me-2"></i>Edit Permission
                    </button>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // SweetAlert2 Toast Configuration (same as your FileController)
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            background: 'var(--card-bg)',
            color: 'var(--text-primary)',
            showClass: {
                popup: 'animate__animated animate__fadeInRight'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutRight'
            }
        });

        let dataTable;

        function initDataTable() {
            const table = $('#permissionsTable');
            if (table.length === 0) return;
            
            try {
                if ($.fn.DataTable.isDataTable('#permissionsTable')) {
                    $('#permissionsTable').DataTable().destroy();
                    table.next('.dataTables_wrapper').remove();
                }
                
                if (table.find('tbody tr').length > 0 && !table.find('tbody td:first').text().includes('No permissions found')) {
                    dataTable = table.DataTable({
                        language: {
                            search: "🔍 Search:",
                            lengthMenu: "Show _MENU_ entries",
                            info: "Showing _START_ to _END_ of _TOTAL_ permissions",
                            infoEmpty: "Showing 0 to 0 of 0 permissions",
                            infoFiltered: "(filtered from _MAX_ total permissions)",
                            paginate: {
                                first: "First",
                                last: "Last",
                                next: "Next",
                                previous: "Prev"
                            }
                        },
                        dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                             "<'row'<'col-sm-12'tr>>" +
                             "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                        columnDefs: [
                            { targets: [0, 1, 2, 3, 4, 5], orderable: true },
                            { targets: 6, orderable: false, className: "text-center" }
                        ],
                        order: [[0, 'desc']],
                        paging: true,
                        pageLength: 10,
                        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
                    });
                    $('#recordCount').text(dataTable.data().length);
                }
            } catch (e) {
                console.warn('DataTable initialization error:', e);
            }
        }

        $(document).ready(function() {
            setTimeout(() => {
                initDataTable();
            }, 100);

            $('#permModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('overflow', 'auto');
                $('body').css('padding-right', '');
            });

            $('#viewModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('overflow', 'auto');
                $('body').css('padding-right', '');
            });

            $(window).on('resize', function() {
                if (dataTable) {
                    dataTable.columns.adjust();
                }
            });
        });

        document.addEventListener('livewire:init', function() {
            Livewire.on('open-view-modal', () => {
                $('#viewModal').modal('show');
            });

            Livewire.on('close-view-modal', () => {
                $('#viewModal').modal('hide');
            });

            Livewire.on('showSuccess', (message) => {
                Toast.fire({
                    icon: 'success',
                    title: message,
                    iconColor: '#10b981'
                });
                
                setTimeout(() => {
                    try {
                        if ($.fn.DataTable.isDataTable('#permissionsTable')) {
                            $('#permissionsTable').DataTable().destroy();
                        }
                        $('#permissionsTable').next('.dataTables_wrapper').remove();
                        initDataTable();
                    } catch (e) {
                        console.warn('Error refreshing table:', e);
                    }
                }, 200);
            });

            Livewire.on('showError', (message) => {
                Toast.fire({
                    icon: 'error',
                    title: message,
                    iconColor: '#ef4444'
                });
            });

            Livewire.on('refreshTable', () => {
                setTimeout(() => {
                    try {
                        if ($.fn.DataTable.isDataTable('#permissionsTable')) {
                            $('#permissionsTable').DataTable().destroy();
                        }
                        $('#permissionsTable').next('.dataTables_wrapper').remove();
                        initDataTable();
                    } catch (e) {
                        console.warn('Error refreshing table:', e);
                    }
                }, 100);
            });
        });

        window.confirmDelete = function(permId, permName) {
            Swal.fire({
                title: 'Delete Permission?',
                html: `Are you sure you want to delete <strong>"${permName}"</strong>?<br><br>This action cannot be undone.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                background: 'var(--card-bg)',
                color: 'var(--text-primary)',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    window.Livewire.find('<?php echo e($_instance->getId()); ?>').delete(permId);
                }
            });
        };
    </script>
</div><?php /**PATH /Users/malando/Downloads/laravelApps/mswaada/resources/views/livewire/permissions-controller.blade.php ENDPATH**/ ?>