@extends('layouts.app')

@section('content')
<div style="width: 100%; height: 800px"
 id="container">
    <div class="row h-100">
        <div class="col-md-auto left">
            <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-10 right" id="visualization">
            <h2>Test2</h2>
        </div>
    </div>
  </div>
</div>

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

<script type="text/javascript">
    var reload_countdown = 300;
    setInterval(function() {
        reload_countdown -= 1;
        $('#reload-countdown').text(reload_countdown);

        if (reload_countdown === 0) {
            console.log('reload...');
            location.reload();
        }
    }, 1000);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"
integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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;
        document.getElementById(name).addEventListener("click", function () {
            drawBubbleGraph(name, container);
        });
    })
//    var container = document.getElementById("visualization");
//    d3.select(container).select("svg").remove();
//    var svg = d3.select(container).append("svg");
    @include('scripts.bubble-script')
</script>

@endsection