@inject('Setting','anlutro\LaravelSettings\SettingStore')

						<div class="table-toolbar">
							<div class="row">
								<div class="col-md-6" style="width: 55%">
									<a target="_blank" href="{{action('ConsoleController@guestPDFExport')}}" class="btn green">@lang('messages.not_leave_report') <i class="fa fa-bar-chart"></i></a>
									<a target="_blank" href="{{action('ConsoleController@guest_Leave_PDFExport')}}" class="btn green">@lang('messages.leave_report') <i class="fa fa-bar-chart"></i></a>
								</div>

								<div class="col-md-6" style="width: 45%">
									<a href="javascript:;" data-notice="guest" data-filter="all" class="btn green pull-right btn_filter_select_number_of_day_guest" style="margin-left:5px; margin-top:5px;">全部</a>
									<a href="javascript:;" data-notice="guest" data-filter="1" class="btn red pull-right btn_filter_select_number_of_day_guest" style="margin-left:5px; margin-top:5px;">未離開</a>
									<a href="javascript:;" data-notice="guest" data-filter="2" class="btn blue pull-right btn_filter_select_number_of_day_guest" style="margin-left:5px; margin-top:5px;">已離開</a>
									<a href="javascript:;" data-notice="guest" data-filter="3" class="btn default pull-right btn_filter_select_number_of_day_guest" style="margin-left:5px; margin-top:5px;">已註銷</a>

								</div>


								<div class="col-md-12">
									<a id="btn_LeaveWithCard" href="javascript:;" data-notice="guest" data-filter="card" class="btn purple pull-left " style="margin-left:5px;margin-top:10px;">還卡離開</a>
									<input id="guest_id" name="guest_id" type="hidden" value="">
<!-- 									<a href="javascript:;" data-notice="guest" data-filter="week" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">最近一週</a>
									<a href="javascript:;" data-notice="guest" data-filter="today" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">本日</a> -->
									<a href="javascript:;" data-notice="guest" data-filter="8hr" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">八小時進出紀錄</a>

									<a href="javascript:;" data-notice="guest" data-filter="4hr" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">四小時進出紀錄</a>


								</div>
								<input id="guest_status" name="guest_status" type="hidden" value="">
							</div>
						</div>						
                        <table id="table_guest" class="table table-striped table-bordered table-hover data_table">
							<thead>
							<tr>
								<th style="display: none;">
									 卡號
								</th>
								<th style="display: none;">
									 @lang('messages.id_placement')
								</th>
								<th style="display: none;">
									 關係
								</th>

								<th style="display: none;">
									 @lang('messages.visitor_sign')
								</th>
								<th style="display: none;">
									@lang('messages.leave_sign')
								</th>
								<th style="display: none;">
									訪客照片
								</th>
								<th style="display: none;">
									@lang('messages.leave_date')
								</th>
								<th style="display: none;">
									@lang('messages.visitor_number')
								</th>
								<th>
									 @lang('messages.visit_time')
								</th>
								<th>
									 停留時間
								</th>
								@if($Setting->get('manage.guest_cost.display') == 'on')
								<th>
									收費方式
								</th>
								<th>
									收費金額
								</th>
								<th>
									最後經手人									
								</th>
								@endif
								<th>
									 @lang('messages.visitor_tel')
								</th>
								<th>
									 @lang('messages.visitor_loan')
								</th>
								<th>
									 事由
								</th>
								<th>
									 受訪者姓名
								</th>
								<th>
									 受訪者門牌
								</th>
								<th>
									@lang('messages.visit_status')
								</th>
								<th>
									直接離開
								</th>
							</tr>
							</thead>
							<tbody>
							@foreach ($guests as $guest)
							<tr class="odd gradeX">
								<th style="display: none;">
									{{$guest->guest_rfid}}
								</th>
								<th style="display: none;">
									{{$guest->location}}
								</th>
								<th style="display: none;">
									{{$guest->guest_relationship}}
								</th>
								<th style="display: none;">
									{!!$guest->guest_in_sign!!}
								</th>
								<th style="display: none;">
									{!!$guest->guest_out_sign!!}
								</th>
								<th style="display: none;">
									{!!$guest->guest_photo!!}
								</th>
								<th style="display: none;">
									{{$guest->guest_out_time}}
								</th>
								<td style="display: none;">
									{{$guest->guest_count}}
								</td>
								<td>
									{{$guest->guest_in_time}}
								</td>
								<td>
									{{$guest->stand_time}}
								</td>
								@if($Setting->get('manage.guest_cost.display') == 'on')
								<td>
									{{$guest->cost_type == 0 ? "臨停收費":"違停罰款"}}
								</td>
								<td>
									{{$guest->cost}}
								</td>
								<td>
									{{$guest->handler}}
								</td>
								@endif
								<td>
									{{$guest->guest_phone}}
								</td>
								<td>
									{{$guest->guest_pawn}}
								</td>
								<td>
									{{$guest->guest_cause}}
								</td>
								<td>
									{{$guest->host}}
								</td>
								<td>
									{{$guest->host_name}}
								</td>

								<td>
									@if ($guest->status == 1)
                                        <span class="label label-sm label-danger">未離開</span>
                                    @elseif ($guest->status == 2)
                                        <span class="label label-sm label-success">已離開</span>
                                   	@elseif ($guest->status == 3)
                                        <span class="label label-sm label-default">已註銷</span>
                                    @endif
								</td>

								<td>
									@if ($guest->status == 1)
                                        <!-- 離開按鈕  -->
										<a class="btn red pull-left leave" id='{{$guest->id}}' style="padding:5px 8px 4px 8px">直接離開</a> 
                                    @endif
								</td>
							</tr>
							@endforeach
							</tbody>
							</table>
							 @if(count($guests) == 0)
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-warning">
                                        <button data-dismiss="alert" class="close" type="button">×</button>
                                        <span class="entypo-cancel-circled"></span>
                                        <strong>@lang('messages.sorry')</strong>&nbsp;&nbsp;@lang('messages.no_data_to_dsp')
                                    </div>
                                </div>
                            </div>
                            @endif 

