@extends('layouts.master')

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

@section('content')


	<div class="row">
		<div class="col-12">
			<div class="card card-main card-collapsed">
				<div class="card-header header-elements-inline">
					<h4 class="card-title">Load Custom Data</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">
					<p>Use the following filters to load more specific data.</p>
					<p> 
						• By default the system loads the last 3 months of QPRs.
					</p>
					<form id="search_data_form">
						<div class="row">
							<div class="col-md-2 my-2">
								<label class="col-form-label">Plant</label>
			                    <select required name="plant_id" class="form-control select" data-fouc>
			                        <option value="">Select a Plant</option>
			                    </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-2 my-2">
								<label class="col-form-label">General Status</label>
			                    <select name="status" class="form-control select" data-fouc>
			                        <option value="">Select One</option>
			                        <option value="open">Open</option>
			                        <option value="closed">Closed</option>
			                        <option value="cancelled">Cancelled</option>
			                    </select>
							</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>
			                    </select>
							</div>							
							<div class="col-md-2 my-2">
								<label class="col-form-label">QPR Number</label>
								<input class="form-control" type="text" name="qpr_number" placeholder="AC-">
							</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>			
		</div>
	</div>

	<div class="row">

		<div class="col-lg-9 col-md-8">
			<div class="card card-main">
				<div class="card-header header-elements-inline">
					<h4 class="card-title">QPRs</h4>
					<div class="header-elements">
						<div class="list-icons">
		            		<a class="list-icons-item" data-action="collapse"></a>
		            	</div>
		        	</div>					
				</div>
				<div class="table-responsive border-0">
					<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic text-center">
						<thead>
							<tr>
								<th>View<br>QPR</th>
								<th>View<br>8D Report</th>
								<th>Department</th>
								<th>Facility</th>
								<th>Plant</th>
								<th>Q.P.R <br>Number</th>
								<th>Creation <br>Date</th>
								<th>Supplier Name</th>
								<th>Part Name</th>
								<th>Total Quantity<br>Defective</th>
								<th>Total Charged </th>
								<th>Paid Status </th>
								<th>8Ds Report <br> Status</th>
								<th>Verification</th>
								<th>General Status</th>
					        </tr>		        
						</thead>
						<tfoot>
							<tr>
								<td class="not-searchable">&nbsp;</td>
								<td class="not-searchable">&nbsp;</td>
								<td>Department</td>
								<td>Facility</td>
								<td>Plant</td>
								<td>Q.P.R <br>Number</td>
								<td>Supplier Name</td>
								<td>Part Name</td>
								<td>Creation <br>Date</td>
								<td>Total Quantity<br>Defective</td>
								<td>Total Charged <br> USD</td>
								<td>Paid Status </td>
								<td>8Ds Report <br> Status</td>
								<td class="not-searchable">&nbsp;</td>
								<td>General Status</td>
					        </tr>
						</tfoot>			
					</table>
				</div>
			</div>
		</div>

		<div class="col-lg-3 col-md-4">
			<div id="qpr_id" data-id="" class="card card-main qpr-details">
				<div class="card-header header-elements-inline">
					<h4 id="qpr_name" class="card-title font-weight-semibold">-</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 mb-3">
						<div class="col-6">
							<h6 id="supplier_name" class="mb-0">-</h6>
							<span class="text-muted">Supplier Name</span>
						</div>
						<div class="col-6">
							<h6 id="creation_date" class="mb-0">-</h6>
							<span class="text-muted">Creation Date</span>
						</div>					
					</div>

					<div class="row my-3">
						<div class="col-6">
							<h6 id="total_quantity_defective" class="mb-0">-</h6>
							<span class="text-muted">Total Quantity Defective</span>
						</div>	
						<div class="col-6">
							<h6 id="general_status" class="mb-0" >-</h6>
							<span class="text-muted">General Status</span>
						</div>						
					</div>					

					<div class="row">
						<div class="col-12">
							<p id="description" class="mb-0">-</p>
							<span class="text-muted">Description</span>
						</div>
					</div>

					<div class="custom-divider-1"></div>

					@if($user->is_internal)
					<div class="row">
						<div class="col-6">
							<h6 id="verification_one_by" class="mb-0">-</h6>
							<span class="text-muted">Verification One</span>
						</div>
						<div class="col-6">
							<h6 id="verification_one_date" class="mb-0">-</h6>
							<span class="text-muted">Date</span>
						</div>
					</div>

					<div class="custom-divider-1"></div>

					<div class="row">
						<div class="col-6">
							<h6 id="verification_two_by" class="mb-0">-</h6>
							<span class="text-muted">Verification Two</span>
						</div>
						<div class="col-6">
							<h6 id="verification_two_date" class="mb-0">-</h6>
							<span class="text-muted">Date</span>
							<span class="text-muted">Date</span>
						</div>
					</div>
					@else
					<div class="row">
						<div class="col-6">
							<h6 id="verification_one_for_supplier" class="mb-0">-</h6>
							<span class="text-muted">Verification One</span>
						</div>
						<div class="col-6">
							<h6 id="verification_two_for_supplier" class="mb-0">-</h6>
							<span class="text-muted">Verification Two</span>
						</div>
					</div>
					@endif
					
					<div class="custom-divider-1"></div>

						<div class="row">
							<div id="report_8D_progress" class="col-12 text-center">
								-						
							</div>
						</div>
						<div class="text-center">
							<span class="text-muted">8D Report Status</span>
						</div>

					<div class="custom-divider-1"></div>

					<div class="row">
						<div class="col-6">
							<h6 id="charges_authorized_by" class="mb-0">-</h6>
							<span class="text-muted">Charges Authorized By</span>
						</div>
						<div class="col-6">
							<h6 id="charges_authorized_date" class="mb-0">-</h6>
							<span class="text-muted">Date</span>
						</div>
					</div>					
					<div class="row mt-2">
						<div class="col-6">
							<h6 id="paid_status_name" class="mb-0">-</h6>
							<span class="text-muted">Paid Status</span>
						</div>
						<div class="col-6">
							<h6 id="total_charged_usd" class="mb-0">-</h6>
							<span class="text-muted" id="total_charged_usd_text_muted">Total Charged</span>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-12">
							<p id="paid_comments" class="mb-0">-</p>
							<span class="text-muted">Paid Comments</span>
						</div>
					</div>


					@if($user->is_internal)
					<div class="custom-divider-1"></div>
					<div class="row">
						<div class="col-12">
							<p id="comments" class="mb-0">-</p>
							<span class="text-muted">Internal Comments</span>
						</div>
					</div>
					@endif						

				</div>

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

	<div id="create_qpr_modal" class="modal fade"  data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Create a New QPR</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<form method="POST" action="/supqlity/qpr/create">
						{{ csrf_field() }}

						<legend class="text-uppercase font-size-sm font-weight-bold">Select Plant and Supplier</legend>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Plant</label>
							<div class="col-lg-10">
			                    <select required name="plant_id" class="form-control select" data-fouc>
			                    </select>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Sub Plant</label>
							<div class="col-lg-10">
			                    <select required name="sub_plant_id" class="form-control select" data-fouc>
			                        <option value="">Select One</option>
			                    </select>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Supplier</label>
			                <div class="col-lg-10">
			                    <select required name="supplier_plant_id" class="form-control select-search" data-fouc>
			                        <option value="">Select One</option>
			                    </select>
			                </div>
						</div>	

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Department Type</label>
			                <div class="col-lg-10">
			                    <select required name="department" class="form-control select" data-fouc>
			                        <option value="">Select One</option>
			                        <option value="{{\App\SupplierQuality\Qpr::QUALITY}}">Quality</option>
			                        <option value="{{\App\SupplierQuality\Qpr::LOGISTICS}}">Logistics</option>
			                    </select>
			                </div>
						</div>	

						<div class="modal-footer">
							<button type="submit" data-style="zoom-in"  class="btn bg-primary btn-ladda btn-ladda-spinner">Create QPR<i class="icon-paperplane ml-1"></i> </button>
						</div>						
					</form>
				</div>

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

@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')

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

@endsection