@extends('Admin.layout')
@section('content')
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>

/* =========================================================
   PERMISSION PAGE - COLOR ONLY DESIGN IMPROVEMENT
   No alignment / spacing / sizing / functionality changes
   ========================================================= */

/* ---------- Light Mode ---------- */

.permission-wrapper {
    background: transparent;
}

/* Main information card */
.info-card {
    background: #ffffff;
    border: 1px solid #e9edf3;
    box-shadow: 0 4px 18px rgba(31, 41, 55, 0.05);
}

/* Information boxes */
.info-item {
    background: #f9fafc;
    border-color: #e5e9ef;
}

.info-label {
    color: #7b8492;
}

.info-value {
    color: #252b33;
}

/* Main access card */
.access-card {
    background: #ffffff;
    border: 1px solid #e5e9ef;
    box-shadow: 0 4px 20px rgba(31, 41, 55, 0.05);
}

/* Toolbar */
.access-toolbar {
    background: #ffffff;
    border-bottom-color: #e6eaf0;
}

/* Search */
.search-box .input-group-text {
    background: #f8fafc;
    border-color: #dfe4ea;
}

.search-box .form-control {
    background: #f8fafc;
    border-color: #dfe4ea;
    color: #252b33;
}

.search-box .form-control::placeholder {
    color: #9aa3af;
}

/* Permission background area */
.permission-section {
    background: #f5f7fa;
}

/* Inner permission card */
.permission-inner-card {
    background: #ffffff;
    border-color: #e2e7ee;
    box-shadow: 0 6px 22px rgba(31, 41, 55, 0.06);
}

/* Permission heading */
.permission-heading-icon {
    background: #eef4ff;
    color: #d62b1c;
}

.permission-heading h6 {
    color: #303640;
}

.permission-heading small {
    color: #89919d;
}

/* Module items */
.module-item {
    background: #ffffff;
    border-color: #e3e7ed !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.035);
}

/* Module header */
.module-header-row {
    background: #ffffff;
}

.module-header-row .module-button {
    background: #ffffff !important;
    color: #343a40;
}

.module-header-row .module-button:not(.collapsed) {
    background: #f4f7fc !important;
    color: #0d6efd;
}

.module-title-text {
    color: #3f4650;
}

.module-button:not(.collapsed) .module-title-text {
    color: #0d6efd;
}

/* Module icon */
.module-icon {
    background: #edf3ff;
    color: #cd0e0e;
}

/* Module count */
.module-count {
    background: #fbe8ef !important;
    color: #8b1730 !important;
}

/* Select all area */
.module-select-all {
    background: #f8fafc;
    border-left-color: #e4e8ed;
}

.module-select-all .form-check-label {
    color: #68717d;
}

/* Permission body */
.permission-body {
    background: #ffffff;
    border-top-color: #edf0f3;
}

/* Permission rows */
.permission-row {
    border-bottom-color: #edf0f3;
}

.permission-name {
    color: #3f4650;
}

.permission-key {
    color: #98a0aa;
}

/* Save area */
.save-section {
    background: #ffffff;
    border-top-color: #e5e9ef;
}

/* Buttons */
.save-btn {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}


/* =========================================================
   DARK MODE
   Supports common Bootstrap/theme dark-mode selectors
   ========================================================= */

html[data-bs-theme="dark"] .info-card,
body.dark-mode .info-card,
body.dark .info-card,
.dark-mode .info-card {
    background: #171b22;
    border-color: #2b323d;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.20);
}

html[data-bs-theme="dark"] .info-item,
body.dark-mode .info-item,
body.dark .info-item,
.dark-mode .info-item {
    background: #1d222b;
    border-color: #303844;
}

html[data-bs-theme="dark"] .info-label,
body.dark-mode .info-label,
body.dark .info-label,
.dark-mode .info-label {
    color: #929ba8;
}

html[data-bs-theme="dark"] .info-value,
body.dark-mode .info-value,
body.dark .info-value,
.dark-mode .info-value {
    color: #edf1f5;
}


/* ---------- Access Card ---------- */

html[data-bs-theme="dark"] .access-card,
body.dark-mode .access-card,
body.dark .access-card,
.dark-mode .access-card {
    background: #171b22;
    border-color: #2b323d;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.22);
}

