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

@section('content')
<div class="container bg-white-transparent shadow-sm" id="index" style="padding: 20px;">
	<h1>{{ $anime->title_pref }}</h1>

	<div class="row">
		<div class="col-sm-4 col-lg-3">
			<img src="{{ camo($anime->image_url) }}" class="img-fluid mal-img" data-img-src="{{ $anime->image_url }}" style="margin-bottom: 10px;">
		</div>
		<div class="col-sm-8 col-lg-9">
			<h2>Synopsis</h2>
			{!! 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>

@if ( ! is_null($anime["score"]) )
	<p>
		<h2>Score History</h2>
		<canvas id="score_chart"></canvas>
	</p>
@endif
	<p>
		<h2>Popularity History</h2>
		<canvas id="popularity_chart"></canvas>
	</p>
	<p>
		<h2>Rank History</h2>
		<canvas id="rank_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>
	<p>
		<h2>Score Distribution</h2>
		<canvas id="score_distribution_chart"></canvas>
	</p>
</div>
<script>
window.onload = function() {
@if ( ! is_null($anime["score"]) )
new Chart(document.getElementById('score_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label_score"]) !!},
        datasets: [{
            label: 'Average Score on MAL',
            data: {!! printScoreData($anime["score"]) !!},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
        }]
    },
    options: {
	maintainAspectRatio: true,
        scales: {
            yAxes: [{
                ticks: {
		    beginAtZero: false,
		    stepSize: 0.05,
                }
            }]
        }
    }
});

@endif

new Chart(document.getElementById('rank_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label_score"]) !!},
        datasets: [{
            label: 'Ranking of best Anime',
            data: {{ json_encode($anime["rank"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
        }]
    },
    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: 'rgb(255,255,255,0)',
        }]
    },
    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: 'rgb(255,255,255,0)',
        }]
    },
    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: 'Overall',
            data: {{ json_encode($anime["members"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
*/
	{
	    label: 'Watching',
	    data: {{ json_encode($anime["watching"]) }},
	    file: 'false',
	    borderColor: 'green',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
	{
	    label: 'On-Hold',
	    data: {{ json_encode($anime["onhold"]) }},
	    file: 'false',
	    borderColor: 'orange',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
	{
	    label: 'Plan-To-Watch',
	    data: {{ json_encode($anime["plan_to_watch"]) }},
	    file: 'false',
	    borderColor: 'grey',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
	{
	    label: 'Dropped',
	    data: {{ json_encode($anime["dropped"]) }},
	    file: 'false',
	    borderColor: 'red',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
	{
	    label: 'Completed',
	    data: {{ json_encode($anime["completed"]) }},
	    file: 'false',
	    borderColor: 'blue',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	},
	{
	    label: 'Scored',
	    data: {{ json_encode($anime["scored_by"]) }},
	    file: 'false',
	    borderColor: 'rgb(75, 192, 192)',
	    lineTension: 0.01,
	    backgroundColor: 'rgb(255,255,255,0)',
	}
	]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    reverse: false,
                }
            }]
        }
    }
});
new Chart(document.getElementById('score_distribution_chart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($anime["chart_label"]) !!},
	datasets: [
		{
		    label: 'Score 10',
		    data: {!! json_encode($anime["score_10"]) !!},
		    file: 'false',
		    borderColor: 'green',
		    lineTension: 0.01,
		    /*backgroundColor: 'rbg(255,255,255,0.5)',*/
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 9',
		    data: {!! json_encode($anime["score_9"]) !!},
		    file: 'false',
		    borderColor: 'green',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 8',
		    data: {!! json_encode($anime["score_8"]) !!},
		    file: 'false',
		    borderColor: 'green',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 7',
		    data: {!! json_encode($anime["score_7"]) !!},
		    file: 'false',
		    borderColor: 'green',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 6',
		    data: {!! json_encode($anime["score_6"]) !!},
		    file: 'false',
		    borderColor: 'orange',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 5',
		    data: {!! json_encode($anime["score_5"]) !!},
		    file: 'false',
		    borderColor: 'orange',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 4',
		    data: {!! json_encode($anime["score_4"]) !!},
		    file: 'false',
		    borderColor: 'red',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 3',
		    data: {!! json_encode($anime["score_3"]) !!},
		    file: 'false',
		    borderColor: 'red',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 2',
		    data: {!! json_encode($anime["score_2"]) !!},
		    file: 'false',
		    borderColor: 'red',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		},
		{
		    label: 'Score 1',
		    data: {!! json_encode($anime["score_1"]) !!},
		    file: 'false',
		    borderColor: 'red',
		    lineTension: 0.01,
		    backgroundColor: 'rgb(255,255,255,0)',
		}
	]
    },
    options: {
	maintainAspectRatio: true,
        scales: {
            yAxes: [{
                ticks: {
		    beginAtZero: false,
		    stepSize: 1,
                }
            }]
        }
    }
});
};
</script>
@endsection