@extends('layouts.app')

@section('content')
    <script type="text/javascript">
    const EXPORTCSSTEXT = ".chart-container{background-color: #ffffff; width: 1920px; height: 1080px; position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";
    function exportPNG(filename, chart) {
                var clone = chart.svg.cloneNode(true);
		clone.classList.add('chart-container');
		clone.setAttribute('xmlns', "http://www.w3.org/2000/svg");
		clone.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
		var styleEl = document.createElement('style');
		styleEl.appendChild(document.createTextNode(EXPORTCSSTEXT));
		clone.insertBefore(styleEl, clone.firstChild);
		var width = 1920;
		var scale = width/clone.getAttribute('width');
        var svg = Pablo(clone);
	svg.viewbox([0,0,clone.getAttribute('width'),clone.getAttribute('height')]).attr('width',width).attr('height',clone.getAttribute('height')*scale).download('png',filename+'.png');
    }
    </script>
<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" id="settings-form">
				@if(isset($since) || isset($date_since)) 
				<div class="form-group">
				<a href="{{ url()->current() }}">Reset</a>
				</div>
				@endif
				@if(!isset($date_since))
				<div class="form-group">
				<label for="show-last">Show last:</label>
				<select name="since" id="show-last" onchange="this.form.submit()" class="form-control">
					<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="86400" {{ $since == 86400 ? "selected" : "" }} >Entire history</option>
				</select>
				</div>
				@endif
				@if(!isset($since))
				<div class="form-group">
					<label for="datetimepicker1">Date since:</label>
		                    <input name="date_since" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" value="{{ $date_since }}" onchange="this.form.submit()" />
		                </div>
				@endif
				<input type="hidden" name="take" value="{{ $take }}" />
				<div class='form-group'>
					<input id="enlarge-1" type=checkbox name='enlarge' {{ $enlarge == 'on' ? 'checked' : '' }} onchange="this.form.submit()"/>
					<label for="enlarge-1">Enlarge chart</label>
				</div>
				</form>
			</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"><a href="{{ url('chart/'.$chart['name']) }}">{{ $chart["name"] }}</a></div>
                				<div class="card-body text-center">
							{!! $chart["chart"]->container() !!}
							<button class="btn btn-primary" onclick="exportPNG('{{ $chart["name"] }} ({{ $drama_name }})',window.{{ $chart["chart"]->id }})">Export as PNG</button>
				                </div>
						{!! $chart["chart"]->script() !!}
					</div>
				@endforeach
		                </div>
	                </div>
		</div>
		@endforeach
            <div class="card">
                <div class="card-header">Information</div>
                <div class="card-body text-center">
		<p>Data generated from <a href="https://api.matsurihi.me/docs/">Princess — Public REST API</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection