@extends('layouts.app')
@section('title', (isset($permission) && is_object($permission)) ? 'Edit Permission' : 'Add Permission')

@push('stylesheets')
<style>
    /* Permissions Module Section - Light Mode */
    .permissions-module-section {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
    }

    /* Permissions Form Card - Light Mode */
    .permissions-form-card {
        background-color: #ffffff;
    }

    .permissions-form-title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* Permissions Field Row - Light Mode */
    .permissions-field-row {
        border-bottom: 1px solid #f0f0f0;
    }

    .permissions-field-name {
        font-size: 0.95rem;
    }

    /* Permissions HR - Light Mode */
    .permissions-hr {
        border-color: #e9ecef;
    }

    /* Dark Mode Styles */
    .dark-mode .permissions-module-section {
        background-color: #343a40;
        border-color: #495057;
    }

    .dark-mode .permissions-form-card {
        background-color: #454d55;
    }

    .dark-mode .permissions-field-row {
        border-bottom-color: #495057;
    }

    .dark-mode .permissions-hr {
        border-color: #495057;
    }

    .dark-mode .permissions-form-title {
        color: #fff;
    }

    .dark-mode .permissions-field-name {
        color: #fff;
    }

    /* Indeterminate checkbox styling */
    .form-check-input:indeterminate {
        background-color: #007bff;
        border-color: #007bff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    }

    .dark-mode .form-check-input:indeterminate {
        background-color: #007bff;
        border-color: #007bff;
    }

    .user-role-add-permission {
        margin-left: 1.25rem;
    }

    .user-role-add-permission.is-disabled {
        opacity: 0.55;
    }

    .permissions-mws-group-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #495057;
    }

    .permissions-mws-type-card {
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 0.75rem 1rem;
        height: 100%;
        background-color: #f8f9fa;
    }

    .dark-mode .permissions-mws-group-title {
        color: #fff;
    }

    .dark-mode .permissions-mws-type-card {
        background-color: #3d444b;
        border-color: #495057;
    }
</style>
@endpush

