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

    <x-hr/>

    <form action="{{ route('registers.update', $register) }}" method="post" class="mb-0">
        @csrf
        @method('PATCH')
        <div class="grid gap-6 mb-6 md:grid-cols-6">
            <div>
                <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.title') }}
                </label>
                <input type="text" id="title" name="title" 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"
                       value="{{ $register->title }}" placeholder="{{ __('forms.required') }}"/>
            </div>
            <div>
                <label for="key" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.key') }}
                </label>
                <input type="text" id="key" name="key" 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"
                       value="{{ $register->key }}" placeholder="{{ __('forms.required') }}"/>
            </div>
            <div>
                <label for="unit" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.unit') }}
                </label>
                <input type="text" id="unit" name="unit"
                       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"
                       value="{{ $register->unit }}" placeholder="{{ __('forms.optional') }}"/>
            </div>
            <div>
                <label for="type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.type') }}
                </label>
                <select name="type" id="type" onchange="SetType(this)"
                        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">
                    @foreach($types as $key => $type)
                        <option value="{{ $key }}" @selected($register->type == $key)>
                            {{ $type }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="permission" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.permission') }}
                </label>
                <select name="permission" id="permission" onchange="SetPermission(this)"
                        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="ReadOnly" @selected($register->permission == 'ReadOnly')>
                        Read-Only
                    </option>
                    <option value="ReadWrite" @selected($register->permission == 'ReadWrite')>
                        Read-Write
                    </option>
                </select>
            </div>
            <div>
                <label for="pattern" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.pattern') }}
                </label>
                <select id="pattern" name="pattern"
                        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">
                    <option value="">
                        {{ __('forms.none') }}
                    </option>
                    @foreach($device->Patterns as $key => $pattern)
                        <option value="{{ $pattern->uuid }}" @selected($pattern->uuid == $register->pattern_uuid)>
                            {{ $pattern->type }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-6">
            <div>
                <label for="border_color" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.ChartBorderColor') }}
                </label>
                <input type="color" id="border_color" name="border_color"
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block 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"
                       value="{{ $register->border_color }}" style="width: -webkit-fill-available; height: 61%;"/>
            </div>
            <div>
                <label for="border_color" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.ChartBackgroundColor') }}
                </label>
                <input type="color" id="background_color" name="background_color"
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block 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"
                       value="{{ $register->background_color }}" style="width: -webkit-fill-available; height: 61%;"/>
            </div>
            <div>
                <label for="value" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.value') }}
                </label>
                @switch($register->type)
                    @case('bool')
                        <select id="value" name="value"
                                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="1">
                                {{ __('forms.true') }}
                            </option>
                            <option value="0">
                                {{ __('forms.false') }}
                            </option>
                        </select>
                        @break
                    @case('int')
                        <input type="number" id="value" name="value"
                               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"
                               value="{{ $register->value }}"/>
                        @break
                    @default
                        <input type="text" id="value" name="value"
                               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"
                               value="{{ $register->value }}"/>
                        @break
                @endswitch
            </div>
        </div>
        <div id="CommandsDiv" class="{{ $register->permission == 'ReadOnly' ? 'hidden' : '' }}">
            <hr class="my-5 border-gray-300 dark:border-gray-700">
            <div class="flex justify-between items-center my-5">
                <h3 class="text-2xl">
                    {{ __('forms.commands') }}
                </h3>
                <button type="button" onclick="AddCommand()"
                        class="flex items-center justify-center space-x-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    <i class="bi bi-plus-circle-fill"></i>
                    <span class="hidden sm:block">
                        {{ __('forms.AddCommand') }}
                    </span>
                </button>
            </div>
            <ol id="commands" class="space-y-2">
                @foreach($register->Commands as $index => $command)
                    <li class="border-2 border-gray-300 dark:border-gray-700 p-2 rounded">
                        <input hidden name="id[{{ $index }}]" value="{{ $command->uuid }}">
                        <div class="grid gap-6 md:grid-cols-5">
                            <div>
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.title') }}
                                </label>
                                <input type="text" name="command_title[{{ $index }}]" 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"
                                       value="{{ $command->title }}"/>
                            </div>
                            <div>
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.command') }}
                                </label>
                                <input type="text" name="command[{{ $index }}]" 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"
                                       value="{{ $command->command }}"/>
                            </div>
                            <div>
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.type') }}
                                </label>
                                <select name="command_type[{{ $index }}]" onchange="SetType(this)"
                                        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">
                                    @foreach($CommandTypes as $key => $type)
                                        <option value="{{ $key }}" @selected($command->type == $key)>
                                            {{ $type }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="switchable {{ $command->type != 'Switch' ? 'hidden' : '' }}">
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.switches') }}
                                </label>
                                <input type="text" name="switches[{{ $index }}]"
                                       placeholder="{{ __('forms.SeparateWithCommas') }}"
                                       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"
                                       value="{{ $command->type == 'Switch' ? implode(',', json_decode($command->value)) : '' }}"/>
                            </div>
                            <div class="limit {{ $command->type != 'SetPoint' ? 'hidden' : '' }}">
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.LimitFrom') }}
                                </label>
                                <input type="number" name="from[{{ $index }}]"
                                       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"
                                       value="{{ $command->type == 'SetPoint' ? json_decode($command->value)[0] : '' }}"/>
                            </div>
                            <div class="limit {{ $command->type != 'SetPoint' ? 'hidden' : '' }}">
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.LimitTo') }}
                                </label>
                                <input type="number" name="to[{{ $index }}]"
                                       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"
                                       value="{{ $command->type == 'SetPoint' ? json_decode($command->value)[1] : '' }}"/>
                            </div>
                            <div class="selection {{ $command->type != 'Selection' ? 'hidden' : '' }}">
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.items') }}
                                </label>
                                <input type="text" name="selections[]" placeholder="{{ __('forms.KeyValues') }}"
                                       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"
                                       value="{{ $command->type == 'Selection' && !is_null($command->value) ? ImplodeKeys($command->value, true) : '' }}"/>
                            </div>
                            <div class="jsons {{ $command->type != 'JSON' ? 'hidden' : '' }}">
                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                    {{ __('forms.Keys(OptionalValues)') }}
                                </label>
                                <input type="text" name="jsons[]" placeholder="{{ __('forms.KeyValues') }}"
                                       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"
                                       value="{{ $command->type == 'JSON' && !is_null($command->value) ? ImplodeKeys($command->value, true) : '' }}"/>
                            </div>
                        </div>
                        <button type="button" onclick="$(this).parent().remove();"
                                class="mt-2 flex items-center justify-center space-x-2 text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                            <i class="bi bi-trash3-fill"></i>
                            <span>
                                {{ __('forms.RemoveCommand') }}
                            </span>
                        </button>
                    </li>
                @endforeach
            </ol>
        </div>

        <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>
                {{ __('forms.update') }}
            </span>
        </button>
    </form>
@endsection
@include('registers.partial.script')