@extends('layouts.app')

@section('page-css')

@endsection

@section('content')
	<div class="container-fluid d-block">
		<input type="hidden" id="group_id_container" value="{{ $group_id }}">
		<div id="dashboard-page-container" class="py-4">

			<div class="col-md-2 pl-0 mb-3">
					<select name="group-selection" id="group-selection" class="selectpicker show-tick form-control" data-live-search="true" title="Select Group" onchange="usersPageFunctions.populateDivisionInDashboard(this.value,'completion-compliance-yearly-section #division-selection', 'growsheet-monthly-year-section #division-selection', 'overall-coaching-experience-section #division-selection')">
						@foreach($groups as $index =>$value)
							<option value="{{ $value['group_id'] }}">{{ $value['group_name'] }}</option>
						@endforeach
					</select>
			</div>

			{{-- Completion Rate vs. Compliance Rate --}}
			<div class="card mb-3">
				<div class="card-header">
					Completion Rate vs. Compliance Rate
				</div>
				<div class="card-body">
					{{-- Per Division - Per Year --}}
					<div class="clearfix">
						<div class="col-md-3 float-right d-flex" id="completion-compliance-yearly-section">
							<div class="col-md-8">
								@if(!empty($divisions))
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" title="Select Division" onchange="dashboardPageFunctions.showCompletionRateVSComplianceRateChartsDataPerDivision(this.value)">
										@foreach($divisions as $index =>$value)
											<option value="{{ $value->division_id }}">{{ $value->division_name }}</option>
										@endforeach
									</select>
								@else
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" disabled>
										<option value="">No Divisions Loaded</option>
									</select>
								@endif
							</div>
							<div class="col-md-4">
								<select name="year-selection" id="year-selection" class="selectpicker show-tick form-control" onchange="dashboardPageFunctions.showCompletionRateVSComplianceRateChartsDataPerYear(this.value);">
									<option value="">Year</option>
									@foreach($year_list as $index => $value)
										<option value="{{ $value }}">{{ $value }}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
					
					<div class="clearfix">
						<div id="completion-compliance-yearly-chart-container" class="chart-container mb-2">
							<p class="no-data">NO DATA TO SHOW</p>
							<p class="loading d-none">LOADING...</p>
							<div id="completion-compliance-yearly-chart" class="charts"></div>
						</div>
					</div>

					{{-- Per Group Per Month - Year --}}
					<div class="clearfix">
						<div class="col-md-3 float-right" id="completion-compliance-monthly-section">
							<div class="offset-md-5 col-md-7">
								<div class="form-group">
	                                <div class="input-group">
                                    	<input type="text" class="form-control datepicker monthview" name="completion-compliance-month-year" id="completion-compliance-month-year" placeholder="MM - YYYY">
                                		<div class="input-group-append">
										    <span class="input-group-text bg-danger text-white"><i class="fas fa-calendar-alt"></i></span>
										</div>
                                    </div>
	                            </div>
							</div>
						</div>
					</div>

					<div class="clearfix">
						<div id="completion-compliance-monthly-chart-container" class="chart-container mb-2">
							<p class="no-data">NO DATA TO SHOW</p>
							<p class="loading d-none">LOADING...</p>
							<div id="completion-compliance-monthly-chart" class="charts"></div>
						</div>
					</div>
				</div>
			</div>

			{{-- Conducted Sessions --}}
			<div class="card mb-3">
				<div class="card-header">
					Conducted Sessions
				</div>
				<div class="card-body">
					{{-- Growsheet --}}
					<div class="clearfix">
						<div class="col-md-3 float-right d-flex" id="growsheet-monthly-year-section">
							<div class="col-md-6">
								@if(!empty($divisions))
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" title="Select Division" onchange="dashboardPageFunctions.getGrowSheetsDataPerDivision(this.value)">
										@foreach($divisions as $index =>$value)
											<option value="{{ $value->division_id }}">{{ $value->division_name }}</option>
										@endforeach
									</select>
								@else
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" disabled>
										<option value="">No Divisions Loaded</option>
									</select>
								@endif
							</div>
							<div class="col-md-6">
								<div class="form-group">
	                                <div class="input-group">
                                    	<input type="text" class="form-control datepicker monthview" name="growsheet-monthly-year" id="growsheet-monthly-year" placeholder="MM - YYYY">
                                		<div class="input-group-append">
										    <span class="input-group-text bg-danger text-white"><i class="fas fa-calendar-alt"></i></span>
										</div>
                                    </div>
	                            </div>
							</div>
						</div>
					</div>

					<div class="clearfix">
						<div id="growsheet-monthly-year-chart-container" class="chart-container mb-2">
							<p class="no-data">NO DATA TO SHOW</p>
							<p class="loading d-none">LOADING...</p>
							<div id="growsheet-monthly-year-chart" class="charts"></div>
						</div>
					</div>
				</div>
			</div>

			{{-- Overall Coaching Experience by Date (Month - Year) --}}
			<div class="card mb-3">
				<div class="card-header">
					Overall Coaching Experience by Date (MM - YYYY)
				</div>
				<div class="card-body">
					<div class="clearfix">
						<div class="col-md-3 float-right d-flex" id="overall-coaching-experience-per-group-per-month-year-section">
							<div class="offset-md-5 col-md-7">
								<div class="form-group">
	                                <div class="input-group">
                                    	<input type="text" class="form-control datepicker monthview" name="overall-coaching-experience-per-group-per-month-year-picker" id="overall-coaching-experience-per-group-per-month-year-picker" placeholder="MM - YYYY">
                                		<div class="input-group-append">
										    <span class="input-group-text bg-danger text-white"><i class="fas fa-calendar-alt"></i></span>
										</div>
                                    </div>
	                            </div>
							</div>
						</div>
					</div>

					<div class="clearfix">
						<div id="overall-coaching-experience-per-group-per-month-year-chart-container" class="chart-container mb-2">
							<p class="no-data">NO DATA TO SHOW</p>
							<p class="loading d-none">LOADING...</p>
							<div id="overall-coaching-experience-per-group-per-month-year-chart" class="charts"></div>
						</div>
					</div>
				</div>
			</div>

			{{-- Overall Coaching Experience by Division --}}
			<div class="card mb-3">
				<div class="card-header">
					Overall Coaching Experience by Division
				</div>
				<div class="card-body">
					{{-- Ratings Per Division --}}
					<div class="clearfix">
						<div class="col-md-3 float-right d-flex" id="overall-coaching-experience-section">
							<div class="offset-md-2 col-md-7">
								@if(!empty($divisions))
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" title="Select Division">
										@foreach($divisions as $index =>$value)
											<option value="{{ $value->division_id }}">{{ $value->division_name }}</option>
										@endforeach
									</select>
								@else
									<select name="division-selection" id="division-selection" class="selectpicker show-tick form-control division-selection" data-live-search="true" disabled>
										<option value="">No Divisions Loaded</option>
									</select>
								@endif
							</div>
							<div class="col-md-4">
								<select name="year-selection" id="year-selection" class="selectpicker show-tick form-control" onchange="dashboardPageFunctions.getOverAllRatingsPerDivisionOnCurrentYear(this.value);">
									<option value="">Year</option>
									@foreach($year_list as $index => $value)
										<option value="{{ $value }}">{{ $value }}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>

					<div class="clearfix">
						<div id="overall-coaching-experience-container" class="chart-container mb-2">
							<p class="no-data">NO DATA TO SHOW</p>
							<p class="loading d-none">LOADING...</p>
							<div id="overall-coaching-experience-chart" class="charts"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		@include('pages.includes.footer')
	</div>

@endsection

@section('page-js')
	<script type="text/javascript">
		$.csrf_token    =   $('meta[name="csrf-token"]').attr('content');
    	$.backoffice_url  =   "{{ env('BACKOFFICE_URL') }}";

    	dashboardPageFunctions.onLoad();
    	$(document).ready(function() {
    		$('#completion-compliance-month-year').on('dp.change', function(e){ 
			    dashboardPageFunctions.getCompletionRateVSComplianceRateDataOfGroup(this.value)
			});

			$('#growsheet-monthly-year').on('dp.change', function(e){ 
			    dashboardPageFunctions.getGrowSheetsDataPerMonthYear(this.value)
			});

			$('#overall-coaching-experience-per-group-per-month-year-picker').on('dp.change', function(e){ 
			    dashboardPageFunctions.getOverAllRatingsPerGroupPerMonthYearData(this.value)
			});
    	});
	</script>
@endsection