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

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Charts',
											'description'	=>	''
										])

		@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="chart-container mt-5">
				<h4>Number of Reworks</h4>
				<div class="chart has-fixed-height my-2" id="zones_chart" style="height: 440px; overflow-x: auto"></div>
			</div>

			<div class="chart-container mt-5">
				<h4 id="defects_heading">Click on a zone bar to display defects breakdown</h4>
				<div class="chart has-fixed-height my-2" id="defects_chart" style="height: 440px; overflow-x: auto"></div>
			</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/charts.js')}}"></script>

@endsection