@section('contents')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <form id="permissionForm" action="{{ (isset($permission) && is_object($permission)) ? route('permissions.update', $permission->id) : route('permissions.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if (isset($permission) && is_object($permission))
                    @method('PUT')
                @endif
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-4">
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">{{ (isset($permission) && is_object($permission)) ? 'Edit Permission' : 'Add Permission' }}</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                {{-- Permissions name/slug --}}
                                <x-form.text-input label="Name" name="name" class="form-control" :value="$permission?->name" />                                        
                                <x-form.textarea label="Description" name="description" class="form-control" :value="$permission?->description" />
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!--/.col (left) -->
                    <!-- right column -->
                    <div class="col-md-8">
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">Permissions</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                @if(isset($modules) && !empty($modules))
                                    <!-- Select All Modules -->
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" id="select-all-modules" class="form-check-input">
                                            <label class="form-check-label" for="select-all-modules">
                                                <strong>Select All Modules</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <hr class="my-3 permissions-hr">

                                    <!-- Modules List: order and labels from config (match sidebar) -->
                                    @php
                                        $moduleOrder = config('permission.module_display_order', []);
                                        $orderedModuleNames = array_values(array_filter($moduleOrder, fn($n) => isset($modules[$n])));
                                        foreach (array_keys($modules) as $n) {
                                            if (!in_array($n, $orderedModuleNames)) {
                                                $orderedModuleNames[] = $n;
                                            }
                                        }
                                    @endphp
                                    @foreach($orderedModuleNames as $moduleName)
                                        @php
                                            $forms = $modules[$moduleName] ?? [];
                                            $moduleId = preg_replace('/[^a-z0-9\-]+/', '-', trim(str_replace(' ', '-', strtolower($moduleName)), '-'));
                                            $isFirstModule = $loop->first;
                                            $moduleDisplayName = config('permission.module_display_names.' . $moduleName, $moduleName);
                                        @endphp
                                        @if(!empty($forms))
                                        <div class="module-section mb-2 permissions-module-section">
                                            <!-- Module Header -->
                                            <div class="module-header p-2 d-flex justify-content-between align-items-center" 
                                                 data-toggle="collapse" 
                                                 data-target="#module-{{ $moduleId }}" 
                                                 aria-expanded="{{ $isFirstModule ? 'true' : 'false' }}"
                                                 style="cursor: pointer;">
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-chevron-{{ $isFirstModule ? 'down' : 'right' }} mr-2"></i>
                                                    <strong>{{ $moduleDisplayName }}</strong>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" 
                                                           class="form-check-input module-checkbox" 
                                                           data-module="{{ $moduleId }}"
                                                           id="module-{{ $moduleId }}-checkbox">
                                                </div>
                                            </div>

                                            <!-- Module Content -->
                                            <div class="collapse {{ $isFirstModule ? 'show' : '' }}" id="module-{{ $moduleId }}">
                                                <div class="p-3">
                                                    @php
                                                        $formOrder = config('permission.form_display_order.' . $moduleName, []);
                                                        $orderedFormNames = array_values(array_filter($formOrder, fn($f) => isset($forms[$f])));
                                                        foreach (array_keys($forms) as $f) {
                                                            if (!in_array($f, $orderedFormNames)) {
                                                                $orderedFormNames[] = $f;
                                                            }
                                                        }
                                                    @endphp
                                                    @foreach($orderedFormNames as $formName)
                                                        @php $formData = $forms[$formName] ?? null; @endphp
                                                        @if(empty($formData)) @continue @endif
                                                        @php
                                                            $formId = preg_replace('/[^a-z0-9\-]+/', '-', trim(str_replace(' ', '-', strtolower($formName)), '-'));
                                                        @endphp
                                                        <div class="form-card mb-3 p-3 permissions-form-card">
                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <h5 class="mb-0 permissions-form-title">{{ config('permission.form_display_names.'.$formName) ?? ($formData['form_display_name'] ?? $formName) }}</h5>
                                                                <div class="form-check">
                                                                    <input type="checkbox" 
                                                                           class="form-check-input form-checkbox" 
                                                                           data-form="{{ $formId }}"
                                                                           data-module="{{ $moduleId }}"
                                                                           id="form-{{ $moduleId }}-{{ $formId }}-checkbox">
                                                                </div>
                                                            </div>
                                                            
                                                            @php
                                                                $allActions = $formData['actions'] ?? [];
                                                                $savedPermission = [];
                                                                if (isset($permission) && is_object($permission)) {
                                                                    $savedPermission = isset($permission->permission_raw)
                                                                        ? $permission->permission_raw
                                                                        : (is_array($permission->permission)
                                                                            ? $permission->permission
                                                                            : json_decode(json_encode($permission->permission), true));
                                                                }
                                                                $isMeetingWorkspace = strcasecmp((string) ($formData['form_display_name'] ?? ''), 'Meeting Workspace') === 0
                                                                    || strtolower((string) $formName) === 'meeting workspace';
                                                            @endphp
                                                            @if($isMeetingWorkspace)
                                                                @php
                                                                    $mwsGroups = \App\Support\MwsSchemeMeetingTypePermission::groupPermissionActionsForUi($allActions);
                                                                    $mwsLabels = \App\Support\MwsSchemeMeetingTypePermission::permissionUiGroupLabels();
                                                                    $mwsCommon = $mwsGroups[\App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_COMMON] ?? [];
                                                                    $mwsTypeOrder = [
                                                                        \App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_PRE_PDWP,
                                                                        \App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_PDWP,
                                                                        \App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_DDWP,
                                                                        \App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_GENERAL,
                                                                    ];
                                                                @endphp
                                                                @if($mwsCommon !== [])
                                                                    <div class="mb-3">
                                                                        <div class="permissions-mws-group-title">{{ $mwsLabels[\App\Support\MwsSchemeMeetingTypePermission::UI_GROUP_COMMON] }}</div>
                                                                        <div class="row">
                                                                            @foreach($mwsCommon as $action)
                                                                                <div class="col-md-6">
                                                                                    @include('permissions.partials.action-checkbox', [
                                                                                        'action' => $action,
                                                                                        'formName' => $formName,
                                                                                        'moduleId' => $moduleId,
                                                                                        'formId' => $formId,
                                                                                        'permission' => $permission ?? null,
                                                                                        'savedPermission' => $savedPermission,
                                                                                        'checkboxId' => 'action-'.$action['id'],
                                                                                        'checkboxClass' => 'action-checkbox mb-2',
                                                                                    ])
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                <div class="row">
                                                                    @foreach($mwsTypeOrder as $groupKey)
                                                                        @php $typeActions = $mwsGroups[$groupKey] ?? []; @endphp
                                                                        @if($typeActions !== [])
                                                                            <div class="col-md-6 mb-3">
                                                                                <div class="permissions-mws-type-card">
                                                                                    <div class="permissions-mws-group-title">{{ $mwsLabels[$groupKey] ?? $groupKey }}</div>
                                                                                    @foreach($typeActions as $action)
                                                                                        @include('permissions.partials.action-checkbox', [
                                                                                            'action' => $action,
                                                                                            'formName' => $formName,
                                                                                            'moduleId' => $moduleId,
                                                                                            'formId' => $formId,
                                                                                            'permission' => $permission ?? null,
                                                                                            'savedPermission' => $savedPermission,
                                                                                            'checkboxId' => 'action-'.$action['id'],
                                                                                            'checkboxClass' => 'action-checkbox mb-2',
                                                                                        ])
                                                                                    @endforeach
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            @else
                                                                @php
                                                                    $half = (int) ceil(count($allActions) / 2);
                                                                    $leftActions = array_slice($allActions, 0, $half);
                                                                    $rightActions = array_slice($allActions, $half);
                                                                @endphp
                                                                <div class="row">
                                                                    <!-- Left Column: Checkboxes -->
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            @foreach($leftActions as $action)
                                                                                @include('permissions.partials.action-checkbox', [
                                                                                    'action' => $action,
                                                                                    'formName' => $formName,
                                                                                    'moduleId' => $moduleId,
                                                                                    'formId' => $formId,
                                                                                    'permission' => $permission ?? null,
                                                                                    'savedPermission' => $savedPermission,
                                                                                    'checkboxId' => 'action-'.$action['id'],
                                                                                    'checkboxClass' => 'action-checkbox mb-2',
                                                                                ])
                                                                            @endforeach
                                                                        </div>
                                                                    </div>

                                                                    <!-- Right Column: Radio Buttons -->
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            @foreach($rightActions as $action)
                                                                                @include('permissions.partials.action-checkbox', [
                                                                                    'action' => $action,
                                                                                    'formName' => $formName,
                                                                                    'moduleId' => $moduleId,
                                                                                    'formId' => $formId,
                                                                                    'permission' => $permission ?? null,
                                                                                    'savedPermission' => $savedPermission,
                                                                                    'checkboxId' => 'action-right-'.$action['id'],
                                                                                    'checkboxClass' => 'action-checkbox',
                                                                                ])
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            <!-- Field Permissions -->
                                                            @if(isset($formData['fields']) && !empty($formData['fields']))
                                                                @php
                                                                    $fieldPermissionsId = 'field-permissions-' . $moduleId . '-' . $formId;
                                                                @endphp
                                                                <div class="mt-3">
                                                                    <a href="#" 
                                                                       class="text-primary" 
                                                                       data-toggle="collapse" 
                                                                       data-target="#{{ $fieldPermissionsId }}"
                                                                       aria-expanded="false">
                                                                        <i class="fas fa-chevron-right"></i> Field Permissions
                                                                    </a>
                                                                </div>

                                                                <!-- Field Permissions Content: hide logical fields (config permission.hidden_fields), show readable labels -->
                                                                <div class="collapse mt-2" id="{{ $fieldPermissionsId }}">
                                                                    <div class="field-permissions-list">
                                                                        @php
                                                                            $hiddenFields = config('permission.hidden_fields', []);
                                                                            $lowerFormName = strtolower($formName);
                                                                            $savedPermission = (isset($permission) && is_object($permission))
                                                                                ? (isset($permission->permission_raw) ? $permission->permission_raw : (is_array($permission->permission) ? $permission->permission : json_decode(json_encode($permission->permission), true)))
                                                                                : [];
                                                                        @endphp
                                                                        @foreach($formData['fields'] as $fieldName => $fieldActions)
                                                                            @if(in_array($fieldName, $hiddenFields) || \Str::endsWith($fieldName, '_id')) @continue @endif
                                                                            @php
                                                                                $fieldViewKey = strtolower($fieldName) . '_view';
                                                                                $fieldEditKey = strtolower($fieldName) . '_edit';
                                                                                $formPermsRow = $savedPermission[$lowerFormName] ?? [];
                                                                                $fieldsAllowedByAdd = is_array($formPermsRow) && permission_form_has_create($formPermsRow);
                                                                                // Respect explicit 0/1 in DB; only imply "all on" when add/create exists and key was never saved.
                                                                                $hasViewKey = is_array($formPermsRow) && array_key_exists($fieldViewKey, $formPermsRow);
                                                                                $hasEditKey = is_array($formPermsRow) && array_key_exists($fieldEditKey, $formPermsRow);
                                                                                $isCheckedView = $hasViewKey
                                                                                    ? !empty($formPermsRow[$fieldViewKey])
                                                                                    : $fieldsAllowedByAdd;
                                                                                $isCheckedEdit = $hasEditKey
                                                                                    ? !empty($formPermsRow[$fieldEditKey])
                                                                                    : $fieldsAllowedByAdd;
                                                                            @endphp
                                                                            <div class="d-flex justify-content-between align-items-center py-2">
                                                                                <div class="font-weight-bold permissions-field-name">{{ permission_field_label($fieldName) }}</div>
                                                                                <div class="d-flex">
                                                                                    @if(isset($fieldActions['view']))
                                                                                        <input type="hidden" name="permissions[{{ $formName }}][{{ $fieldViewKey }}]" value="0">
                                                                                        <x-form.checkbox 
                                                                                            label="View"
                                                                                            name="permissions[{{ $formName }}][{{ $fieldViewKey }}]"
                                                                                            value="1"
                                                                                            :checked="$isCheckedView"
                                                                                            class="field-permission-checkbox mr-3"
                                                                                            data-form="{{ $formId }}"
                                                                                            data-module="{{ $moduleId }}"
                                                                                            id="field-view-{{ $fieldActions['view']['id'] }}" />
                                                                                    @endif
                                                                                    @if(isset($fieldActions['edit']))
                                                                                        <input type="hidden" name="permissions[{{ $formName }}][{{ $fieldEditKey }}]" value="0">
                                                                                        <x-form.checkbox 
                                                                                            label="Edit"
                                                                                            name="permissions[{{ $formName }}][{{ $fieldEditKey }}]"
                                                                                            value="1"
                                                                                            :checked="$isCheckedEdit"
                                                                                            class="field-permission-checkbox"
                                                                                            data-form="{{ $formId }}"
                                                                                            data-module="{{ $moduleId }}"
                                                                                            id="field-edit-{{ $fieldActions['edit']['id'] }}" />
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    @endforeach
                                @else
                                    <p class="text-muted">No modules available.</p>
                                @endif
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer text-right">
                                <button class="btn btn-default" type="reset">
                                    <i class="fa-solid fa-arrows-rotate"></i> Reset
                                </button>
                                <button type="submit" id="permissionSubmitBtn" class="btn btn-info" data-loading-text="{{ (isset($permission) && is_object($permission)) ? 'Updating...' : 'Saving...' }}">
                                    <i class="fa-solid fa-floppy-disk"></i> <span class="btn-text">{{ (isset($permission) && is_object($permission)) ? 'Update' : 'Save' }}</span>
                                </button>
                            </div>
                            <!-- /.card-footer -->
                        </div>
                    </div>
                    <!--/.col (right) -->
                </div>
                <!-- /.row -->
            </form>
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@push('scripts')
<!-- Page specific script -->
 