html[data-bs-theme="dark"] .access-toolbar,
body.dark-mode .access-toolbar,
body.dark .access-toolbar,
.dark-mode .access-toolbar {
    background: #171b22;
    border-bottom-color: #2b323d;
}


/* ---------- Search ---------- */

html[data-bs-theme="dark"] .search-box .input-group-text,
body.dark-mode .search-box .input-group-text,
body.dark .search-box .input-group-text,
.dark-mode .search-box .input-group-text {
    background: #202630;
    border-color: #343c48;
    color: #aeb7c4;
}

html[data-bs-theme="dark"] .search-box .form-control,
body.dark-mode .search-box .form-control,
body.dark .search-box .form-control,
.dark-mode .search-box .form-control {
    background: #202630;
    border-color: #343c48;
    color: #edf1f5;
}

html[data-bs-theme="dark"] .search-box .form-control::placeholder,
body.dark-mode .search-box .form-control::placeholder,
body.dark .search-box .form-control::placeholder,
.dark-mode .search-box .form-control::placeholder {
    color: #7f8997;
}


/* ---------- Permission Section ---------- */

html[data-bs-theme="dark"] .permission-section,
body.dark-mode .permission-section,
body.dark .permission-section,
.dark-mode .permission-section {
    background: #11151b;
}

html[data-bs-theme="dark"] .permission-inner-card,
body.dark-mode .permission-inner-card,
body.dark .permission-inner-card,
.dark-mode .permission-inner-card {
    background: #171b22;
    border-color: #2d3541;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.25);
}


/* ---------- Inner Heading ---------- */

html[data-bs-theme="dark"] .permission-heading-icon,
body.dark-mode .permission-heading-icon,
body.dark .permission-heading-icon,
.dark-mode .permission-heading-icon {
    background: #202d43;
    color: #6ea8fe;
}

html[data-bs-theme="dark"] .permission-heading h6,
body.dark-mode .permission-heading h6,
body.dark .permission-heading h6,
.dark-mode .permission-heading h6 {
    color: #edf1f5;
}

html[data-bs-theme="dark"] .permission-heading small,
body.dark-mode .permission-heading small,
body.dark .permission-heading small,
.dark-mode .permission-heading small {
    color: #8993a1;
}


/* ---------- Module Cards ---------- */

