@php
    $title = $ensemble->name;
@endphp
@extends('layouts.app')
@section('title', $title)
@section('content')
    @if($authorized)
        <ul class="space-y-5">
            <li>
                {{ __('table.name') . ' : ' . $ensemble->name }}
            </li>
            <li>
                {{ __('table.description') . ' : ' . $ensemble->description }}
            </li>
            <li>
                Protection : {{ $ensemble->GetProtection() }}
            </li>
            <li>
                {{ 'Created At : ' . CheckDateTime($ensemble->created_at, 'show', 'DateTime') }}
            </li>
            <li>
                {{ 'Updated At : ' . CheckDateTime($ensemble->updated_at, 'show', 'DateTime') }}
            </li>
        </ul>
        <div class="grid gap-6 mb-6 grid-cols-1 lg:grid-cols-2">
            @foreach($ensemble->GetRegisters() as $register)
                <div class="border-2 border-gray-300 dark:border-gray-700 p-2 rounded-lg mt-5">
                    <div class="flex justify-between items-center">
                        <p id="value-{{ $register->uuid }}" class="rounded-full bg-gray-300 dark:bg-gray-700 p-2">
                            {{ $register->value }}
                        </p>
                        <div class="flex justify-between items-center space-x-2">
                            <button onclick="ExportChart(LogChart{{ $register->uuid }})"
                                    class="flex items-center 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-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                                <i class="bi bi-filetype-png sm:me-1"></i>
                                <span class="hidden sm:block">
                                    Export
                                </span>
                            </button>
                            <button type="button" onclick="Commands(this)"
                                    class="flex items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
                                    data-url="{{ route('registers.commands', $register) }}">
                                <i class="bi bi-terminal-fill sm:me-2"></i>
                                <span class="hidden sm:block">
                                    Commands
                                </span>
                            </button>
                            <button type="button" onclick="Logs(this)"
                                    class="flex items-center text-white bg-cyan-700 hover:bg-brown-800 focus:ring-4 focus:outline-none focus:ring-cyan-300 font-medium rounded-lg text-sm w-auto px-5 py-2.5 text-center dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
                                    data-url="{{ route('registers.logs', $register) }}">
                                <i class="bi bi-clock-fill sm:me-2"></i>
                                <span class="hidden sm:block">
                                    Logs
                                </span>
                            </button>
                        </div>
                    </div>
                    <canvas class="mt-3" id="chart-{{ $register->uuid }}"></canvas>
                    <label class="flex justify-between items-center cursor-pointer mt-2">
                        <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
                            Live Update
                        </span>
                        <div>
                            <input type="checkbox" value="" class="sr-only peer" id="live-{{ $register->uuid }}">
                            <div
                                class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                            </div>
                        </div>
                    </label>
                </div>
            @endforeach
        </div>
        <script>
            window.addEventListener('load', () => {
                @foreach($ensemble->GetRegisters() as $register)
                    @php
                        $data = $register->chartLogs(50);
                    @endphp

                    const tooltipTitles{{ $register->uuid }} = @json($data->map(fn ($log) => CheckDateTime($log->created_at, 'show', 'DateTime')));

                    data{{ $register->uuid }} = {
                        labels: @json($data->map(fn ($log, $key) => floor(($key + 2) / 2))),
                        datasets: [
                            {
                                label: '{{ $register->title }}',
                                backgroundColor: '#f3f4f6',
                                borderColor: '#2563eb',
                                data: @json($data->map(fn ($log) => $log->value)),
                                spanGaps: true,
                            }
                        ]
                    };

                    config{{ $register->uuid }} = {
                        type: 'line',
                        data: data{{ $register->uuid }},
                        options: {
                            responsive: true,
                            plugins: {
                                zoom: {
                                    pan: {
                                        enabled: true,
                                        mode: 'xy', // Allow panning in both directions
                                        modifierKey: 'alt', // Optional: hold 'alt' key to pan
                                        speed: 10 // Adjust the panning speed for smoother dragging
                                    },
                                    zoom: {
                                        wheel: {
                                            enabled: true // Enable zooming with the mouse wheel
                                        },
                                        pinch: {
                                            enabled: true // Enable zooming by pinching on touch devices
                                        },
                                        mode: 'xy', // Allow zooming in both directions
                                        speed: 0.1 // Adjust the speed of zooming
                                    }
                                },
                                tooltip: {
                                    callbacks: {
                                        title: function (tooltipItems) {
                                            const index = tooltipItems[0].dataIndex;
                                            return tooltipTitles{{ $register->uuid }}[index];
                                        }
                                    }
                                }
                            },
                            transitions: {
                                show: {
                                    animations: {
                                        x: {
                                            from: 0
                                        },
                                        y: {
                                            from: 0
                                        }
                                    }
                                },
                                hide: {
                                    animations: {
                                        x: {
                                            to: 0
                                        },
                                        y: {
                                            to: 0
                                        }
                                    }
                                }
                            },
                            animation: {
                                onComplete: function () {
                                    image{{ $register->uuid }} = LogChart{{ $register->uuid }}.toBase64Image();
                                },
                            },
                        }
                    };

                    LogChart{{ $register->uuid }} = new Chart(
                        document.getElementById('chart-{{ $register->uuid }}'),
                        config{{ $register->uuid }}
                    );

                    switch (service) {
                        case "mqtt":
                            client.subscribe("registers/{{ $register->uuid }}", (err) => {
                                if (err) {
                                    console.error("Failed to subscribe to topic", err);
                                }
                            });
                            client.on("message", (topic, payload) => {
                                if (topic == "registers/{{ $register->uuid }}") {
                                    e = JSON.parse(payloadString(payload));
                                    if ($('#live-{{ $register->uuid }}:checkbox:checked').length > 0) {
                                    value = e.value;
                                    labels = LogChart{{ $register->uuid }}.data.labels;
                                    label = Math.floor(labels[labels.length - 1] + 1);
                                    labelIndex = labels.indexOf(label);
                                    if (labelIndex === -1) {
                                        labels.push(label);
                                        tooltipTitles{{ $register->uuid }}.push(e.datetime);
                                        LogChart{{ $register->uuid }}.data.datasets[0].data.push(value);
                                    } else {
                                        LogChart{{ $register->uuid }}.data.datasets[0].data[labelIndex] = value;
                                    }
                                    LogChart{{ $register->uuid }}.update();
                                    $('#value-{{ $register->uuid }}').html(value);
                                }
                                }
                            });
                            break;
                        case "echo":
                            Echo.private('register.{{ $register->uuid }}').listen('RegisterEvent', (e) => {
                                if ($('#live-{{ $register->uuid }}:checkbox:checked').length > 0) {
                                    value = e.value;
                                    labels = LogChart{{ $register->uuid }}.data.labels;
                                    label = Math.floor(labels[labels.length - 1] + 1);
                                    labelIndex = labels.indexOf(label);
                                    if (labelIndex === -1) {
                                        labels.push(label);
                                        tooltipTitles{{ $register->uuid }}.push(e.datetime);
                                        LogChart{{ $register->uuid }}.data.datasets[0].data.push(value);
                                    } else {
                                        LogChart{{ $register->uuid }}.data.datasets[0].data[labelIndex] = value;
                                    }
                                    LogChart{{ $register->uuid }}.update();
                                    $('#value-{{ $register->uuid }}').html(value);
                                }
                            });
                            break;
                        default:
                            break;
                    }
                @endforeach
            });

            function Commands(btn) {
                SetLoading(true);
                const url = $(btn).data('url');
                $.ajax({
                    url: url,
                    method: "GET",
                }).done(function (data) {
                    $('#modal-target').html(data);
                    const $targetEl = document.getElementById('commands-modal');
                    modal = new Modal($targetEl);
                    modal.show();
                }).fail(function (jqXHR, textStatus) {
                    window.swal.fire({
                        title: 'Error!',
                        text: 'Please contact support',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                    console.log(textStatus);
                }).always(function () {
                    SetLoading(false);
                });
            }

            function Logs(btn) {
                SetLoading(true);
                const url = $(btn).data('url');
                $.ajax({
                    url: url,
                    method: "GET",
                }).done(function (data) {
                    $('#modal-target').html(data);
                    const $targetEl = document.getElementById('logs-modal');
                    modal = new Modal($targetEl);
                    modal.show();
                }).fail(function (jqXHR, textStatus) {
                    window.swal.fire({
                        title: 'Error!',
                        text: 'Please contact support',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                    console.log(textStatus);
                }).always(function () {
                    SetLoading(false);
                });
            }

            function ExportChart(chart) {
                const canvas = chart.canvas;
                const ctx = canvas.getContext('2d');

                // Add background
                ctx.save(); // Save the original canvas state
                ctx.globalCompositeOperation = 'destination-over'; // Ensures the background goes behind the chart
                ctx.fillStyle = 'white'; // Set your desired background color
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Export the canvas
                const link = document.createElement('a');
                link.href = canvas.toDataURL('image/png'); // Export as PNG (or 'image/jpeg' for JPG)
                link.download = 'chart.png';
                link.click();

                // Restore the original state
                ctx.restore();
            }
        </script>
    @else
        <form class="max-w-sm mx-auto" method="post" action="{{ route('ensembles.GetData', $ensemble) }}">
            @csrf
            <h1 class="text-3xl">
                Please provide credentials to proceed
            </h1>
            <hr class="my-5 border-gray-300 dark:border-gray-700">
            @if(!is_null($ensemble->username))
                <div class="mb-5">
                    <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        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="Required" required/>
                </div>
            @endif
            @if(!is_null($ensemble->password))
                <div class="mb-5">
                    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                        Password
                    </label>
                    <input type="password" 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="Required" required/>
                </div>
            @endif
            <button type="submit"
                    class="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">
                Proceed
            </button>
        </form>
    @endif
@endsection