<!-- bs-custom-file-input -->
<script src="{{ asset('assets/plugins/bs-custom-file-input/bs-custom-file-input.min.js') }}"></script>

<script>
    (function() {
        var form = document.getElementById('permissionForm');
        var btn = document.getElementById('permissionSubmitBtn');
        if (form && btn) {
            form.addEventListener('submit', function() {
                if (btn.disabled) return;
                btn.disabled = true;
                var textSpan = btn.querySelector('.btn-text');
                var loadingText = btn.getAttribute('data-loading-text') || 'Saving...';
                if (textSpan) textSpan.textContent = loadingText;
                btn.insertAdjacentHTML('beforeend', ' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
            });
        }
    })();
    $(function () {
        bsCustomFileInput.init();

        // Select All Modules functionality
        $('#select-all-modules').on('change', function() {
            const isChecked = $(this).is(':checked');
            
            // Expand all collapsed module sections
            $('.collapse:not(.show)').collapse('show');
            
            // Expand all collapsed field permissions sections
            $('a[data-toggle="collapse"][data-target^="#field-permissions"]').each(function() {
                const target = $(this).data('target');
                const $target = $(target);
                if (!$target.hasClass('show')) {
                    $target.collapse('show');
                }
            });
            
            // Check/uncheck all module checkboxes
            $('.module-checkbox').prop('checked', isChecked).prop('indeterminate', false);
            
            // Check/uncheck all form checkboxes
            $('.form-checkbox').prop('checked', isChecked).prop('indeterminate', false);
            
            // Check/uncheck all action checkboxes (both left and right columns)
            $('.action-checkbox').prop('checked', isChecked);
            
            // Check/uncheck all field permission checkboxes (View and Edit)
            $('.field-permission-checkbox').prop('checked', isChecked);
            
            // Update all form checkbox states to ensure they're not indeterminate
            $('.form-checkbox').each(function() {
                updateFormCheckboxState($(this));
            });
            
            // Update all module checkbox states to ensure they're not indeterminate
            $('.module-checkbox').each(function() {
                const moduleId = $(this).data('module');
                updateModuleCheckboxState(moduleId);
            });
        });

        // Form checkbox - select all items in that form (Task 1)
        $('.form-checkbox').on('change', function() {
            const isChecked = $(this).is(':checked');
            const formId = $(this).data('form');
            const moduleId = $(this).data('module');
            
            // Check/uncheck all action checkboxes in this form
            $('.action-checkbox[data-form="' + formId + '"][data-module="' + moduleId + '"]').prop('checked', isChecked);
            
            // Check/uncheck all field permission checkboxes in this form
            $('.field-permission-checkbox[data-form="' + formId + '"][data-module="' + moduleId + '"]').prop('checked', isChecked);
            
            // Update form checkbox state (for indeterminate)
            updateFormCheckboxState($(this));
            
            // Update module checkbox state
            updateModuleCheckboxState(moduleId);
            
            // Update select all checkbox state
            updateSelectAllState();
        });

        // Module checkbox - select all items in that module
        $('.module-checkbox').on('change', function() {
            const isChecked = $(this).is(':checked');
            const moduleId = $(this).data('module');
            
            // Check/uncheck all form checkboxes in this module
            $('.form-checkbox[data-module="' + moduleId + '"]').prop('checked', isChecked);
            
            // Check/uncheck all action checkboxes in this module (both left and right columns)
            $('.action-checkbox[data-module="' + moduleId + '"]').prop('checked', isChecked);
            
            // Check/uncheck all field permission checkboxes in this module
            const moduleSection = $(this).closest('.module-section');
            moduleSection.find('.field-permission-checkbox').prop('checked', isChecked);

            // Update select all checkbox state
            updateSelectAllState();
        });

        // Action and field permission checkboxes - update form checkbox state
        $(document).on('change', '.action-checkbox, .field-permission-checkbox', function() {
            const formId = $(this).data('form');
            const moduleId = $(this).data('module');
            if (formId && moduleId) {
                const formCheckbox = $('.form-checkbox[data-form="' + formId + '"][data-module="' + moduleId + '"]');
                updateFormCheckboxState(formCheckbox);
                updateModuleCheckboxState(moduleId);
                // Update select all checkbox state
                updateSelectAllState();
            }
        });

        // Update form checkbox state (Task 2: Full checked, indeterminate, or unchecked)
        function updateFormCheckboxState($formCheckbox) {
            if ($formCheckbox.length === 0) return;
            
            const formId = $formCheckbox.data('form');
            const moduleId = $formCheckbox.data('module');
            
            // Get all checkboxes in this form
            const allCheckboxes = $('.action-checkbox[data-form="' + formId + '"][data-module="' + moduleId + '"], .field-permission-checkbox[data-form="' + formId + '"][data-module="' + moduleId + '"]');
            const checkedCheckboxes = allCheckboxes.filter(':checked');
            const total = allCheckboxes.length;
            const checked = checkedCheckboxes.length;
            
            if (checked === 0) {
                // None checked - unchecked
                $formCheckbox.prop('checked', false);
                $formCheckbox.prop('indeterminate', false);
            } else if (checked === total) {
                // All checked - fully checked
                $formCheckbox.prop('checked', true);
                $formCheckbox.prop('indeterminate', false);
            } else {
                // Some checked - indeterminate (show dot)
                $formCheckbox.prop('checked', false);
                $formCheckbox.prop('indeterminate', true);
            }
        }

        // Update module checkbox state
        function updateModuleCheckboxState(moduleId) {
            const moduleCheckbox = $('.module-checkbox[data-module="' + moduleId + '"]');
            if (moduleCheckbox.length === 0) return;
            
            // Get all form checkboxes in this module
            const allFormCheckboxes = $('.form-checkbox[data-module="' + moduleId + '"]');
            const checkedForms = allFormCheckboxes.filter(':checked').length;
            const indeterminateForms = allFormCheckboxes.filter(function() {
                return this.indeterminate;
            }).length;
            const total = allFormCheckboxes.length;
            
            if (checkedForms === total && indeterminateForms === 0) {
                // All fully checked
                moduleCheckbox.prop('checked', true);
                moduleCheckbox.prop('indeterminate', false);
            } else if (checkedForms === 0 && indeterminateForms === 0) {
                // None checked
                moduleCheckbox.prop('checked', false);
                moduleCheckbox.prop('indeterminate', false);
            } else {
                // Some checked or indeterminate
                moduleCheckbox.prop('checked', false);
                moduleCheckbox.prop('indeterminate', true);
            }
        }

        // Update select all checkbox based on individual module checkboxes
        function updateSelectAllState() {
            const allModuleCheckboxes = $('.module-checkbox');
            const totalModules = allModuleCheckboxes.length;
            
            if (totalModules === 0) {
                $('#select-all-modules').prop('checked', false);
                return;
            }
            
            // Check if all modules are fully checked (not indeterminate)
            let allFullyChecked = true;
            allModuleCheckboxes.each(function() {
                const isChecked = $(this).is(':checked');
                const isIndeterminate = this.indeterminate;
                
                // Module must be checked AND not indeterminate to be considered fully selected
                if (!isChecked || isIndeterminate) {
                    allFullyChecked = false;
                    return false; // Break the loop
                }
            });
            
            $('#select-all-modules').prop('checked', allFullyChecked);
        }

        // Collapse/Expand icon update
        $('.module-header[data-toggle="collapse"]').on('click', function() {
            const target = $(this).data('target');
            const icon = $(this).find('i.fas');
            
            $(target).on('shown.bs.collapse', function() {
                icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            });
            
            $(target).on('hidden.bs.collapse', function() {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            });
        });

        // Field Permissions toggle icon update
        $('a[data-toggle="collapse"][data-target^="#field-permissions"]').on('click', function() {
            const target = $(this).data('target');
            const icon = $(this).find('i.fas');
            
            $(target).on('shown.bs.collapse', function() {
                icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            });
            
            $(target).on('hidden.bs.collapse', function() {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            });
        });

        // Update all form checkbox states on page load
        $('.form-checkbox').each(function() {
            updateFormCheckboxState($(this));
        });
        
        // Update all module checkbox states on page load
        $('.module-checkbox').each(function() {
            const moduleId = $(this).data('module');
            updateModuleCheckboxState(moduleId);
        });

        // Update select all state on page load
        updateSelectAllState();

        function syncUserRoleAddPermissions() {
            const $userFormCard = $('.form-card').filter(function() {
                return $(this).find('.action-checkbox[data-action-key="add"]').length > 0
                    && $(this).find('.user-role-add-permission').length > 0;
            }).first();

            if (!$userFormCard.length) {
                return;
            }

            const $addCheckbox = $userFormCard.find('.action-checkbox[data-action-key="add"]').first();
            const $roleAddCheckboxes = $userFormCard.find('.user-role-add-permission');
            const addEnabled = $addCheckbox.is(':checked');

            $roleAddCheckboxes.each(function() {
                const $checkbox = $(this);
                const $wrapper = $checkbox.closest('.form-check');

                if (!addEnabled) {
                    $checkbox.prop('checked', false).prop('disabled', true);
                    $wrapper.addClass('is-disabled');
                } else {
                    $checkbox.prop('disabled', false);
                    $wrapper.removeClass('is-disabled');
                }
            });
        }

        $(document).on('change', '.action-checkbox[data-action-key="add"]', syncUserRoleAddPermissions);
        syncUserRoleAddPermissions();

        // Form submission: one value per permissions[form][key] — checkbox state wins over paired hidden (no fragile name selectors / iteration order).
        $('#permissionForm').on('submit', function() {
            const form = $(this);
            const cellState = {};

            form.find('input[name^="permissions["]').each(function() {
                const name = $(this).attr('name');
                const match = name.match(/^permissions\[([^\]]+)\]\[([^\]]+)\]$/);
                if (!match) {
                    return;
                }
                const formName = match[1];
                const actionKey = match[2];
                if (!cellState[name]) {
                    cellState[name] = { formName: formName, actionKey: actionKey, hasCheckbox: false, anyChecked: false, hiddenVal: '0' };
                }
                const cell = cellState[name];
                const t = ($(this).attr('type') || '').toLowerCase();
                if (t === 'checkbox') {
                    cell.hasCheckbox = true;
                    if ($(this).is(':checked')) {
                        cell.anyChecked = true;
                    }
                } else if (t === 'hidden') {
                    const v = $(this).val();
                    if (v !== undefined && v !== null && v !== '') {
                        cell.hiddenVal = String(v);
                    }
                }
            });

            const permissionsObject = {};
            Object.keys(cellState).forEach(function(name) {
                const c = cellState[name];
                if (!permissionsObject[c.formName]) {
                    permissionsObject[c.formName] = {};
                }
                if (c.hasCheckbox) {
                    permissionsObject[c.formName][c.actionKey] = c.anyChecked ? '1' : '0';
                } else {
                    permissionsObject[c.formName][c.actionKey] = (c.hiddenVal === '1' || c.hiddenVal === 'true') ? '1' : '0';
                }
            });

            form.find('input[name^="permissions["]').remove();

            Object.keys(permissionsObject).forEach(function(formName) {
                Object.keys(permissionsObject[formName]).forEach(function(actionKey) {
                    $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'permissions[' + formName + '][' + actionKey + ']')
                        .val(permissionsObject[formName][actionKey])
                        .appendTo(form);
                });
            });
        });
    });
</script>
@endpush
@stack('textareajs')