@extends('layouts.app')

@section('content')

<style>
    .half-donut .label {
      font-size: 3rem;
    }
    .donut-chart-svg {
    }
    .donut-chart-legend {
      font-family: 'Open Sans', sans-serif;
    }
</style>

<div style="width: 100%; height: 100%" id="container">
    <div class="row">
        <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;">
            <button id="donut-button" class="btn btn-primary btn-sm btn-block" >Show Detailed View</button>
            <h4>Evidences per Agent</h4>
            
        </div>
    </div>
    <div class="row">
        <div class="col-12 card" id="evidence-count-big" style="display: none; align">
            <h4 class="card-title"> Big donut chart comes here </h4>
        </div>
    </div>
    <div class="row">
        <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>
                            <a href="/app/ranking/{{ $name }}"
                            class="btn btn-secondary btn-sm">
                                <i class="fas fa-search"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
        <div class="col card" id="visualization">
        </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/Evidence/EvidencesPerAgent visualizations
    var rawdata_container = document.getElementById("data-donut");
    var evidence_container = document.getElementById("evidence-donut");
    var evidence_count = document.getElementById("evidence-count");
    var agents = @json($graph_elements);
    var agents_data = [];
    agents.forEach(function (arrayItem){
        var name = arrayItem.name;
        agents_data.push({value:50, label: name});
    })
    window.addEventListener('DOMContentLoaded', function() {
        //get the dbstatus data
        var url = "/app/dbstatus";
        var request = $.get(url);
        
        request.done(function(response) {
            //when the request is done, load the half-donut visualizations
            drawHalfDonut(response["db.data.count"], 1000000, rawdata_container);
            drawHalfDonut(response["db.evidence.count"], 1000000, evidence_container);
            //create the button to show/hide the detailed evidences per agent donut visualization
            var donut_button = document.getElementById("donut-button");
            $("#donut-button").click(function() {
                $(this).toggleClass('btn-primary btn-secondary');
                $("#evidence-count-big").toggle();
                $(this).text(function(i, text) {
                    return text === "Hide" ? "Show Detailed View" : "Hide"; 
                });
            });
            //create the small evidences per agent donut visualization
            new SimpleDonut({
                element: evidence_count,
                width: 700,
                height: 200,
                data: agents_data
            });
        });
        @include('scripts.half-donut-script')
        @include('scripts.donut-script')
    });
</script>

<script type="text/javascript">
    var json_elements = @json($graph_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