@inject('request', 'Illuminate\Http\Request')
@extends('layouts.iconbar')

@section('title')
Jobs
@endsection

@section('breadcrumbs')
{{--{{ Breadcrumbs::render(\Request::route()->getName()) }}--}}
@endsection


@section('custom_styles')
<!-- <link rel="stylesheet" type="text/css" href="{{ url('assets/mention/recommended-styles.css') }}"> -->
<style>
	.task-btn {
		width: 130px;
		border-radius: 0px !important;
		margin-right: 1px;
		cursor: default !important;
	}
	
	a .task-btn {
		cursor: inherit !important;
	}
	
	.bg-new {
		color: #fff;
		background: #db2e54;
	}
	
	.bg-released {
		color: #fff;
		background: #24c472;
	}
	
	.bg-others {
		color: #fff;
		background: #fb9c45;
	}
	
	.modal-body {
		padding: 14px 53px 0px 36px !important;
	}
	
	.job-form {
		width: 68%
	}
	
	.full-width {
		width: 100% !important;
	}
	
	tr.bg-dangerous>td.qas {
		background-color: red;
	}
	
	.btn-info:hover {
		background: #0091D5 !important;
		color: #fff !important;
	}
	
	.btn-outline-success:hover,
	.btn-outline-success:focus {
		background: #F7F8FA !important;
		color: #34bfa3 !important;
		cursor: inherit !important;
	}
	
	.btn-success:hover {
		background: #34bfa3 !important;
		color: #fff !important;
		cursor: inherit !important;
	}
	
	
	.btn-danger:hover {
		background: #000000 !important;
		color: #fff !important;
		cursor: inherit !important;
	}
	
	a.pause,
	a.stop,
	a.play,
	a.resume {
		cursor: pointer !important;
	}
	
	.reasonselect {
		cursor: pointer !important;
	}
	.text-right{
		text-align: right!important;
	}
</style>
@endsection

@section('content')
@if(Auth::user()->hasRole('Staff'))

