@extends('layouts.simple', 	[
								'katcon_scripts'	=>  true,
								'vertical_center'	=>	false,
								'body_styles'		=>	'',
								'content_styles'	=>	'padding:0px',
								'custom_footer'		=>	true,
							])

@section('styles')

<style>
	#reworks_footer{
		top:-65px;
	}
</style>

@endsection


@section('content')

	<div id="reworks_dashboard">

		<div class="mt-1 mb-0">

			<div id="part_number_img_div" class="text-center">
			</div>

		</div>

	</div>

	<!-- Modal -->
	<div class="modal fade" id="select_defect_modal" tabindex="-1" role="dialog" aria-labelledby="select_defect_modal" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h1 class="modal-title"></h1>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
				@foreach($defects as $defect)
                <div class="defect-div" data-defect_id="{{$defect->id}}">{{$defect->name}}</div>
				@endforeach
	      </div>
	      <div class="modal-footer justify-content-between">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
	        <button type="button" class="btn btn-warning remove-defect">Quitar Defecto</button>
	      </div>
	    </div>
	  </div>
	</div>


	<div class="modal fade" id="config_modal" tabindex="-1" role="dialog" aria-labelledby="config_modal" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	    <form>
		    <div class="modal-header">
		        <h1 class="modal-title">Configuración</h1>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">

					<div class="form-group row">
						<label class="col-form-label col-lg-3">Operador</label>
						<div class="col-lg-9 form-group-feedback form-group-feedback-right">
							<input type="number" name="user_id" placeholder="Escribe nómina" class="form-control">
							<span class="form-text"></span>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-lg-3">Jefe de Turno</label>
						<div class="col-lg-9 form-group-feedback form-group-feedback-right">
							<input type="number" name="lead_id" placeholder="Escribe nómina" class="form-control">
							<span class="form-text"></span>
						</div>
					</div>

					<div class="form-group row">
                    	<label class="col-form-label col-lg-3">Turno</label>
                    	<div class="col-lg-9 form-group-feedback form-group-feedback-right">
                            <select name="work_shift_id" class="form-control" >
                                <option value="">Seleccionar</option>
								@foreach($line->shifts as $shift)
								<option value="{{$shift->id}}">{{$shift->name}}</option>
								@endforeach
                            </select>
							<span class="form-text"></span>
                        </div>
                    </div>

				</select>
		      </div>
		      <div class="modal-footer justify-content-between">
		        <button type="button" style="font-size: 20px;" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
		        <button type="submit" style="font-size: 20px;" class="btn btn-primary remove-defect">Guardar</button>
		      </div>
		    </div>
		</form>
	  </div>
	</div>

@endsection

@section('custom_footer')

	<div id="reworks_footer" class="card card-main mb-0" style="height: 65px;">
		<div class="d-flex justify-content-between h-100">
			<div>
				<button id="config_btn" class="btn bg-primary h-100" >
					<i style="font-size: 30px" class="icon-cog3"></i>
				</button>
			</div>			

			<div>
				<table class="table">
					<tbody>
						<tr>
							<td class="py-1">Operador</td>
							<td class="py-1">Jefe de Turno</td>
							<td class="py-1">Turno</td>
							<td class="py-1">Linea</td>
							<td class="py-1">Parte</td>
						</tr>
						<tr>
							<td class="py-1" id="active_user_name"></td>
							<td class="py-1" id="active_lead_name"></td>
							<td class="py-1" id="active_work_shift_name"></td>
							<td class="py-1">{{$line->name}}</td>
							<td class="py-1">{{$part_number->name}}</td>
						</tr>
					</tbody>

				</table>
			</div>

			<div>
				<button id="store_btn" class="btn bg-success  btn-ladda btn-ladda-spinner h-100"  data-style="zoom-in" >
					<span style="font-size: 25px">Guardar</span>
				</button>
			</div>

		</div>

	</div>

@endsection

@section('app-scripts')
	<script type="text/javascript">
		const CANVAS_WIDTH = {{\App\Master\PartNumber::IPAD_IMAGE_WIDTH}};
		const CANVAS_HEIGHT = {{\App\Master\PartNumber::IPAD_IMAGE_HEIGHT}};
		const USERS = {!! $users->toJson() !!};
		const PART_NUMBER = {!! $part_number->toJson() !!};
		const DEFECTS = {!! $defects->toJson() !!};
		const LINE = {!! $line->toJson() !!};
	</script>
	<script src="{{mix('js/reworks/dashboard.js')}}"></script>
@endsection