@extends('layouts.app')

@section('content')
<div class="container" id="index">
	<h1>{{ $anime->title_pref }}</h1>

	<div class="row">
		<div class="col-sm">
			<img src="{{ $anime->image_url }}" class="img-fluid">	
		</div>
		<div class="col-sm">
			{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}
			<br>
			<br>
			<strong>Score: </strong> {{ $anime["basic_data"]->score }}
			<br>
			<strong>Rank: </strong> {{ $anime["basic_data"]->rank }}
			<br>
			<strong>Popularity: </strong> {{ $anime["basic_data"]->popularity }}
			<br>
			<strong>Members: </strong> {{ $anime["basic_data"]->members }}
		</div>
	</div>

	<p>
	<h2>Score History</h2>
	<canvas id="score_chart" height=""></canvas>
	<!--
	{{ $anime }}
	-->
	</p>
</div>
<script>
var ctx = document.getElementById('score_chart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["score_label"]) !!},
        datasets: [{
            label: 'Average Score on MAL',
            data: {{ json_encode($anime["score"]) }},
	    file: 'false',	
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'white',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false
                }
            }]
        }
    }
});

</script>
@endsection