@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
		@foreach($chart_groups as $drama_name => $charts) 
		<div class="card">
			<div c	lass="card-header">{{ $drama_name }}</div>
			<div class="card-body text-center">
				<div>
				@foreach($charts as $chart)
            				<div class="card">
                				<div class="card-header">{{ $chart["name"] }}</div>
                				<div class="card-body text-center">
							{!! $chart["chart"]->container() !!}
				                </div>
						{!! $chart["chart"]->script() !!}
					</div>
				@endforeach
		                </div>
	                </div>
		</div>
		@endforeach
            <div class="card">
                <div class="card-header">Data Sources</div>
                <div class="card-body text-center">
		<p>Data generated from <a href="https://api.matsurihi.me/docs/">Princess — Public REST API</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection