@php
    $selectedPermissions = $selectedPermissions ?? [];
    $isEditMode = $isEditMode ?? false;
@endphp

<style>
    .role-permission-grid { display: grid; gap: 1.25rem; }
    .role-permission-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem 1.1rem;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        background: #f8fafc;
    }
    .role-permission-toolbar__actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .role-permission-group {
        border: 1px solid #e7edf5;
        border-radius: 26px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    }
    .role-permission-group__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.25rem 1.4rem;
        border-bottom: 1px solid #eef2f7;
        background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
    }
    .role-permission-group__intro {
        display: flex;
        align-items: center;
        gap: 0.95rem;
    }
    .role-permission-group__icon {
        width: 3rem;
        height: 3rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ecfeff;
        color: #0f766e;
        font-size: 1.1rem;
    }
    .role-permission-group__title {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
    }
    .role-permission-group__text {
        margin: 0.2rem 0 0;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
    }
    .role-permission-group__body {
        padding: 1.2rem 1.4rem 1.4rem;
    }
    .role-permission-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.9rem;
    }
    .role-permission-card {
        position: relative;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        background: #fff;
        padding: 1rem;
        min-height: 126px;
    }
    .role-permission-card__toggle {
        position: absolute;
        top: 1rem;
        left: 1rem;
    }
    .role-permission-card__content {
        padding-left: 2.2rem;
        display: grid;
        gap: 0.45rem;
    }
    .role-permission-card__title {
        color: #0f172a;
        font-size: 0.9rem;
        font-weight: 900;
    }
    .role-permission-card__code {
        color: #0f766e;
        font-size: 0.74rem;
        font-weight: 800;
    }
    .role-permission-card__text {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.8;
    }
    @media (max-width: 1199.98px) {
        .role-permission-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 767.98px) {
        .role-permission-cards { grid-template-columns: minmax(0, 1fr); }
    }
    .dark .role-permission-toolbar,
    .dark .role-permission-group,
    .dark .role-permission-card {
        border-color: rgba(148, 163, 184, 0.18);
        background: #050505;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    }
    .dark .role-permission-group__header {
        border-bottom-color: rgba(148, 163, 184, 0.12);
        background: linear-gradient(180deg, #050505 0%, #0b1119 100%);
    }
    .dark .role-permission-group__title,
    .dark .role-permission-card__title {
        color: #f8fafc;
    }
    .dark .role-permission-group__text,
    .dark .role-permission-card__text {
        color: #94a3b8;
    }
</style>

<div class="role-permission-grid">
    <div class="role-permission-toolbar">
        <div class="role-permission-toolbar__actions">
            <div class="app-check">
                <input type="checkbox" class="app-check__input" id="select-all-permissions" {{ count($selectedPermissions) === $permissions->count() && $permissions->count() > 0 ? 'checked' : '' }}>
                <label class="app-check__label font-bold" for="select-all-permissions">{{ __('dashboard.Select All Permissions') }}</label>
            </div>
        </div>
        <div class="text-slate-500 dark:text-slate-400 text-xs font-semibold">تم تنظيم الصلاحيات حسب الإدارات لتسهيل التحديد والمراجعة.</div>
    </div>

    @foreach ($permissionGroups as $groupKey => $groupPermissions)
        @php
            $groupMeta = $administrations[$groupKey] ?? ['label' => \App\Support\PermissionRegistry::humanize($groupKey), 'description' => 'مجموعة صلاحيات', 'icon' => 'fa-solid fa-folder'];
        @endphp
        <section class="role-permission-group">
            <div class="role-permission-group__header">
                <div class="role-permission-group__intro">
                    <span class="role-permission-group__icon"><i class="{{ $groupMeta['icon'] }}"></i></span>
                    <div>
                        <h3 class="role-permission-group__title">{{ $groupMeta['label'] }}</h3>
                        <p class="role-permission-group__text">{{ $groupMeta['description'] }}</p>
                    </div>
                </div>
                <div class="app-check">
                    <input type="checkbox" class="app-check__input group-checkbox" id="group-{{ $groupKey }}" data-group="{{ $groupKey }}">
                    <label class="app-check__label font-bold" for="group-{{ $groupKey }}">تحديد الإدارة كاملة</label>
                </div>
            </div>
            <div class="role-permission-group__body">
                <div class="role-permission-cards">
                    @foreach ($groupPermissions as $permission)
                        <label class="role-permission-card">
                            <span class="role-permission-card__toggle">
                                <input
                                    type="checkbox"
                                    class="app-check__input permission-checkbox"
                                    name="permissions[]"
                                    value="{{ $permission->id }}"
                                    data-group="{{ $groupKey }}"
                                    {{ in_array($permission->id, $selectedPermissions, true) ? 'checked' : '' }}
                                >
                            </span>
                            <span class="role-permission-card__content">
                                <span class="role-permission-card__title">{{ $permission->registry_label }}</span>
                                <span class="role-permission-card__code">{{ $permission->name }}</span>
                                <span class="role-permission-card__text">{{ $permission->registry_description }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>
    @endforeach
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectAllCheckbox = document.getElementById('select-all-permissions');
        const permissionCheckboxes = Array.from(document.querySelectorAll('.permission-checkbox'));
        const groupCheckboxes = Array.from(document.querySelectorAll('.group-checkbox'));

        function syncMasterCheckbox() {
            const checkedCount = permissionCheckboxes.filter((checkbox) => checkbox.checked).length;
            selectAllCheckbox.checked = checkedCount === permissionCheckboxes.length && permissionCheckboxes.length > 0;
            selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < permissionCheckboxes.length;
        }

        function syncGroupCheckbox(groupKey) {
            const groupItems = permissionCheckboxes.filter((checkbox) => checkbox.dataset.group === groupKey);
            const groupChecked = groupItems.filter((checkbox) => checkbox.checked).length;
            const groupToggle = document.querySelector(`.group-checkbox[data-group="${groupKey}"]`);
            if (!groupToggle) return;
            groupToggle.checked = groupChecked === groupItems.length && groupItems.length > 0;
            groupToggle.indeterminate = groupChecked > 0 && groupChecked < groupItems.length;
        }

        selectAllCheckbox?.addEventListener('change', function () {
            permissionCheckboxes.forEach((checkbox) => {
                checkbox.checked = this.checked;
            });
            groupCheckboxes.forEach((checkbox) => {
                checkbox.checked = this.checked;
                checkbox.indeterminate = false;
            });
        });

        groupCheckboxes.forEach((groupCheckbox) => {
            groupCheckbox.addEventListener('change', function () {
                permissionCheckboxes
                    .filter((checkbox) => checkbox.dataset.group === this.dataset.group)
                    .forEach((checkbox) => {
                        checkbox.checked = this.checked;
                    });
                syncMasterCheckbox();
            });
        });

        permissionCheckboxes.forEach((checkbox) => {
            checkbox.addEventListener('change', function () {
                syncGroupCheckbox(this.dataset.group);
                syncMasterCheckbox();
            });
        });

        groupCheckboxes.forEach((checkbox) => syncGroupCheckbox(checkbox.dataset.group));
        syncMasterCheckbox();
    });
</script>
@endpush