{{--
    Permission grid partial.
    Variables: $permissions (Collection grouped by module), $assigned (array of permission IDs)
--}}
@foreach($permissions as $module => $perms)
@php $moduleId = 'module_' . Str::slug($module, '_'); @endphp
<div class="border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 bg-gray-50/70 border-b border-gray-100">
        <p class="text-xs font-semibold text-gray-600 capitalize">{{ str_replace('_', ' ', $module) }}</p>
        <label class="flex items-center gap-2 cursor-pointer select-none">
            <input type="checkbox" class="module-toggle rounded border-gray-300 text-teal-600 focus:ring-teal-500"
                   data-group="{{ $moduleId }}"
                   id="{{ $moduleId }}_all">
            <span class="text-[10px] text-gray-400 font-medium">All</span>
        </label>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3">
        @foreach($perms as $perm)
        <label class="flex items-center gap-2.5 px-4 py-2.5 hover:bg-gray-50/50 cursor-pointer transition-colors border-b border-gray-50">
            <input type="checkbox"
                   name="permissions[]"
                   value="{{ $perm->id }}"
                   class="perm-check rounded border-gray-300 text-teal-600 focus:ring-teal-500 flex-shrink-0"
                   data-group="{{ $moduleId }}"
                   {{ in_array($perm->id, $assigned ?? []) ? 'checked' : '' }}>
            <span class="text-xs text-gray-700">{{ $perm->label }}</span>
        </label>
        @endforeach
    </div>
</div>
@endforeach

<script>
(function () {
    function initPermGrid() {
        // Sync "All" checkboxes on load
        document.querySelectorAll('.module-toggle').forEach(function (toggle) {
            var group = toggle.dataset.group;
            syncToggle(group);

            toggle.addEventListener('change', function () {
                document.querySelectorAll('.perm-check[data-group="' + group + '"]').forEach(function (cb) {
                    cb.checked = toggle.checked;
                });
            });
        });

        // Update "All" when individual boxes change
        document.querySelectorAll('.perm-check').forEach(function (cb) {
            cb.addEventListener('change', function () {
                syncToggle(cb.dataset.group);
            });
        });
    }

    function syncToggle(group) {
        var boxes = document.querySelectorAll('.perm-check[data-group="' + group + '"]');
        var toggle = document.querySelector('.module-toggle[data-group="' + group + '"]');
        if (!toggle) return;
        var checked = Array.from(boxes).filter(function (b) { return b.checked; }).length;
        toggle.checked = checked === boxes.length;
        toggle.indeterminate = checked > 0 && checked < boxes.length;
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPermGrid);
    } else {
        initPermGrid();
    }
})();
</script>