<link href="<?php echo e(asset('assets/photo/css/styles3.css')); ?>" rel="stylesheet" type="text/css"/>
<?php $Setting = app('anlutro\LaravelSettings\SettingStore'); ?>
<div class="table-toolbar">
	<div class="row">
		<div class="col-md-12">

			<a target="_blank" href="<?php echo e(action('ConsoleController@keeperPDFExport')); ?>" class="btn green"><?php echo app('translator')->get('messages.not_get_report'); ?> <i class="fa fa-bar-chart"></i></a>
			<a id="btn_send_keeper_push" class="btn green">再次推播 <i class="fa fa-mobile fa-lg"></i></a>
			<a id="btn_print_keeper" class="btn green">列印通知單 <i class="fa fa-print fa-lg"></i></a>
			<a href="javascript:;" data-notice="keeper" data-filter="all" class="btn blue pull-right btn_filter_select_number_of_day_keeper" style="margin-left:10px;">全部</a>
			<a href="javascript:;" data-notice="keeper" data-filter="1" class="btn red pull-right btn_filter_select_number_of_day_keeper" style="margin-left:10px;">未領取</a>
			<a href="javascript:;" data-notice="keeper" data-filter="2" class="btn green pull-right btn_filter_select_number_of_day_keeper" style="margin-left:10px;">已領取</a>
			<a href="javascript:;" data-notice="keeper" data-filter="3" class="btn grey pull-right btn_filter_select_number_of_day_keeper" style="margin-left:10px;">已註銷</a>
		</div>
		<div class="col-md-12">
			<a id="btn_getKeeperWithCard" href="javascript:;" data-notice="keeper" data-filter="card" class="btn purple pull-left " style="margin-left:5px;margin-top:10px;">刷卡取件</a>
			<a id="btn_getKeeperWithPhone" href="javascript:;" data-notice="keeper" data-filter="phone" class="btn purple pull-left " style="margin-left:5px;margin-top:10px;">手機取件</a>
			<a id="btn_getKeeperWithUser" href="javascript:;" data-notice="keeper" data-filter="choose_user" class="btn purple pull-left " style="margin-left:5px;margin-top:10px;">住戶取件</a>
			<a id="btn_getKeeperWithPassword" href="javascript:;" data-notice="keeper" data-filter="choose_user" class="btn red pull-left " style="margin-left:5px;margin-top:10px;">密碼取件</a>
			<a id="btn_getKeeperWithSend" href="javascript:;" data-notice="keeper" data-filter="choose_user" class="btn red pull-left " style="margin-left:5px;margin-top:10px;">直接取物</a>
			<a id="btn_getKeeper" href="javascript:;" data-notice="keeper" data-filter="get_mail" class="btn purple pull-left " style="width:240px;margin-left:5px;margin-top:10px;display:none;">取件</a>
			<a href="javascript:;" data-notice="keeper" data-filter="week" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">最近一週</a>
			<a href="javascript:;" data-notice="keeper" data-filter="today" class="btn purple pull-right btn_filter" style="margin-left:5px;margin-top:10px;">本日</a>
		</div>
		<input id="keeper_status" name="keeper_status" type="hidden" value="">
	</div>
