@extends('layouts.app')
@section('title', $title = __('forms.EditRecord', ['record' => translate($device->name)]))
@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' => $title, 'url' => '']
            ]" />
        </x-slot>
    </x-page-header>

    <x-hr/>

    <form action="{{ route('devices.update', $device) }}" method="post">
        @csrf
        @method('PATCH')
        <div class="grid gap-6 mb-6 md:grid-cols-4">
            <div>
                <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.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="{{ $device->name }}"/>
            </div>
            <div>
                <label for="board" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.BoardID') }}
                </label>
                <input type="text" id="board" name="board"
                       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="{{ $device->board_uuid }}"/>
            </div>
            <div>
                <label for="brand"
                       class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.brand') }}
                </label>
                <input type="text" id="brand" name="brand"
                       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="{{ $device->brand }}"/>
            </div>
            <div>
                <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.model') }}
                </label>
                <input type="text" id="model" name="model"
                       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="{{ $device->model }}"/>
            </div>
        </div>
        <div class="mb-6">
            <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ __('forms.description') }}
            </label>
            <textarea id="description" name="description"
                      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
                      rows="4">{{ $device->description }}</textarea>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-4">
            <div>
                <label for="connection" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.connection') }}
                </label>
                <select id="connection" name="connection"
                        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.ChooseConnection') }}
                    </option>
                    @foreach($connections as $key => $connection)
                        <option value="{{ $connection->uuid }}" @selected($connection->uuid == $device->connection_uuid)>
                            {{ $connection->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="topic" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.topic') }}
                </label>
                <input type="text" id="topic" name="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"
                       placeholder="{{ __('forms.required') }}" value="{{ $device->mqtt_topic }}"/>
            </div>
            <div>
                <label for="lan" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    LAN
                </label>
                <input type="text" id="lan" name="lan"
                       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="{{ $device->lan }}"/>
            </div>
            <div>
                <label for="wifi" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    WiFi
                </label>
                <input type="text" id="wifi" name="wifi"
                       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="{{ $device->wifi }}"/>
            </div>
        </div>
        <div class="flex justify-between items-center my-5">
            <h3 class="text-2xl">
                {{ __('forms.patterns') }}
            </h3>
            <button type="button" onclick="AddPattern()"
                    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-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.AddPattern') }}
                </span>
            </button>
        </div>
        <ol id="patterns" class="space-y-2">
            @foreach($device->Patterns as $pattern)
                <li class="border-gray-400 dark:border-gray-600 border-2 p-2 rounded">
                    <div class="grid gap-6 md:grid-cols-6">
                        <div>
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('table.type') }}
                            </label>
                            <select name="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="{{ $type }}" @selected($pattern->type == $type)>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="custom {{ $pattern->type != 'Custom' ? 'hidden' : '' }}">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.setter') }}
                            </label>
                            <input type="text" name="setter[]"
                                   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="{{ $pattern->setter }}"/>
                        </div>
                        <div class="custom {{ $pattern->type != 'Custom' ? 'hidden' : '' }}">
                            <label for="use_board_id"
                                   class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.UseBoardID') }}
                            </label>
                            <select id="use_board_id" name="use_board_id" 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">
                                <option value="0" @selected(!$pattern->use_board_id)>
                                    {{ __('forms.NoDontUseIt') }}
                                </option>
                                <option value="1" @selected($pattern->use_board_id)>
                                    {{ __('forms.YesUseIt') }}
                                </option>
                            </select>
                        </div>
                        <div class="hidden">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.beginner') }}
                            </label>
                            <input type="text" name="beginner[]"
                                   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="{{ $pattern->beginner }}"/>
                        </div>
                        <div class="hidden">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.finisher') }}
                            </label>
                            <input type="text" name="finisher[]"
                                   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="{{ $pattern->finisher }}"/>
                        </div>
                        <div class="custom {{ $pattern->type != 'Custom' ? 'hidden' : '' }}">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.separator') }}
                            </label>
                            <input type="text" name="separator[]"
                                   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="{{ $pattern->separator }}"/>
                        </div>
                        <div class="hidden">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.connector') }}
                            </label>
                            <input type="text" name="connector[]"
                                   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="{{ $pattern->connector }}"/>
                        </div>
                        <div class="hidden">
                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                {{ __('forms.lenght') }}
                            </label>
                            <input type="number" name="lenght[]" min="1"
                                   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="{{ $pattern->lenght }}"/>
                        </div>
                    </div>
                    <button type="button" onclick="$(this).parent().remove();"
                            class="mt-2 flex items-center justify-center 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 me-2"></i>
                        <span>
                            {{ __('forms.RemovePattern') }}
                        </span>
                    </button>
                </li>
            @endforeach
        </ol>

        <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('devices.partial.script')