@extends('layouts.main')
@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{ asset('css/roles-permissions.css') }}"/>
    @endpush
@endonce

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <x-page-header>
        Editing Permissions for role
        {{$role->view_name}}
    </x-page-header>
    <div id="role-permissions-container" class="d-flex">
        <x-ms-sidebar :microservices="$microservices" :activeMicroservice="$microservice"
                      routeName="management-permissions.edit-role-permissions" :role="$role"/>

        <form
            action="{{route('management-permissions.roles.permissions.update', ['role'=> $role, 'microservice' => $microservice])}}"
            method="POST" style="display: contents" id="edit-permissions-form">
            @csrf



            <x-side-table :tableData="$available_modules">
                <x-slot name="title">
                 <span class="side-table-header-title-ms">
                     EDITTING ROLE PERMISSIONS FOR {{ $microservice->view_name }}</p>
                 </span>
                    <x-ui.blue-button  modal="important-info-modal">
                        IMPORTANT INFO
                    </x-ui.blue-button>
                    @include('management-permissions.partials.important-info-modal')
                </x-slot>

                <x-slot name="tHeadContent">
                    <th class="text-center">ID</th>
                    <th class="text-left status-column">MODULES NAME</th>
                    @foreach($verbs as $verb)
                        <th class="text-center text-uppercase">{{$verb}}</th>
                    @endforeach
                </x-slot>

                <x-slot name="tBodyContent">
                    @foreach($available_modules as $module)
                        <tr>
                            <td class="text-center">
                                <b>{{$module['id']}}</b>

                            </td>

                            <td class="text-left">
                                <b>{{$module['name']}}</b>
                            </td>

                            @foreach($verbs as $verb)
                                <td class="text-center checkbox-column {{$module['permissions'][$verb]['is_default'] ? 'default' : ''}}">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <x-ui.input-checkbox
                                            :label="$module['permissions'][$verb]['id'] ?? '--'"
                                            :disabled="!$module['permissions'][$verb]['is_available']"
                                            :name="$module['permissions'][$verb]['id']"
                                            :checked="$module['permissions'][$verb]['has_right']">
                                        </x-ui.input-checkbox>
                                    </div>

                                </td>
                            @endforeach
                        </tr>
                    @endforeach

                </x-slot>

                <x-slot name="footer">
                    <x-unsaved-changes form="edit-permissions-form"/>

                </x-slot>

            </x-side-table>
        </form>
    </div>
    </div>
@endsection

<script>
    window.addEventListener("DOMContentLoaded", function () {
        const per_form = document.querySelector('#edit-permissions-form')

        /**
         *  Creates an Array with the new permissions
         *  from the individual inputs
         */

        per_form.addEventListener('submit', (e) => {
            const formData = new FormData(per_form);
            formData.forEach((value, key) => {

                if (key !== '_token') {

                    const hiddenInput = document.createElement('input')
                    hiddenInput.type = 'hidden'
                    hiddenInput.name = 'new_permissions[]'
                    hiddenInput.value = key

                    per_form.appendChild(hiddenInput)
                }

            });
        })
    });

</script>