{{--
    صلاحيات البرنامج مقسمة حسب أقسام البرنامج (config/permission_groups.php) — الاسم عربي/إنجليزي حسب اللغة.
    شكل الكروت: عمودين، كل قسم كارت بعنوان و"تحديد الكل"، والصلاحيات تحت بعض.
    المتغيرات: $permission (كل الصلاحيات)، $rolePermissions (المحدد حالياً)، $wrapperClass
--}}
@php
    $isAr = app()->getLocale() == 'ar';
    $sections = config('permission_groups', []);
    $byName = collect($permission)->keyBy('name');
    $checked = $rolePermissions ?? [];
    $usedIds = [];
    $hasArabic = fn ($s) => (bool) preg_match('/\p{Arabic}/u', (string) $s);
    $fallbackLabel = fn ($p) => $isAr ? ($hasArabic($p->name_ar ?? '') ? $p->name_ar : $p->name) : $p->name;
    $cards = [];
    foreach ($sections as $key => $section) {
        $items = [];
        foreach ($section['permissions'] ?? [] as $name => $labels) {
            if ($byName->has($name)) {
                $p = $byName[$name];
                $usedIds[] = $p->id;
                $items[] = [$p, $isAr ? $labels[0] : $labels[1]];
            }
        }
        if ($items) {
            $cards[] = ['title' => $isAr ? $section['ar'] : $section['en'], 'items' => $items];
        }
    }
    $others = collect($permission)->reject(fn ($p) => in_array($p->id, $usedIds));
    if ($others->isNotEmpty()) {
        $cards[] = ['title' => $isAr ? 'صلاحيات أخرى' : 'Other permissions', 'items' => $others->map(fn ($p) => [$p, $fallbackLabel($p)])->values()->all()];
    }
@endphp

<style>
    .perm-topbar { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 12px; }
    .perm-topbar h6 { margin: 0; font-weight: 700; color: #1f2937; font-size: 15px; }
    .perm-topbar .perm-links a { font-size: 12px; margin-inline-start: 12px; cursor: pointer; text-decoration: none; }
    .perm-topbar .perm-links .perm-all { color: #4f46e5; }
    .perm-topbar .perm-links .perm-none { color: #6b7280; }
    .perm-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    @media (max-width: 991px) { .perm-board { grid-template-columns: 1fr; } }
    .perm-board .group-container.perm-card { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 14px 16px; margin: 0; box-shadow: none; }
    .perm-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .perm-card-head .perm-title { font-weight: 700; color: #111827; font-size: 14px; }
    .perm-card-head .perm-count { color: #9ca3af; font-weight: 400; font-size: 12px; margin-inline-start: 4px; }
    .perm-card-head .perm-toggle { font-size: 11px; color: #9ca3af; cursor: pointer; background: none; border: 0; padding: 0; }
    .perm-card-head .perm-toggle:hover { color: #4f46e5; }
    .perm-board .permission-item { width: 100%; padding: 3px 0; border: 0; }
    .perm-board .permission-item:hover { background: none; }
    .perm-board .perm-check { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: #374151; font-size: 13.5px; font-weight: 400; }
    .perm-board .perm-check input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; cursor: pointer; flex: 0 0 auto; }
    .perm-board .perm-check:hover span { color: #2563eb; }
</style>

<div class="perm-topbar">
    <h6>{{ $isAr ? 'الصلاحيات' : 'Permissions' }}</h6>
    <span class="perm-links">
        <a class="perm-all" data-perm-all="1">{{ $isAr ? 'تحديد الكل' : 'Select all' }}</a>
        <a class="perm-none" data-perm-all="0">{{ $isAr ? 'إلغاء تحديد الكل' : 'Unselect all' }}</a>
    </span>
</div>

<div class="perm-board">
    @foreach ($cards as $card)
        <div class="group-container perm-card {{ $wrapperClass }}">
            <div class="perm-card-head">
                <span class="perm-title">{{ $card['title'] }}<span class="perm-count">({{ count($card['items']) }})</span></span>
                <button type="button" class="perm-toggle">{{ $isAr ? 'تحديد الكل' : 'Select all' }}</button>
            </div>
            @foreach ($card['items'] as [$p, $label])
                <div class="permission-item">
                    <label class="perm-check" title="{{ $p->name }}">
                        {{ Form::checkbox('permission[]', $p->id, in_array($p->id, $checked), ['class' => 'name p-checkbox']) }}
                        <span>{{ $label }}</span>
                    </label>
                </div>
            @endforeach
        </div>
    @endforeach
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var isAr = {{ $isAr ? 'true' : 'false' }};
        var txt = { all: isAr ? 'تحديد الكل' : 'Select all', none: isAr ? 'إلغاء التحديد' : 'Unselect' };
        function refresh(card) {
            var boxes = card.querySelectorAll('.p-checkbox');
            var all = boxes.length && Array.prototype.every.call(boxes, function (b) { return b.checked; });
            card.querySelector('.perm-toggle').textContent = all ? txt.none : txt.all;
        }
        document.querySelectorAll('.perm-card').forEach(function (card) {
            refresh(card);
            card.querySelector('.perm-toggle').addEventListener('click', function () {
                var boxes = card.querySelectorAll('.p-checkbox');
                var all = Array.prototype.every.call(boxes, function (b) { return b.checked; });
                boxes.forEach(function (b) { b.checked = !all; });
                refresh(card);
            });
            card.addEventListener('change', function () { refresh(card); });
        });
        document.querySelectorAll('[data-perm-all]').forEach(function (a) {
            a.addEventListener('click', function () {
                var on = a.getAttribute('data-perm-all') === '1';
                document.querySelectorAll('.perm-board .p-checkbox').forEach(function (b) { b.checked = on; });
                document.querySelectorAll('.perm-card').forEach(refresh);
            });
        });
    });
</script>