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

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Suppliers APQP Project configuration',
											'description'	=>	'Here you can edit, and configure 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}}
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						<span class="ml-2"> 
							@component('components.button', ['id'=>'edit_document_name','type'=>'edit','btn_icon'=>true])@endcomponent
						</span> 
						@endif
					<h5>
					<h5><span class="font-weight-600">Status: </span> {{$project->state_name}}
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						<span class="ml-2"> 
							@component('components.button', ['id'=>'edit_document_status','type'=>'edit','btn_icon'=>true])@endcomponent
						</span> 
						@endif
					</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 : '____'}}
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						<span class="ml-2"> 
							@component('components.button', ['id'=>'edit_document_version','type'=>'edit','btn_icon'=>true])@endcomponent
						</span> 
						@endif
					</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'=>'add', 'text'=>'Add Category', 'id'=>'add_category_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>
			@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
			<div class="mt-2">
				<h4>Documents</h4>
				
				<form id="store_document_form">
					<div class="mb-2 d-flex flex-wrap">
						<input type="hidden" name="project_id" value="{{$project->id}}">
						<div class="mr-3 mb-2">
							<label class="col-form-label">Name:</label>
							<input id="document_name" name="document_name" required placeholder="Name" class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">Delivery Due:</label>
							<input required type="date" class="form-control" id="delivery_due" name="delivery_due" placeholder="Delivery Due">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">Responsible:</label>
							<select id="new_document_responsible_select" required name="responsible_id" class="form-control select data-fouc">
							</select>
						</div>     
						<div class="mr-3 mb-2">
							<label class="col-form-label">Phase:</label>
							<select required id="new_document_phase_select" name="new_document_phase_select" class="form-control mb-1" style="width:200px">
								<option value="">Select One Phase</option>
								@foreach(\App\PPAP\Document::PHASES_NAME as $key => $phase_name)
									<option value="{{$key}}">{{$phase_name}}</option>
								@endforeach
							</select>
						</div>     
						<!--
						<div class="mr-3 mb-2">
							<label class="col-form-label">Category:</label>
							<select required id="new_document_category_select" name="new_document_category_select" class="form-control mb-1" style="width:200px">
								<option value="">Select One Category</option>
								@foreach($categories as $category)
									<option value="{{$category->id}}">{{$category->name}}</option>
								@endforeach
							</select>
						</div>   
						-->
						<div class="mr-3 ml-3 pt-4">
							<div class="form-check mt-3">
								<label class="form-check-label">
									<input id="new_document_is_required_cb" type="checkbox" name="new_document_is_required_cb" data-fouc>
									Is Required?
								</label>
							</div>
						</div>
						<div class="mr-3 ml-3 pt-4">
							<div class="form-check mt-3">
								<label class="form-check-label">
									<input id="new_document_is_psw_cb" type="checkbox" name="new_document_is_psw_cb" data-fouc>
									Is PWS?
								</label>
							</div>
						</div>
						<div class="mr-2 pt-4 mt-2">
							@component('components.button', 
								['id'=>'add_document','type'=>'add','submit'=>true, 'text' => 'Add Document', 'disabled'=>!$project->active])
							@endcomponent
						</div>
					</div>
				</form>				
			</div>
			@endif
		@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/edit/{{$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/edit/{{$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/edit/{{$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/edit/{{$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/edit/{{$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: 110px">File Path</th>
						<th style="width: 250px">Verificator Comment</th>
						<th style="width: 160px">Status</th>
						<th style="width: 180px" colspan="2">Delivery Due</th>
						<th style="width: 80px" colspan="2">Is Required</th>
						@if($phase==\App\PPAP\Document::PHASE_5)
							<th style="width: 110px" colspan="2">Recurrent Period</th>
						@endif
						<th style="width: 80px" colspan="2">Active/Obsolete</th>
						<th style="width: 250px" colspan="2">Responsible</th>
						<!--<th style="width: 200px">Category</th>-->
						<th style="width: 250px">Creator</th>
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						<th style="width: 80px">Delete</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: 110px">
							@component('components.button', 
								['type'=>'download','btn_icon' => true, 'disabled'=>$document->file_path ? false : true, 'extra_class'=>'download-btn', 'title'=>'Download'])
							@endcomponent							
						</td>	
						<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: 150px;">{{$document->delivery_due_dmy}}</td>
						<td style="min-width: 40px;">
							@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_document_delivery_due'])
							@endcomponent	
							@endif							
						</td>
						<td class="text-center" style="min-width: 40px;">{{$document->is_required ? 'Yes' : 'No'}}</td>
						<td style="min-width: 40px;">
							@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_document_is_required'])
							@endcomponent	
							@endif							
						</td>
						@if($phase==\App\PPAP\Document::PHASE_5)
							<td class="text-center" style="min-width: 70px;">{{$document->period_name}}</td>
							<td style="min-width: 40px;">
								@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
								@component('components.button', 
									['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_document_recurrent_period'])
								@endcomponent	
								@endif							
							</td>
						@endif
						<td style="min-width: 40px;"><span class="badge badge-{{$document->status_color1}}">{{$document->state_name}}</span></td>
						<td style="min-width: 40px;">
							@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_document_status'])
							@endcomponent		
							@endif						
						</td>
						<td class="text-left" style="min-width: 210px;">{{$document->responsible ? $document->responsible->full_name : ""}}</td>
						<td style="min-width: 40px;">
							@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_document_responsible'])
							@endcomponent	
							@endif							
						</td>
						<!--<td class="text-left" style="min-width: 200px;">{{$document->category ? $document->category->name : ""}}</td>-->
						<td class="text-left" style="min-width: 250px;">{{$document->creator ? $document->creator->full_name.' '.$document->created_at_dmy : ""}}</td>
						@if ($user->ppap_role['role'] == Role::PPAP_ADMIN)
						<td>
							@component('components.button', 
								['type'=>'delete','btn_icon' => true, 'disabled'=>$document->active, 'extra_class'=>'delete_document'])
							@endcomponent								
						</td>								
						@endif
					</tr>
					@endforeach
				@endslot
			@endcomponent
			<div class="py-5 text-center">
				@component('components.button', 
					['type'=>'delete', 'text'=>'Delete Project', 'disabled'=>$project->active, 'id'=>'delete_project_btn'])
				@endcomponent
				@component('components.button', 
					['type'=>'cancel', 'text'=>'Cancel', 'id'=>'back_project_btn'])
				@endcomponent
			</div>
		@endslot
	@endcomponent

	<!-- --------- Update Delivery Due modal----------- -->
	<div id="update_delivery_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">Edit Delivery Due</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<form id="edit_delivery_form" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group row">
							<input type="date" id="datetimepicker" name="delivery_due" class="form-control" autofocus>
						</div>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner">OK</button>
        				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
					</div>						
				</form>
			</div>
		</div>
	</div>
	<!-- --------- / Update Delivery Due modal----------- -->
@endsection


@section('app-scripts')
	<script type="text/javascript">
		const PROJECT = {!!$project->toJSON()!!};
		const USER = Katcon.authUser;
		//const CATEGORIES = {!!$categories->toJSON()!!};
		const USERS = {!! $users->toJson() !!};

	</script>
	<script src="{{mix('js/ppap/project/project_edit.js')}}"></script>

@endsection