@extends('layouts.app')

@section('content')

<div style="width: 100%; height: 800px"
 id="container">
    <div class="row h-100">
        <div class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
            <h2>Available Agents</h2>
            <table class="table">
            @foreach ($graph_elements as $graph_element)
            @php
                $name = $graph_element["name"];
            @endphp
            <tr>
                <td>
                    <button id="{{ $name }}"
                    class="btn btn-primary btn-sm">
                        {{ $name }}
                    </button>
                </td>
            </tr>
            @endforeach
        </table>
        </div>
        <div class="col" id="visualization">
        </div>
    </div>
  </div>
</div>

<div class="text-muted bottom-right">
    Reload visualization in <span id="reload-countdown">300</span> seconds
</div>

<script>
    var json_elements = @json($graph_elements);
    console.log(json_elements);
    var container = document.getElementById("visualization");

    json_elements.forEach(function (arrayItem){
        var name = arrayItem.name;
        var data = arrayItem.data;
        var reload_countdown = 300;
        document.getElementById(name).addEventListener("click", function () {
            drawBubbleGraph(name, container);
            setInterval(function() {
                reload_countdown -= 1;
                $('#reload-countdown').text(reload_countdown);

                if (reload_countdown === 0) {
                    console.log('reload...');
                    reload_countdown = 300;
                    drawBubbleGraph(name, container);
                }
            }, 1000);
        });
    })

    @include('scripts.bubble-script')
</script>

@endsection