@extends('layouts.master', 	[
								'page_title' 		=> 'Reworks Configuration', 
								'page_sub_title' 	=> 'Part Number ' . $part_number->name,
							])

@section('styles')

<style type="text/css">
	#canvas {
	    border: 2px solid gray;
	    /*cursor: crosshair;*/
	}
</style>

@endsection

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Zone Selection',
											'description'	=>	!$part_number->has_picture ? 'Here you can upload a picture of this part number.'
																:'Select a zone and then draw a rectangle on the image.'
										])

		@slot( 'body' )
			
			@if($part_number->has_picture)
				<div class="d-flex justify-content-between">
					<div class="mr-2">
						<form id="add_zone_form">
							<h5 class="mb-0">Draw New Zone</h5>
							<div class="d-flex flex-wrap my-2">
								<div class="mx-2 my-1" style="min-width: 250px">
									<h6 class="pt-1 steps step-1" style="">Step 1: Select a Zone</h6>
									<h6 class="pt-1 steps step-2" style="display: none">Step 2: Now select a rectangle</h6>
									<h6 class="pt-1 steps step-3" style="display: none">Step 3: Almost done, click on the add button to save</h6>
								</div>
								<div class="mx-2 my-1" style="width: 200px">
									<select required class="form-control select" data-fouc>
										<option value="" selected disabled>Zones</option>
										@foreach($part_number->zones as $zone)
											@if(!count($zone->location)>0)
					                    	<option value="{{$zone->id}}">{{$zone->indicator_zone_name}}</option>
					                    	@endif
										@endforeach
									</select>
								</div>
								<div class="mx-2 my-1">
									@component('components.button', ['type'=>'add', 'submit'=>true])@endcomponent
								</div>
							</div>
						</form>						
					</div>
					<div class="mr-2">
						<form id="delete_zone_form">
							<h5 class="mb-0">Delete Zone</h5>
							<div class="d-flex flex-wrap my-2">
								<div class="mx-2 my-1" style="width: 200px">
									<select required class="form-control select" data-fouc>
										<option value="" selected disabled>Zones</option>
										@foreach($part_number->zones as $zone)
											@if(count($zone->location)>0)
					                    	<option value="{{$zone->id}}">{{$zone->indicator_zone_name}}</option>
					                    	@endif
										@endforeach
									</select>
								</div>
								<div class="mx-2 my-1">
									@component('components.button', ['type'=>'delete', 'submit'=>true])@endcomponent
								</div>
							</div>
						</form>							
					</div>					
				</div>

			@else
				<form id="upload_image_form" >
					<div class="d-flex flex-wrap">
						<div class="mx-2">
							<label class="col-form-label">
								Recomended Size {{\App\Master\PartNumber::EDIT_IMAGE_WIDTH}}px x {{\App\Master\PartNumber::EDIT_IMAGE_HEIGHT}}px
							</label>
							<div class="custom-file">
								<input type="file" class="custom-file-input text-muted" name="import_file" id="import_file" aria-describedby="import_file" accept=".jpeg,.jpg,.png" required>
								<label class="custom-file-label" for="import_file">Choose File</label>
								<span class="form-text text-muted">Only jpg and png images are accepted. Max file size 5MB</span>
							</div>						
						</div>			

						<div class="mx-2">
							<label class="col-form-label">&nbsp;&nbsp;</label>
							<div>
								@component('components.button', ['type'=>'upload', 'submit'=>'true'])@endcomponent
							</div>
						</div>
					</div>
				</form>
			@endif


			<canvas id="canvas" class="mx-auto my-3" style="display: {{ $part_number->has_picture ? 'block':'none' }}"></canvas>


		@endslot

		@slot('after_body')
			@if($part_number->has_picture)
			<div class="row mb-3">
				<div class="col-md-12 text-center">
					<a href="/reworks/part_numbers/delete_picture/{{$part_number->id}}" class="btn bg-warning btn-lg"><i class="icon-trash mr-2"></i>
						Remove Picture
					</a>
				</div>
			</div>
			@endif			

		@endslot

	@endcomponent

@endsection

@section('app-scripts')
	<script type="text/javascript">
		const PART_NUMBER = {!! $part_number->toJson() !!};
		const CANVAS_WIDTH = {{\App\Master\PartNumber::EDIT_IMAGE_WIDTH}};
		const CANVAS_HEIGHT = {{\App\Master\PartNumber::EDIT_IMAGE_HEIGHT}};
	</script>
	<script src="{{mix('js/reworks/zone_selection.js')}}"></script>
@endsection