@extends('layouts.app')

@section('content')

<style>
    .half-donut .label {
      font-size: 3rem;
    }
</style>

<div style="width: 100%; height: 850px" id="container">
    <div class="row h-100">
        <div class="col-4 card" id="data-donut" style="justify-content: center; align-items: center;">
            <h4>RawData Entries</h4>
        </div>
        <div class="col-4 card" id="evidence-donut" style="justify-content: center; align-items: center;">
            <h4>Evidence Entries</h4>
        </div>
        <div class="col-4 card" id="evidence-count" style="justify-content: center; align-items: center;">
            <h4>Evidence Entries</h4>
        </div>
        <div class="col-sm-auto col-md-auto col-lg-auto col-xl-auto card">
            <div class="card-body">
                <h3 class="card-title">Available Agents</h3>
                <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>
        <div class="col card" id="visualization">
        </div>
    </div>
  </div>
</div>

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

<script type="text/javascript">
    //Initialize the RawData and Evidence half-donut visualization
    var rawdata_container = document.getElementById("data-donut");
    var evidence_container = document.getElementById("evidence-donut");
    window.addEventListener('DOMContentLoaded', function() {
        //get the dbstatus data
        var url = "/app/dbstatus";
        var request = $.get(url);
        //when the request is done, load the half-donut visualizations
        request.done(function(response) {
            drawHalfDonut(response["db.data.count"], 1000000, rawdata_container);
            drawHalfDonut(response["db.evidence.count"], 1000000, evidence_container);
        });
        @include('scripts.half-donut-script')
    });
</script>

<script type="text/javascript">
    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 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