@extends('layouts.master', ['page_title' => 'Reworks', 'page_sub_title' => 'Defects Heat Map' ])

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Defects',
											'description'	=>	'Here you can see a defects heatmap of the selected part number'
										])

		@slot( 'body' )

			<form id="search_data_form">
				<div class="d-flex flex-wrap align-items-center">

					<div class="mx-2" style="min-width: 300px">
						<label class="col-form-label">Plant</label>
	                    <select required name="sub_plant_id" class="form-control select" data-fouc style="">
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Line</label>
	                    <select required name="line_id" class="form-control select" data-fouc>
	                    </select>
					</div>
					<div class="mx-2">
						<label class="col-form-label">Part Number</label>
	                    <select required name="part_number_id" class="form-control select" data-fouc>
	                    </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>
			</form>	


			<div class="my-5 text-center">
				<img class="img-responsive" src="/reworks/part_numbers/picture/1">
			</div>


		@endslot

		@slot('after_body')

		@endslot

	@endcomponent

@endsection


@section('app-scripts')
	<script type="text/javascript">
		const LINES = {!! $lines->toJson() !!};
	</script>	
	<script src="{{mix('js/reworks/heatmap.js')}}"></script>

@endsection