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

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'History',
											'description'	=>	'Here you can see all reworks.'
										])

		@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">Plant</label>
	                    <select required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Facility</label>
	                    <select required name="sub_plant_id" class="form-control select" data-fouc>
	                    	<option value="">Select a Plant</option>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Line</label>
	                    <select required name="line_id" class="form-control select" data-fouc>
	                    	<option value="">Select a Facility</option>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Date from:</label>
						<input type="text" class="form-control" name="date_from" placeholder="Date from:">
					</div>
					<div class="mx-2">
						<label class="col-form-label">Date to:</label>
						<input type="text" class="form-control" name="date_to" placeholder="Date to:">
					</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>
			</form>	
		@endslot

		@slot('after_body')
			@component('components.datatable')
				@slot('thead')
					<tr>
						<th>ID</th>
						<th>Rework Piece ID</th>
						<th>Employee ID</th>
						<th>Weld</th>
						<th>Zone</th>
						<th>Defect</th>
						<th>Part Number</th>
						<th>Line</th>
						<th>Work Shift</th>
						<th>Work Shift Lead ID</th>
						<th>Facility</th>
						<th>Created At</th>
			        </tr>
				@endslot
				@slot('tfoot')
					<tr>
						<td>ID</td>
						<td>Rework Piece ID</td>
						<td>Employee ID</td>
						<td>Weld</td>
						<td>Zone</td>
						<td>Defect</td>
						<td>Part Number</td>
						<td>Line</td>
						<td>Work Shift</td>
						<td>Work Shift Lead ID</td>
						<td>Facility</td>
						<td>Created At</td>
			        </tr>
				@endslot
			@endcomponent
		@endslot

	@endcomponent

@endsection


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

@endsection