@extends('layouts.master')

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

@section('styles')
<style type="text/css">
	.table-hover tbody tr:hover > td .edit-icon{
	    display: inline-block!important;
	}
</style>
@endsection

@section('content')

	<div class="card card-main card-collapsed">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Ranking and Evaluation Information</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="row">
				<div class="col-12 col-md-6 my-2">
					<h5 class="font-weight-semibold">Total Evaluation</h5>
					<div class="table-responsive border-0">
						<table class="table table-borderless">
							<thead>
								<tr>
									<th>Color</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><span class="alpha-success px-3 py-1"></span></td>
									<td>If the supplier has 75% (or more) or if it is ranked like "2 or 1".</td>
								</tr>
								<tr>
									<td><span class="alpha-danger px-3 py-1"></span></td>
									<td>If the supplier has less than 75% or if it is ranked like "3"</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="col-12 col-md-6 my-2">
					<h5 class="font-weight-semibold">Ranking</h5>
					<div class="table-responsive border-0">
						<table class="table table-borderless">
							<thead>
								<tr>
									<th>Number</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td style="font-size: 1.2rem">1</td>
									<td>Good level of performance (100% - 90%)</td>
								</tr>
								<tr>
									<td style="font-size: 1.2rem">2</td>
									<td>Medium level of performance (89.9% - 75%)</td>
								</tr>
								<tr>
									<td style="font-size: 1.2rem">3</td>
									<td>Low level of performance (less than 74.9%)</td>
								</tr>								
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="row">
			</div>			
		</div>
	</div>

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Supplier Scorecard</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 the scorecard of the selected supplier</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• <br>
					• <br>
				</p>	
			</div>
			<div class="card">
				<div class="card-body">
					<div class="row">
						<div class="col-12 col-md-6 my-2">
							<h5>{{ $scorecard->supplier->name }}</h5>
							<h6 class="mb-0 font-italic">Quality Contacts</h6>
							<div class="row">
								<div class="col-12">
									<table class="table table-xs">
										<tbody>
											@foreach($external_contacts as $contact)
												<tr>
													<td class="pl-0">{{$contact->full_name}}</td>
													<td>{{$contact->email}}</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="col-12 col-md-6 my-2">
							<h5>Katcon {{ $scorecard->plant->name }}</h5>
							<h6 class="mb-0 font-italic">Quality Contacts</h6>
							<div class="row">
								<div class="col-12">
									<table class="table table-xs">
										<tbody>
											@foreach($internal_contacts as $contact)
												<tr>
													<td class="pl-0">{{$contact->full_name}}</td>
													<td>{{$contact->email}}</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
							</div>
						</div>			
					</div>				
				</div>
			</div>
		</div>

		<div class="table-responsive border-0">
			<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic text-center mb-3">
				<thead class="table-bordered">
					<tr>
						<th rowspan="2" class="alpha-primary">Year {{$scorecard->year}}<br>_<br>Month</th>
						<th colspan="2">Parts</th>
						<th colspan="4">Deliveries</th>
						<th colspan="3">Quality</th>
						<th>Service</th>						
						<th rowspan="2" class="{{$scorecard->ytd->final_score >= 75 ? 'alpha-success' : 'alpha-danger'}}">Evaluation 100%</th>
						<th rowspan="2">Katcon Ranking</th>
						<th rowspan="2">Comments</th>
			        </tr>
			        <tr>
			        	<th style="border-right: none; border-left:none">Total Ordered</th>
			        	<th style="border-right: none; border-left:none">PPMs</th>
			        	<th style="border-right: none;">Deliveries <br>on Time<br>15%</th>
			        	<th style="border-right: none; border-left:none">Premium <br>Freights<br>10%</th>
			        	<th style="border-right: none; border-left:none">Order Qty vs <br>Received Qty<br>10%</th>
			        	<th style="border-right: none; border-left:none">Correct and Ontime <br>Documentation<br>10%</th>
			        	<th style="border-right: none;">PPMs<br>20%</th>
			        	<th style="border-right: none; border-left:none">1D-3D<br>Answer time<br>5%</th>
			        	<th style="border-right: none; border-left:none">Full 8D's Report<br>Answer Time<br>25%</th>
			        	<th style="border-right: none;">Answer in case <br> of emergency <br>5%</th>		        	
			        </tr>
				</thead>
				<tbody>
					@foreach($scorecard->scorecards as $month)
						<tr data-id="{{$month->id}}">
							<td class="alpha-primary font-weight-semibold">{{$month->month_short_name}}</td>
							<td>{{$month->total_ordered}}</td>
							<td>{{$month->ppms}}</td>
							<td>{{$month->deliveries_score}}</td>
							<td>{{$month->premium_freights_score}}</td>
							<td>{{$month->ordered_score}}</td>
							<td>{{$month->correct_score}}</td>
							<td>{{$month->ppms_score}}</td>
							<td>
								<span style="width: 20px;" >{{$month->first_d_answer_time_score}}</span>

								@if($user->is_internal)
									@if($month->first_d_answer_time_score !== null)
										<span class="first-d-score-detail-btn text-primary ml-2 cursor-pointer"><i class="icon-search4"></i></span>	
									@endif
								@endif
							</td>
							<td>
								<span style="width: 20px;" >{{$month->full_8d_answer_time_score}}</span>
								
								@if($user->is_internal)
									@if($month->full_8d_answer_time_score !== null)
										<span class="full-d-score-detail-btn text-primary ml-2 cursor-pointer"><i class="icon-search4"></i></span>	
									@endif
								@endif								
							</td>
							<td>{{$month->answer_score}}</td>
							@php
								$class_row = '';
								if( $month->final_score >= 75)
									$class_row = 'alpha-success text-success-800';
								elseif($month->final_score != null) //When is greater than 0, and the value is set
									$class_row = 'alpha-danger text-danger-800';
							@endphp
							<td class="font-weight-semibold {{$class_row}}">{{$month->final_score}}</td>
							<td>{{$month->ranking}}</td>
							<td>
								<span data-field_name="comments" data-editor-field="comments_{{$month->id}}" data-editor-value="{{$month->comments}}">{{$month->comments}}</span>
								@if($user->is_internal)
								<span class="edit-icon text-primary" style="display: none;"><i class="icon-pencil5"></i></span>	
								@endif									
							</td>
						</tr>
					@endforeach
				</tbody>
				<tfoot>
					<tr class="mb-3">
						<th class="alpha-primary">YTD</th>
						<th>{{$scorecard->ytd->total_ordered}}</th>
						<th>{{$scorecard->ytd->ppms}}</th>
						<th>{{$scorecard->ytd->deliveries_score}}</th>
						<th>{{$scorecard->ytd->premium_freights_score}}</th>
						<th>{{$scorecard->ytd->ordered_score}}</th>
						<th>{{$scorecard->ytd->correct_score}}</th>
						<th>{{$scorecard->ytd->ppms_score}}</th>
						<th>{{$scorecard->ytd->first_d_answer_time_score}}</th>
						<th>{{$scorecard->ytd->full_8d_answer_time_score}}</th>
						<th>{{$scorecard->ytd->answer_score}}</th>
						<th class="{{$scorecard->ytd->final_score >= 75 ? 'alpha-success text-success-800' : 'alpha-danger text-danger-800'}}">{{$scorecard->ytd->final_score}}</th>
						<th>{{$scorecard->ytd->ranking}}</th>
						<th></th>
					</tr>
				</tfoot>

			</table>
		</div>
	</div>


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Scorecard Chart {{$scorecard->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="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 SUPPLIER_SCORECARD = {!! $scorecard->toJSON() !!};

	</script>
	<script src="{{mix('js/supplierquality/scorecard_show.js')}}"></script>
@endsection