@extends('layouts.auth')

@push('js')
<script src="{{ asset('chart-js/chart.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

<script>
$(document).ready(function() {
    @foreach($charts as $key => $data)
    var {{ $key }} = new Chart(document.getElementById("{{$key}}").getContext("2d"), {
        type: 'line',
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'minute'
                    }
                },
                y: {
                    ticks: {
                        callback: function(value, index, ticks) {
                            return @if($data['tick'] == 'time') value + "ms" @else value + "%" @endif;
                        }
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: '{{ucfirst($key)}} graph'
                }
            }
        },
        data: @json($data)
    });
    @endforeach
});
</script>
@endpush
@section('content')
            <div class="card">
                <div class="card-header">Tunnel Charts - Showing for '{{ $tunnel_name }}'</div>
                <div class="card-body">
                    @error('message')
                        <div class="alert alert-danger" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    @foreach($charts as $key => $data)
                    <canvas id="{{ $key }}"></canvas>
                    @endforeach
                </div>
            </div>
@endsection