@extends('layouts.app')

@section('content')

<style>
    .half-donut .label {
      font-size: 3rem;
    }
    .donut-chart-svg {
    }
    .donut-chart-legend {
      font-family: 'Open Sans', sans-serif;
    }
    /* legend */
    .legend {
      font-size: 14px;
    }
    rect {
      cursor: pointer; 
      stroke-width: 2;
    }
    rect.disabled {
      fill: transparent !important;
    }

    /* chart */
    #detail-donut {
      height: 800px;
      margin: 0 auto;
      position: relative;
      display: block;
      width: 800px; 
    }

</style>

<div class="container-fluid" id="container">
    <div class="row">
        <div class="col-4 card">
            <h4 class="card-header text-center">RawData Entries</h4>
            <div class="card-body justify-content-center text-center" id="data-donut"></div>
        </div>
        <div class="col-4 card">
            <h4 class="card-header text-center">Evidence Entries</h4>
            <div class="card-body justify-content-center text-center" id="evidence-donut"></div>
        </div>
        <div class="col-4 card">
            <h4 class="card-header text-center">Evidence per Agent
            <button id="donut-button" class="btn btn-primary btn-sm" >Show Detailed View</button>
            </h4>
            <div class="card-body justify-content-center text-center" id="evidence-count">
                
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 card" id="evidence-count-big" style="display: none; justify-content: center; align-items: center;">
            <h4> Total Evidences Selected Count: <span class="new-total-holder"></span> </h4>
            <p class="font">Uncheck categories to recalculate.</p>
            <div id="detail-donut"></div>
        </div>
    </div>
    <div class="row vh-100">
        <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 detail_evidence_count = document.getElementById("detail-donut");
    var agents = @json($graph_elements);
    var agents_data = [];
    agents.forEach(function (arrayItem){
        var name = arrayItem.name;
        agents_data.push({value:50, label: name});
    })
    agents_data.push({value:10, label: "test1"});
    agents_data.push({value:100, label: "test2"});
    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
            });
            DetailDonut(agents_data, detail_evidence_count);
        });
        @include('scripts.half-donut-script')
        @include('scripts.simple-donut-script')
        @include('scripts.detail-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