@extends('layouts.master', ['page_title' => 'Andon', 'body_id' 	=>	'andon_history', 'page_sub_title' => 'History', 'plugins'	=> ['datatables' => true]])

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	__('master.history'),
											'description'	=>	__('andon.hist_description')
										])

		@slot( 'body' )

			<form id="search_data_form">
				<div class="d-flex flex-wrap align-items-center">
					<div class="mx-2">
						<label class="col-form-label">@lang('master.plant')</label><br>
	                    <select required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">@lang('master.dateFrom'):</label>
						<input required type="text" class="form-control" name="date_from" placeholder="Date from:">
					</div>
					<div class="mx-2">
						<label class="col-form-label">@lang('master.dateTo'):</label>
						<input required type="text" class="form-control" name="date_to" placeholder="Date to:">
					</div>
					
					<div class="mx-2">
						<label class="col-form-label">@lang('master.closed') @lang('master.dateFrom'):</label>
						<input type="text" class="form-control" name="closed_date_from" placeholder="Date from:">
					</div>
					<div class="mx-2">
						<label class="col-form-label">@lang('master.closed') @lang('master.dateTo'):</label>
						<input type="text" class="form-control" name="closed_date_to" placeholder="Date to:">
					</div>

					<div class="mx-2">
						<label class="col-form-label">@lang('master.facility') @lang('master.bra_optional')</label>
	                    <select name="sub_plant_id" class="form-control select" data-fouc>
	                    	<option value="">@lang('master.select_a') @lang('master.plant')</option>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">@lang('master.line') @lang('master.bra_optional')</label>
	                    <select name="line_id" class="form-control select" data-fouc>
	                    	<option value="">@lang('master.select_a') @lang('master.facility')</option>
	                    </select>
					</div>


					<div class="mx-2 mt-4 pt-1">
						@component('components.button', ['type'=>'search', 'submit' => true])@endcomponent
					</div>				

					<div class="mx-2 mt-4 pt-1">
						@component('components.button', ['type'=>'download'])@endcomponent
					</div>
					
					<div class="mx-2 mt-4 pt-1">
						@component('components.button', ['type'=>'reset'])@endcomponent
					</div>	

				</div>
			</form>	
		@endslot

		@slot('after_body')
			@component('components.datatable')
				@slot('thead')
					<tr>
						<th>@lang('master.view')</th>
						<th>ID</th>
						<th>@lang('andon.first_fault_id')</th>
						<th>@lang('andon.open_time')</th>
						<th>@lang('andon.accumulated')<br>@lang('andon.open_time')</th>
						<th>@lang('andon.line_stop')</th>
						<th>@lang('master.status')</th>
						<th>@lang('master.close')<br>@lang('andon.mode')</th>
						<th>@lang('master.department')</th>
						<th>@lang('andon.responsable_usr')</th>
						<th>@lang('master.line')</th>
						<th>@lang('master.machine')</th>
						<th>@lang('andon.created_by')</th>
						<th>@lang('master.facility')</th>
						<th>@lang('master.plant')</th>
						<th>@lang('andon.created_at')</th>
						<th>@lang('andon.closed_at')</th>
			        </tr>
				@endslot
				@slot('tfoot')
					<tr>
						<td class="not-searchable">&nbsp;</td>
						<td>ID</td>
						<td>@lang('andon.first_fault_id')</td>
						<td>@lang('andon.open_time')</td>
						<td>@lang('andon.accumulated') @lang('andon.open_time')</td>
						<td>@lang('andon.line_stop')</td>
						<td>@lang('master.status')</td>
						<td>@lang('master.close') @lang('andon.mode')</td>
						<td>@lang('master.department')</td>
						<td>@lang('andon.responsable_usr')</td>
						<td>@lang('master.line')</td>
						<td>@lang('master.machine')</td>
						<td>@lang('andon.created_by')</td>
						<td>@lang('master.facility')</td>
						<td>@lang('master.plant')</td>
						<td>@lang('andon.created_at')</td>
						<td>@lang('andon.closed_at')</td>
			        </tr>
				@endslot
			@endcomponent





    <!-- --------- Details Fault modal------------->
	<div id="fault_modal" class="modal fade px-0">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title mx-auto"> @lang('master.fault')  <span class="fault_id"> </span> @lang('master.details')</h3>
					<div>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
				</div>

				<div class="modal-body">
					<div class="row">
						<div class="col-12 col-md-6 offset-md-1">
							<h5>
								<span class="created_at"></span>
								<div class="sub-title" > @lang('andon.created_time')</div>
							</h5>							
							<h5>
								<span class="created_by"></span>
								<div class="sub-title" > @lang('andon.created_by') </div>
							</h5>
															
							<h5>
								<span class="department"></span>
								<div class="sub-title" > @lang('master.department')</div> 
							</h5>
							<h5>
								<span class="line"></span>
								<div class="sub-title" >  @lang('master.line') </div>
							</h5>
							<h5>
								<span class="accumulated_open_time">&nbsp;</span>
								<div class="sub-title" >@lang('andon.total_min_opened')</div>
							</h5>							
							<h5>
								<span class="accumulated_open_time_for_humans"></span>
								<div class="sub-title" > @lang('andon.total_time_opened') </div>
							</h5>
							<h5>
								<span class="halt"></span>
								<div class="sub-title" > @lang('andon.line_stop') </div>
							</h5>

						</div>
						<div class="col-12 col-md-5">
							<h5>
								<span class="closed_at"></span>
								<div class="sub-title" > @lang('andon.closed_time') </div>
							</h5>
							<h5>
								<span class="closed_by"></span>
								<div class="sub-title" > @lang('andon.closed_by') </div>
							</h5>
							<h5>
								<span class="machine"></span>
								<div class="sub-title" > @lang('master.machine') </div>
							</h5>
							<h5>
								<span class="responsible_user">&nbsp;</span>
								<div class="sub-title" >@lang('andon.responsable') </div>
							</h5>
							<h5>
								<span class="open_time"></span>
								<div class="sub-title" > @lang('andon.open_mins') </div>
							</h5>
							<h5>
								<span class="open_time_for_humans"></span>
								<div class="sub-title" > @lang('andon.open_time') </div>
							</h5>
							<h5>
								<span class="cause">&nbsp;</span>
								<div class="sub-title" >@lang('andon.cause') </div>
							</h5>							
						</div>
						<div class="col-12 col-md-10 offset-md-1">
							<div class="text-justify">
								<span class="description"></span>
								<div class="sub-title" >@lang('andon.open_description') </div>
							</div>
							
							<div class="text-center mx-auto my-4" style="max-width: 350px;">
								<a href="">
									<img class="img-fluid open_image" src="" style="max-height: 300px;">
									<div class="sub-title my-2" >@lang('andon.open_image')</div>
								</a>
							</div>
						</div>
						<div class="col-12 col-md-10 offset-md-1">
							<div class="text-justify">
								<span class="closed_description"></span>
								<div class="sub-title" >@lang('andon.close_description') </div>
							</div>
							
							<div class="text-center mx-auto my-4" style="max-width: 350px;">
								<a href="">
									<img class="img-fluid closed_image" src="" style="max-height: 300px;">
									<div class="sub-title my-2" >@lang('andon.close_image')</div>
								</a>
							</div>
						</div>						
					</div>
				</div>


				@include('andon.partials.changes_log_container')				
	

				<div class="d-flex justify-content-center flex-wrap pb-3">
					<button type="button" class="btn bg-slate-300 ml-3" data-dismiss="modal">@lang('master.close') <i class="icon-cross3 ml-1"></i></button>
				</div>	

			</div>
		</div>
	</div>
    <!-- --------- /Details Fault modal------------->	



		@endslot


	@endcomponent

@endsection


@section('app-scripts')
	<script type="text/javascript">
		const DATE_FROM = '{{$date_from}}';
		const DATE_TO = '{{$date_to}}';
		const CLOSED_DATE_FROM = '{{$closed_date_from}}';
		const CLOSED_DATE_TO = '{{$closed_date_to}}';
		const PLANT_ID = {{$plant_id}};
		const SUB_PLANT_ID = {{$sub_plant_id ?? 0}};
		const LINE_ID = {{$line_id ?? 0}};
		const FAULTS_DATA = {!! $faults->toJson() !!};
		const PLANTS = {!! $plants->toJson() !!};
	</script>
	<script src="{{mix('js/andon/history.js')}}"></script>

@endsection