@extends('layouts.master')

@section('header-title')
	<span class="font-weight-semibold">Supplier Quality - Scorecard Charts</span>
@endsection

@section('content')

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Scorecard Indicator Table {{$year}}</h4>
			<div class="header-elements">
				<div class="list-icons">
					{{-- <a class="btn btn-outline-primary rounded-round" data-toggle="collapse" href="#info_collapse"><i class="icon-info22 mr-2"></i>More Info</a> --}}
            	</div>
        	</div>					
		</div>
		<div class="card-body">
			<p>Here you can see and load all the information related with Scorecards</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• <br>
				</p>	
			</div>
			<form id="search_data_form">
				<div class="row">
					<div class="col-md-3 my-2">
						<label class="col-form-label">Plant</label>
	                    <select data-selected="{{$plant_id}}" required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="col-md-3 my-2">
						<label class="col-form-label">Year:</label>
						<div class="input-group">
							<span class="input-group-prepend">
								<span class="input-group-text"><i class="icon-calendar2"></i></span>
							</span>
							<select data-selected="{{$year}}" name="year" class="form-control"></select> 
						</div>	
					</div>

					<div class="col-md-3 my-2">
						<label class="col-form-label">Indicator:</label>
	                    <select data-selected="{{$indicator}}" required name="indicator" class="form-control select" data-fouc>
	                    	<option value="final_score">Final Score</option>
	                    	<option value="deliveries_score">Deliveries on Time Score</option>
	                    	<option value="ordered_score">Ordered Qty vs Received Qty Score</option>
	                    	<option value="correct_score">Corrrect and Ontime Documentation Score</option>
	                    	<option value="first_d_answer_time_score">3D answer time</option>
	                    	<option value="full_8d_answer_time_score">Full 8D's Report Answer Time Score</option>
	                    	<option value="answer_score">Answer in case of Emergency Score</option>
	                    	<option value="ppms_score">PPMs Score</option>
	                    	<option value="ppms">PPMs</option>
	                    	<option value="ranking">Katcon Ranking</option>
	                    </select>
					</div>


					<div class="col-md-2 my-2">
						<label class="col-form-label">&nbsp;&nbsp;</label>
						<div>
							<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner"><i class="icon-search4 mr-2"></i> Search</button>
						</div>
					</div>
				</div>
			</form>	
		</div>

		<div class="table-responsive border-0">
			<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic text-center">
				<thead class="table-bordered">
					<tr>
						<th>Supplier</th>
						<th>Jan</th>
						<th>Feb</th>
						<th>Mar</th>
						<th>Apr</th>
						<th>May</th>
						<th>Jun</th>
						<th>Jul</th>
						<th>Aug</th>
						<th>Sep</th>
						<th>Oct</th>
						<th>Nov</th>
						<th>Dec</th>
						<th>Average</th>
					</tr>								
				</thead>
				<tbody>
					@foreach($suppliers as $supp)
					<tr>
						<td class="text-left">{{$supp->name}}</td>
						@for($i=1; $i<=13; $i++)
							<td>{{$supp->indicator[$i]}}</td>
						@endfor
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Chart {{$year}}</h4>
			<div class="header-elements">
				<div class="list-icons">
            		<a class="list-icons-item" data-action="collapse"></a>
            	</div>
        	</div>
		</div>
		<div class="card-body">
			<div class="d-flex">
				<div class="ml-auto">
					<label class="col-form-label">Supplier</label>
		            <select name="supplier_plant_index" class="form-control select" data-fouc>
		            	@foreach($suppliers as $key=>$supp)
		            		<option value="{{$key}}">{{$supp->name}}</option>
		            	@endforeach
		            </select>
				</div>
			</div>
			<div class="chart-container">
				<div class="chart has-fixed-height" id="chart" style="height: 440px;"></div>
			</div>
		</div>
	</div>

@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')
	<script src="{{asset('js/plugins/visualization/echarts/echarts.min.js')}}"></script>

@endsection


@section('app-scripts')

	<script type="text/javascript">
		const SUPPLIERS = {!! $suppliers->toJSON() !!};
		const INDICATOR = '{{$indicator}}'
	</script>
	<script src="{{mix('js/supplierquality/scorecard_charts.js')}}"></script>
@endsection