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

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

    <x-table :$headers :$rows :$actions :data="$devices"/>
@endsection

<script>
    document.addEventListener( "DOMContentLoaded", function () {
        $( document ).ready( function () {
            @foreach($devices as $loopKey => $device)
            const topic_{{ $loopKey }} = "{{$device->mqtt_topic}}";

            console.log( "Attempting to subscribe to topic:", topic_{{ $loopKey }} );

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

            // Separate listener per device/topic
            client.on( "message", (( deviceTopic ) => {
                return ( topic, payload ) => {
                    if (topic !== deviceTopic) return;

                    console.log( "Message received on topic:", topic ,"payload" , payload);

                    const event = JSON.parse( payload.toString() );
                    console.log( "Updating key:", event.key, "with value:", event.value );

                    // Update the register  using the event key from payload
                    $( '#register_{{$loopKey}}' ).html( event.value );

                    // Update tooltips and color for the same event key
                    updateStatusTooltip( {{$loopKey}} );

                    console.log( `✅ Update applied for device {{$loopKey}}, key:`, event.key );
                };
            })( topic_{{ $loopKey }} ) );
            @endforeach

            function updateStatusTooltip ( eventKey ) {
                const statusTooltip = $( 'tr[row-id="' + eventKey + '"] [data-tooltip-target]' );
                if (statusTooltip.length) {
                    statusTooltip.data( 'status', 'Connected' );
                    statusTooltip.data( 'time', 0 );
                    statusTooltip.attr( 'data-status', 'Connected' );
                    statusTooltip.attr( 'data-time', 0 );
                    statusTooltip.removeClass( 'text-red-500' ).removeClass( 'text-yellow-500' ).addClass( 'text-green-500' );
                    console.log( `[${ eventKey }] Status tooltip updated` );
                } else {
                    console.warn( `[${ eventKey }] Status tooltip not found` );
                }

                const roleTooltip = $( 'tr[row-id="' + eventKey + '"] [role="tooltip"]' );
                if (roleTooltip.length) {
                    roleTooltip.attr( 'data-status', 'Connected' );
                    roleTooltip.find( 'p' ).text( 'Connected' );
                    console.log( `[${ eventKey }] Role tooltip updated` );
                }
            }
        } );
    } );
</script>