@php
    $verbOptions = [
        ['id' => 'view', 'ui_name' => 'View'],
        ['id' => 'add', 'ui_name' => 'Add'],
        ['id' => 'edit', 'ui_name' => 'Edit'],
        ['id' => 'update', 'ui_name' => 'Update'],
        ['id' => 'delete', 'ui_name' => 'Delete'],
    ];

    $valueOptions = [
        ['id' => 'true', 'ui_name' => 'True'],
        ['id' => 'false', 'ui_name' => 'False'],
    ];
@endphp
<x-ui.modal blade="{{ $viewName ?? 'unknown' }}"
            title="EDITING RULES FOR MODULE {{$module->name}}"
            class="edit-module-rules-modal"
            id="edit-module-rules-modal-{{$module->id}}">
    <x-slot name="body">
        {{-- Main store form --}}
        <form action="{{ route('management-permissions.modules.rules.store', [
                'module' => $module,
                'microservice' => $microservice
            ]) }}"
              id="module-rules-editing-form-{{$module->id}}"
              method="POST">
            @csrf
            <div class="row">
                <div class="col-6">
                    <x-ui.select.modal-multi-select
                        required
                        :options="$roles"
                        label="ROLES:"
                        name="roles" />
                </div>
                <div class="col-6">
                    <x-ui.select.modal
                        required
                        :options="$verbOptions"
                        label="VERBS:"
                        name="rule_verb" />

                </div>
                <div class="col-6">
                    <x-ui.select.modal
                        required
                        :options="$valueOptions"
                        label="VALUE:"
                        name="rule_value" />
                </div>
                <div class="col-6">
                    <x-ui.input-field.modal
                        placeholder="e.g. button, action, box"
                        label="target object"
                        name="target"
                        class="modal-input" />
                </div>
            </div>


            <x-ui.input-checkbox
                label="APPEND RULE TO THE SELECTED ROLE(S)"
                id="append_rule"
                checked="true"
                class="d-none"
                name="append_rule" />

            <x-ui.input-field.modal
                readonly="true"
                id="new_rules"
                value=""
                placeholder="e.g. can_view_box:true"
                label="new rule"
                name="new_rules"
                class="modal-input" />

            <div class="d-flex gap-3 mt-4 justify-content-center">
                <x-ui.blue-button class="close-modal-btn">
                    CANCEL
                </x-ui.blue-button>
                <x-ui.blue-button type="submit" form="module-rules-editing-form-{{$module->id}}">
                    submit
                </x-ui.blue-button>
            </div>
        </form>

        {{-- Rules list --}}
        <div class="existing-rules-wrapper mt-4">
            <p class="existing-rules fw-bold">Existing rules:</p>

            @forelse($module->rules as $rule)
                <div class="rule-item d-flex flex-column mb-3">
                    <span class="rule-role fw-bold">{{ $rule->role->name }}</span>

                    <div class="rule-values d-flex gap-2 flex-wrap">
                        @foreach($rule->value as $singleRule)
                            @php
                                [$key, $val] = explode(':', $singleRule);
                            @endphp
                            {{-- FIX 1: added data-key="{{ $key }}" to avoid fragile DOM traversal --}}
                            <div class="rule-entry d-flex align-items-center gap-2" data-key="{{ $key }}">
                                <span class="rule-key">{{ $key }}:</span>
                                <select class="rule-value form-select form-select-sm d-none" data-original="{{ $val }}">
                                    <option value="true" {{ $val === 'true' ? 'selected' : '' }}>True</option>
                                    <option value="false" {{ $val === 'false' ? 'selected' : '' }}>False</option>
                                </select>
                                <span class="rule-value-text">{{ $val }}</span>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex gap-2 mt-2">
                        <button type="button" class="btn btn-primary btn-sm btn-edit">Edit</button>

                        <form method="POST"
                              action="{{ url('/management-permissions/modules/'.$microservice->name.'/'.$module->id.'/rules/'.$rule->id.'/update') }}"
                              class="update-form d-none">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="new_value" class="update-input" />
                            <button type="submit" class="btn btn-success btn-sm">Update</button>
                        </form>

                        {{-- Delete --}}
                        <form method="POST"
                              action="{{ route('management-permissions.modules.rules.destroy', [
                  'microservice' => $microservice,
                  'module' => $module,
                  'moduleRule' => $rule
              ]) }}"
                              style="display:inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </div>
                </div>
            @empty
                <b>- No Rules defined yet -</b>
            @endforelse
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const modal = document.getElementById('edit-module-rules-modal-{{$module->id}}');
                    if (!modal) return;

                    // Select the actual <select> elements by name
                    const verbSelect = modal.querySelector('select[name="rule_verb"]');
                    const valueSelect = modal.querySelector('select[name="rule_value"]');
                    const targetInput = modal.querySelector('input[name="target"]');
                    const newRulesInput = modal.querySelector('input[name="new_rules"]');

                    if (!verbSelect || !valueSelect || !targetInput || !newRulesInput) {
                        console.error('One or more inputs not found in modal');
                        return;
                    }

                    function updateNewRules() {
                        const verb = verbSelect.value.trim();
                        const value = valueSelect.value.trim();
                        const target = targetInput.value.trim();

                        if (verb && value && target) {
                            newRulesInput.value = `can_${verb}_${target}:${value}`;
                        } else {
                            newRulesInput.value = '';
                        }
                    }

                    verbSelect.addEventListener('change', updateNewRules);
                    valueSelect.addEventListener('change', updateNewRules);
                    targetInput.addEventListener('input', updateNewRules);
                });
            </script>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('.rule-item').forEach(function(item) {
                        const editBtn = item.querySelector('.btn-edit');
                        const updateForm = item.querySelector('.update-form');
                        const updateInput = item.querySelector('.update-input');

                        editBtn.addEventListener('click', function() {
                            // Show all selects
                            item.querySelectorAll('.rule-value').forEach(select => select.classList.remove('d-none'));

                            // Show update form
                            updateForm.classList.remove('d-none');

                            // FIX 2: use data-key instead of fragile previousElementSibling traversal
                            // FIX 3: join with ',' (no space) to match PHP's explode + trim
                            updateForm.addEventListener('submit', function(e) {
                                const combinedValues = Array.from(item.querySelectorAll('.rule-value')).map(select => {
                                    const key = select.closest('.rule-entry').dataset.key;
                                    return `${key}:${select.value}`;
                                });
                                updateInput.value = combinedValues.join(',');
                            }, { once: true });
                        });
                    });
                });
            </script>
        </div>

    </x-slot>
</x-ui.modal>