@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <h1>{{ $evidence->subject() }}</h1>

    <p>Report id: <b>{{ $evidence->id }}</b></p>
    <p>Subject: <b>{{ $evidence->subject() }}</b></p>
    <p>Score: <b>{{ $evidence->score }}</b></p>
    <p>Timestamp: {{ $evidence->timeForHumans() }}</p>

    <div class="card my-4">
        <div class="card-body">
            {!! $evidence->report !!}
        </div>
    </div>

    @if ($feedback != null)
    <p>
        Marked as
        {!! $feedback->badge() !!}
        by {{ $feedback->user->name }}
        on {{ $feedback->timeForHumans() }}
    </p>
    @else
    <div class='my-4'>
        <a class='btn btn-success'
           href='{{ action('MarkController@falseAlarm', ['id' => $evidence->id]) }}'>
            <i class="fas fa-arrow-alt-circle-down"></i>
            Mark as false alarm (whitelist)
        </a>

        <a class='btn btn-warning'
           href='{{ action('MarkController@trueDetection', ['id' => $evidence->id]) }}'>
            <i class="fas fa-exclamation"></i>
            Mark as true detection
        </a>
    </div>
    @endif

    <h3>Detector : {{ $evidence->profile["label"] }}</h3>
    <p>Algorithm: {{ $evidence->profile["className"] }}</p>
    <p>Trigger label: {{ $evidence->profile["triggerLabel"] }}</p>
    <p>Parameters:</p>

    <ul>
        @foreach ($evidence->profile["parameters"] as $key => $value)
        <li>{{ $key }} : {{ $value }}</li>
        @endforeach
    </ul>

    <h3>Data queries</h3>

    <p>This detector has queried following data:</p>

    <table class="table table-striped">
    @foreach ($evidence->requests as $r)
    <tr>
        <td>{{ $r }}</td>
        <td class="text-right">
            <a href="/app/evidence/{{ $evidence->id }}/data/{{ 0 }} " class="btn btn-primary btn-sm">
                <i class="fas fa-search"></i> Inspect
            </a>
        </td>
    </tr>
    @endforeach
    </table>

    <h3>History</h3>

    <p>
        This detector produced <b>{{ count($history) }}</b> reports for
        <b>{{ $evidence->subject() }}</b> over the last hour.
    </p>

    <canvas id="chart-report-history"></canvas>

    <p>
        <div class="btn btn-primary" id="history-toggle-btn">
            Show / hide table
        </div>
    </p>

    <table class="table table-striped" style="display: none" id="history-table">
        @foreach ($history as $r)
        <tr>
            <td>{{ $r->score }}</td>
            <td>{{ $r->time }}</td>
            <td class="text-right">
                <a href="/app/evidence/{{ $r->id }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-search"></i> Inspect
                </a>
            </td>
        </tr>
        @endforeach
    </table>

    <h3>References</h3>

    This detector used <b>{{ count($references) }} evidences</b> to compute a score.

    <p>
        <div class="btn btn-primary" id="references-toggle-btn">
            Show / hide table
        </div>
    </p>

    <table class="table table-striped" style="display: none;" id="references-table">
    @foreach ($references as $r)
    <tr>
        <td>{{ $r->label }}</td>
        <td>{{ $r->score }}</td>
        <td>{{ $r->timeForHumans() }}</td>
        <td class="text-right">
            <a href="/app/evidence/{{ $r->id }}" class="btn btn-sm btn-primary">
                <i class="fas fa-search"></i> Inspect
            </a>
        </td>
    </tr>
    @endforeach
    </table>
</div>

<script>
    window.addEventListener('load', function() {

        // show-hide history table
        $("#history-toggle-btn").click(function() {
            $("#history-table").toggle();
        });

        // show-hide history table
        $("#references-toggle-btn").click(function() {
            $("#references-table").toggle();
        });

        // history graph
        var ctx = document.getElementById('chart-report-history').getContext('2d');
        new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                datasets: [{
                    borderColor: 'rgb(255, 99, 132)',
                    data: @json($history_points)
                }]
            },

            // Configuration options go here
            options: {
                aspectRatio: 5,
                legend: {
                    display: false,
                },
                elements: {
                    line: {
                        tension: 0 // disables bezier curves
                    }
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Score'
                        }
                    }]
                }
            }
        });
    });
</script>
@endsection