</div>
<table id="table_keeper" class="table table-striped table-bordered table-hover data_table" >
	<thead>
		<tr>
			<th style="display: none;">
				 <?php echo app('translator')->get('messages.sender_sign'); ?>
			</th>
			<th style="display: none;">
				 <?php echo app('translator')->get('messages.withdraw_sign'); ?>
			</th>
			<th style="display: none;">
				<?php echo app('translator')->get('messages.receiver_id'); ?>
			</th>
			<th style="display: none;">
				<?php echo app('translator')->get('messages.receive_date'); ?>
			</th>
			<th style="display: none;">
				收件經手人
			</th>
			<th style="display: none;">
				領件經手人
			</th>
			<th style="display: none;">
				物品照片
			</th>
			<th style="display: none;">
				ID
			</th>
			<th>
				 <?php echo app('translator')->get('messages.sent_date'); ?>
			</th>
			<th>
				未領時間
			</th>
			<th>
				 <?php echo app('translator')->get('messages.keeper'); ?>
			</th>
			<th>
				關係
			</th>
			<th>
				類別
			</th>
			<th>
				 <?php echo app('translator')->get('messages.sent_location'); ?>
			</th>
			<th>
				 <?php echo app('translator')->get('messages.recipient'); ?>
			</th>
			<th>
				<?php if($Setting->get('manage.keeper_cost.display') == 'on'): ?>
					金額
				<?php else: ?>
					門牌
				<?php endif; ?>
			</th>
			<th>
				 <?php echo app('translator')->get('messages.sending_status'); ?>
			</th>
			<?php if(isset($showCancel)): ?>
			<th>
				 取消
			</th>
			<?php else: ?>
			<th style="display: none;">
				 取消
			</th>
			<?php endif; ?>
			<th>
				手機開通
			</th>
		</tr>
	</thead>
	<tbody>
		<?php foreach($keepers as $keeper): ?>
		<tr class="odd gradeX">
			<td style="display: none;">
				<?php echo e($keeper->guest_out_id); ?>

			</td>
			<th style="display: none;">
				<?php echo $keeper->guest_in_sign; ?>

			</td>
			<td style="display: none;">
				<?php echo $keeper->guest_out_sign; ?>

			</td>
			<td style="display: none;">
				<?php echo e($keeper->guest_out_time); ?>

			</td>
			<td style="display: none;">
				<?php echo e($keeper->keeper_before_id); ?>

			</td>
			<td style="display: none;">
				<?php echo e($keeper->keeper_after_id); ?>

			</td>
			<td style="display: none;">
				<?php echo $keeper->keeper_image; ?>

			</td>
			<td style="display: none;">
				<?php echo e($keeper->id); ?>

				<input id="keeper_id[]" name="keeper_id[]" type="hidden" value="<?php echo e($keeper->id); ?>">
			</td>
			<td>
				<?php echo e($keeper->guest_in_time); ?>

			</td>
			<td>
				<?php echo e($keeper->notgettime); ?>

			</td>
			<td>
				<?php echo e($keeper->guest_in_id); ?>

			</td>
			<td>
				<?php echo e($keeper->keeper_relationship); ?>

			</td>
			<td>
				<?php echo e($keeper->keeper_class); ?>

			</td>
			<td>
				<?php echo e($keeper->guest_locker); ?>

			</td>
			<td>
				<?php echo e($keeper->host); ?>

			</td>
			<td>
				<?php if($Setting->get('manage.keeper_cost.display') == 'on'): ?>
					<?php echo e($keeper->keeper_cost); ?>元
				<?php else: ?>
					<?php if($keeper->groupid == "" && $keeper->groupid != "外部"): ?>
					<?php echo e($keeper->host); ?>

					<?php else: ?>
					<?php echo e($keeper->groupid); ?>

					<?php endif; ?>
				<?php endif; ?>
			</td>
			<td>
				<?php if($keeper->status == 1): ?>
		            <span class="label label-sm label-danger">未領取</span>
		        <?php elseif($keeper->status == 2): ?>
		            <span class="label label-sm label-success">已領取</span>
		       	<?php elseif($keeper->status == 3): ?>
		            <span class="label label-sm label-default">已註銷</span>
		        <?php endif; ?>
			</td>

			<?php if(isset($showCancel)): ?>
			<td>
				<!-- 刪除按鈕 只是刪除html上的元素 並不會真的刪除資料  這是為了刪除使用者不想取的信 -->
				<a class="btn red pull-left delete" style="padding:5px 8px 4px 8px">x</a> 
			</td>
			<?php else: ?>
			<td style="display: none;">
				<a class="btn red pull-left delete" style="padding:5px 8px 4px 8px">x</a> 
			</td>
			<?php endif; ?>
			<td>
				<?php if( $keeper->device != ""): ?>
					<label class="label label-sm label-info"><?php echo e($keeper->device); ?><label>
				<?php else: ?>
					<label class="label label-sm label-warning">未開通<label>
				<?php endif; ?>
			</td>
			
		</tr>
		<?php endforeach; ?>
	</tbody>
