@extends('layouts.app', [ 'title' => $anime["title_pref"]] )

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

	<div class="row">
		<div class="col-sm-4 col-lg-3">
			<img src="{{ $anime->image_url }}" class="img-fluid" style="margin-bottom: 10px;">
		</div>
		<div class="col-sm-8 col-lg-9">
			<h2>Synopsis</h2>
			<!--{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}-->
			{!! replaceSpecialChars(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 }}
			<br>
			<a href="{{ $anime->url}}" title="Link zu MAL">Link zu MyAnimeList</a>
		</div>
	</div>

	<p>
		<h2>Score History</h2>
		<canvas id="score_chart"></canvas>
	</p>
	<p>
		<h2>Rank History</h2>
		<canvas id="rank_chart"></canvas>
	</p>
	<p>
		<h2>Popularity History</h2>
		<canvas id="popularity_chart"></canvas>
	</p>
	<p>
		<h2>Members History</h2>
		<canvas id="members_chart"></canvas>
	</p>
	<p>
		<h2>Favorites History</h2>
		<canvas id="favorites_chart"></canvas>
	</p>
	<!--
	{{ $anime }}
	-->
</div>
<script>
window.onload = function() {
new Chart(document.getElementById('score_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_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: {
	maintainAspectRatio: true,
        scales: {
            yAxes: [{
                ticks: {
		    beginAtZero: false,
		    stepSize: 0.05,
                }
            }]
        }
    }
});
new Chart(document.getElementById('rank_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label"]) !!},
        datasets: [{
            label: 'Ranking of best Anime',
            data: {{ json_encode($anime["rank"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'white',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    reverse: true,
		    stepSize: 1,
                }
            }]
        }
    }
});
new Chart(document.getElementById('popularity_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label"]) !!},
        datasets: [{
            label: 'Popularity Score on MAL',
            data: {{ json_encode($anime["popularity"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'white',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    reverse: true,
		    stepSize: 1,
                }
            }]
        }
    }
});
new Chart(document.getElementById('favorites_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label"]) !!},
        datasets: [{
            label: 'Count of Favorites',
            data: {{ json_encode($anime["favorites"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'white',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    reverse: false,
                }
            }]
        }
    }
});
new Chart(document.getElementById('members_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label"]) !!},
        datasets: [{
            label: 'Count of People which have this on Watch list',
            data: {{ json_encode($anime["members"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'white',
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    reverse: false,
                }
            }]
        }
    }
});
};
</script>
@endsection