@php
    use Carbon\Carbon;
    $title = translate($device->name);
@endphp
@extends('layouts.app')
@section('title', $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' => $title, 'url' => '']
            ]" />
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'edit', 'url' => route('devices.edit', $device)])
            @include('shared.button', ['type' => 'delete', 'url' => route('devices.destroy', $device)])
        </x-slot>
    </x-page-header>
 
    <x-hr/>

    <ul class="space-y-5 list-disc">
        @include('shared.list-item', ['label' => __('forms.user'), 'value' => ($device->User?->name ?? '---')])
        @include('shared.list-item', ['label' => __('forms.name'), 'value' => ($device->name ?? '---')])
        @include('shared.list-item', ['label' => __('forms.BoardID'), 'value' => ($device->board_uuid ?? '---')])
        @include('shared.list-item', ['label' => __('table.brand'), 'value' => ($device->brand ?? '---')])
        @include('shared.list-item', ['label' => __('table.model'), 'value' => ($device->model ?? '---')])
        @include('shared.list-item', ['label' => __('forms.description'), 'value' => ($device->description ?? '---')])
        @include('shared.list-item', ['label' => __('table.connection'), 'value' => ($device->Connection?->name ?? '---')])
        @include('shared.list-item', ['label' => __('table.topic'), 'value' => ($device->mqtt_topic ?? '---')])
        @include('shared.list-item', ['label' => 'LAN', 'value' => ($device->lan ?? '---')])
        @include('shared.list-item', ['label' => 'WiFi', 'value' => ($device->wifi ?? '---')])
        @include('shared.list-item', ['label' => __('forms.CreatedAt'), 'value' => CheckDateTime($device->created_at, 'show', 'FullDateTime')])
        @include('shared.list-item', ['label' => __('forms.UpdatedAt'), 'value' => CheckDateTime($device->updated_at, 'show', 'FullDateTime')])
    </ul>

    <x-hr/>

    <h3 class="text-2xl font-semibold">
        {{ __('forms.patterns') }}
    </h3>
    <div class="relative overflow-x-auto shadow-md rounded-lg mt-5 border-2 border-gray-300 dark:border-gray-700">
        <table id="data" class="w-full text-sm text-left rtl:text-right text-gray-900 dark:text-gray-100">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr class="text-center">
                <th scope="col" class="px-6 py-3">
                    #
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.type') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.setter') }}
                </th>
                <!-- <th scope="col" class="px-6 py-3">
                    {{ __('forms.beginner') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.finisher') }}
                </th> -->
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.separator') }}
                </th>
                <th scope="col" class="px-6 py-3">
                    {{ __('forms.connector') }}
                </th>
                <!-- <th scope="col" class="px-6 py-3">
                    Length
                </th> -->
            </tr>
            </thead>
            <tbody>
            @forelse($device->Patterns as $key => $pattern)
                <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 text-center">
                    <td class="px-6 py-4">
                        {{ $key + 1 }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $pattern->type }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $pattern->setter }}
                    </td>
                    <!-- <td class="px-6 py-4">
                        {{ $pattern->beginner }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $pattern->finisher }}
                    </td> -->
                    <td class="px-6 py-4">
                        {{ $pattern->separator }}
                    </td>
                    <td class="px-6 py-4">
                        {{ $pattern->connector }}
                    </td>
                    <!-- <td class="px-6 py-4">
                        {{ $pattern->length ?? '---' }}
                    </td> -->
                </tr>
            @empty
                <tr class="odd:bg-dar-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                    <td colspan="4" class="px-6 py-4">
                        {{ __('table.NoRecords') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if(count($device->Registers))
        <x-hr/>
        <div class="mt-5" id="LogChart"></div>
    @endif
@endsection
<script>
    {{--window.addEventListener('load', () => {--}}
    {{--    SetLoading(true);--}}
    {{--    $.ajax({--}}
    {{--        url: "{{ route('devices.chart', $device) }}",--}}
    {{--        method: "GET",--}}
    {{--    }).done(function (data) {--}}
    {{--        $('#LogChart').html(data);--}}
    {{--    }).fail(function (jqXHR, textStatus) {--}}
    {{--        window.swal.fire({--}}
    {{--            title: 'Error!',--}}
    {{--            text: 'Please contact support',--}}
    {{--            icon: 'error',--}}
    {{--            confirmButtonText: 'Ok',--}}
    {{--        });--}}
    {{--        console.log(textStatus);--}}
    {{--    }).always(function () {--}}
    {{--        SetLoading(false);--}}
    {{--    });--}}
    {{--});--}}
</script>