html[data-bs-theme="dark"] .module-item,
body.dark-mode .module-item,
body.dark .module-item,
.dark-mode .module-item {
    background: #191e26;
    border-color: #303844 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

html[data-bs-theme="dark"] .module-header-row,
body.dark-mode .module-header-row,
body.dark .module-header-row,
.dark-mode .module-header-row {
    background: #191e26;
}

html[data-bs-theme="dark"] .module-header-row .module-button,
body.dark-mode .module-header-row .module-button,
body.dark .module-header-row .module-button,
.dark-mode .module-header-row .module-button {
    background: #191e26 !important;
    color: #dce2e9;
}

html[data-bs-theme="dark"] .module-header-row .module-button:not(.collapsed),
body.dark-mode .module-header-row .module-button:not(.collapsed),
body.dark .module-header-row .module-button:not(.collapsed),
.dark-mode .module-header-row .module-button:not(.collapsed) {
    background: #202a3a !important;
    color: #6ea8fe;
}

html[data-bs-theme="dark"] .module-title-text,
body.dark-mode .module-title-text,
body.dark .module-title-text,
.dark-mode .module-title-text {
    color: #dce2e9;
}

html[data-bs-theme="dark"] .module-button:not(.collapsed) .module-title-text,
body.dark-mode .module-button:not(.collapsed) .module-title-text,
body.dark .module-button:not(.collapsed) .module-title-text,
.dark-mode .module-button:not(.collapsed) .module-title-text {
    color: #6ea8fe;
}


/* ---------- Module Icons ---------- */

html[data-bs-theme="dark"] .module-icon,
body.dark-mode .module-icon,
body.dark .module-icon,
.dark-mode .module-icon {
    background: #202d43;
    color: #6ea8fe;
}


/* ---------- Module Count ---------- */

html[data-bs-theme="dark"] .module-count,
body.dark-mode .module-count,
body.dark .module-count,
.dark-mode .module-count {
    background: #3b202b !important;
    color: #f19ab0 !important;
}


/* ---------- Select All ---------- */

html[data-bs-theme="dark"] .module-select-all,
body.dark-mode .module-select-all,
body.dark .module-select-all,
.dark-mode .module-select-all {
    background: #1e242d;
    border-left-color: #303844;
}

html[data-bs-theme="dark"] .module-select-all .form-check-label,
body.dark-mode .module-select-all .form-check-label,
body.dark .module-select-all .form-check-label,
.dark-mode .module-select-all .form-check-label {
    color: #aab3bf;
}


/* ---------- Permission Body ---------- */

html[data-bs-theme="dark"] .permission-body,
body.dark-mode .permission-body,
body.dark .permission-body,
.dark-mode .permission-body {
    background: #191e26;
    border-top-color: #303844;
}

html[data-bs-theme="dark"] .permission-row,
body.dark-mode .permission-row,
body.dark .permission-row,
.dark-mode .permission-row {
    border-bottom-color: #2d3540;
}

html[data-bs-theme="dark"] .permission-name,
body.dark-mode .permission-name,
body.dark .permission-name,
.dark-mode .permission-name {
    color: #dce2e9;
}

html[data-bs-theme="dark"] .permission-key,
body.dark-mode .permission-key,
body.dark .permission-key,
.dark-mode .permission-key {
    color: #7f8997;
}


/* ---------- Save Section ---------- */

html[data-bs-theme="dark"] .save-section,
body.dark-mode .save-section,
body.dark .save-section,
.dark-mode .save-section {
    background: #171b22;
    border-top-color: #2d3540;
}


/* ---------- Cancel Button ---------- */

html[data-bs-theme="dark"] .save-section .btn-light,
body.dark-mode .save-section .btn-light,
body.dark .save-section .btn-light,
.dark-mode .save-section .btn-light {
    background: #252b34;
    border-color: #363e4a;
    color: #dce2e9;
}

html[data-bs-theme="dark"] .save-section .btn-light:hover,
body.dark-mode .save-section .btn-light:hover,
body.dark .save-section .btn-light:hover,
.dark-mode .save-section .btn-light:hover {
    background: #303844;
    border-color: #424c5a;
    color: #ffffff;
}
    .permission-wrapper {
        padding-bottom: 30px;
    }

   
    .permission-header {
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, #6a0606, #af465f, #080d13);
    }

    .permission-header .card-body {
        padding: 24px;
    }


    .info-card {
        border: 0;
        border-radius: 16px;
    }

    .info-item {
        padding: 14px 16px;
        border: 1px solid #af8787;
        border-radius: 12px;
        height: 100%;
    }

    .info-label {
        font-size: 12px;
        color: #9f3434;
        margin-bottom: 6px;
    }

    .info-value {
        font-size: 15px;
        font-weight: 600;
        color: #2f2f2f;
    }

    .access-card {
        border: 0;
        border-radius: 16px;
        overflow: hidden;
        background: #b25050;
    }

    .access-toolbar {
        padding: 18px 20px;
        border-bottom: 1px solid #eeeeee;
    }

    .search-box {
        width: 280px;
        border-radius: 10px;
        overflow: hidden;
    }

    .search-box .input-group-text {
        background: #fff;
        border-right: 0;
    }

    .search-box .form-control {
        border-left: 0;
        box-shadow: none;
    }


    .permission-section {
        padding: 28px 20px 30px;
        background: #f8f9fb;
    }

    .permission-inner-card {
        width: 100%;
        max-width: 1060px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #eeeeee;
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    }

    .permission-inner-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 0 4px 18px;
    }

    .permission-heading {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .permission-heading-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef4ff;
        color: #a41717;
        font-size: 14px;
    }

    .permission-heading h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #464646;
    }

    .permission-heading small {
        color: #888;
        font-size: 11px;
    }

    .module-total {
        background: #c40707;
        color: #fff;
        border-radius: 20px;
        padding: 6px 13px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }


    .module-item {
        border: 1px solid #d2bdbd !important;
        border-radius: 12px !important;
        overflow: hidden;
        margin-bottom: 11px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.025);
    }

    .module-item:last-child {
        margin-bottom: 0;
    }

    .module-header-row {
        display: flex;
        width: 100%;
        min-height: 62px;
        align-items: stretch;
        background: #fff;
    }

    .module-header-row .module-button {
        flex: 1;
        min-width: 0;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 13px 16px;
        background: #fff !important;
        box-shadow: none !important;
        font-weight: 600;
    }

    .module-header-row .module-button:focus {
        box-shadow: none !important;
    }

    .module-header-row .module-button:not(.collapsed) {
        background: #f8faff !important;
        color: #af0c0c;
    }

    .module-header-row .module-button::after {
        margin-left: 12px;
    }

    .module-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }

    .module-title {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .module-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #eef4ff;
        color: #b5240e;
        font-size: 14px;
    }

    .module-title-text {
        font-size: 13px;
        font-weight: 600;
        color: #4a4a4a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .module-button:not(.collapsed) .module-title-text {
        color: #af270f;
    }

    .module-count {
        min-width: 28px;
        margin-left: 15px;
        flex-shrink: 0;
        text-align: center;
        border-radius: 20px;
        font-size: 14px;
        padding: 5px 8px;
        background: #fbdeeb !important;
        color: #660917 !important;
    }

  
    .module-select-all {
        width: 112px;
        min-width: 112px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fafbfc;
        border-left: 1px solid #eeeeee;
        flex-shrink: 0;
    }

    .module-select-all .form-check {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 0;
    }

    .module-select-all .form-check-input {
        width: 28px;
        height: 17px;
        margin: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .module-select-all .form-check-label {
        margin: 0;
        padding: 0;
        font-size: 10px;
        font-weight: 600;
        line-height: 17px;
        white-space: nowrap;
        color: #666;
        cursor: pointer;
    }

    .permission-body {
        padding: 5px 18px 8px;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }

    .permission-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 13px 4px;
        border-bottom: 1px solid #f1f1f1;
    }

    .permission-row:last-child {
        border-bottom: 0;
    }

    .permission-name {
        font-size: 13px;
        color: #444;
        font-weight: 500;
    }

    .permission-key {
        font-size: 10px;
        color: #999;
        margin-left: 8px;
    }

    .permission-checkbox {
        transform: scale(1.1);
        cursor: pointer;
    }

    .form-switch .form-check-input {
        cursor: pointer;
    }


    .save-section {
        border-top: 1px solid #eeeeee;
        padding: 20px;
        text-align: right;
        background: #fff;
    }

    .save-btn {
        min-width: 160px;
        border-radius: 10px;
    }

    .no-result {
        display: none;
        padding: 30px;
        text-align: center;
        color: #888;
    }


    @media (max-width: 768px) {
        .permission-header .card-body {
            padding: 20px;
        }

        .access-toolbar {
            padding: 15px;
        }

        .search-box {
            width: 100%;
            max-width: 100%;
        }

        .permission-section {
            padding: 18px 10px 25px;
        }

        .permission-inner-card {
            padding: 12px;
            border-radius: 12px;
        }

        .permission-inner-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .module-select-all {
            width: 100px;
            min-width: 100px;
        }

        .module-select-all .form-check-label {
            font-size: 9px;
        }

        .module-title-text {
            font-size: 12px;
        }

        .permission-row {
            gap: 15px;
        }

        .permission-key {
            display: block;
            margin-left: 0;
            margin-top: 3px;
        }

        .save-section {
            text-align: center;
        }

        .save-btn {
            width: 100%;
        }
    }