<script>

	$(document).on('click','.leave',function(){ //直接離開

		$('#guest_id').val(this.id);

		$('#notice_modal').modal('hide');

		$.ajax({
			url:'{{ route("console::guest_setting_check") }}',
			type:'POST',
			success: function(sendback){

				//有開guest_setting_check 訪客收費功能
				if(sendback.display == "on"){
					
					$('#modal_function_guest_cost_view').modal('show');
					
				}else{

					signpad.open();
				}
		
			}
		});

	});

	

	$(document).on('click','#btn_guest_cost',function(){ //訪客收費送出

		$.ajax({
			url:'{{ route("console::guest_cost_update") }}',
			type:'POST',
			data:{
				guest_id:$('#guest_id').val(),
				cost_type:$('#guest_cost_type').val(),
				cost:$('#guest_cost').val(),
			},
			success: function(sendback){
				$('#modal_function_guest_cost_view').modal('hide');
				signpad.open();
			}
		});
	});

//訪客還卡離開
$(document).on('click','#btn_LeaveWithCard',function(){ 
	$('#guest_id').val();//怕干擾到接下來流程 先清空

	$("#guest_cardNumber").val(''); 

	$('#guest_cardNumber').unbind('keypress');
	
	$('#modal_function_guest_leaveWithCard_view').modal('show');

	window.setTimeout("document.getElementById('guest_cardNumber').focus();", 1000)  ;  

	$("#guest_cardNumber").keypress(function(e){
		code = (e.keyCode ? e.keyCode : e.which);
		if (code == 13){
			// outFunction();
			$('#modal_function_guest_leaveWithCard_view').modal('hide');

			var title = '未離訪客';
			App.blockUI({
		        target: '#notice_content',
		        boxed: true,
		        overlayColor: 'none',
		        message: '@lang('messages.reading_data')',
		        textOnly: true
		    });

			

			$.ajax({
				url:'{{ route("console::guest_Leave") }}',
				type:'GET',
				data:{
					leave : true,
					guest_rfid : $("#guest_cardNumber").val()
				},
				success: function(sendback){

					if(sendback.message == "no user"){
						toastr['warning']('卡號有誤');
						App.unblockUI('#notice_content');
					}else{
						$('#notice_modal').modal('hide');
						signpad.open();
					}
			
				}
			});
			
		}
	});
});



