@extends('layouts.master', [
							'class'				=>	'shipments',
						])
@section('content')

	@component('components.card_main', [
			'title' => __('shipment.checklist_title') . '   -  '. ucfirst($tipo_nombre) .' ' . $evento_id,
			'id' => 'checklist_create'
		])

		@slot('body')
		<form class="mb-5" id="checklist_form">
			<div class="container">
				<div class="mt-2">				
					<div class="mb-2 d-flex flex-wrap">   
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.tract'):</label>
							<input id="tract" name="tract" required placeholder=@lang('shipment.tract') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.box'):</label>
							<input id="box" name="box" required placeholder=@lang('shipment.box') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.seal'):</label>
							<input id="seal" name="seal" required placeholder=@lang('shipment.seal') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.tract_plates'):</label>
							<input id="tractor_plate" name="tractor_plate" required placeholder=@lang('shipment.tract_plates') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.box_plates'):</label>
							<input id="box_plate" name="box_plate" required placeholder=@lang('shipment.box_plates') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.driver_name'):</label>
							<input id="driver_name" name="driver_name" required placeholder=@lang('shipment.driver_name') class="form-control">
						</div>
						<div class="mr-3 mb-2">
							<label class="col-form-label">@lang('shipment.security_name'):</label>
							<input id="security_name" name="security_name" required disabled placeholder=@lang('shipment.security_name') class="form-control" value="{{$empleado->full_name}}">
						</div>
					</div>
				</div> 
			</div>

			<div class="container">
				<label class="col-form-label">@lang('shipment.insp_schema')</label>
				<img class="image-responsive" src="{{asset('/img/checklist_inspeccion.png')}}">
			</div>
			<br>
			<div class="container">
				<h5><strong>@lang('shipment.points_rev')</strong></h5>
				@foreach($preguntas_revision as $pregunta)
					@php
						$id = $pregunta->id;
					@endphp
					<div class="pregunta-revision pregunta-div" data-id="{{$id}}" id="pregunta_revision_{{$id}}">
						<div class="pregunta-header">
							<div class="nombre px-3">{{$pregunta->name}}</div>
							<div class="action-btns">
								<div class="d-flex justify-content-end">
									<div>
										<div class="form-check form-check-right form-check-switchery">
											<input type="checkbox" class="form-check-input-switchery" checked data-fouc>
											<label class="form-check-label">Active</label>
										</div>		
									</div>
								</div>
								<div class="d-flex justify-content-end"> 
									<input type="file" class="evidencia" disabled>
								</div>
								<div class="d-flex justify-content-end">
									@component('components.button', 
										['type'=>'comment','btn_icon' => true, 'disabled'=>true, 'extra_class'=>'comment-btn', 'title'=>'Comments'])
									@endcomponent
								</div>
							</div>
						</div>
						<div class="pregunta-body">
							<div class="comentarios"></div>
							<div>
								<img src="" class="evidence-preview" style="display: none" />
							</div>
						</div>
					</div>
				@endforeach
			</div>

			<div class="container">
				<br>
				<h5><strong>@lang('shipment.points_insp')</strong></h5>
				@foreach($preguntas_inspeccion as $pregunta)
					@php
						$id = $pregunta->id;
					@endphp
					<div class="pregunta-inspeccion pregunta-div" data-id="{{$id}}" id="pregunta_inspeccion_{{$id}}">
						<div class="pregunta-header">
							<div class="nombre px-3">{{$pregunta->name}}</div>
							<div class="action-btns">
								<div class="d-flex justify-content-end">
									<div>
										<div class="form-check form-check-right form-check-switchery">
											<input type="checkbox" class="form-check-input-switchery" checked data-fouc>
											<label class="form-check-label">Active</label>
										</div>		
									</div>
								</div>
								<div class="d-flex justify-content-end">
									<input type="file" class="evidencia" disabled>
								</div>
								<div class="d-flex justify-content-end">
									@component('components.button', 
										['type'=>'comment','btn_icon' => true, 'disabled'=>true, 'extra_class'=>'comment-btn', 'title'=>'Comments'])
									@endcomponent
								</div>	
								<div class="d-flex justify-content-end">
									@component('components.button', 
										['type'=>'location','btn_icon' => true, 'disabled'=>true, 'extra_class'=>'location-btn', 'title'=>'Location'])
									@endcomponent
								</div>					    
							</div>
						</div>
						<div class="pregunta-body">
							<div class="comentarios"></div>
							<div class="ubicacion"></div>
							<div>
								<img src="" class="evidence-preview" style="display: none" />
							</div>
						</div>						  	
					</div>
				@endforeach
			</div>

			<div class="container">
				<h2 class="mt-5">@lang('shipment.conditions_checklist_legend')</h2>
				<div class="container">
					<div class="row">
						<div class="col-3">
							<label>
								<input name="condiciones_status" type="radio" value="true" required />
								<span style="color: green; font-size: x-large">@lang('master.yes')</span>
							</label>
						</div>
						<div class="col-3">
							<label>
								<input name="condiciones_status" type="radio" value="false" required />
								<span style="color: red; font-size: x-large">@lang('master.no')</span>
							</label>
						</div>
					</div>	
				</div>				    
			</div>

			<div class="firmas">
				<div class="mx-3 py-2 text-center">
					<canvas width="300" id="sketch_security_signature"></canvas>
					<h5><span class="font-weight-600">@lang('shipment.sign_guard'):</span>  <span></span></h5>
					@component('components.button', 
						['id'=>'delete_security_signature', 'type'=>'delete', 'text' => __('master.clean'), 'color_class'=> 'secondary'])
					@endcomponent
				</div>
				<div class="mx-3 py-2 text-center">
					<canvas width="300" id="sketch_supplier_signature"></canvas>
					<h5><span class="font-weight-600">@lang('shipment.sign_supplier'):</span>  <span></span></h5>
					@component('components.button', 
						['id'=>'delete_supplier_signature','type'=>'delete', 'text' => __('master.clean'), 'color_class'=> 'secondary'])
					@endcomponent
				</div>
			</div>

			<div class="d-flex justify-content-center">
				@component('components.button', 
					['id'=>'add_checklist','type'=>'send','submit'=>true, 'text' => __('master.save')])
				@endcomponent
			</div>
		</form>
		@endslot
	@endcomponent
@endsection

@section('app-scripts')
	<script type="text/javascript">
		const TIPO = {{$tipo}};
		const EVENTO_ID = {{$evento_id}};
		const EMPLEADO= {!! $empleado->toJson() !!};
	</script>
	<script src="{{mix('js/shipments/checklist_create.js')}}"></script>
@endsection

@section('plugin-scripts')
    <script type="text/javascript" src="{{ asset('js/plugins/touch/touch.js'.'?v=1')}}"></script>
@endsection