</style>
@php

$selectedType = request('type', 'all');

$selectedRoleAccess = $roleAccess->get($selectedType);
$savedPermissionIds = $selectedRoleAccess
? ($selectedRoleAccess->permissions ?? [])
: [];
@endphp
<div class="container-fluid permission-wrapper">

    <div class="card permission-header shadow-sm mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="text-white fw-bold mb-2">
                        <i class="fa fa-shield-halved me-2"></i>
                        Staff Role Access
                    </h5>
                    <p class="text-white opacity-75 mb-0">
                        Configure admin panel access based on designation and staff type.
                    </p>
                </div>
                <a href="{{ route('create_role') }}"
                    class="btn btn-light rounded-pill px-4">
                    <i class="fa fa-arrow-left me-2"></i>
                    Back
                </a>
            </div>
        </div>
    </div>

    <div class="card info-card shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
                <div class="module-icon me-2">
                    <i class="fa fa-user-tag"></i>
                </div>
                <div>
                    <h6 class="fw-bold mb-1">
                        Role Information
                    </h6>
                    <small class="text-muted">
                        Configure access for this designation
                    </small>
                </div>
            </div>
            <div class="row g-3">
                {{-- DESIGNATION --}}
                <div class="col-lg-4 col-md-6">
                    <div class="info-item">
                        <div class="info-label">
                            Designation
                        </div>
                        <div class="info-value">
                            {{ $role->role ?? 'Role Name' }}
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="info-item">
                        <div class="info-label">
                            Staff Type
                        </div>
                        <select name="type"
                            id="accessType"
                            class="form-select"
                            form="submitForm">
                            <option value="all"
                                {{ $selectedType == 'all' ? 'selected' : '' }}>
                                All Types
                            </option>
                            @foreach($types as $type)
                            <option value="{{ $type }}"
                                {{ $selectedType == $type ? 'selected' : '' }}>
                                {{ ucfirst($type) }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="info-item">
                        <div class="info-label">
                            Access Status
                        </div>
                        <div class="info-value">
                         @if($selectedRoleAccess && !empty($savedPermissionIds))
                            <span class="badge bg-label-success px-3 py-2">
                                Access Configured
                            </span>
                            @else
                            <span class="badge bg-label-warning px-3 py-2">
                                Not Configured
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form
        action="{{ route('save_staff_role_access') }}"
        method="POST"
        id="submitForm">
        @csrf
        <input type="hidden"
            name="role_id"
            value="{{ $role->id }}">
        <div class="card access-card shadow-sm">

            <div class="access-toolbar">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h6 class="fw-bold mb-1">
                            <i class="fa fa-lock text-secondary me-2"></i>
                            Module Permissions
                        </h6>
                        <small class="text-muted">
                            Enable or disable permissions for this designation and staff type.
                        </small>
                    </div>
                    <div class="d-flex align-items-center gap-3 flex-wrap">
                        {{-- SEARCH --}}
                        <div class="input-group search-box">
                            <span class="input-group-text">
                                <i class="fa fa-search text-muted"></i>
                            </span>
                            <input type="text"
                                class="form-control"
                                id="searchModule"
                                placeholder="Search Module">
                        </div>
                        {{-- TOP SELECT ALL --}}
                        <div class="form-check form-switch d-flex align-items-center mb-0">
                            <input
                                class="form-check-input me-2"
                                type="checkbox"
                                id="all">
                            <label
                                class="form-check-label fw-semibold"
                                for="all">
                                Select All Permissions
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="permission-section">
                <div class="permission-inner-card">
                    {{-- INNER CARD HEADER --}}
                    <div class="permission-inner-header">
                        <div class="permission-heading">
                            <div class="permission-heading-icon">
                                <i class="fa fa-lock"></i>
                            </div>
                            <div>
                                <h6>
                                    Module Permissions
                                </h6>
                                <small>
                                    Enable or disable module permissions for this staff.
                                </small>
                            </div>
                        </div>
                        <span class="module-total">
                            {{ $permissionGroups->count() }} Modules
                        </span>
                    </div>

                    <div class="accordion accordion-flush"
                        id="permissionAccordion">
                        @forelse($permissionGroups as $module => $modulePermissions)
                      @php
    $moduleId = 'module_' . \Illuminate\Support\Str::slug($module, '_');

    $moduleName = ucwords(
        str_replace('_', ' ', $module)
    );

    $moduleIcons = [
        'dashboard' => 'fa-chart-line',
        'otp_master' => 'fa-key',
        'project' => 'fa-diagram-project',
        'employee_management' => 'fa-users',
        'employee_goals' => 'fa-bullseye',
        'employee_attendance' => 'fa-calendar-check',
        'employee_report' => 'fa-file-lines',
        'employee_review' => 'fa-user-check',
        'employee_feedback' => 'fa-comments',
        'task' => 'fa-list-check',
        'financial' => 'fa-money-bill-transfer',
        'candidate' => 'fa-user-plus',
        'mail' => 'fa-envelope',
        'popup' => 'fa-window-restore',
        'certificate' => 'fa-certificate',
        'proposal' => 'fa-file-signature',
        'other' => 'fa-layer-group',
        'backup' => 'fa-database',
    ];

    $moduleIcon =
        $moduleIcons[$module] ?? 'fa-folder-open';


    $moduleAllSelected =
        $modulePermissions->count() > 0 &&
        $modulePermissions->every(function ($permission) use ($savedPermissionIds) {
            return in_array(
                $permission->id,
                $savedPermissionIds
            );
        });

  
    $moduleHasAccess =
        $modulePermissions->contains(function ($permission) use ($savedPermissionIds) {
            return in_array(
                $permission->id,
                $savedPermissionIds
            );
        });

    $moduleIsOpen =
        $moduleHasAccess && !$moduleAllSelected;
@endphp
                        <div
                            class="accordion-item module-item"
                            data-module="{{ strtolower($moduleName) }}">
                            <h2 class="accordion-header">
                                <div class="module-header-row">

                                    <button
                                        type="button"
                                        class="accordion-button module-button {{ $moduleIsOpen ? '' : 'collapsed' }}"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#{{ $moduleId }}"
                                        aria-expanded="{{ $moduleIsOpen ? 'true' : 'false' }}"
                                        aria-controls="{{ $moduleId }}">
                                        <div class="module-header-content">
                                            <div class="module-title">
                                                <span class="module-icon">
                                                    <i class="fa {{ $moduleIcon }}"></i>
                                                </span>
                                                <span class="module-title-text">
                                                    {{ $moduleName }}
                                                </span>
                                            </div>
                                            <span class="badge module-count">
                                                {{ $modulePermissions->count() }}
                                            </span>
                                        </div>
                                    </button>
                                    {{-- =================================================
                                            MODULE SELECT ALL
                                        ================================================== --}}
                                    <div class="module-select-all">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                class="form-check-input module-select-all-checkbox"
                                                data-module-id="{{ $moduleId }}"
                                                id="select_all_{{ $moduleId }}"
                                                {{ $moduleAllSelected ? 'checked' : '' }}>
                                            <label
                                                class="form-check-label"
                                                for="select_all_{{ $moduleId }}">
                                                Select All
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </h2>
                            <div
                                id="{{ $moduleId }}"
                                class="accordion-collapse collapse {{ $moduleIsOpen ? 'show' : '' }}">
                                <div
                                    class="permission-body"
                                    data-module-body="{{ $moduleId }}">
                                    @foreach($modulePermissions as $permission)
                                    @php
                                    $isChecked = in_array( $permission->id, $savedPermissionIds);
                                    $permissionAction = explode('.', $permission->name);
                                    $permissionLabel =end($permissionAction);
                                    $permissionLabel = ucwords( str_replace( ['_', '-'],' ',$permissionLabel ) );
                                    @endphp
                                    <div
                                        class="permission-row"
                                        data-permission="{{ strtolower($permission->name) }}">
                                        <div>
                                            <span class="permission-name">
                                                {{ $permissionLabel }}
                                            </span>
                                            <span class="permission-key">
                                                {{ $permission->name }}
                                            </span>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input
                                                type="checkbox"
                                                class="form-check-input permission-checkbox"
                                                name="permissions[]"
                                                value="{{ $permission->name }}"
                                                id="permission_{{ $permission->id }}"
                                                {{ $isChecked ? 'checked' : '' }}>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center py-5">
                            <i class="fa fa-folder-open fs-2 text-muted mb-3"></i>
                            <div class="text-muted">
                                No permissions available.
                            </div>
                        </div>
                        @endforelse
                    </div>
                    {{-- NO SEARCH RESULT --}}
                    <div
                        class="no-result"
                        id="noPermission">
                        <i class="fa fa-folder-open fs-3 mb-2"></i>
                        <div>
                            No modules found
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="save-section">
                <a
                    href="{{ route('create_role') }}"
                    class="btn btn-light px-4 me-2">
                    Cancel
                </a>
                <button
                    type="submit"
                    class="btn btn-primary save-btn"
                    id="submit_access">
                    <i class="fa fa-save me-2"></i>
                    Save Access
                </button>
            </div>
        </div>
    </form>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const allCheckbox =
            document.getElementById('all');
        const permissionCheckboxes =
            document.querySelectorAll('.permission-checkbox');
        const searchInput =
            document.getElementById('searchModule');
        const noPermission =
            document.getElementById('noPermission');
        const accessType =
            document.getElementById('accessType');
        const submitButton =
            document.getElementById('submit_access');
        const submitForm =
            document.getElementById('submitForm');
        /*
        |--------------------------------------------------------------------------
        | UPDATE TOP SELECT ALL
        |--------------------------------------------------------------------------
        */
        function updateSelectAll() {
            const total =
                permissionCheckboxes.length;
            const checked =
                document.querySelectorAll(
                    '.permission-checkbox:checked'
                ).length;
            if (total === 0) {
                allCheckbox.checked = false;
                allCheckbox.indeterminate = false;
                return;
            }
            if (checked === total) {
                allCheckbox.checked = true;
                allCheckbox.indeterminate = false;
            } else if (checked > 0) {
                allCheckbox.checked = false;
                allCheckbox.indeterminate = true;
            } else {
                allCheckbox.checked = false;
                allCheckbox.indeterminate = false;
            }
        }

        function updateModuleSelectAll() {
            document
                .querySelectorAll('.module-select-all-checkbox')
                .forEach(function(moduleSelectAll) {
                    const moduleId =
                        moduleSelectAll.dataset.moduleId;
                    const moduleBody =
                        document.querySelector(
                            '[data-module-body="' + moduleId + '"]'
                        );
                    if (!moduleBody) {
                        return;
                    }
                    const moduleCheckboxes =
                        moduleBody.querySelectorAll(
                            '.permission-checkbox'
                        );
                    const total =
                        moduleCheckboxes.length;
                    const checked =
                        moduleBody.querySelectorAll(
                            '.permission-checkbox:checked'
                        ).length;
                    if (total === 0) {
                        moduleSelectAll.checked = false;
                        moduleSelectAll.indeterminate = false;
                        return;
                    }
                    if (checked === total) {
                        moduleSelectAll.checked = true;
                        moduleSelectAll.indeterminate = false;
                    } else if (checked > 0) {
                        moduleSelectAll.checked = false;
                        moduleSelectAll.indeterminate = true;
                    } else {
                        moduleSelectAll.checked = false;
                        moduleSelectAll.indeterminate = false;
                    }
                });
        }

        allCheckbox.addEventListener('change', function() {
            const checked =
                this.checked;
            permissionCheckboxes.forEach(function(checkbox) {
                checkbox.checked = checked;
            });
            this.indeterminate = false;
            updateModuleSelectAll();
        });

        permissionCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                updateSelectAll();
                updateModuleSelectAll();
            });
        });

        document
            .querySelectorAll('.module-select-all-checkbox')
            .forEach(function(moduleSelectAll) {
                moduleSelectAll.addEventListener('change', function() {
                    const moduleId =
                        this.dataset.moduleId;
                    const moduleBody =
                        document.querySelector(
                            '[data-module-body="' + moduleId + '"]'
                        );
                    if (!moduleBody) {
                        return;
                    }
                    const checked =
                        this.checked;
                    moduleBody
                        .querySelectorAll('.permission-checkbox')
                        .forEach(function(checkbox) {
                            checkbox.checked = checked;
                        });
                    this.indeterminate = false;
                    updateSelectAll();
                    updateModuleSelectAll();
                });
            });

        searchInput.addEventListener('keyup', function() {
            const value =
                this.value.toLowerCase().trim();
            let visibleModules = 0;
            document
                .querySelectorAll('.module-item')
                .forEach(function(item) {
                    const moduleName =
                        item
                        .querySelector('.module-title-text')
                        ?.innerText
                        .toLowerCase() ?? '';
                    const permissionNames =
                        Array.from(
                            item.querySelectorAll('.permission-row')
                        )
                        .map(function(row) {
                            return row.innerText.toLowerCase();
                        })
                        .join(' ');
                    const match =
                        moduleName.includes(value) ||
                        permissionNames.includes(value);
                    if (match) {
                        item.style.display = '';
                        visibleModules++;
                    } else {
                        item.style.display = 'none';
                    }
                });
            if (visibleModules === 0) {
                noPermission.style.display = 'block';
            } else {
                noPermission.style.display = 'none';
            }
        });
        accessType.addEventListener('change', function() {
            const selectedType =
                this.value;
            const currentUrl =
                new URL(window.location.href);
            currentUrl.searchParams.set(
                'type',
                selectedType
            );
            window.location.href =
                currentUrl.toString();
        });
        updateSelectAll();
        updateModuleSelectAll();
        submitForm.addEventListener('submit', function() {
            submitButton.disabled = true;
            submitButton.innerHTML =
                '<span class="spinner-border spinner-border-sm me-2"></span> Processing...';
        });
    });
</script>
@endsection