@extends('layouts.app')@section('title', $title = __('device.DeviceRegisters', ['device' => $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-slot name="center">
            <div class="hidden sm:block sm:relative top-3 end-5 sm:top-0 sm:right-0 z-30">
                <input type="search" id="search" required
                       class="block w-full p-2 sm:p-3 sm:pe-20 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 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"
                       placeholder="{{ __('register.search') }}" onkeyup="Search(this)" data-id="search"/>
                <button type="submit"
                        class="flex items-center space-x-2 text-white absolute end-1 bottom-1 sm:bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                        onclick="Search(this)" data-id="search">
                    <i class="bi bi-search"></i> <span class="hidden sm:block">
                        {{ __('table.search') }}
                    </span>
                </button>
            </div>
            <div class="fixed bottom-5 start-5 flex items-center space-x-3 z-40">
                <button type="submit" class="rounded-full bg-blue-500 py-2 px-3" onclick="Search(this)"
                        data-id="mobile-search">
                    <i class="bi bi-search"></i>
                </button>
                <input type="search" id="mobile-search"
                       class="rounded-full bg-transparent backdrop-blur-3xl border-gray-300 dark:border-gray-700 shadow-2xl text-white"
                       placeholder="{{ __('register.search') }}" onkeyup="Search(this)" data-id="mobile-search"
                       required/>
            </div>
        </x-slot>

        <x-slot name="right">
            @include('shared.button', ['type' => 'add', 'url' => route('registers.create', $device), 'label' => __('register.add')])
        </x-slot>
    </x-page-header>

    @include('registers.partial.table')

    <script>
        const topic = '{{ $device->mqtt_topic }}';

        document.addEventListener( "DOMContentLoaded", function () {
            $( document ).ready( function () {
                @foreach($device->Registers as $key => $register)
                    switch (service) {
                    case "mqtt":


                        const registerTopic = "{{$device->mqtt_topic}}";

                        console.log( "Attempting to subscribe to topic:", registerTopic );

                        client.subscribe( registerTopic, ( err ) => {
                            if (err) {
                                console.error( "Failed to subscribe:", err );
                            } else {
                                console.log( "✅ Successfully subscribed to topic:", registerTopic );
                            }
                        } );

                        client.on( "message", ( topic, payload ) => {
                            console.log( "Message received on topic:", topic );

                            if (topic === registerTopic) {
                                console.log( "Payload:", payload.toString() );

                                const event = JSON.parse( payload.toString() );

                                console.log( "Updating key:", event.key, "with value:", event.value );

                                $( '#register_' + event.key ).html( event.value );

                                const statusTooltip = $( 'tr[row-id={{$key}}] [data-tooltip-target]' );

                                if (statusTooltip.length) {
                                    // Update jQuery internal data
                                    statusTooltip.data( 'status', 'Connected' );
                                    statusTooltip.data( 'time', 0 );

                                    // Also update HTML attributes so other scripts can read it
                                    statusTooltip.attr( 'data-status', 'Connected' );
                                    statusTooltip.attr( 'data-time', 0 );
                                    statusTooltip.removeClass( 'text-red-500' ).addClass( 'text-green-500' )




                                    console.log( `[${ event.key }] Tooltip updated: status=Connected, time=0` );
                                } else {
                                    console.warn( `[${ event.key }] Tooltip element not found` );
                                }

                                const roleTooltip = $('tr[row-id="{{ $key }}"] [role="tooltip"]');

                                if (roleTooltip.length) {
                                    // Update data attribute
                                    roleTooltip.attr('data-status', 'Connected');

                                    // Update visible text inside <p>
                                    roleTooltip.find('p').text('Connected');

                                    console.log(`Tooltip updated for key {{ $key }}`);
                                }


                                console.log( "✅ Update applied for key:", event.key );
                            } else {
                                console.log( "Message ignored, topic does not match:", topic );
                            }
                        } );

                        break;
                    case "echo":
                        window.Echo.private( 'register.{{ $register->uuid }}' ).listen( 'RegisterEvent', ( event ) => {
                            $( '#register_' + event.key ).html( event.value );
                            $( '#status-tooltip-' + event.key ).data( 'status', 'Connected' ).data( 'time', 0 );
                        } );
                        break;
                    default:
                        break;
                }
                @endforeach
            } );

            setInterval( function () {
                let element, status, ago, text, time, now;
                $( '.Timer' ).each( function ( index, item ) {
                    key = $( item ).data( 'key' );
                    element = $( `#status_${ key }` );
                    status = $( item ).data( 'status' );
                    if (status !== 'Never Connected') {
                        time = $( item ).data( 'time' );
                        now = SecondsToTime( time );
                        ago = now.result;
                        if (now.time >= 300) {
                            status = 'Disconnected';
                            element.removeClass( 'text-red-500' ).removeClass( 'text-green-500' ).addClass( 'text-yellow-500' );
                        } else {
                            element.removeClass( 'text-red-500' ).removeClass( 'text-yellow-500' ).addClass( 'text-green-500' );
                        }
                        text = now.time > 0 ? ' (' + ago + ')' : '';
                        $( item ).find( '>p' ).text( status + text );
                        $( item ).data( 'time', time + 1 );
                        $( item ).data( 'status', status );
                    }
                } );
            }, 1000 );
        } );

        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 Search ( btn ) {
            SetLoading( true );
            const id = $( btn ).data( 'id' );
            const search = $( '#' + id ).val();
            $.ajax( {
                        url: "{{ route('devices.registers', $device) }}",
                        method: "GET",
                        data: {
                            search: search,
                        }
                    } ).done( function ( data ) {
                $( '#table' ).replaceWith( 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>
@endsection