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

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

    <x-hr/>

    <ul class="space-y-5" style="direction: rtl">
        <li>
            {{ __('forms.user') }} : {{ $NeuralNetwork->User->name }}
        </li>
        <li>
            {{ __('forms.name') }} : {{ $NeuralNetwork->name }}
        </li>
        <li>
            {{ __('forms.description') }} : {{ $NeuralNetwork->description ?? '---' }}
        </li>
        <li>
            {{ __('forms.CreatedAt') . ' : ' . CheckDateTime($NeuralNetwork->created_at, 'show', 'FullDateTime') }}
        </li>
        <li>
            {{ __('forms.UpdatedAt') . ' : ' . CheckDateTime($NeuralNetwork->updated_at, 'show', 'FullDateTime') }}
        </li>
    </ul>
    <div class="space-y-6 mt-5 w-full" dir="rtl">
        <!-- Registers Section -->
        <h2 class="text-2xl mb-4">{{ __('forms.registers') }}</h2>

        <!-- Registers Table -->
        <div id="registers" class="space-y-2 w-full">
            <div class="relative overflow-x-auto shadow-md rounded-lg w-full">
                <table 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>
                        <th scope="col" class="px-6 py-3">#</th>
                        <th scope="col" class="px-6 py-3">{{ __('table.device') }}</th>
                        <th scope="col" class="px-6 py-3">{{ __('table.register') }}</th>
                        <th scope="col" class="px-6 py-3">{{ __('table.actions') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($NeuralNetwork->GetRegisters() as $key => $register)
                        @include('neural-networks.partial.register', ['register' => $register, 'show' => true, 'key' => $key])
                    @empty
                        <tr class="odd:bg-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 text-center">
                                <i class="bi bi-info-circle-fill me-1"></i>
                                {{ __('table.NoRecords') }}
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Prediction Form -->
        <div class="border-2 border-gray-300 dark:border-gray-700 rounded-lg p-6 mt-6 max-w-full">
            <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">Prediction</h3>
            <form id="prediction-form" class="space-y-4">
                <div>
                    <label for="outside_temp" class="block text-sm font-medium text-gray-900 dark:text-gray-300">Outside Temp</label>
                    <input type="number" id="outside_temp" name="outside_temp" disabled
                           class="w-full border rounded px-2 py-1 dark:bg-gray-700 dark:text-white" value="10" required>
                </div>

                <div>
                    <label for="current_temp" class="block text-sm font-medium text-gray-900 dark:text-gray-300">Current Temp</label>
                    <input type="number" id="current_temp" name="current_temp" disabled
                           class="w-full border rounded px-2 py-1 dark:bg-gray-700 dark:text-white" value="18" required>
                </div>

                <div>
                    <label for="target_temp" class="block text-sm font-medium text-gray-900 dark:text-gray-300">Target Temp</label>
                    <input type="number" id="target_temp" name="target_temp"
                           class="w-full border rounded px-2 py-1 dark:bg-gray-700 dark:text-white" value="21" required>
                </div>

                <div>
                    <label for="target_datetime" class="block text-sm font-medium text-gray-900 dark:text-gray-300">Target Date & Time</label>
                    <input type="datetime-local" id="target_datetime" name="target_datetime"
                           class="w-full border rounded px-2 py-1 dark:bg-gray-700 dark:text-white"
                           value="2025-10-26T08:00" required>
                </div>

                <div class="flex gap-2">
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Predict</button>
                    <button type="reset" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Reset</button>
                </div>
            </form>

            <div id="prediction-result" class="mt-4 hidden border-t pt-4">
                <p>Predicted Time to Reach: <span id="predicted_time_to_reach"></span> minutes</p>
                <p>Boiler Start Time: <span id="boiler_start_time"></span></p>
            </div>
        </div>

        <!-- Properties Section -->
        <h2 class="text-2xl mt-6">{{ __('forms.properties') }}</h2>
        <div id="properties" class="space-y-2 w-full">
            <div class="relative overflow-x-auto shadow-md rounded-lg w-full">
                <table 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>
                        <th scope="col" class="px-6 py-3">#</th>
                        <th scope="col" class="px-6 py-3">{{ __('table.entry') }}</th>
                        <th scope="col" class="px-6 py-3">{{ __('table.weight') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($NeuralNetwork->Properties as $key => $property)
                        @include('neural-networks.partial.property', ['property' => $property, 'show' => true, 'key' => $key])
                    @empty
                        <tr class="odd:bg-gray-100 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <td colspan="3" class="px-6 py-4 text-center">
                                <i class="bi bi-info-circle-fill me-1"></i>
                                {{ __('table.NoRecords') }}
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <div class="grid gap-6 mb-6 grid-cols-1 lg:grid-cols-2" style="direction: rtl">
        @foreach($NeuralNetwork->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{{ $key }})"
                                class="flex items-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-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"></i>
                            <span class="hidden sm:block">
                                {{ __('forms.export') }}
                            </span>
                        </button>
                        <button type="button" onclick="Logs(this)"
                                class="flex items-center space-x-2 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"></i>
                            <span class="hidden sm:block">
                                {{ __('table.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">
                        {{ __('forms.LiveUpdate') }}
                    </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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#prediction-form').on('submit', function(e) {
                e.preventDefault(); // Prevent normal form submit / refresh

                // Gather form data
                let formData = {
                    outside_temp: $('#outside_temp').val(),
                    current_temp: $('#current_temp').val(),
                    target_temp: $('#target_temp').val(),
                    target_datetime: $('#target_datetime').val()
                };

                $.ajax({
                           url: '{{ route("predict") }}', // Make sure the route name matches
                           method: 'POST',
                           data: formData,
                           success: function(response) {
                               // Update the prediction panel
                               $('#predicted_time_to_reach').text(response.predicted_time_to_reach);
                               $('#boiler_start_time').text(response.boiler_start_time);
                               $('#prediction-result').removeClass('hidden');

                               // SweetAlert showing the actual prediction values
                               Swal.fire({
                                             icon: 'success',
                                             title: 'Prediction Completed',
                                             html: `
                        <p>Predicted Time to Reach: <strong>${response.predicted_time_to_reach} minutes</strong></p>
                        <p>FanCoil Start Time: <strong>${response.boiler_start_time}</strong></p>
                    `,
                                             showCloseButton: true,
                                             focusConfirm: false,
                                             confirmButtonText: 'OK'
                                         });
                           },
                           error: function(xhr) {
                               let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Something went wrong.';
                               Swal.fire({
                                             icon: 'error',
                                             title: 'Error',
                                             text: msg
                                         });
                           }
                       });
            });
        });
    </script>




    <script>

        const MAX_DATA_POINTS = 50;

        window.addEventListener('load', () => {
            @foreach($NeuralNetwork->GetRegisters() as $key => $register)
            @php
                $data = $register->chartLogs(50);
            @endphp

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

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

            config{{ $key }} = {
                type: 'line',
                data: data{{ $key }},
                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{{ $key }}[index];
                                }
                            }
                        }
                    },
                    transitions: {
                        show: {
                            animations: {
                                x: {
                                    from: 0
                                },
                                y: {
                                    from: 0
                                }
                            }
                        },
                        hide: {
                            animations: {
                                x: {
                                    to: 0
                                },
                                y: {
                                    to: 0
                                }
                            }
                        }
                    },
                    animation: {
                        onComplete: function () {
                            image{{ $key }} = LogChart{{ $key }}.toBase64Image();
                        },
                    },
                }
            };

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

            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 }}") {
                            var e = JSON.parse(payloadString(payload));
                            if ($('#live-{{ $register->uuid }}:checkbox:checked').length > 0) {
                                value = e.value;
                                labels = LogChart{{ $key }}.data.labels;
                                label = Math.floor(labels[labels.length - 1] + 1);
                                labelIndex = labels.indexOf(label);
                                if (labelIndex === -1) {
                                    labels.push(label);
                                    tooltipTitles{{ $key }}.push(e.label);
                                    LogChart{{ $key }}.data.datasets[0].data.push(value);
                                } else {
                                    LogChart{{ $key }}.data.datasets[0].data[labelIndex] = value;
                                }
                                if (LogChart{{ $key }}.data.labels.length > MAX_DATA_POINTS) {
                                    LogChart{{ $key }}.data.labels.shift(); // remove first (oldest) label
                                    LogChart{{ $key }}.data.datasets[0].data.shift(); // remove first (oldest) data point
                                }
                                LogChart{{ $key }}.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{{ $key }}.data.labels;
                            label = Math.floor(labels[labels.length - 1] + 1);
                            labelIndex = labels.indexOf(label);
                            if (labelIndex === -1) {
                                labels.push(label);
                                tooltipTitles{{ $key }}.push(e.label);
                                LogChart{{ $key }}.data.datasets[0].data.push(value);
                            } else {
                                LogChart{{ $key }}.data.datasets[0].data[labelIndex] = value;
                            }
                            if (LogChart{{ $key }}.data.labels.length > MAX_DATA_POINTS) {
                                LogChart{{ $key }}.data.labels.shift(); // remove first (oldest) label
                                LogChart{{ $key }}.data.datasets[0].data.shift(); // remove first (oldest) data point
                            }
                            LogChart{{ $key }}.update();
                            $('#value-{{ $register->uuid }}').html(value);
                        }
                    });
                    break;
                default:
                    break;
            }
            @endforeach
        });

        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();
        }

        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);
            });
        }
    </script>
@endsection