@extends('layouts.app')
@section('title', $title = __('forms.EditRecord', ['record' => $connection->name]))
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('connection.index'), 'url' => route('connections.index')],
                ['label' => $connection->name, 'url' => route('connections.show', $connection)],
                ['label' => $title, 'url' => '']
            ]" />
        </x-slot>
    </x-page-header>

    <x-hr/>

    <form action="{{ route('connections.update', $connection) }}" method="post">
        @csrf
        @method('PATCH')
        <div class="grid gap-6 mb-6 md:grid-cols-5">
            <div>
                <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.name') }}
                </label>
                <input type="text" id="name" name="name" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="{{ __('forms.required') }}" value="{{ $connection->name }}"/>
            </div>
            <div>
                <label for="broker" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.broker') }}
                </label>
                <select id="broker" name="broker"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <option value="">
                        {{ __('forms.ChooseOption') }}
                    </option>
                    @foreach($brokers as $key => $broker)
                        <option value="{{ $broker->uuid }}" @selected($broker->uuid == $connection->broker_uuid)>
                            {{ $broker->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.username') }}
                </label>
                <input type="text" id="username" name="username"
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="{{ __('forms.optional') }}" value="{{ $connection->username }}"/>
            </div>
            <div>
                <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.password') }}
                </label>
                <input type="text" id="password" name="password"
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="{{ __('forms.optional') }}" value="{{ $connection->password }}"/>
            </div>
            <div>
                <label for="client_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.ClientID') }}
                </label>
                <input type="text" id="client_id" name="client_id"
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="{{ __('forms.optional') }}" value="{{ $connection->client_id }}"/>
            </div>
        </div>

        <x-hr/>

        <div class="flex justify-between items-center">
            <h2 class="text-3xl">
                {{ __('forms.AccessList') }}
            </h2>
            @include('shared.button', ['type' => 'ClickURL', 'color' => 'blue', 'label' => __('forms.AddRule'), 'function' => 'AddRule()', 'icon' => 'bi-plus-circle-fill'])
        </div>
        <ul id="list" class="grid gap-6 md:grid-cols-2 mt-5">
            @forelse($connection->Permissions() as $acl)
                <li class="items border-2 border-gray-300 dark:border-gray-700 p-3 rounded-md">
                    <div class="grid gap-6 md:grid-cols-3 items-end">
                        <div>
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.topic') }}
                            </label>
                            <input type="text" name="topics[]" value="{{ $acl['topic'] }}"
                                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   required placeholder="Required"/>
                        </div>
                        <div>
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.permission') }}
                            </label>
                            <select name="permissions[]"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                <option selected>
                                    {{ __('forms.ChooseOption') }}
                                </option>
                                @foreach($permissions as $value => $permission)
                                    <option value="{{ $value }}" @selected($acl['permission'] == $value)>
                                        {{ $permission }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @include('shared.button', ['type' => 'ClickURL', 'color' => 'red', 'label' => __('forms.remove'), 'function' => '$(this).parent().parent().remove();', 'icon' => 'bi-trash3-fill'])
                    </div>
                </li>
            @empty
                <li class="items border-2 border-gray-300 dark:border-gray-700 p-3 rounded-md">
                    <div class="grid gap-6 md:grid-cols-3 items-end">
                        <div>
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.topic') }}
                            </label>
                            <input type="text" name="topics[]"
                                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                   required placeholder="Required"/>
                        </div>
                        <div>
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.permission') }}
                            </label>
                            <select name="permissions[]"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                <option selected>
                                    {{ __('forms.ChooseOption') }}
                                </option>
                                @foreach($permissions as $value => $permission)
                                    <option value="{{ $value }}">
                                        {{ $permission }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @include('shared.button', ['type' => 'ClickURL', 'color' => 'red', 'label' => __('forms.remove'), 'function' => '$(this).parent().parent().remove();', 'icon' => 'bi-trash3-fill'])
                    </div>
                </li>
            @endforelse
        </ul>

        <x-hr/>

        <button type="submit"
                class="flex items-center justify-center space-x-2 text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
            </svg>
            <span>
                {{ __('table.update') }}
            </span>
        </button>
    </form>

    <script>
        const list = document.getElementById('list');
        const item = document.querySelector('.items');
        const AddRule = () => list.appendChild(item.cloneNode(true));
    </script>
@endsection