@php
//TO BE REMOVED, WELL GET THEM FROM BACK
    $verbs = [
        [
            'id' => 'add',
            'ui_name' => 'add'
        ],
        [
            'id' => 'view',
            'ui_name' => 'view'
        ],
        [
            'id' => 'list',
            'ui_name' => 'list'
        ],
        [
            'id' => 'delete',
            'ui_name' => 'delete'
        ],
        [
            'id' => 'edit',
            'ui_name' => 'edit'
        ],
    ];

    $verbs = array_filter($verbs, function ($k) use ($module) {
        return !in_array($k['id'], $module->verbs);
    });

@endphp

<x-ui.modal blade="{{ $viewName ?? 'unknown' }}" title="CREATE PERMISSION"
            id="create-permission-modal">
    <x-slot name="body">
        <form action="{{route('management-permissions.permissions.store', ['microservice' => $microservice, 'module' => $module])}}" id="permission-create-form" method="POST">
            @csrf
            <x-ui.input-field.modal readonly label="NAME"
                                    value="{{ $microservice->name }}.{{ $module->name }}.{{ $module->available_verbs[0]['id'] ?? '' }}"
                                    id="create-name" name="name" class="modal-input"></x-ui.input-field.modal>
            <x-ui.input-field.modal label="DESCRIPTION"
                                    required
                                    value="" placeholder="Please, compose the depiction of the permission"
                                    id='create-desc' name="description" class="modal-input"></x-ui.input-field.modal>
            <x-ui.input-field.modal label="VIEW NAME"
                                    value=""
                                    required
                                    placeholder="Please provide the chosen name for the view, bearing in mind that it will be visible to users."
                                    id='create-view-name' name="view_name" class="modal-input"></x-ui.input-field.modal>
            <x-ui.select.modal
                required
                :options="$module->available_verbs"
                label="ACTION:"
                name="action_verb"
                id="create-permission-action"
                class="custom-select-class"/>

            <x-ui.input-checkbox title="{{!$has_default_view ? 'provide default view to enable option':''}}" disabled="{{!$module->default_view}}" label="CAN BE ADDED TO QUICK ACCESS:" name="quick_access"/>
            <x-ui.input-checkbox label="NEEDS EXTRA AUTHENTICATION:" name="extra_auth"/>


            <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 form="permission-create-form">
                    submit
                </x-ui.blue-button>
            </div>
        </form>
    </x-slot>
</x-ui.modal>

<script>
    // Update the "create-name" field when the select box changes
    document.getElementById('create-permission-action').addEventListener('change', function () {
        const selectedOption = document.getElementById('create-permission-action').value;
        const fullName = "{{$microservice->name}}.{{$module->name}}." + selectedOption;
        document.getElementById('create-name').value = fullName;
    });
</script>