@extends('layouts.master', [
								'class'				=>	'ppap',
							])

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Suppliers APQP Project',
											'description'	=>	'Here you can see this APQP Project and his documents.'
										])

		@slot( 'body' )
			<div class="pt-2 d-flex flex-wrap justify-content-between">
				<div class="mr-2">
					<h5><span class="font-weight-600">Name: </span> {{$project->name}}<h5>
					<h5><span class="font-weight-600">Status: </span> {{$project->state_name}}</h5>
					<h5><span class="font-weight-600">Part Number: </span> {{$project->part_number ? $project->part_number->name : '____'}}</h5>
					<h5><span class="font-weight-600">Revision: </span> {{$project->version ? $project->version : '____'}}</h5>
					<h5><span class="font-weight-600">Submission Level: </span> {{$project->submission_level}}
					<h5><span class="font-weight-600">Phase: </span> {{$project->phase}}</h5>
				</div>
				<div class="">
					@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						@component('components.button', 
							['type'=>'edit', 'text'=>'Edit', 'id'=>'edit_project_btn', 'extra_class'=>'my-2'])
						@endcomponent
					@endif
					<h5><span class="font-weight-600">Plant: </span> {{$project->plant->name}}, {{$project->sub_plant->name}}</h5>
					<h5><span class="font-weight-600">Supplier: </span> {{$project->supplier_plant->name}}</h5>
					<h5><span class="font-weight-600">Created</span> At: {{$project->created_at_dmy}}</h5>
					<h5><span class="font-weight-600">Created</span> By: {{$project->creator->full_name}}</h5>
					<h5>
						<span class="font-weight-600">Progress: </span> 
							<div class='progress'>
								<div class='progress-bar bg-{{$project->progress['status_color']}}' role='progressbar' 
								style='width: {{$project->progress['progress']}}%;' aria-valuenow='{{$project->progress['progress']}}' 
								aria-valuemin='0' aria-valuemax='100'>
								</div>
							</div>
						<span class='text-muted'>{{$project->progress['legend']}}</span>
					</h5>
				</div>
			</div>
		@endslot

		@slot('after_body')
			<div class="d-flex justify-content-between flex-wrap">
				<div>
					<ul class="nav nav-tabs nav-tabs-highlight">
						<li class="nav-item">
							<a href="/ppap/project/show/{{$project->id}}?phase={{\App\PPAP\Document::PHASE_1}}"
								class="nav-link @if($phase==\App\PPAP\Document::PHASE_1) active @endif">
								<h5 class="card-title">Phase 1</h5>
							</a>
						</li>
						<li class="nav-item">
							<a href="/ppap/project/show/{{$project->id}}?phase={{\App\PPAP\Document::PHASE_2}}"
								class="nav-link @if($phase==\App\PPAP\Document::PHASE_2) active @endif">
								<h5 class="card-title">Phase 2</h5>
							</a>
						</li>
						<li class="nav-item">
							<a href="/ppap/project/show/{{$project->id}}?phase={{\App\PPAP\Document::PHASE_3}}"
								class="nav-link @if($phase==\App\PPAP\Document::PHASE_3) active @endif">
								<h5 class="card-title"></i>Phase 3</h5>
							</a>
						</li>
						<li class="nav-item">
							<a href="/ppap/project/show/{{$project->id}}?phase={{\App\PPAP\Document::PHASE_4}}"
								class="nav-link @if($phase==\App\PPAP\Document::PHASE_4) active @endif">
								<h5 class="card-title"></i>Phase 4</h5>
							</a>
						</li>
						<li class="nav-item">
							<a href="/ppap/project/show/{{$project->id}}?phase={{\App\PPAP\Document::PHASE_5}}"
								class="nav-link @if($phase==\App\PPAP\Document::PHASE_5) active @endif">
								<h5 class="card-title"></i>Phase 5</h5>
							</a>
						</li>
					</ul>
				</div>
			</div>

			@component('components.datatable', ['vertical_borders'=>true])
				@slot('thead')
					<tr>
						<th style="width: 80px">ID</th>
						<th style="width: 200px">Name</th>
						<th style="width: 140px">File Path</th>
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN || $user->ppap_role['role'] == Role::PPAP_USER || $user->ppap_role['role'] == Role::PPAP_SUPPLIER)
						<th style="width: 110px">View Revisions</th>
						@endif
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN || $user->ppap_role['role'] == Role::PPAP_USER)
						<th style="width: 170px">Accept / Decline</th>	
						@endif
						<th style="width: 250px">Verificator Comment</th>
						<th style="width: 160px">Status</th>
						<th style="width: 160px">Delivery Due</th>
						<th style="width: 130px">Is Required</th>
						<th style="width: 80px">Active/Obsolete</th>
						<!--<th style="width: 200px">Category</th>-->
						<th style="width: 250px">Responsible</th>
						<th style="width: 250px">Details</th>
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
							<th style="width: 250px">Creator</th>
						@endif
					</tr>
				@endslot
				@slot('tbody')
					@foreach($documents->sortBy('id') as $key => $document)
					<tr data-document="{{ $document->toJson() }}" class="{{$document->psw ? 'psw' : ''}}">
						<td class="text-left" style="min-width: 80px;">{{$document->id}}</td>
						<td class="text-left" style="min-width: 200px;">{{$document->name}}</td>
						<td style="min-width: 140px">
							<div>
								@component('components.button', 
								['type'=>'download','btn_icon' => true, 'disabled'=>$document->file_path ? false : true, 'extra_class'=>'download-btn', 'title'=>'Download'])
								@endcomponent
								@if ($user->ppap_role['role'] != Role::PPAP_READ_ONLY)
								@component('components.button', 
									['type'=>'upload','btn_icon' => true, 'disabled'=>false, 'extra_class'=>'upload-btn', 'title'=>'Upload'])
								@endcomponent	
								@endif	
							</div>
							<div>
								@if ($user->ppap_role['role'] != Role::PPAP_READ_ONLY && $document->psw)
								<h6 class="mb-1 mt-2">Signed Version</h6>
								@component('components.button', 
									['type'=>'send','btn_icon' => true, 'disabled'=>$document->status_id == \App\PPAP\Document::INTERIM_APPROVED || $document->status_id == \App\PPAP\Document::APPROVED ? false : true, 'extra_class'=>'sign-btn', 'title'=>'Upload'])
								@endcomponent	
								@endif							
							</div>
						</td>	
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN || $user->ppap_role['role'] == Role::PPAP_USER || $user->ppap_role['role'] == Role::PPAP_SUPPLIER)
						<td style="min-width: 110px;">
							@if ($document->uploader != null || ($document->phase === 5 && $document->revisions->count() > 0))
								<button data-file_id="{{$document->id}}" class="btn bg-primary btn-outline text-primary view-revisions-btn" data-toggle='tooltip' title='Revisions'><i class="icon-zoomin3"></i></button>
							@endif	
						</td>
						@endif
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN || $user->ppap_role['role'] == Role::PPAP_USER)
							<td style="min-width: 170px;">
								@if($document->psw)
									@if ($document->status_id == \App\PPAP\Document::SUBMITTED && $project->phase == $document->phase && $project->ready_psw)
									<button class="dropdown-item approve-btn"><i class="icon-checkmark3 text-success"></i> Accept</button>
									<button class="dropdown-item decline-btn"><i class="icon-cross2 text-danger"></i>Decline</button>
									@endif
								@else
									@if ($document->status_id == \App\PPAP\Document::SUBMITTED && ($project->phase == $document->phase || ($document->interim_approver_id != null && $document->approver_id == null)))
									<button class="dropdown-item approve-btn"><i class="icon-checkmark3 text-success"></i> Accept</button>
									<button class="dropdown-item decline-btn"><i class="icon-cross2 text-danger"></i>Decline</button>
									@endif
								@endif
							</td>
						@endif	
						<td class="text-left" style="min-width: 250px;">{{$document->status_id === \App\PPAP\Document::INTERIM_APPROVED || $document->status_id === \App\PPAP\Document::DECLINED ? $document->verificator_comment : ''}}</td>
						<td class="text-center" style="min-width: 160px;"><span class="badge badge-{{$document->status_color}}" style="{{$document->submitted_at > $document->delivery_due && $document->status_id === \App\PPAP\Document::APPROVED ? 'border-color: orange; border-style:solid;' : '' }}">{{$document->status_name}}</span></td>
						<td class="text-center" style="min-width: 160px;">{{$document->delivery_due_dmy}}</td>
						<td class="text-center" style="min-width: 130px;">{{$document->is_required ? 'Yes' : 'Optional'}}</td>
						<td style="min-width: 80px;"><span class="badge badge-{{$document->status_color1}}">{{$document->state_name}}</span></td>
						<!--<td class="text-left" style="min-width: 200px;">{{$document->category ? $document->category->name : ""}}</td> -->
						<td class="text-left" style="min-width: 250px;">{{$document->responsible ? $document->responsible->full_name : ""}}</td>
						<td style="min-width: 450px">
							@if($document->uploader)
							Uploaded: {{"{$document->uploader->full_name} {$document->submitted_at_dmy}"}}<br>
							@endif
							@if($document->approver)
							Approved: {{"{$document->approver->full_name} {$document->approved_at_dmy}"}}<br>
							@endif
							@if($document->interim)
							Interim Approved: {{"{$document->interim->full_name} {$document->interim_approved_at_dmy}"}}<br>
							@endif
							@if($document->rejector)
							Rejected: {{"{$document->rejector->full_name} {$document->rejected_at_dmy}"}}<br>
							@endif
						</td>
						@if ($user->ppap_role['role'] != Role::PPAP_SUPPLIER)
							<td class="text-left" style="min-width: 250px;">{{$document->creator ? $document->creator->full_name.' '.$document->created_at_dmy : ""}}</td>	
						@endif					
					</tr>
					@endforeach
				@endslot
			@endcomponent
			<div class="py-5 text-center">
				@component('components.button', 
					['type'=>'cancel', 'text'=>'Back', 'id'=>'back_project_btn', 'title'=>'Return page'])
				@endcomponent
			</div>
		@endslot
	@endcomponent

	<!-- --------- Upload Document modal----------- -->
	<div id="add_document_modal" class="modal fade" tabindex="-1" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Upload Document</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<form id="add_document_form" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group row">
							<label class="col-form-label col-sm-3 mt-2">Select File<span class='text-danger'>*</span></label>
							<div class="col-sm-9">
								<input type="hidden" name="id" value="">

								<div class="">
									@component('components.file_input',[
									'id'=>'import_file', 
									'name'=>'import_file', 
									'accept' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, application/pdf, application/x-zip-compressed'
									])@endcomponent
								</div>
								<span class="text-muted">Accepted file type: PDF, Excel. Max file size 5MB</span>								
							</div>
						</div>
						<div id="feedback_upload_document"></div>
					</div>
					<div class="modal-footer">
						<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner">Upload Document<i class="icon-paperplane ml-1"></i> </button>
					</div>						
				</form>
			</div>
		</div>
	</div>
	<!-- --------- / Upload Document modal----------- -->

	<!-- --------- Upload Signed Document modal----------- -->
	<div id="add_signed_document_modal" class="modal fade" tabindex="-1" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Upload Document</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<form id="add_signed_document_form" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group row">
							<label class="col-form-label col-sm-3 mt-2">Select File<span class='text-danger'>*</span></label>
							<div class="col-sm-9">
								<input type="hidden" name="id" value="">

								<div class="">
									@component('components.file_input',[
									'id'=>'signed_import_file', 
									'name'=>'signed_import_file', 
									'accept' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, application/pdf'
									])@endcomponent
								</div>
								<span class="text-muted">Accepted file type: PDF, Excel. Max file size 5MB</span>								
							</div>
						</div>
						<div id="feedback_upload_signed_document"></div>
					</div>
					<div class="modal-footer">
						<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner">Upload Document<i class="icon-paperplane ml-1"></i> </button>
					</div>						
				</form>
			</div>
		</div>
	</div>
	<!-- --------- / Upload Signed Document modal----------- -->
@endsection


@section('app-scripts')
	<script type="text/javascript">
		const PROJECT = {!!$project->toJSON()!!};
		const USER = Katcon.authUser;
		const USERS = {!! $users->toJson() !!};
		const ADMIN_ROLE = {!! Role::PPAP_ADMIN !!};
		const READ_ONLY_ROLE = {!! Role::PPAP_READ_ONLY !!};
	</script>
	<script src="{{mix('js/ppap/project/project_show.js')}}"></script>

@endsection