@extends('layouts.public_layout')
@section('title', $title)
@section('content')
		<div class="container-fluid">
			<div class="page-title">
				<h4>CSF <span class="fas fa-angle-right"> </span> Trends </h4>
				<hr class="mt-0">
			</div>
			@if (strlen($msg) > 0)
				<div class="alert alert-info alert-dismissible fade show" role="alert">
				  {{ $msg }}
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
				    <span aria-hidden="true">&times;</span>
				  </button>
				</div>
			@endif
			<div class="pb-1">
				<form class="form-inline" method="POST" action="{{ url()->current() }}">
					@csrf

					<div class="input-group input-group-sm mr-1">
						<div class="input-group-prepend">
							<span class="input-group-text">Year</span>
						</div>						
						<select class="form-control" name="q1" id="q1">
							@include('subviews.select', ['rows' => $yrs, 'label' => 'year', 'value' => 'year', 'selected' => $q1, 'all' => 'All']);
						</select>
					</div>

					<div class="input-group input-group-sm mr-1">
						<div class="input-group-prepend">
							<span class="input-group-text">Quarter</span>
						</div>						
						<select class="form-control" name="q2" id="q2">
							@include('subviews.select', ['rows' => $qtr, 'label' => 'qtr_name', 'value' => 'qtr_id', 'selected' => $q2, 'all' => 'All']);
						</select>
					</div>

					<div class="input-group input-group-sm mr-1">
						<div class="input-group-prepend">
							<span class="input-group-text">Functional Unit</span>
						</div>						
						<select class="form-control" name="q3" id="q3">
							@include('subviews.select', ['rows' => $fus, 'prelabe' => 'fu_abbr', 'label' => 'fu_name', 'value' => 'fu_id', 'selected' => $q3, 'all' => 'All']);
						</select>
					</div>

					<div class="input-group input-group-sm">
						<input class="btn btn-primary btn-sm" type="submit" name="search-btn" id="search-btn" value="Search">
					</div>
				</form>
			</div>
			<div class="row mb-1">
				<div class="col-md-6">
					<canvas class="trends_canvas trends-graph" data-color="#03a9f4" data-title="Overall Rating" data-years="{{ $years }}" data-values="{{ $overalls }}"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="trends_canvas promptness-graph" data-color="#ff5722" data-title="Promptness" data-years="{{ $years }}" data-values="{{ $promptness }}"></canvas>
				</div>
			</div>
			<div class="row mb-1">
				<div class="col-md-6">
					<canvas class="trends_canvas qualities-graph" data-color="#e91e63" data-title="Quality" data-years="{{ $years }}" data-values="{{ $qualities }}"></canvas>
				</div>
				<div class="col-md-6">
					<canvas class="trends_canvas attitudes-graph" data-color="#3f51b5" data-title="Attitude of Staff" data-years="{{ $years }}" data-values="{{ $attitudes }}"></canvas>
				</div>
			</div>
		</div>
@endsection