@extends('admin.layouts.master')

@section('title', 'Role Management')

@section('css')
<style>
/* ══════════════════════════════════════════
   ROLE MANAGEMENT — Optimized Theme-Aware
══════════════════════════════════════════ */

/* ── Header ── */
.rm-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; padding-bottom:16px; border-bottom:2px solid var(--line); }
.rm-header-left h1 { font-size:20px; font-weight:800; color:var(--ink); margin:0 0 4px; display:flex; align-items:center; gap:10px; letter-spacing:-.4px; }
.rm-header-left h1 i { color:var(--acc); font-size:17px; }
.rm-header-left p { font-size:13px; color:var(--muted); margin:0; font-weight:500; }

/* ── Stats strip ── */
.rm-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
@media(max-width:600px){ .rm-stats { grid-template-columns:repeat(3,1fr); } }
.rm-stat { background:var(--panel); border:1.5px solid var(--line); border-left:3px solid var(--acc); padding:12px 16px; display:flex; align-items:center; gap:12px; }
.rm-stat.s2 { border-left-color:#10b981; }
.rm-stat.s3 { border-left-color:#f59e0b; }
.rm-stat-icon { width:36px; height:36px; background:var(--acc-soft); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--acc); flex-shrink:0; }
.rm-stat.s2 .rm-stat-icon { background:rgba(16,185,129,.12); color:#10b981; }
.rm-stat.s3 .rm-stat-icon { background:rgba(245,158,11,.12); color:#f59e0b; }
.rm-stat-val { font-size:20px; font-weight:900; color:var(--ink); line-height:1; }
.rm-stat-lbl { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-top:2px; }

/* ── Delete group ── */
.rm-delete-group { display:flex; align-items:center; gap:0; }
.rm-delete-select { height:38px; padding:0 10px; border:1.5px solid var(--line); border-right:none; background:var(--panel); color:var(--ink); font-size:13px; font-weight:500; outline:none; border-radius:7px 0 0 7px; min-width:200px; transition:border-color .18s; }
.rm-delete-select:focus { border-color:#ef4444; }
.rm-delete-btn { height:38px; padding:0 16px; background:rgba(239,68,68,.1); color:#ef4444; border:1.5px solid #ef4444; border-radius:0 7px 7px 0; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .18s; white-space:nowrap; }
.rm-delete-btn:hover { background:#ef4444; color:#fff; }

/* ── Main card ── */
.rm-card { background:var(--panel); border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }

/* ── Tabs ── */
.rm-tabs-wrap { background:var(--surface); border-bottom:2px solid var(--line); padding:0; overflow-x:auto; scrollbar-width:none; }
.rm-tabs-wrap::-webkit-scrollbar { display:none; }
.rm-tabs { display:flex; gap:0; padding:16px 20px 0; flex-wrap:nowrap; }
.rm-tab { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border:1.5px solid transparent; background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; border-radius:8px 8px 0 0; margin-bottom:-2px; transition:all .18s; white-space:nowrap; position:relative; }
.rm-tab:hover { color:var(--acc); background:var(--sb-hover-bg); }
.rm-tab.active { color:var(--acc); background:var(--panel); border-color:var(--line); border-bottom-color:var(--panel); box-shadow:0 -2px 0 var(--acc) inset; }
.rm-tab i { font-size:12px; }
.rm-tab .rm-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:var(--acc-soft); color:var(--acc); border-radius:20px; font-size:10px; font-weight:800; border:1px solid var(--acc-mid); }
.rm-tab.active .rm-tab-count { background:var(--acc); color:#fff; }

/* ── Toolbar (search + toggle) ── */
.rm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.rm-search-wrap { position:relative; flex:1; min-width:200px; max-width:360px; }
.rm-search-wrap i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:12px; pointer-events:none; }
.rm-search { width:100%; height:36px; padding:0 12px 0 33px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:13px; border-radius:7px; outline:none; transition:border-color .18s; }
.rm-search:focus { border-color:var(--acc); }
.rm-search::placeholder { color:var(--muted); opacity:.6; }
.rm-toolbar-right { display:flex; align-items:center; gap:8px; }
.rm-view-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:7px; font-size:12px; font-weight:700; border:1.5px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; transition:all .18s; }
.rm-view-btn.active,.rm-view-btn:hover { background:var(--acc-soft); color:var(--acc); border-color:var(--acc-mid); }

/* ── Tab sections ── */
.rm-tab-section { display:none; padding:20px; }
.rm-tab-section.active { display:block; }

/* ── Role name ── */
.rm-name-group { background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.rm-name-group label { font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; white-space:nowrap; margin:0; }
.rm-name-input { flex:1; height:40px; padding:0 14px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:14px; font-weight:600; border-radius:7px; outline:none; transition:border-color .18s, box-shadow .18s; }
.rm-name-input:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(90,103,216,.14); }
.rm-name-input::placeholder { color:var(--muted); opacity:.6; font-weight:400; }

/* ── Select All bar ── */
.rm-select-all { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:var(--acc-soft); border:1.5px solid var(--acc-mid); border-radius:8px; margin-bottom:14px; }
.rm-select-all-left { display:flex; align-items:center; gap:10px; cursor:pointer; }
.rm-select-all input[type="checkbox"] { width:17px; height:17px; accent-color:var(--acc); cursor:pointer; flex-shrink:0; }
.rm-select-all label { font-size:13px; font-weight:700; color:var(--acc); cursor:pointer; margin:0; display:flex; align-items:center; gap:7px; }
.rm-select-all-right { font-size:12px; color:var(--acc); font-weight:600; opacity:.8; }

/* ── Permission table ── */
.rm-perm-wrap { border:1.5px solid var(--line); border-radius:10px; overflow:hidden; }
.rm-perm-table { width:100%; border-collapse:collapse; }
.rm-perm-table thead th { background:var(--surface); color:var(--muted); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:11px 16px; border-bottom:2px solid var(--line); white-space:nowrap; }
.rm-perm-table tbody tr { border-bottom:1px solid var(--line); transition:background .15s; }
.rm-perm-table tbody tr:last-child { border-bottom:none; }
.rm-perm-table tbody tr:hover { background:var(--sb-hover-bg); }
.rm-perm-table tbody td { padding:10px 16px; vertical-align:top; }
.rm-perm-table tbody tr.hidden-row { display:none; }

/* Prefix cell */
.rm-prefix-cell { width:220px; background:var(--surface); border-right:3px solid var(--acc-mid); }
.rm-prefix-inner { display:flex; align-items:center; gap:8px; }
.rm-prefix-inner input[type="checkbox"] { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; flex-shrink:0; }
.rm-prefix-inner label { font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; margin:0; display:flex; align-items:center; gap:7px; }
.rm-prefix-inner label i { color:var(--acc); font-size:12px; }
.rm-prefix-inner .rm-group-count { margin-left:auto; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--line); padding:1px 7px; border-radius:20px; white-space:nowrap; }

/* Permission cards */
.rm-perm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:7px; }
.rm-perm-grid.view-list { grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.rm-perm-card { background:var(--panel); border:1.5px solid var(--line); border-radius:7px; padding:7px 11px; cursor:pointer; transition:all .18s; display:flex; align-items:center; gap:8px; }
.rm-perm-card:hover { border-color:var(--acc-mid); background:var(--acc-soft); transform:translateY(-1px); box-shadow:0 3px 10px rgba(90,103,216,.1); }
.rm-perm-card input[type="checkbox"] { width:15px; height:15px; accent-color:var(--acc); cursor:pointer; flex-shrink:0; }
.rm-perm-card label { font-size:12.5px; color:var(--ink); cursor:pointer; margin:0; line-height:1.4; font-weight:500; }
.rm-perm-card:has(input:checked) { border-color:var(--acc-mid); background:var(--acc-soft); }
.rm-perm-card:has(input:checked) label { font-weight:700; color:var(--acc); }

/* ── Empty ── */
.rm-empty { text-align:center; padding:40px 20px; color:var(--muted); }
.rm-empty i { font-size:32px; display:block; margin-bottom:10px; opacity:.35; }
.rm-empty strong { display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }

/* ── Save button ── */
.rm-save-btn { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:11px 24px; background:var(--acc); color:#fff; font-size:13.5px; font-weight:700; border:none; border-radius:9px; box-shadow:0 4px 16px rgba(90,103,216,.35); cursor:pointer; transition:all .22s; }
.rm-save-btn:hover { background:var(--acc-dark); transform:translateY(-1px); box-shadow:0 6px 22px rgba(90,103,216,.45); }
.rm-save-btn i { font-size:13px; }

/* ── Responsive ── */
@media(max-width:768px) {
    .rm-header { flex-direction:column; align-items:flex-start; }
    .rm-perm-grid { grid-template-columns:1fr 1fr; }
    .rm-prefix-cell { width:150px; }
    .rm-name-group { flex-direction:column; align-items:flex-start; }
    .rm-name-input { width:100%; }
}
</style>
@endsection


@section('content')

{{-- Header --}}
<div class="rm-header">
    <div class="rm-header-left">
        <h1><i class="fas fa-shield-alt"></i> Roles & Permissions</h1>
        <p>Configure user roles and their access permissions</p>
    </div>
    <form id="deleteRoleForm">
        @csrf
        @method('DELETE')
        <div class="rm-delete-group">
            <select name="role_id" id="roleSelectDelete" class="rm-delete-select">
                <option value="">Select role to delete...</option>
                @foreach($roles as $role)
                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="rm-delete-btn">
                <i class="fas fa-trash"></i> Delete
            </button>
        </div>
    </form>
</div>

{{-- Stats --}}
<div class="rm-stats">
    <div class="rm-stat">
        <div class="rm-stat-icon"><i class="fas fa-user-tag"></i></div>
        <div>
            <div class="rm-stat-val">{{ $roles->count() }}</div>
            <div class="rm-stat-lbl">Total Roles</div>
        </div>
    </div>
    <div class="rm-stat s2">
        <div class="rm-stat-icon"><i class="fas fa-key"></i></div>
        <div>
            <div class="rm-stat-val">{{ $permissions->flatten()->count() }}</div>
            <div class="rm-stat-lbl">Permissions</div>
        </div>
    </div>
    <div class="rm-stat s3">
        <div class="rm-stat-icon"><i class="fas fa-layer-group"></i></div>
        <div>
            <div class="rm-stat-val">{{ $permissions->count() }}</div>
            <div class="rm-stat-lbl">Groups</div>
        </div>
    </div>
</div>

{{-- Main Card --}}
<div class="rm-card">

    {{-- Tabs --}}
    <div class="rm-tabs-wrap">
        <div class="rm-tabs">
            <button class="rm-tab active" data-tab="role-new">
                <i class="fas fa-plus-circle"></i> New Role
            </button>
            @foreach($roles as $role)
                <button class="rm-tab" data-tab="role-{{ $role->id }}">
                    <i class="fas fa-user-shield"></i>
                    {{ $role->name }}
                    <span class="rm-tab-count">{{ $role->permissions->count() }}</span>
                </button>
            @endforeach
        </div>
    </div>

    {{-- Toolbar --}}
    <div class="rm-toolbar">
        <div class="rm-search-wrap">
            <i class="fas fa-search"></i>
            <input type="text" id="permissionSearch" class="rm-search" placeholder="Search permissions...">
        </div>
        <div class="rm-toolbar-right">
            <button type="button" class="rm-view-btn active" id="viewGrid" title="Grid view">
                <i class="fas fa-th-large"></i> Grid
            </button>
            <button type="button" class="rm-view-btn" id="viewList" title="List view">
                <i class="fas fa-list"></i> List
            </button>
        </div>
    </div>

    {{-- ══ CREATE NEW ROLE ══ --}}
    <div class="rm-tab-section active" id="tab-role-new">
        <form action="{{ route('roles.store') }}" method="POST">
            @csrf

            <div class="rm-name-group">
                <label><i class="fas fa-tag" style="color:var(--acc)"></i> Role Name</label>
                <input type="text" name="name" class="rm-name-input" placeholder="e.g. Editor, Moderator..." required>
            </div>

            <div class="rm-select-all">
                <div class="rm-select-all-left">
                    <input type="checkbox" id="selectAllNew">
                    <label for="selectAllNew">
                        <i class="fas fa-check-double"></i> Grant All Permissions
                    </label>
                </div>
                <span class="rm-select-all-right" id="countNew">0 / {{ $permissions->flatten()->count() }} selected</span>
            </div>

            <div class="rm-perm-wrap">
                <table class="rm-perm-table">
                    <thead>
                        <tr>
                            <th style="width:220px;">Group</th>
                            <th>Permissions</th>
                        </tr>
                    </thead>
                    <tbody id="permTableNew">
                        @forelse($permissions as $group)
                            <tr class="permission-row">
                                <td class="rm-prefix-cell">
                                    <div class="rm-prefix-inner">
                                        <input type="checkbox" class="group-checkbox" id="groupNew{{ $loop->index }}">
                                        <label for="groupNew{{ $loop->index }}">
                                            <i class="fas fa-folder-open"></i>
                                            {{ $group[0]->prefix }}
                                        </label>
                                        <span class="rm-group-count">{{ count($group) }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="rm-perm-grid perm-grid-target">
                                        @foreach($group as $perm)
                                            <div class="rm-perm-card">
                                                <input type="checkbox" class="child-checkbox"
                                                    name="permission_id[]"
                                                    value="{{ $perm->id }}"
                                                    id="permNew{{ $perm->id }}">
                                                <label for="permNew{{ $perm->id }}">
                                                    {{ str_replace(strtolower($group[0]->prefix).' ', '', strtolower($perm->display_name)) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="2">
                                <div class="rm-empty">
                                    <i class="fas fa-inbox"></i>
                                    <strong>No permissions available</strong>
                                </div>
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <button type="submit" class="rm-save-btn">
                <i class="fas fa-plus-circle"></i> Create Role
            </button>
        </form>
    </div>

    {{-- ══ EXISTING ROLES ══ --}}
    @foreach($roles as $role)
        @php $rolePermIds = $role->permissions->pluck('id')->toArray(); @endphp
        <div class="rm-tab-section" id="tab-role-{{ $role->id }}">
            <form action="{{ route('roles.update', $role->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="rm-name-group">
                    <label><i class="fas fa-tag" style="color:var(--acc)"></i> Role Name</label>
                    <input type="text" name="name" class="rm-name-input" value="{{ $role->name }}" required>
                </div>

                <div class="rm-select-all">
                    <div class="rm-select-all-left">
                        <input type="checkbox" class="select-all-existing"
                               id="selectAll{{ $role->id }}"
                               data-section="tab-role-{{ $role->id }}">
                        <label for="selectAll{{ $role->id }}">
                            <i class="fas fa-check-double"></i> Grant All Permissions
                        </label>
                    </div>
                    <span class="rm-select-all-right role-counter" data-role="{{ $role->id }}">
                        {{ count($rolePermIds) }} / {{ $permissions->flatten()->count() }} selected
                    </span>
                </div>

                <div class="rm-perm-wrap">
                    <table class="rm-perm-table">
                        <thead>
                            <tr>
                                <th style="width:220px;">Group</th>
                                <th>Permissions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($permissions as $group)
                                <tr class="permission-row">
                                    <td class="rm-prefix-cell">
                                        <div class="rm-prefix-inner">
                                            <input type="checkbox" class="group-checkbox"
                                                   id="group{{ $role->id }}_{{ $loop->index }}">
                                            <label for="group{{ $role->id }}_{{ $loop->index }}">
                                                <i class="fas fa-folder-open"></i>
                                                {{ $group[0]->prefix }}
                                            </label>
                                            <span class="rm-group-count">{{ count($group) }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="rm-perm-grid perm-grid-target">
                                            @foreach($group as $perm)
                                                <div class="rm-perm-card">
                                                    <input type="checkbox" class="child-checkbox"
                                                        name="permission_id[]"
                                                        value="{{ $perm->id }}"
                                                        id="perm{{ $role->id }}_{{ $perm->id }}"
                                                        {{ in_array($perm->id, $rolePermIds) ? 'checked' : '' }}>
                                                    <label for="perm{{ $role->id }}_{{ $perm->id }}">
                                                        {{ $perm->display_name }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="2">
                                    <div class="rm-empty">
                                        <i class="fas fa-inbox"></i>
                                        <strong>No permissions available</strong>
                                    </div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <button type="submit" class="rm-save-btn">
                    <i class="fas fa-save"></i> Update Role
                </button>
            </form>
        </div>
    @endforeach

</div>{{-- end rm-card --}}

@endsection


@section('js')
<script>
$(function () {

    /* ════════════════════════════════════
       Tabs
    ════════════════════════════════════ */
    $('.rm-tab').on('click', function () {
        $('.rm-tab').removeClass('active');
        $(this).addClass('active');
        var tab = $(this).data('tab');
        $('.rm-tab-section').removeClass('active');
        $('#tab-' + tab).addClass('active');
        // scroll to card top
        $('html,body').animate({ scrollTop: $('.rm-card').offset().top - 20 }, 200);
    });

    /* ════════════════════════════════════
       Grid / List view toggle
    ════════════════════════════════════ */
    $('#viewGrid').on('click', function () {
        $(this).addClass('active'); $('#viewList').removeClass('active');
        $('.perm-grid-target').removeClass('view-list');
    });
    $('#viewList').on('click', function () {
        $(this).addClass('active'); $('#viewGrid').removeClass('active');
        $('.perm-grid-target').addClass('view-list');
    });

    /* ════════════════════════════════════
       Counter helpers
    ════════════════════════════════════ */
    var totalPerms = {{ $permissions->flatten()->count() }};

    function updateCounter($section) {
        var checked = $section.find('.child-checkbox:checked').length;
        var $counter = $section.find('.rm-select-all-right');
        $counter.text(checked + ' / ' + totalPerms + ' selected');
    }

    // init counters
    $('.rm-tab-section').each(function () { updateCounter($(this)); });

    /* ════════════════════════════════════
       Group checkbox → toggle all children
    ════════════════════════════════════ */
    $(document).on('change', '.group-checkbox', function () {
        var $row     = $(this).closest('tr');
        var checked  = $(this).prop('checked');
        $row.find('.child-checkbox').prop('checked', checked);
        var $section = $(this).closest('.rm-tab-section');
        syncSelectAll($section);
        updateCounter($section);
    });

    /* ════════════════════════════════════
       Child checkbox → sync group + counter
    ════════════════════════════════════ */
    $(document).on('change', '.child-checkbox', function () {
        var $section = $(this).closest('.rm-tab-section');
        syncGroupRow($(this).closest('tr'));
        syncSelectAll($section);
        updateCounter($section);
    });

    function syncGroupRow($row) {
        var total   = $row.find('.child-checkbox').length;
        var checked = $row.find('.child-checkbox:checked').length;
        $row.find('.group-checkbox').prop({
            checked      : total > 0 && total === checked,
            indeterminate: checked > 0 && checked < total
        });
    }

    function syncSelectAll($section) {
        var total   = $section.find('.child-checkbox').length;
        var checked = $section.find('.child-checkbox:checked').length;
        $section.find('.select-all-existing, #selectAllNew').prop({
            checked      : total > 0 && total === checked,
            indeterminate: checked > 0 && checked < total
        });
    }

    /* Initial sync all */
    $('.rm-tab-section').each(function () {
        var $section = $(this);
        $section.find('.permission-row').each(function () { syncGroupRow($(this)); });
        syncSelectAll($section);
    });

    /* ════════════════════════════════════
       Select All — new role
    ════════════════════════════════════ */
    $('#selectAllNew').on('change', function () {
        var $section = $('#tab-role-new');
        $section.find('.child-checkbox, .group-checkbox').prop('checked', this.checked).prop('indeterminate', false);
        updateCounter($section);
    });

    /* ════════════════════════════════════
       Select All — existing roles
    ════════════════════════════════════ */
    $(document).on('change', '.select-all-existing', function () {
        var $section = $(this).closest('.rm-tab-section');
        $section.find('.child-checkbox, .group-checkbox').prop('checked', this.checked).prop('indeterminate', false);
        updateCounter($section);
    });

    /* ════════════════════════════════════
       Permission search
    ════════════════════════════════════ */
    var searchTimer;
    $('#permissionSearch').on('input', function () {
        clearTimeout(searchTimer);
        var val = $(this).val().toLowerCase().trim();
        searchTimer = setTimeout(function () {
            $('.permission-row').each(function () {
                if (!val) { $(this).show(); return; }
                var match = $(this).text().toLowerCase().includes(val);
                $(this).toggleClass('hidden-row', !match);
                if (match) $(this).show(); else $(this).hide();
            });
        }, 150);
    });

    /* ════════════════════════════════════
       Delete role
    ════════════════════════════════════ */
    $('#deleteRoleForm').on('submit', function (e) {
        e.preventDefault();
        var roleId = $('#roleSelectDelete').val();
        if (!roleId) { toastr.warning('Please select a role to delete.'); return; }

        var doDelete = function () {
            $.ajax({
                url : '{{ route("roles.destroy", 0) }}'.replace('0', roleId),
                type: 'POST',
                data: { _method: 'DELETE', _token: '{{ csrf_token() }}' },
                success: function (res) {
                    if (res.success) {
                        toastr.success('Role deleted!');
                        setTimeout(function () { location.reload(); }, 1000);
                    } else {
                        toastr.error(res.error || 'Failed to delete role.');
                    }
                },
                error: function (xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Error occurred.');
                }
            });
        };

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Delete this role?',
                text : 'This action cannot be undone.',
                icon : 'warning',
                showCancelButton   : true,
                confirmButtonColor : '#ef4444',
                cancelButtonColor  : '#6c757d',
                confirmButtonText  : 'Yes, delete it!'
            }).then(function (r) { if (r.isConfirmed) doDelete(); });
        } else {
            if (confirm('Delete this role permanently?')) doDelete();
        }
    });

});
</script>
@endsection