@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
		<div class="card">
			<div class="card-header">Settings</div>
			<div class="card-body">
			<form action="{{ url()->current() }}" method="GET">
				<p>Show last:
				<select name="since" id="show-last" onchange="this.form.submit()">
					<option value="">Show last..</option>
					<option value="30" {{ $since == 30 ? "selected" : "" }} >30 minutes</option>
					<option value="60" {{ $since == 60 ? "selected" : "" }} >1 hour</option>
					<option value="180" {{ $since == 180 ? "selected" : "" }} >3 hours</option>
					<option value="360" {{ $since == 360 ? "selected" : "" }} >6 hours</option>
					<option value="1440" {{ $since == 1440 ? "selected" : "" }} >24 hours</option>
					<option value="4320" {{ $since == 4320 ? "selected" : "" }} >3 days</option>
					<option value="10080" {{ $since == 10080 ? "selected" : "" }} >1 week</option>
					<option value="full" {{ $since == "full" ? "selected" : "" }} >Entire history</option>
				</select>
				</p>
				</form>
				<!--<button class="btn" type="submit">Show chart</button>-->
				</p>
			</div>
		</div>
		@foreach($chart_groups as $drama_name => $charts) 
		<div class="card">
			<div class="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() !!}
						<script type="text/javascript">
						</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