@extends('layouts.master')

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

@section('content')

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">8D Reports Table</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 EightD Reports</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 required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="col-md-2 my-2">
						<label class="col-form-label">Date from:</label>
						<input type="text" class="form-control" name="date_from" placeholder="Date from:">
					</div>
					<div class="col-md-2 my-2">
						<label class="col-form-label">Date to:</label>
						<input type="text" class="form-control" name="date_to" placeholder="Date to:">
					</div>

					<div class="col-md-3 my-2">
						<label class="col-form-label">Supplier</label>
	                    <select name="supplier_plant_id" class="form-control select" data-fouc>
	                        <option value="">Select One</option>
	                        @foreach($suppliers as $supplier)
								<option value="{{$supplier->id}}" >{{$supplier->name}}</option>
	                        @endforeach
	                    </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>QPR</th>
						<th>QPR Status</th>
						<th>8D Report <br> Status</th>
						<th>8D Report <br> Progress</th>
						<th>Creation Date</th>
						<th>First 1D/3D<br>Days</th>
						<th>1D Days</th>
						<th>2D Days</th>
						<th>3D Days</th>
						<th>4D Days</th>
						<th>5D Days</th>
						<th>6D Days</th>
						<th>7D Days</th>
						<th>8D Days</th>
						<th>Full 8D<br>Days</th>
					</tr>
				</thead>
				<tbody>
					@foreach($reports as $report)
					<tr>
						<td class="text-left">{{$report->supplier_plant->name}}</td>
						<td>{{$report->qpr->qpr_name}}</td>
						<td>{{$report->qpr->status_name}}</td>
						<td>{{$report->status_name}}</td>
						<td><div class="progress"><div class="progress-bar bg-{{$report->status_color}}" role="progressbar" style="width: {{$report->progress}}%;" aria-valuenow="{{$report->progress}}" aria-valuemin="0" aria-valuemax="100"></div></div></td>
						<td>{{$report->created_at->format('d/m/Y')}}</td>
						<td>{{$report->first_response_saved_days}}</td>
						<td>{{$report->one_d_days}}</td>
						<td>{{$report->two_d_days}}</td>
						<td>{{$report->three_d_days}}</td>
						<td>{{$report->four_d_days}}</td>
						<td>{{$report->five_d_days}}</td>
						<td>{{$report->six_d_days}}</td>
						<td>{{$report->seven_d_days}}</td>
						<td>{{$report->eight_d_days}}</td>
						<td>{{$report->full_saved_days}}</td>
					</tr>
					@endforeach
				</tbody>
				<tfoot>
					<tr>
						<td>Supplier</td>
						<td>QPR</td>
						<td>QPR Status</td>
						<td>8D Report Status</td>
						<td class="not-searchable">&nbsp;</td>
						<td>Creation Date</td>
						<td>First 1D/3D Days</td>
						<td>1D Days</td>
						<td>2D Days</td>
						<td>3D Days</td>
						<td>4D Days</td>
						<td>5D Days</td>
						<td>6D Days</td>
						<td>7D Days</td>
						<td>8D Days</td>
						<td>Full 8D Days</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')

	<script type="text/javascript">
		const REPORTS = {!! $reports->toJSON() !!};
		const DATE_FROM = '{{$date_from}}';
		const DATE_TO = '{{$date_to}}';
		const PLANT_ID = {{$plant_id}};
		const SUPPLIER_PLANT_ID = '{{$supplier_plant_id}}';
	</script>
	<script src="{{mix('js/supplierquality/eightd_report_charts.js')}}"></script>
@endsection