</table>
 <?php if(count($keepers) == 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><?php echo app('translator')->get('messages.sorry'); ?></strong>&nbsp;&nbsp;<?php echo app('translator')->get('messages.no_data_to_dsp'); ?>
        </div>
    </div>
</div>
<?php endif; ?> 
		<?php foreach($relationship as $key => $value): ?>
		<span class="label label-danger" style="margin-left:20px;line-height:40px;"><i class="fa fa-envelope-o">&nbsp;&nbsp;</i><?php echo e($key); ?>&nbsp;&nbsp;&nbsp;<?php echo e($value); ?></span>
		<?php endforeach; ?>

<script type="text/javascript">

	//========================================================================
	//    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 : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data:{
			mode : 'settingSignPad'
		},
		success : function(sendback){
			if(sendback.status == 1){
				sign_pad = true;
			}else{
				sign_pad = false;
			}
		}
	});
	//========================================================================
	//    推播
	//========================================================================
	$(document).on('click','#btn_send_keeper_push',function(){
		//$(this).addClass('disabled');
		$.ajax({
			type: 'POST',
			dataType:'json',
			url : '<?php echo e(action('KeeperController@keeper_postMessage')); ?>',
			success: function(sendback){
				//window.location.reload();
				if(sendback.success == true){
					toastr["success"]('推播發送成功');
				}else{
					toastr['error'](sendback.message);
				}

				//$('#btn_send_mail_push').removeClass('disabled');
			},
			error   : function (sendback){
				//toastr['error']('<?php echo app('translator')->get('messages.error'); ?>');
	        }
		});
	});

	//========================================================================
	//    刪除不想選取的資料列
	//========================================================================

	$(document).on('click','.delete',function(){ //刪除列 功能
		var td = this.parentNode; //a元素的父節點 = td

		var tr = td.parentNode; // td元素的父節點 = tr

		tr.parentNode.removeChild(tr); //利用tr的父節點刪除tr

	});

	//========================================================================
	//    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 keeper_id = document.getElementsByName('keeper_id[]');
				var title = '未取寄物';

			    var keeper_id_Arr = new Array();
				for (var i = 0; i <keeper_id.length; i++) {
				    keeper_id_Arr[i] = keeper_id[i].value;
				}

				$.ajax({
					url:'<?php echo e(action('ConsoleController@getKeeperForKeepeList')); ?>',
					type:'GET',
					data:{
						keeper_id : keeper_id_Arr,
						card_no : $("#keeper_cardNumber").val(),
						img_name : $('#img_name').val()
					},
					success: function(sendback){
						$('#notice_modal').modal('hide');
						swal({
							title : '<?php echo app('translator')->get('messages.success'); ?>',
							text : '取件成功',
							type : 'success',
							cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
							closeOnCancel: false,
							allowOutsideClick: true
						},function(isConfirm) {
					        $('#notice_title').html(title);
							$('#notice_content').html(sendback);
							App.unblockUI('#notice_content');
							callKeeperDataTable();
							$('#notice_modal').modal('show');
					    });

					},
					error: function(sendback){
						toastr['warning']('<?php echo app('translator')->get('messages.item_not_activate'); ?>');
						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 canvas  = $('#sign');//canvas物件
		var point = {};
		point.notFirst = false;
		
		//2維繪圖(jQuery物件需要用canvas[0]呼叫，如果是用js的document.getElementById就不需要[0])
		var ctx = canvas[0].getContext("2d"); 
		ctx.lineWidth = 5;//線條寬度
		ctx.strokeStyle = "black";//線條顏色
		
		//判斷滑鼠是否有按住(點擊)
		var clicking = false;
		
		//點擊滑鼠
		canvas.mousedown(function(e){
			clicking = true;
		});
		
		//滑鼠移動(要按住滑鼠才會繪圖)
		canvas.mousemove(function(e){
			if( !clicking ){ return false; }
			//如果是剛下筆，會先初始化起始點
			if( pp[0] == -1 && pp[1] == -1 ){ 
				pp = [e.pageX,e.pageY]; 
			}
			//紀錄下一點的位置
			np = [e.pageX,e.pageY];
			
			//繪圖
			ctx.beginPath();
			ctx.moveTo(pp[0], pp[1]);
			ctx.lineTo(np[0],np[1]);
			ctx.closePath();
			ctx.stroke();
			//下一點的位置=新的起始點
			pp[0] = np[0];
			pp[1] = np[1];
		});
		
		//放開滑鼠，座標重新歸零
		canvas.mouseup(function(e){
			clicking = false;
			pp = [-1,-1];
		});
		
		//清除canvas畫面
		bu.click(function(e){
			ctx.clearRect(0, 0, canvas.width(), canvas.height());
		});
		
		//因行動狀置不一定只有單點觸控，所以事件應該要改用e.touches[0].pageX來取得(也就是多點觸控)。
		canvas[0].addEventListener("touchstart", function(e) {
			var mouseX = e.touches[0].pageX - this.offsetLeft;
			var mouseY = e.touches[0].pageY - this.offsetTop;
			paint = true;
			addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
			redraw();
		});
	 
		canvas[0].addEventListener("touchend", function(e) {
			paint = false;
		});
	 
		canvas[0].addEventListener("touchmove", function(e) {
			if (paint) {
				addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop, true);
				redraw();
			}
		});
	 
		function onDocumentTouchStart(event) {
			if (event.touches.length == 1) {
				event.preventDefault();
				// Faking double click for touch devices
				var now = new Date().getTime();
				if (now - timeOfLastTouch < 250) {
					reset();
					return;
				}
				timeOfLastTouch = now;
				mouseX = event.touches[0].pageX;
				mouseY = event.touches[0].pageY;
				isMouseDown = true;
			}
		}
	 
		function onDocumentTouchMove(event) {
			if (event.touches.length == 1) {
				event.preventDefault();
				mouseX = event.touches[0].pageX;
				mouseY = event.touches[0].pageY;
			}
		}
	 
		function onDocumentTouchEnd(event) {
			if (event.touches.length == 0) {
				event.preventDefault();
				isMouseDown = false;
			}
		}

		var clickX = new Array();
		var clickY = new Array();
		var clickDrag = new Array();
		var paint;
	 
		function addClick(x, y, dragging)
		{
			clickX.push(x);
			clickY.push(y);
			clickDrag.push(dragging);
		}
	 
		function redraw() {
			//canvas.width = canvas.width; // Clears the canvas
			while (clickX.length > 0) {
				point.bx = point.x;
				point.by = point.y;
				point.x = clickX.pop();
				point.y = clickY.pop();
				point.drag = clickDrag.pop();
				ctx.beginPath();
				if (point.drag && point.notFirst) {
					ctx.moveTo(point.bx, point.by);
				} else {
					point.notFirst = true;
					ctx.moveTo(point.x - 1, point.y);
				}
				ctx.lineTo(point.x, point.y);
				ctx.closePath();
				ctx.stroke();
			}
		}
	});
	//========================================================================
	//    上傳簽名檔
	//========================================================================
	function uploadSign() {

		var keeper_id = document.getElementsByName('keeper_id[]');
		var title = '未取寄物';

	    var keeper_id_Arr = new Array();
		for (var i = 0; i <keeper_id.length; i++) {
		    keeper_id_Arr[i] = keeper_id[i].value;
		}

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

	    $.ajax({
	        type: 'POST',
	        url: '<?php echo e(action('Manage\MailController@mailAction')); ?>',
	        dataType: 'json',
	        data: {
	        	mode : 'storeSign',
	        	_token : '<?php echo e(csrf_token()); ?>',
	        	image : Pic,
	        },
	        success: function (msg) {
	        	$.ajax({
					url:'<?php echo e(action('ConsoleController@getKeeperForKeepeList')); ?>',
					type:'GET',
					data:{
						keeper_id : keeper_id_Arr,
						sign_image : msg.sign_image,
						card_no : $("#keeper_cardNumber").val(),
						img_name : $('#img_name').val()
					},
					success: function(sendback){
						$('#notice_modal').modal('hide');
						swal({
							title : '<?php echo app('translator')->get('messages.success'); ?>',
							text : '取件成功',
							type : 'success',
							cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
							closeOnCancel: false,
							allowOutsideClick: true
						},function(isConfirm) {
					        $('#notice_title').html(title);
							$('#notice_content').html(sendback);
							App.unblockUI('#notice_content');
							callKeeperDataTable();
							$('#notice_modal').modal('show');
					    });
					},
					error: function(sendback){
						toastr['warning']('<?php echo app('translator')->get('messages.item_not_activate'); ?>');
						App.unblockUI('#notice_content');
						$('#notice_modal').modal('hide');
					}
				});
	        },
	        error: function(msg){
	        	toastr['error']('N');
	        }
	    });
	}
</script>
