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

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	__('audit.form_conf'),
											'description'	=>	__('audit.form_edit_descr')
										])

		@slot( 'body' )

			<div class="pt-2 d-flex flex-wrap justify-content-between">
				<div class="mr-2">
					<h5><span class="font-weight-600">@lang('master.name'): </span> {{$form->name}}
												<span class="ml-2"> 
													@component('components.button', ['id'=>'edit_form_name','type'=>'edit','btn_icon'=>true])@endcomponent
												</span> 
					<h5>
					<h5><span class="font-weight-600">@lang('master.status'): </span> <span>{{$form->status_name}}</span>
												<span class="ml-2"> 
													@component('components.button', ['id'=>'edit_form_status','type'=>'edit','btn_icon'=>true])@endcomponent
												</span> 
					</h5>
					<h5><span class="font-weight-600">@lang('master.description'): </span> {{$form->description}} 
										@if(!$form->description)
										<span class="font-italic">@lang('audit.write_descr')</span>
										@endif
										<span class="ml-2"> 
											@component('components.button', ['id'=>'edit_form_description','type'=>'edit','btn_icon'=>true])@endcomponent
										</span> 									
					</h5>
					<h5><span class="font-weight-600">@lang('audit.part_number_req'): </span> <span>{{$form->part_number_required ? 'Yes' : 'No'}}</span>
												<span class="ml-2"> 
													@component('components.button', ['id'=>'edit_form_part_number_required','type'=>'edit','btn_icon'=>true])@endcomponent
												</span> 
					</h5>
				</div>
				<div class="">
					<h5><span class="font-weight-600">@lang('audit.type'): </span> {{$form->audit_type_name}}</h5>
					<h5><span class="font-weight-600">@lang('audit.created_by')</span>: {{$form->creator->full_name}}</h5>
					<h5><span class="font-weight-600">@lang('audit.created_at')</span>: {{$form->created_at_dmy}}</h5>
				</div>
			</div>
			<div class="mt-2">
				<h4>@lang('audit.questions')</h4>
				
				<form id="store_question_form">
					<div class="mb-2 d-flex flex-wrap">
						<input type="hidden" name="form_id" value="{{$form->id}}">
						<div class="mr-2 mb-2">
							<textarea name="inquiry" required rows="3" cols="100" placeholder="Write a new question here" class="form-control"></textarea>
						</div>
						<div class="mr-2">
							<select required name="layer" class="form-control mb-1" style="width:200px">
								<option value="">@lang('audit.select_layer')</option>
								@foreach(\App\Audit\Question::LAYERS_NAME as $key => $layer_name)
									<option value="{{$key}}">{{$layer_name}}</option>
								@endforeach
							</select>
							@component('components.button', 
								['id'=>'add_question','type'=>'add','submit'=>true, 'text' => 'Add Question', 'disabled'=>!$form->active])
							@endcomponent
						</div>
					</div>
				</form>				
			</div>

		@endslot

		@slot('after_body')

			@component('components.datatable', ['vertical_borders'=>true])
				@slot('thead')
					<tr>
						<th style="width: 150px">@lang('audit.number')</th>
						<th colspan="2">@lang('audit.text')</th>
						<th colspan="2">@lang('audit.layer')</th>
						<th colspan="2">@lang('master.status')</th>
						<th>@lang('master.delete')</th>
			        </tr>
				@endslot
				@slot('tbody')
					@foreach($form->questions->sortBy('order') as $key => $question)
					<tr data-question="{{ $question->toJson() }}">
						<td style="min-width: 150px;">
							<button type="button" class="btn btn-icon text-primary question-move" data-direction="up">
								<i class="fas fa-arrow-up"></i> 
							</button>
							<span>
								{{$question->order}}
							</span>
							<button type="button" class="btn btn-icon text-primary question-move" data-direction="down">
								<i class="fas fa-arrow-down"></i> 
							</button>
						</td>
						<td class="text-left" style="min-width: 800px;">{{$question->inquiry}}</td>
						<td>
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_question_inquiry'])
							@endcomponent								
						</td>
						<td style="min-width: 230px;">{{$question->layer_name}}</td>
						<td>
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_question_layer'])
							@endcomponent								
						</td>							
						<td><span class="badge badge-{{$question->status_color1}}">{{$question->status_name}}</span></td>
						<td>
							@component('components.button', 
								['type'=>'edit','btn_icon' => true, 'extra_class'=>'edit_question_status'])
							@endcomponent								
						</td>	
						<td>
							@component('components.button', 
								['type'=>'delete','btn_icon' => true, 'disabled'=>$question->active, 'extra_class'=>'delete_question'])
							@endcomponent								
						</td>													
					</tr>
					@endforeach

				@endslot

			@endcomponent

			<div class="py-5 text-center">
				@component('components.button', 
					['type'=>'delete', 'text'=>__('audit.delete_form'), 'disabled'=>$form->active, 'id'=>'delete_form_btn'])
				@endcomponent
			</div>

		@endslot


	@endcomponent

@endsection


@section('app-scripts')
	<script type="text/javascript">
		const FORM = {!!$form->toJSON()!!};
		const LAYERS = {!! json_encode($layers)!!};
	</script>
	<script src="{{mix('js/audit/form_edit.js')}}"></script>

@endsection