@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease-in-out;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .module-card {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
            margin-bottom: 12px;
            overflow: hidden;
        }
        .module-header {
            background: #f1f5f9;
            padding: 10px 14px;
            border-bottom: 1px solid #e2e8f0;
        }
        .perm-checkbox-item {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 8px 12px;
            transition: all 0.15s;
        }
        .perm-checkbox-item:hover {
            border-color: #cbd5e1;
            background: #fafafa;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .modal-dialog-scrollable {
            max-height: calc(100vh - 2rem);
        }
        .modal-dialog-scrollable .modal-content {
            max-height: calc(100vh - 2rem);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .modal-dialog-scrollable .modal-body {
            overflow-y: auto !important;
            flex: 1 1 auto;
            max-height: calc(100vh - 180px);
        }
        .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
            width: 6px;
        }
        .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('content')

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <div class="d-flex align-items-center gap-2">
                <span class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                    <i class="ri-shield-user-line fs-20"></i>
                </span>
                <div>
                    <h1 class="page-title fw-bold fs-18 mb-0">Manajemen Custom Role & Hak Akses</h1>
                    <p class="text-muted mb-0 fs-12">Khusus Owner: Buat peran kustom tanpa batas dan atur izin granular untuk setiap staf/admin portal.</p>
                </div>
            </div>
        </div>
        <div class="btn-list mt-md-0 mt-2 d-flex align-items-center gap-2 flex-wrap">
            <span class="badge bg-warning-transparent text-warning border border-warning px-3 py-2 fs-12 fw-bold" title="Main Role">
                <i class="ri-vip-crown-fill me-1"></i>Owner Privileges Active
            </span>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create-role">
                <i class="ri-add-line me-1"></i> Tambah Custom Role Baru
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-roles">
                <i class="ri-refresh-line"></i>
            </button>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">TOTAL ROLE</span>
                            <h3 class="mb-0 fw-bold text-dark">{{ $stats['total_roles'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Peran terdaftar</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-shield-keyhole-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">CUSTOM ROLE</span>
                            <h3 class="mb-0 fw-bold text-success">{{ $stats['custom_roles'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Dibuat oleh Owner</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent text-success rounded-circle">
                            <i class="ri-user-settings-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">ROLE SISTEM</span>
                            <h3 class="mb-0 fw-bold text-indigo">{{ $stats['system_roles'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Termasuk Owner & Finance</span>
                        </div>
                        <div class="avatar avatar-md bg-indigo-transparent text-indigo rounded-circle">
                            <i class="ri-lock-password-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">HAK AKSES MODULAR</span>
                            <h3 class="mb-0 fw-bold text-warning">{{ $stats['total_permissions'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Daftar izin sistem</span>
                        </div>
                        <div class="avatar avatar-md bg-warning-transparent text-warning rounded-circle">
                            <i class="ri-key-2-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-header justify-content-between border-bottom-0 flex-wrap gap-2 py-3 px-3">

            <div class="d-flex align-items-center gap-2 flex-grow-1" style="max-width: 360px;">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                    <input class="form-control border-start-0" type="search" id="roles-search-input" placeholder="Cari nama role, deskripsi..." aria-label="Search">
                </div>
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <div>
                    <select id="filter-type" class="form-select form-select-sm" style="min-width: 170px;">
                        <option value="all">Semua Tipe Role</option>
                        <option value="custom">Hanya Custom Role</option>
                        <option value="system">Hanya Role Sistem</option>
                    </select>
                </div>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-roles" title="Refresh Data">
                    <i class="ri-refresh-line me-1"></i>Reset
                </button>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="table-roles" class="table table-hover text-nowrap w-100 align-middle">
                    <thead class="table-success">
                        <tr>
                            <th style="width: 50px;" class="text-center">NO</th>
                            <th>NAMA ROLE</th>
                            <th>KODE SLUG & LEVEL</th>
                            <th>DESKRIPSI PERAN</th>
                            <th class="text-center">TIPE ROLE</th>
                            <th class="text-center">HAK AKSES</th>
                            <th class="text-center">ADMIN TERDAFTAR</th>
                            <th style="width: 120px;" class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-create-role" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form id="form-create-role" class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white py-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar avatar-sm bg-white text-primary rounded-circle">
                            <i class="ri-add-line fs-16"></i>
                        </span>
                        <div>
                            <h6 class="modal-title fw-bold text-white mb-0">Tambah Custom Role Baru</h6>
                            <small class="text-white-50 fs-11">Tentukan nama role dan centang izin modular yang diberikan</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">

                        <div class="row g-3 mb-4">
                            <div class="col-md-12">
                                <label class="form-label fs-12 fw-semibold">Nama Role <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" required placeholder="Contoh: Customer Service Officer, Marketing Lead, Auditor Eksternal">
                                <small class="text-muted fs-11">Nama peran yang akan tampil di portal admin.</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fs-12 fw-semibold">Deskripsi / Tanggung Jawab Role</label>
                                <textarea class="form-control" name="description" rows="2" placeholder="Jelaskan cakupan wewenang atau peruntukan role ini..."></textarea>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="fw-bold fs-13 text-dark mb-0"><i class="ri-shield-check-line me-1 text-primary"></i> Checklist Hak Akses (Permissions)</h6>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-xs btn-outline-primary check-all-perms">Pilih Semua</button>
                                <button type="button" class="btn btn-xs btn-outline-secondary uncheck-all-perms">Batal Pilih</button>
                            </div>
                        </div>
                        <p class="text-muted fs-11 mb-3">Centang modul dan aksi yang diizinkan untuk peran ini. Hak akses yang tidak dicentang akan otomatis ditolak (HTTP 403).</p>

                        <div class="modules-container">
                            @foreach($modules as $moduleName => $perms)
                                <div class="module-card">
                                    <div class="module-header d-flex align-items-center justify-content-between">
                                        <span class="fw-bold fs-12 text-dark">
                                             <i class="ri-folder-shield-2-line me-1 text-primary"></i> Modul: {{ $moduleName }}
                                        </span>
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-xs btn-link p-0 text-primary fs-11 text-decoration-none check-module" data-module="{{ Str::slug($moduleName) }}">Semua</button>
                                            <span class="text-muted fs-11">&bull;</span>
                                            <button type="button" class="btn btn-xs btn-link p-0 text-secondary fs-11 text-decoration-none uncheck-module" data-module="{{ Str::slug($moduleName) }}">Kosongkan</button>
                                        </div>
                                    </div>
                                    <div class="p-3">
                                        <div class="row g-2">
                                            @foreach($perms as $p)
                                                <div class="col-md-6 col-12">
                                                    <div class="form-check perm-checkbox-item d-flex align-items-start gap-2">
                                                        <input class="form-check-input mt-1 perm-check mod-{{ Str::slug($moduleName) }}" type="checkbox" name="permissions[]" value="{{ $p->id }}" id="create_perm_{{ $p->id }}">
                                                        <label class="form-check-label fs-12 w-100 cursor-pointer" for="create_perm_{{ $p->id }}">
                                                            <span class="fw-semibold text-dark d-block">{{ $p->name }}</span>
                                                            <small class="text-muted d-block fs-10 font-monospace">{{ $p->slug }}</small>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-primary px-3" id="btn-submit-create-role">
                            <i class="ri-save-line me-1"></i> Simpan Role Baru
                        </button>
                    </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modal-edit-role" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form id="form-edit-role" class="modal-content border-0 shadow">
                <input type="hidden" id="edit-role-id" name="id">
                <div class="modal-header bg-warning text-dark py-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar avatar-sm bg-white text-dark rounded-circle">
                            <i class="ri-edit-line fs-16"></i>
                        </span>
                        <div>
                            <h6 class="modal-title fw-bold text-dark mb-0">Edit Custom Role & Hak Akses</h6>
                            <small class="text-muted fs-11">Perbarui nama atau sinkronisasi izin modular</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">

                        <div class="row g-3 mb-4">
                            <div class="col-md-12">
                                <label class="form-label fs-12 fw-semibold">Nama Role <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="edit-role-name" name="name" required>
                                <small class="text-muted fs-11" id="edit-role-name-hint">Nama peran.</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fs-12 fw-semibold">Deskripsi / Catatan Peran</label>
                                <textarea class="form-control" id="edit-role-description" name="description" rows="2"></textarea>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h6 class="fw-bold fs-13 text-dark mb-0"><i class="ri-shield-check-line me-1 text-primary"></i> Hak Akses Role</h6>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-xs btn-outline-primary check-all-perms-edit">Pilih Semua</button>
                                <button type="button" class="btn btn-xs btn-outline-secondary uncheck-all-perms-edit">Batal Pilih</button>
                            </div>
                        </div>

                        <div class="modules-container">
                            @foreach($modules as $moduleName => $perms)
                                <div class="module-card">
                                    <div class="module-header d-flex align-items-center justify-content-between">
                                        <span class="fw-bold fs-12 text-dark">
                                            <i class="ri-folder-shield-2-line me-1 text-primary"></i> Modul: {{ $moduleName }}
                                        </span>
                                        <div class="d-flex gap-1">
                                            <button type="button" class="btn btn-xs btn-link p-0 text-primary fs-11 text-decoration-none check-module-edit" data-module="{{ Str::slug($moduleName) }}">Semua</button>
                                            <span class="text-muted fs-11">&bull;</span>
                                            <button type="button" class="btn btn-xs btn-link p-0 text-secondary fs-11 text-decoration-none uncheck-module-edit" data-module="{{ Str::slug($moduleName) }}">Kosongkan</button>
                                        </div>
                                    </div>
                                    <div class="p-3">
                                        <div class="row g-2">
                                            @foreach($perms as $p)
                                                <div class="col-md-6 col-12">
                                                    <div class="form-check perm-checkbox-item d-flex align-items-start gap-2">
                                                        <input class="form-check-input mt-1 perm-check-edit mod-edit-{{ Str::slug($moduleName) }}" type="checkbox" name="permissions[]" value="{{ $p->id }}" id="edit_perm_{{ $p->id }}">
                                                        <label class="form-check-label fs-12 w-100 cursor-pointer" for="edit_perm_{{ $p->id }}">
                                                            <span class="fw-semibold text-dark d-block">{{ $p->name }}</span>
                                                            <small class="text-muted d-block fs-10 font-monospace">{{ $p->slug }}</small>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-warning px-3 fw-bold" id="btn-submit-edit-role">
                            <i class="ri-save-line me-1"></i> Perbarui Role
                        </button>
                    </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modal-view-perms" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light py-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="avatar avatar-sm bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-key-2-line fs-16"></i>
                        </span>
                        <div>
                            <h6 class="modal-title fw-bold text-dark mb-0" id="view-role-title">Daftar Hak Akses Role</h6>
                            <small class="text-muted fs-11" id="view-role-subtitle"></small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3">
                    <div id="view-perms-content"></div>
                </div>
                <div class="modal-footer bg-light py-2">
                    <button type="button" class="btn btn-sm btn-light border" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');

            const table = (window.AppDatatable && typeof AppDatatable.init === 'function')
                ? AppDatatable.init('#table-roles', {
                    ajax: {
                        url: '{{ route("roles.api.list") }}',
                        data: function(d) {
                            d.type = $('#filter-type').val();
                        }
                    },
                    columns: [
                        { data: 'row_num', orderable: false, searchable: false, className: 'text-center' },
                        {
                            data: 'name',
                            render: function(data, type, row) {
                                return `<div class="fw-semibold text-dark fs-13">${data}</div>`;
                            }
                        },
                        {
                            data: null,
                            render: function(data, type, row) {
                                return `<div>
                                            <span class="font-monospace text-primary fs-11 d-block">${row.slug}</span>
                                            <div class="mt-1">${row.level_html}</div>
                                        </div>`;
                            }
                        },
                        {
                            data: 'description',
                            render: function(data) {
                                return `<small class="text-muted fs-11 d-block text-wrap" style="max-width: 250px;">${data}</small>`;
                            }
                        },
                        { data: 'type_html', className: 'text-center' },
                        { data: 'permissions_html', className: 'text-center' },
                        { data: 'admins_html', className: 'text-center' },
                        { data: 'action_html', orderable: false, searchable: false, className: 'text-center' }
                    ]
                })
                : $('#table-roles').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    stateSave: true,
                    stateDuration: 7200,
                    dom: "<'row'<'col-12'tr>>" +
                         "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                    ajax: {
                        url: '{{ route("roles.api.list") }}',
                        data: function(d) {
                            d.type = $('#filter-type').val();
                        }
                    },
                    columns: [
                        { data: 'row_num', orderable: false, searchable: false, className: 'text-center' },
                        { data: 'name' },
                        { data: 'slug' },
                        { data: 'description' },
                        { data: 'type_html', className: 'text-center' },
                        { data: 'permissions_html', className: 'text-center' },
                        { data: 'admins_html', className: 'text-center' },
                        { data: 'action_html', orderable: false, searchable: false, className: 'text-center' }
                    ],
                    language: {
                        processing: '<div class="spinner-border spinner-border-sm text-primary me-2"></div> Memuat data...',
                        lengthMenu: 'Tampilkan _MENU_ entri',
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                        infoEmpty: 'Menampilkan 0 sampai 0 dari 0 data',
                        infoFiltered: '(disaring dari _MAX_ total data)',
                        zeroRecords: '<div class="py-4 text-center text-muted"><i class="ri-inbox-2-line fs-24 d-block mb-1 text-muted opacity-50"></i><span class="fs-13">Tidak ada data role ditemukan</span></div>',
                        paginate: {
                            first: '<i class="ri-skip-back-line"></i>',
                            last: '<i class="ri-skip-forward-line"></i>',
                            next: '<i class="ri-arrow-right-s-line"></i>',
                            previous: '<i class="ri-arrow-left-s-line"></i>'
                        }
                    }
                });

            if (typeof AppDatatable !== 'undefined' && typeof AppDatatable.bindSearch === 'function') {
                AppDatatable.bindSearch(table, '#roles-search-input');
            } else {
                let timeout;
                $('#roles-search-input').on('input', function() {
                    clearTimeout(timeout);
                    const val = $(this).val();
                    timeout = setTimeout(function() {
                        table.search(val).draw();
                    }, 400);
                });
            }

            $('#filter-type').on('change', function() {
                table.page(0).draw();
            });

            $('#btn-refresh-roles').on('click', function() {
                $('#roles-search-input').val('');
                $('#filter-type').val('all');
                table.search('').draw(false);
            });

            $('.check-all-perms').on('click', function() {
                $('.perm-check').prop('checked', true);
            });
            $('.uncheck-all-perms').on('click', function() {
                $('.perm-check').prop('checked', false);
            });
            $(document).on('click', '.check-module', function() {
                const mod = $(this).data('module');
                $('.mod-' + mod).prop('checked', true);
            });
            $(document).on('click', '.uncheck-module', function() {
                const mod = $(this).data('module');
                $('.mod-' + mod).prop('checked', false);
            });

            $('.check-all-perms-edit').on('click', function() {
                $('.perm-check-edit').prop('checked', true);
            });
            $('.uncheck-all-perms-edit').on('click', function() {
                $('.perm-check-edit').prop('checked', false);
            });
            $(document).on('click', '.check-module-edit', function() {
                const mod = $(this).data('module');
                $('.mod-edit-' + mod).prop('checked', true);
            });
            $(document).on('click', '.uncheck-module-edit', function() {
                const mod = $(this).data('module');
                $('.mod-edit-' + mod).prop('checked', false);
            });

            $('#form-create-role').on('submit', function(e) {
                e.preventDefault();
                const btn = $('#btn-submit-create-role');
                btn.prop('disabled', true).html('<i class="ri-loader-4-line spin-rotate me-1"></i> Menyimpan...');

                $.ajax({
                    url: '{{ route("roles.store") }}',
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: $(this).serialize(),
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Simpan Role Baru');
                        $('#modal-create-role').modal('hide');
                        $('#form-create-role')[0].reset();
                        alert(res.message);
                        table.draw();
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Simpan Role Baru');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal membuat role';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-edit-role', function() {
                const id = $(this).data('id');
                $.getJSON(`{{ url('/roles') }}/${id}`, function(res) {
                    if (res.success && res.data) {
                        const d = res.data;
                        $('#edit-role-id').val(d.id);
                        $('#edit-role-name').val(d.name);
                        $('#edit-role-description').val(d.description);

                        if (d.is_system) {
                            $('#edit-role-name').prop('disabled', true);
                            $('#edit-role-name-hint').text('Nama role sistem dilindungi dan tidak dapat diubah.');
                        } else {
                            $('#edit-role-name').prop('disabled', false);
                            $('#edit-role-name-hint').text('Nama peran.');
                        }

                        $('.perm-check-edit').prop('checked', false);

                        if (d.permission_ids && d.permission_ids.length > 0) {
                            d.permission_ids.forEach(function(pId) {
                                $(`#edit_perm_${pId}`).prop('checked', true);
                            });
                        }

                        $('#modal-edit-role').modal('show');
                    }
                });
            });

            $('#form-edit-role').on('submit', function(e) {
                e.preventDefault();
                const id = $('#edit-role-id').val();
                const btn = $('#btn-submit-edit-role');
                btn.prop('disabled', true).html('<i class="ri-loader-4-line spin-rotate me-1"></i> Menyimpan...');

                $.ajax({
                    url: `{{ url('/roles') }}/${id}`,
                    type: 'PUT',
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    data: $(this).serialize(),
                    success: function(res) {
                        btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Perbarui Role');
                        $('#modal-edit-role').modal('hide');
                        alert(res.message);
                        table.draw();
                    },
                    error: function(err) {
                        btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Perbarui Role');
                        const msg = err.responseJSON ? err.responseJSON.message : 'Gagal memperbarui role';
                        alert('Error: ' + msg);
                    }
                });
            });

            $(document).on('click', '.btn-view-perms', function() {
                const id = $(this).data('id');
                $.getJSON(`{{ url('/roles') }}/${id}`, function(res) {
                    if (res.success && res.data) {
                        const d = res.data;
                        $('#view-role-title').text(`Hak Akses: ${d.name}`);
                        $('#view-role-subtitle').text(`${d.is_owner ? 'Role Owner (Akses Tak Terbatas)' : d.permissions.length + ' Izin Terpasang'}`);

                        let content = '';
                        if (d.is_owner) {
                            content = `
                                <div class="alert alert-warning border border-warning d-flex align-items-center gap-2 mb-0">
                                    <i class="ri-vip-crown-fill fs-20 text-warning"></i>
                                    <div>
                                        <span class="fw-bold fs-13 d-block">Hak Akses Penuh (Full Authority)</span>
                                        <small class="fs-12">Role Owner adalah peran inti pemegang otoritas absolut seluruh modul portal tanpa batasan.</small>
                                    </div>
                                </div>
                            `;
                        } else if (d.permissions && d.permissions.length > 0) {

                            const grouped = {};
                            d.permissions.forEach(p => {
                                if (!grouped[p.module]) grouped[p.module] = [];
                                grouped[p.module].push(p);
                            });

                            content = '<div class="d-flex flex-column gap-3">';
                            for (const mod in grouped) {
                                content += `
                                    <div class="border rounded p-2 bg-light">
                                        <span class="fw-bold fs-11 text-dark d-block mb-1 text-uppercase">
                                            <i class="ri-folder-shield-2-line me-1 text-primary"></i> ${mod}
                                        </span>
                                        <div class="d-flex flex-wrap gap-1">
                                            ${grouped[mod].map(p => `<span class="badge bg-white text-dark border fs-11">${p.name}</span>`).join('')}
                                        </div>
                                    </div>
                                `;
                            }
                            content += '</div>';
                        } else {
                            content = '<div class="text-center py-4 text-muted fs-12">Belum ada hak akses yang diberikan ke role ini.</div>';
                        }

                        $('#view-perms-content').html(content);
                        $('#modal-view-perms').modal('show');
                    }
                });
            });

            $(document).on('click', '.btn-delete-role', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');

                if (confirm(`Apakah Anda yakin ingin menghapus custom role '${name}'? Tindakan ini tidak dapat dibatalkan.`)) {
                    $.ajax({
                        url: `{{ url('/roles') }}/${id}`,
                        type: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': csrfToken },
                        success: function(res) {
                            alert(res.message);
                            table.draw();
                        },
                        error: function(err) {
                            const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menghapus role';
                            alert('Error: ' + msg);
                        }
                    });
                }
            });
        });
    </script>
@endsection