//========================================================================
	//    Define Vars
	//========================================================================
	var data = {};
	var mailList = new Array;
	var memberList = new Array;
	var sourceList = new Array;
	var typeList = new Array;
	var pickList = new Array;
	var inputFocus = 'code';
	var step_now = 1;
	var sign_pad = true;

	//========================================================================
	//    讀取設定值  確定簽名板是否被關閉
	//========================================================================
	$.ajax({
		type : 'GET',
		url : '{{action('Manage\MailController@getData')}}',
		dataType: 'json',
		data:{
			mode : 'settingSignPad'
		},
		success : function(sendback){
			if(sendback.status == 1){
				sign_pad = true;
			}else{
				sign_pad = false;
			}
		}
	});

	//========================================================================
	//    Windows Resize & Change scroll element height
	//========================================================================
	$(function(){
	    var windowH = $(window).height();
	    var wrapperH = $('.page-content').height();
	    var frameDiscount = 225;

	    $('.frame .slimScrollDiv').css('height', (windowH-frameDiscount)+'px');
	    $('.frame .scroller').css('height', (windowH-frameDiscount)+'px');

	    $('#modal_member_lv2 .slimScrollDiv').css('height', (windowH-200)+'px');
	    $('#modal_member_lv2 .scroller').css('height', (windowH-200)+'px');

	    $('#mailBoxContainer .slimScrollDiv').css('height', (windowH-frameDiscount-50)+'px');
	    $('#mailBoxContainer .scroller').css('height', (windowH-frameDiscount-50)+'px');

	    $('#sign').css('height',$(window).height());
	    $('#sign').css('width',$(window).width());
	    $('#sign').attr('height',$(window).height());
	    $('#sign').attr('width',$(window).width());

	    $(window).resize(function(){
	        var windowH = $(window).height();
	        var wrapperH = $('.page-content').height();
	        var differenceH = windowH - wrapperH;
	        var newH = wrapperH + differenceH;
	        $('.frame .slimScrollDiv').css('height', (windowH-frameDiscount)+'px');
	    	$('.frame .scroller').css('height', (windowH-frameDiscount)+'px');

	    	$('#modal_member_lv2 .slimScrollDiv').css('height', (windowH-200)+'px');
	    	$('#modal_member_lv2 .scroller').css('height', (windowH-200)+'px');

	    	$('#mailBoxContainer .slimScrollDiv').css('height', (windowH-frameDiscount-50)+'px');
	    	$('#mailBoxContainer .scroller').css('height', (windowH-frameDiscount-50)+'px');
	        console.log('new height:'+newH);
	        $('.page-content').css('min-height',(newH-120)+'px');

	        $('#sign').css('height',$(window).height());
	        $('#sign').css('width',$(window).width());
	        $('#sign').attr('height',$(window).height());
	    	$('#sign').attr('width',$(window).width());
	    });
	});


	//========================================================================
	//    建立狀態機 - 簽名板SignPad
	//========================================================================
	var signpad = StateMachine.create({
		initial: 'hide',
		events: [
			{ name: 'close', from: 'show', to: 'hide'},
			{ name: 'open', from: 'hide', to: 'show'},
			{ name: 'skip', from: 'show', to: 'hide'},
			{ name: 'submit', from: 'show', to: 'hide'},
		],
		callbacks : {
			onhide : function(event,from,to){
				$('#frame_sign_pad').hide();
			},
			onshow : function(event,form,to){
				$('#frame_sign_pad').show();
				if(sign_pad != true){
					signpad.skip();
				}
			},
			onopen : function(event,from,to){
				data.sign = null;
			},
			onskip : function(event,from,to){
				var guest_id = document.getElementById('guest_id');
				if(guest_id.value != ''){
					$.ajax({
						url:'{{route("console::guest_Leave") }}',
						type:'get',
						data:{
							guest_id : guest_id.value
						},
						success: function(sendback){
							swal({
								title : '@lang('messages.success')',
								text : '成功送出',
								type : 'success',
								confirmButtonText: '確定',
								closeOnCancel: false,
								allowOutsideClick: true
							},function(isConfirm2){
								if(isConfirm2){
									// var title = '未離訪客';
									// $('#notice_title').html(title);
									$('#notice_content').html(sendback);
									callGuestDataTable();
									$('#notice_modal').modal('show');
								}
							});
						},
						error: function(sendback){
							toastr['warning']('@lang('messages.item_not_activate')');
							App.unblockUI('#notice_content');
							$('#notice_modal').modal('hide');
						}
					});
				}else{
						$.ajax({
						url:'{{ route("console::guest_Leave") }}',
						type:'GET',
						data:{
							leave : true,
							guest_rfid : $("#guest_cardNumber").val()
						},
						success: function(sendback){

							swal({
								title: "確定離開?",
								text: "受訪者："+sendback.guest['host_name']+"\n"+"拜訪者：外部訪客"+"\n"+"抵押證件："+sendback.guest['guest_pawn']+"\n"+"拜訪人數："+sendback.guest['guest_count']+"\n"+"電話："+sendback.guest['guest_phone']+"\n"+"證件放置位置："+sendback.guest['location']+"\n"+"關係:"+sendback.guest['guest_relationship']+"\n"+"事由:"+sendback.guest['guest_cause']+"\n"+"卡號："+sendback.guest['guest_rfid']+"\n"+"收費類型："+sendback.guest['cost_type']+"\n"+"費用："+sendback.guest['cost']+"\n",
								type: "warning",
								showCancelButton: true,
								confirmButtonText: "確認",
								cancelButtonText: "取消",
								closeOnConfirm: false
							},function(isConfirm){
								if(isConfirm){
									$.ajax({
										url:'{{route("console::guest_Leave") }}',
										type:'get',
										data:{
											guest_rfid : sendback.guest['guest_rfid']
										},
										success: function(sendback){
											swal({
												title : '@lang('messages.success')',
												text : '成功送出',
												type : 'success',
												confirmButtonText: '確定',
												closeOnCancel: false,
												allowOutsideClick: true
											},function(isConfirm2){
												if(isConfirm2){
													// var title = '未離訪客';
													// $('#notice_title').html(title);
													$('#notice_content').html(sendback);
													callGuestDataTable();
													$('#notice_modal').modal('show');
												}
											});
											App.unblockUI('#notice_content');
										},
										error: function(sendback){
											toastr['warning']('@lang('messages.item_not_activate')');
											App.unblockUI('#notice_content');
											$('#notice_modal').modal('hide');
										}
									});
							       
							    }else{
							    	App.unblockUI('#notice_content');
							    	$('#notice_modal').modal('show');
							    }
							});
								// $('#notice_title').html(title);
								// $('#notice_content').html(sendback);
								// $('#btn_getMail').show();//顯示取件按鈕
								// App.unblockUI('#notice_content');
								// callMailDataTable();
							
						},
						error: function(sendback){
							toastr['warning']('操作錯誤，請聯繫開發人員');
							App.unblockUI('#notice_content');
							$('#notice_modal').modal('hide');
						}
					});
				}
			},
			onsubmit : function(event,from,to){
				uploadSign();
			},
		}
	});


	//========================================================================
	//    手繪板處理
	//========================================================================
	$(document).ready(function(){
		var pp = [-1, -1]; // 起始點位置
		var np = [0, 0]; // 下一個點的位置
		var bu = $('#btn_canvas_clear');
		var stage = new Konva.Stage({
			container: 'sign',
			width: $(window).width(),
			height: $(window).height(),
		});
		var layer = new Konva.Layer();
		stage.add(layer);

		var whiteRect = new Konva.Rect({
    	    width: stage.width(),
    	    height: stage.height(),
    	    fill: 'white',
    	});
    	layer.add(whiteRect);

		var container = document.querySelector('#sign canvas');

		var isDrawing = false;
		// 監聽滑鼠點擊事件
		container.addEventListener('mousedown', function (e) {
			isDrawing = true;
			var pos = stage.getPointerPosition();
			pp = [pos.x, pos.y];
		});
		// 監聽滑鼠移動事件
		container.addEventListener('mousemove', function (e) {
			if (!isDrawing) return;
			var pos = stage.getPointerPosition();
			np = [pos.x, pos.y];
			// 繪圖
			var line = new Konva.Line({
				points: [...pp, ...np],
				stroke: 'black',
				strokeWidth: 5,
				lineCap: 'round',
				lineJoin: 'round',
			});
			layer.add(line);
			layer.batchDraw();
			// 下一點的位置=新的起始點
			pp = np;
		});
		// 監聽滑鼠放開事件
		container.addEventListener('mouseup', function (e) {
			isDrawing = false;
			pp = [-1, -1];
		});
		// 清除canvas畫面
		bu.click(function (e) {
			layer.destroyChildren();
			layer.batchDraw();
		});
		/// 監聽手機上的觸摸事件
		container.addEventListener('touchstart', function (e) {
			e.preventDefault(); // 防止默認滾動行為
			simulateMouseDown(e.touches[0]);
		});
		container.addEventListener('touchmove', function (e) {
			e.preventDefault();
			simulateMouseMove(e.touches[0]);
		});
		container.addEventListener('touchend', function (e) {
			e.preventDefault();
			simulateMouseUp();
		});
		function simulateMouseDown(touch) {
			isDrawing = true;
			pp = [touch.clientX, touch.clientY];
		}
		function simulateMouseMove(touch) {
			if (!isDrawing) return;
			np = [touch.clientX, touch.clientY];
			var line = new Konva.Line({
				points: [...pp, ...np],
				stroke: 'black',
				strokeWidth: 5,
				lineCap: 'round',
				lineJoin: 'round',
			});
			layer.add(line);
			layer.batchDraw();
			pp = np;
		}
		function simulateMouseUp() {
			isDrawing = false;
			pp = [-1, -1];
		}
	});

	//========================================================================
	//    上傳簽名檔
	//========================================================================
	function uploadSign() {

	    // Generate the image data
	    var Pic = document.querySelector('#sign canvas').toDataURL("image/png");
	    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

	    // Sending the image data to Server

	    $.ajax({
	        type: 'POST',
	        url: '{{action('Manage\MailController@mailAction')}}',
	        dataType: 'json',
	        data: {
	        	mode : 'storeSign',
	        	_token : '{{csrf_token()}}',
	        	image : Pic,
	        },
	        success: function (msg) {
	        	var guest_id = document.getElementById('guest_id');
				if(guest_id.value != ''){
					
					$.ajax({
						url:'{{route("console::guest_Leave") }}',
						type:'GET',
						data:{
							guest_out_sign_image : msg.sign_image,
							guest_id : guest_id.value
						},
						success: function(sendback){
							swal({
								title : '@lang('messages.success')',
								text : '成功送出',
								type : 'success',
								confirmButtonText: '確定',
								closeOnCancel: false,
								allowOutsideClick: true
							},function(isConfirm2){
								if(isConfirm2){
									// var title = '未離訪客';
									// $('#notice_title').html(title);
									$('#notice_content').html(sendback);
									callGuestDataTable();
									$('#notice_modal').modal('show');
								}
							});
						},
						error: function(sendback){
							toastr['warning']('@lang('messages.item_not_activate')');
							App.unblockUI('#notice_content');
							$('#notice_modal').modal('hide');
						}
					});
				}else{
					$.ajax({
					url:'{{ route("console::guest_Leave") }}',
					type:'GET',
					data:{
						leave : true,
						guest_rfid : $("#guest_cardNumber").val()
					},
					success: function(sendback){
						swal({
							title: "確定離開?",
							text: "受訪者："+sendback.guest['host_name']+"\n"+"拜訪者：外部訪客"+"\n"+"抵押證件："+sendback.guest['guest_pawn']+"\n"+"拜訪人數："+sendback.guest['guest_count']+"\n"+"電話："+sendback.guest['guest_phone']+"\n"+"證件放置位置："+sendback.guest['location']+"\n"+"關係:"+sendback.guest['guest_relationship']+"\n"+"事由:"+sendback.guest['guest_cause']+"\n"+"卡號："+sendback.guest['guest_rfid'],
							type: "warning",
							showCancelButton: true,
							confirmButtonText: "確認",
							cancelButtonText: "取消",
							closeOnConfirm: false
						},function(isConfirm){
							if(isConfirm){
								$.ajax({
									url:'{{route("console::guest_Leave") }}',
									type:'get',
									data:{
										guest_out_sign_image : msg.sign_image,
										guest_rfid : sendback.guest['guest_rfid']
									},
									success: function(sendback){
										swal({
											title : '@lang('messages.success')',
											text : '成功送出',
											type : 'success',
											confirmButtonText: '確定',
											closeOnCancel: false,
											allowOutsideClick: true
										},function(isConfirm2){
											if(isConfirm2){
												// var title = '未離訪客';
												// $('#notice_title').html(title);
												$('#notice_content').html(sendback);
												callGuestDataTable();
												$('#notice_modal').modal('show');
											}
										});
										App.unblockUI('#notice_content');
									},
									error: function(sendback){
										toastr['warning']('@lang('messages.item_not_activate')');
										App.unblockUI('#notice_content');
										$('#notice_modal').modal('hide');
									}
								});
						       
						    }else{
						    	App.unblockUI('#notice_content');
						    	$('#notice_modal').modal('show');
						    }
						});
							// $('#notice_title').html(title);
							// $('#notice_content').html(sendback);
							// $('#btn_getMail').show();//顯示取件按鈕
							// App.unblockUI('#notice_content');
							// callMailDataTable();
						
						},
						error: function(sendback){
							toastr['warning']('操作錯誤，請聯繫開發人員');
							App.unblockUI('#notice_content');
							$('#notice_modal').modal('hide');

						}
					});
		        	
		   		}
			}
		});
	}


</script>