<div class="page-content jobs-panel">
	<div class="errorsdiv"></div>
	<div class="panel">
		<div class="panel-body">
			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<div class="col-md-3">
							<h3 class="no-padding">
								{{ \Carbon\Carbon::now()->format('l jS M Y') }}
							</h3>
						</div>
						<div class="col-md-4">
							<h3 class="no-padding">
								<span class="today-cnc-stats"></span>
							</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<ul class="nav nav-tabs job-tabs  mb-4" role="tablist">
			<li class="nav-item col-xs-12" role="presentation">
				<a class=" active nav-link" data-toggle="tab" href="#big-cnc-jobs" aria-controls="big-cnc" role="tab">
					Big CNC
				</a>
			</li>
			<li class="nav-item col-xs-12" role="presentation">
				<a class="  nav-link" data-toggle="tab" href="#small-cnc-jobs" aria-controls="small-cnc" role="tab">
					Small CNC
				</a>
			</li>
			<li class="nav-item col-xs-12" role="presentation">
				<a class="  nav-link" data-toggle="tab" href="#panel-cnc-jobs" aria-controls="panel-cnc" role="tab">
					Panel Saw
				</a>
			</li>
			<li class="nav-item col-xs-12" role="presentation">
				<a class="nav-link" data-toggle="tab" href="#all-cnc-jobs" aria-controls="all-cnc" role="tab">
					All
				</a>
			</li>
		</ul>
		<div class="tab-content mt-4">
			<div class="tab-pane active animation-fade active-pane table-responsive" id="big-cnc-jobs" role="tabpanel">
				@include('staff.jobs.big-cnc-jobs')
			</div>
			<div class="tab-pane animation-fade  table-responsive" id="small-cnc-jobs" role="tabpanel">
				@include('staff.jobs.small-cnc-jobs')
			</div>
			<div class="tab-pane animation-fade  table-responsive" id="panel-cnc-jobs" role="tabpanel">
				@include('staff.jobs.panel-cnc-jobs')
			</div>
			<div class="tab-pane animation-fade table-responsive" id="all-cnc-jobs" role="tabpanel">
				@include('staff.jobs.all-cnc-jobs')
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="priorityModal" tabindex="-1" role="dialog" aria-labelledby="hubNotesModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					
					<button type="button" class="close modalclose" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-footer text-center tasks-popup" style="justify-content:center;">
					<form id="ajax-jobs_form" action="/staff/task/pause" method="post" style="width:100%">
						{{csrf_field()}}
						<div class="form-group">
							<div class="alert alert-warning alert-dismissible errormessage" style="display: none;">
								
							</div>
							<span class="reasonselect" style="width:30%; display: none;">
								<select id="reason" name="reason" class="select2 form-control" required style="width:50%; display: none;">
									<option value="1">Reason 1</option>
									<option value="2">Reason 2</option>
									<option value="3">Reason 3</option>
								</select>
							</span>
							<a class="btn btn-primary btn-block btn-lg play ajaxclick" href="javascript:void(0);" style="cursor: pointer!important;"> Start </a>
							<a class="btn btn-danger btn-block btn-lg pause" href="javascript:void(0);" style="cursor: pointer!important;">Pause </a>
							<a class="btn btn-success btn-block btn-lg stop ajaxclick" href="javascript:void(0);" style="cursor: pointer!important;">Complete </a>
							<a class="btn btn-primary btn-block btn-lg resume ajaxclick" href="javascript:void(0);" style="cursor: pointer!important;">Resume </a>
							<input type="hidden" name="jobid" id="jobid">
							<input type="hidden" name="taskid" id="taskid">
							<button type="submit" class="btn btn-success submitform" style="display: none;" value="Pause">Pause</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="jobModal" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<form method="post" action="/admin/update/job" class="job-form">
				{{csrf_field()}}
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="jobModalLabel">Update Job </h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary modalclose" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Save changes</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	@endif
	@stop
	@section('javascript')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
	<script src="{{ asset('adminlte/js/viewJob.js') }}"></script>
	
	<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
	@stack('dt-scripts')
	
	<script>
		getCncOrder('today')
		setInterval(function() {
			refreshDatatables()
		}, 60000 * 3);
		
		setInterval(function() {
			refreshDatatables()
		}, 120000);
		
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		
		function openPopover(me) {
			$('.errormessage').hide();
			$(".play").hide();
			$(".pause").hide();
			$(".resume").hide();
			$(".stop").hide();
			$(".submitform").hide();
			$(".reasonselect").hide();
			var start_visible = true;
			var pause_visible = true;
			var resume_visible = true;
			var jobid = $(me).data('jobid');
			var taskid = $(me).data('taskid');
			var task = $(me).data('task');
			var iscut = $(me).data('iscut');
			var cutstatus = $(me).data('cutstatus');
			var isedge = $(me).data('isedge');
			var edgestatus = $(me).data('edgestatus');
			if ($(me).data('status') == 'stopped') {
				return false;
			}
			
			if ($(me).data('status') == 'not_started') {
				$(".play").show();
				$(".play").attr('href', '/staff/job/task/' + jobid + '/' + taskid + '/start');
			}
			
			if ($(me).data('status') == 'started') {
				$(".pause").show();
				$(".stop").show();
				$("#jobid").val(jobid);
				$("#taskid").val(taskid);
				$(".pause").attr('href', '/staff/job/task/' + jobid + '/' + taskid + '/pause');
				
				if (task == 'EDGE' && (iscut == 0 || (iscut == 1 && cutstatus != 'completed'))) {
					$(".stop").hide();
					$('.errormessage').show().html('To finish Edge Task Please Complete Cut Task First!')
				} else {
					$(".stop").attr('href', '/staff/job/task/' + jobid + '/' + taskid + '/stop');
				}
				
				if (task == 'POST' && cutstatus != 'completed' && edgestatus != 'completed') {
					$(".stop").hide();
					$('.errormessage').show().html('To finish Post Task Please Complete Cut & Edge Task First!')
				} else {
					$(".stop").attr('href', '/staff/job/task/' + jobid + '/' + taskid + '/stop');
				}
				var pause_visible = false;
			}
			
			if ($(me).data('status') == 'paused') {
				$(".resume").show();
				$(".resume").attr('href', '/staff/job/task/' + jobid + '/' + taskid + '/resume');
				var resume_visible = false;
			}
		}
		
		jQuery(document).ready(function() {
			jQuery(".pause").click(function(event) {
				event.preventDefault();
				$(".play").hide();
				$(".pause").hide();
				$(".resume").hide();
				$(".stop").hide();
				$(".submitform").show();
				$(".reasonselect").show();
				return false;
			});
			
		});
		
		jQuery(document).on("click", ".ajaxclick", function(e) {
			e.preventDefault();
			var href = jQuery(this).attr('href');
			jQuery(".modalclose").trigger('click');
			updateJob(null, href, 'GET');
		});
		
		jQuery(document).on("submit", "#ajax-jobs_form", function(e) {
			e.preventDefault();
			var formData = jQuery(this).serialize();
			var action = jQuery(this).attr('action');
			var method = jQuery(this).attr('method');
			jQuery(".modalclose").trigger('click');
			updateJob(formData, action, method);
		});
		
		
		function holdJob(me) {
			let hold = 0;
			if ($(me).prop('checked')) {
				hold = 1;
			}
			var data = {
				jobId: $(me).data('jobid'),
				hold: hold,
			}
			var action = '/admin/update/job';
			var method = "post";
			updateJob(data, action, method);
		}
		
		function updateJob(formData, action, method) {
			$.ajax({
				url: action,
				type: method,
				data: formData,
				beforeSend: function() {
					initiateBlockUi();
				},
				complete: function() {
					stopBlockUi();
				},
				success: function(data) {
					if (data.success) {
						refreshDatatables();
					}
					
				},
				error: function(result) {
					stopBlockUi();
				},
			});
		}
		
		$(document).on("click", ".modalLink", function() {
			$(".job-form").css('width', '68%')
			$('#jobModal').find('.modal-footer').show();
			var title = $(this).data('title');
			var type = $(this).data('type');
			if (type == "newQa") {
				var route = $(this).data('route');
				var method = $(this).data('method');
				$('#jobModal').find('form').addClass('full-width');
				$('#jobModal').find('form').attr('action', route);
				$('#jobModal').find('form').attr('method', method);
				var a = $(this).parents('td').find('.popover-content.new-qa').html();
			} else if (type == "update-qa") {
				var jobstatus = $(this).data('jobstatus');
				if (jobstatus == 5) {
					$('#jobModal').find('.modal-footer').hide();
				}
				var route = $(this).data('route');
				var method = $(this).data('method');
				$('#jobModal').find('form').addClass('full-width');
				$('#jobModal').find('form').attr('action', route);
				$('#jobModal').find('form').attr('method', method);
				var a = $(this).parents('td').find('.popover-content.update-qa').html();
			} else {
				var route = "/admin/update/job";
				$('#jobModal').find('form').removeClass('full-width');
				$('#jobModal').find('form').attr('action', route);
				$('#jobModal').find('form').attr('method', "post");
				var a = $(this).parents('td').find('.popover-content').html();
			}
			$('#jobModal').modal('show');
			$('#jobModal').on('shown.bs.modal', function() {
				$(".qtywarning").hide();
				
				$('.modal-title').html(title);
				$('#jobModal').find('.modal-body').html(a);
			});
		});
		
		$(document).ready(function() {
			jQuery(".job-form").submit(function(event) {
				event.preventDefault();
				jQuery(".modalclose").trigger('click');
				var formData = jQuery('.job-form').serialize();
				var action = jQuery('.job-form').attr('action');
				var method = jQuery('.job-form').attr('method');
				updateJob(formData, action, method);
				return false;
			})
		});
		
		function refreshDatatables() {
			window.big_cnc_jobs_table.ajax.reload();
			window.big_cnc_backlog_table.ajax.reload();
			window.all_cnc_jobs_table.ajax.reload();
			window.all_cnc_backlog_table.ajax.reload();
			window.small_cnc_jobs_table.ajax.reload();
			window.small_cnc_backlog_table.ajax.reload();
			window.panel_cnc_jobs_table.ajax.reload();
			window.panel_cnc_backlog_table.ajax.reload();
			getCncOrder('today')
		}
		
		function getCncOrder(type){
			$.ajax({
				url: "/admin/cnc-stats/"+type,
				dataType: 'html',
				success: function(html) {
					if (type == 'today'){
						$(".today-cnc-stats").html(html)
					}
					if (type == 'tomorrow'){
						$(".tomorrow-cnc-stats").html(html)
					}
					if (type == 'scheduled'){
						$(".scheduled-cnc-stats").html(html)
					}
				},
				error: function(data) {
				}
			});
		}
	</script>
	@parent
	
	<script src="{{ asset('adminlte/plugins/fileUpload/js/jquery.iframe-transport.js') }}"></script>
	<script src="{{ asset('adminlte/plugins/fileUpload/js/jquery.fileupload.js') }}"></script>
	<script>
		$(document).on('click', '.file-upload', function() {
			var $this = $(this);
			var $parent = $(this).parent();
			
			$(this).fileupload({
				dataType: 'json',
				formData: {
					model_name: 'Qa',
					bucket: $this.data('bucket'),
					file_key: $this.data('filekey'),
					_token: '{{ csrf_token() }}'
				},
				add: function(e, data) {
					data.submit();
				},
				done: function(e, data) {
					$.each(data.result.files, function(index, file) {
						var $line = $($('<p/>', {
							class: "form-group"
						}).html(file.name + ' (' + file.size + ' bytes)').appendTo($parent.find('.files-list')));
						$line.append('<a href="#" class="btn btn-xs btn-danger remove-file">Remove</a>');
						$line.append('<input type="hidden" name="' + $this.data('bucket') + '_id[]" value="' + file.id + '"/>');
						if ($parent.find('.' + $this.data('bucket') + '-ids').val() != '') {
							$parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + ',');
						}
						$parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + file.id);
					});
					$parent.find('.progress-bar').hide().css(
					'width',
					'0%'
					);
				}
			}).on('fileuploadprogressall', function(e, data) {
				var progress = parseInt(data.loaded / data.total * 100, 10);
				$parent.find('.progress-bar').show().css(
				'width',
				progress + '%'
				);
			});
		});
		
		$(document).on('click', '.remove-file', function() {
			var $parent = $(this).parent();
			$parent.remove();
			return false;
		});
		
		function showOtherCause(me, val) {
			if (val) {
				$(me).parents(".qaCauses").find('.otherCause').show();
				
				//hide pthers
				$(me).parents(".qaCauses").find('.designOptions').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.productionOptions').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.productionOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('#production_cause').val('');
				$(me).parents(".qaCauses").find('#design_cause').val('');
				
			} else {
				$(me).parents(".qaCauses").find('.otherCause').hide();
				$(me).parents(".qaCauses").find('.other_cause').val('');
			}
		}
		
		function showDesignCause(me, val) {
			if (val) {
				$(me).parents(".qaCauses").find('.designOptions').show();
				
				//hide others
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.otherCause').hide();
				$(me).parents(".qaCauses").find('.other_cause').val('');
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.productionOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('.productionOptions').hide();
				$(me).parents(".qaCauses").find('#production_cause').val('');
				
			} else {
				$(me).parents(".qaCauses").find('.designOptions').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
			}
		}
		
		function showProductionCause(me, val) {
			if (val) {
				$(me).parents(".qaCauses").find('.productionOptions').show();
				
				//hide others
				$(me).parents(".qaCauses").find('.otherCause').hide();
				$(me).parents(".qaCauses").find('.other_cause').val('');
				$(me).parents(".qaCauses").find('.designOptions').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.productionOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('#design_cause').val('');
				
			} else {
				$(me).parents(".qaCauses").find('.productionOptions').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
			}
		}
		
		function showOtherDesignCause(me, val) {
			if (val) {
				$(me).parents(".qaCauses").find('.designOtherCause').show();
				
				//hide others
				$(me).parents(".qaCauses").find('.otherCause').hide();
				$(me).parents(".qaCauses").find('.other_cause').val('');
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.productionOptions').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('.productionOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('#production_cause').val('');
				
			} else {
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
			}
		}
		
		function showOtherProductionCause(me, val) {
			if (val) {
				$(me).parents(".qaCauses").find('.productionOtherCause').show();
				//hide others
				$(me).parents(".qaCauses").find('.designOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
				$(me).parents(".qaCauses").find('.designOptions').hide();
				$(me).parents(".qaCauses").find('.other_design_cause').val('');
			} else {
				$(me).parents(".qaCauses").find('.productionOtherCause').hide();
				$(me).parents(".qaCauses").find('.other_production_cause').val('');
			}
		}
		
		function hideCause(me, val) {
			$(me).parents(".qaCauses").find('.otherCause').hide();
			$(me).parents(".qaCauses").find('.other_cause').val('');
			$(me).parents(".qaCauses").find('.designOtherCause').hide();
			$(me).parents(".qaCauses").find('.other_design_cause').val('');
			$(me).parents(".qaCauses").find('.other_production_cause').val('');
			$(me).parents(".qaCauses").find('.designOptions').hide();
			$(me).parents(".qaCauses").find('.other_design_cause').val('')
			$(me).parents(".qaCauses").find('.productionOptions').hide();
			$(me).parents(".qaCauses").find('.productionOtherCause').hide();
			$(me).parents(".qaCauses").find('.other_production_cause').val('');
			$(me).parents(".qaCauses").find('#production_cause').val('');;
			
		}
		
		
	</script>
	
	@include('admin.jobs.comments-script')
	@endsection