<?php $request = app('Illuminate\Http\Request'); ?>
<?php $sentinel = app('Cartalyst\Sentinel\Native\Facades\Sentinel'); ?>
<?php $setting = app('anlutro\LaravelSettings\Facade'); ?>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<title>
	<?php $CommunityPresenter = app('NSST\Presenters\CommunityPresenter'); ?>
	<?php echo e($CommunityPresenter->comName()); ?> <?php echo e($setting::get('system_name','全方位建築智慧化管理系統')); ?>

</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="This is the new iNSST community system." name="description"/>
<meta content="imin" name="author"/>
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="<?php echo e(asset('assets/global/plugins/font-awesome/css/font-awesome.min.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/global/plugins/simple-line-icons/simple-line-icons.min.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/global/plugins/bootstrap/css/bootstrap.min.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/global/plugins/uniform/css/uniform.default.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css')); ?>" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-toastr/toastr.min.css')); ?>"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE STYLES -->
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css')); ?>" rel="stylesheet" type="text/css" />
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css')); ?>" rel="stylesheet" type="text/css" />
<link href="<?php echo e(asset('assets/apps/css/todo-2.min.css')); ?>" rel="stylesheet" type="text/css" />
<link href="<?php echo e(asset('assets/global/plugins/bootstrap-sweetalert/bootstrap-sweetalert.css')); ?>" rel="stylesheet" type="text/css" />
<?php $__env->startSection('css_page_level'); ?>
<?php echo $__env->yieldSection(); ?>
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="<?php echo e(asset('assets/global/css/components-md.css')); ?>" id="style_components" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/global/css/plugins-md.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/layouts/layout/css/layout.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/layouts/layout/css/themes/grey.css')); ?>" rel="stylesheet" type="text/css" id="style_color"/>
<link href="<?php echo e(asset('assets/layouts/layout/css/custom.css')); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo e(asset('assets/photo/css/styles2.css')); ?>" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<style>
	#preloader {
		  position: fixed;
		  left: 0;
		  top: 0;
		  z-index: 999999;
		  width: 100%;
		  height: 100%;
		  overflow: visible;
		  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
	}

	.page-content {
		min-height: 0px;
	}

	.caption2 {
		color: #FFFFFF;
		padding: 11px 0 9px 0;
		float: left;
	    display: inline-block;
	    font-size: 18px;
	    line-height: 18px;
	}

	.col-md-3 {
		padding-right: 6px;
		padding-left: 6px;
	}

	.portlet .box {
		box-shadow: 0 4px 5px 3px rgba(0,0,0,.03);
	}

	.blockOverlay {
		opacity: 0.4;
	}

	.showSweetAlert h2{
		margin-top:30px;
	}

	.sweet-overlay{
		z-index : 10100;
	}
	.sweet-alert{
		z-index : 10101;
	}
</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<!-- DOC: Apply "page-header-fixed-mobile" and "page-footer-fixed-mobile" class to body element to force fixed header or footer in mobile devices -->
<!-- DOC: Apply "page-sidebar-closed" class to the body and "page-sidebar-menu-closed" class to the sidebar menu element to hide the sidebar by default -->
<!-- DOC: Apply "page-sidebar-hide" class to the body to make the sidebar completely hidden on toggle -->
<!-- DOC: Apply "page-sidebar-closed-hide-logo" class to the body element to make the logo hidden on sidebar toggle -->
<!-- DOC: Apply "page-sidebar-hide" class to body element to completely hide the sidebar on sidebar toggle -->
<!-- DOC: Apply "page-sidebar-fixed" class to have fixed sidebar -->
<!-- DOC: Apply "page-footer-fixed" class to the body element to have fixed footer -->
<!-- DOC: Apply "page-sidebar-reversed" class to put the sidebar on the right side -->
<!-- DOC: Apply "page-full-width" class to the body element to have full width page without the sidebar menu -->
<body class="page-md page-header-fixed page-full-width page-footer-fixed">
<!-- <div id="preloader"></div> -->
<!-- BEGIN HEADER -->
<div class="page-header md-shadow-z-1-i navbar navbar-fixed-top">
	<!-- BEGIN HEADER INNER -->
	<div class="page-header-inner">
		<!-- BEGIN LOGO -->
		<div class="page-logo">
			<a target="_break" href="<?php echo e($setting::get('company_web','http://www.nsst.com.tw/')); ?>">
			<img src="<?php echo e($setting::get('logo', asset('assets/layouts/layout/img/logo.png'))); ?>" alt="logo" class="logo-default" width="95px" height="16px"/>
			</a>
			<div class="menu-toggler sidebar-toggler hide">
			</div>
		</div>
		<!-- END LOGO -->
		<!-- BEGIN RESPONSIVE MENU TOGGLER -->
		<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
		</a>
		<!-- END RESPONSIVE MENU TOGGLER -->
		<!-- BEGIN TOP NAVIGATION MENU -->
		<div class="top-menu">
			<ul class="nav navbar-nav pull-right"  style="margin-right:0px;">
				<?php $NoticePresenter = app('NSST\Presenters\NoticePresenter'); ?>
				<li class="dropdown dropdown-user">
					<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                    <?php $setting = app('anlutro\LaravelSettings\Facade'); ?>
                     <img alt="" class="img-circle" src="<?php echo e($setting::get('profile', asset('assets/images/profile.jpg'))); ?>" width="30px" height="30px">
					<span class="username username-hide-on-mobile"><?php echo e($sentinel::check()->name); ?></span>
					<i class="fa fa-angle-down"></i>
					</a>
					<ul class="dropdown-menu dropdown-menu-default">
						<?php if($sentinel::check()->privilege === 'guard'): ?>
						<?php else: ?>
						<li>
							<a href="<?php echo e(action('FrontController@index')); ?>">
								<i class="icon-globe"></i> <?php echo app('translator')->get('messages.neighborhood_site'); ?>
							</a>
						</li>
						<li>
							<a href="<?php echo e(action('ConsoleController@index')); ?>">
								<i class="icon-screen-desktop"></i> <?php echo app('translator')->get('messages.service_system'); ?>
							</a>
						</li>
						
						<?php /* <li>
							<a href="#">
							<i class="icon-user"></i> <?php echo app('translator')->get('messages.user_data'); ?> </a>
						</li> */ ?>
						<li>
							<a href="<?php echo e(route('manage::message::index')); ?>">
							<i class="icon-envelope-open"></i> <?php echo app('translator')->get('messages.my_msg'); ?> 
							<?php if($unread_count == 0): ?>
							<span class="badge badge-grey">0</span>
							<?php else: ?>
							<span class="badge badge-danger"><?php echo e($unread_count); ?> </span>
							<?php endif; ?>
							</a>
						</li>
						<li>
							<a href="<?php echo e(action('NoticeController@index')); ?>">
							<i class="icon-bulb"></i> <?php echo app('translator')->get('messages.remind_notice'); ?> 
							<?php if( $NoticePresenter->countUnreadNotice() > 0 ): ?>
							<span class="badge badge-danger"><?php echo e($NoticePresenter->countUnreadNotice()); ?></span>
							<?php else: ?>
							<span class="badge badge-grey">0</span>
							<?php endif; ?>
							</a>
						</li>
						<li class="divider">
						</li>
						<?php endif; ?>
						<li>
							<a href="<?php echo e(route('logout')); ?>">
							<i class="icon-key"></i> <?php echo app('translator')->get('messages.log_out'); ?> </a>
						</li>
					</ul>
				</li>
				<li>
					<a href="javascript:window.close();parent.closeiframe();" style="color:red;padding: 15px 0px 5px 0px;">
						<i class="fa fa-times fa-3x"></i>
					</a>
				</li>
				<!-- END USER LOGIN DROPDOWN -->
			</ul>
		</div>
		<!-- END TOP NAVIGATION MENU -->
	</div>
	<!-- END HEADER INNER -->
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">

	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper" id="main">
		<div class="page-content" style="min-height: 0px;">
			<div class="row">
				<div class="col-md-7">
					<div class="row">
						<div class="col-md-6 frame" id="frame_member" style="width:30%">
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>1 <?php echo app('translator')->get('messages.keeper'); ?><?php echo app('translator')->get('messages.doorplate'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberBox">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_quick" style="width:30%">
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>2 <?php echo app('translator')->get('messages.keeper'); ?><?php echo app('translator')->get('messages.floor'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberQuickBox">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_household" style="width:30%">
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>3 <?php echo app('translator')->get('messages.keeper'); ?><?php echo app('translator')->get('messages.room'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberHouseholdBox">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_member2" style="width:30%;display: none;">
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>4 <?php echo app('translator')->get('messages.recipient'); ?><?php echo app('translator')->get('messages.doorplate'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberBox2">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_quick2" style="width:30%;display: none;" >
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>5 <?php echo app('translator')->get('messages.recipient'); ?><?php echo app('translator')->get('messages.floor'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberQuickBox2">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_household2" style="width:30%;display: none;">
							<div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><?php echo app('translator')->get('messages.step'); ?>6 <?php echo app('translator')->get('messages.recipient'); ?><?php echo app('translator')->get('messages.room'); ?><span class="label label-warning"></span></h3>
                                </div>
                                <div class="panel-body">
                                	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
				                        <div id="memberHouseholdBox2">
				                        	
				                        </div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
					</div>
				</div>
				<div class="col-md-5">
					<div class="row">
						<div class="input-group col-xs-6" style="float: left;">
	                        <span class="input-group-addon">
	                            <i class="fa fa-envelope"></i>
	                        </span>
	                        <input id="input_code" type="text" style="width:73%;" class="form-control" placeholder="<?php echo app('translator')->get('messages.enter_card_no'); ?>" onkeyup="return ValidateNumber(this,value)">
	                        <button id="btn_input_code" style="height:34px;margin-left:-1px;font-size:15px;padding:0px 10px 0px 10px;" class="btn purple"><i class="fa fa-keyboard-o" aria-hidden="true"></i> 鍵盤</button>
	                    </div>
	                    <div class="input-group col-xs-6" style="float: left; padding-left: 10px;">
	                        <span class="input-group-addon">
	                            <i class="fa fa-user"></i>
	                        </span>
	                        <input id="disp_username" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.vistor'); ?>" readonly="true">
	                    </div>
	                    <div style="clear: both;"></div>
					</div>
					<p>
                        <button id="btn_cancel" type="button" class="btn grey btn-lg red">回上一步</button>
                    </p>

                    <div id="mailBoxContainer" style="margin-top: 10px;">
                    	<div id="mailBoxScroller" class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
							<div class="row" id="mailBox">
								
							</div>
		                </div>
                    </div>
				</div>
			</div>
		</div>
	</div>

	<!-- END CONTENT -->

</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="page-footer">
	<div class="page-footer-inner">
		 <?php echo e($setting::get('copyright_1','2015 © NSST 全方位建築智慧化管理系統')); ?> <a href="<?php echo e($setting::get('company_web','http://www.nsst.com.tw/')); ?>" title="<?php echo e($setting::get('copyright_company','新保科技有限公司')); ?>" target="_blank"><?php echo e($setting::get('copyright_company','新保科技有限公司')); ?></a>
	</div>
	<div class="scroll-to-top">
		<i class="icon-arrow-up"></i>
	</div>
</div>

<div id="modal_member_lv2" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" style="width:70%;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><?php echo app('translator')->get('messages.choose_a_liver'); ?></h4>
    </div>
    <div class="modal-body">
    	<div class="scroller" data-always-visible="1" data-rail-visible="1" data-rail-color="blue" data-handle-color="red">
            <p id="memberLv2Box">
        	
        	</p>
        </div>
    </div>
    <div class="modal-footer">
        <button id="focus" type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <!-- <button type="button" data-dismiss="modal" class="btn green">Continue Task</button> -->
    </div>
</div>

<div id="modal_add_user_att" class="modal fade modal-overflow" tabindex="-1" data-focus-on="input:first" aria-hidden="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><?php echo app('translator')->get('messages.add_member'); ?></h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.account'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_user_username" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.account'); ?>">
            </div>
        </div>
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.name'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_user_att_name" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.name'); ?>">
            </div>
        </div>
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.nickname'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="nickname" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.nickname'); ?>">
                <input id="input_user_groupid" type="hidden" >
 				<input id="floor" type="hidden" >
 				<input id="doorplate" type="hidden" >
 				<input id="household" type="hidden" >
            </div>
        </div>
		<div class="form-group">
            <label>手機號碼</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_phone_number" type="text" class="form-control" placeholder="手機號碼">
            </div>
        </div>
        <div class="form-group">
            <label>卡號</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_card_no" type="text" class="form-control" placeholder="卡號">
            </div>
        </div>
    </div>
    <div class="modal-footer">
    	<button id="auto_create" type="button" class="btn red">產生帳號</button>
        <button id="focus" type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_add_user_att_submit" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<div id="modal_add_user_att2" class="modal fade modal-overflow" tabindex="-1" data-focus-on="input:first" aria-hidden="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><?php echo app('translator')->get('messages.add_member'); ?></h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.account'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_user_username2" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.account'); ?>">
            </div>
        </div>
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.name'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_user_att_name2" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.name'); ?>">
            </div>
        </div>
        <div class="form-group">
            <label><?php echo app('translator')->get('messages.nickname'); ?></label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="nickname2" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.nickname'); ?>">
                <input id="input_user_groupid2" type="hidden" >
 				<input id="floor2" type="hidden" >
 				<input id="doorplate2" type="hidden" >
 				<input id="household2" type="hidden" >
            </div>
        </div>
		<div class="form-group">
            <label>手機號碼</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_phone_number2" type="text" class="form-control" placeholder="手機號碼">
            </div>
        </div>
        <div class="form-group">
            <label>卡號</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_card_no2" type="text" class="form-control" placeholder="卡號">
            </div>
        </div>
    </div>
    <div class="modal-footer">
    	<button id="auto_create2" type="button" class="btn red">產生帳號</button>
        <button id="focus" type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_add_user_att_submit2" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<div id="modal_add_tag" class="modal fade modal-overflow" tabindex="-1" data-focus-on="input:first" aria-hidden="false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">新增項目</h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label>關係</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_relationship" type="text" class="form-control" placeholder="關係">
            </div>
        </div>
        <div class="form-group">
            <label>類別</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input id="input_keeper_class" type="text" class="form-control" placeholder="類別">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="focus" type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_add_tag_submit" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<div id="modal_box_id" class="modal fade" tabindex="-1" data-focus-on="input:first" role="dialog" aria-hidden="true" >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><?php echo app('translator')->get('messages.enter_place_num'); ?></h4>
    </div>
    <div class="modal-body">
    	<div class="form-group">
            <div class="input-group input-group-lg">
                <input id="input_box_id" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.place_num'); ?>">
                <span class="input-group-btn">
                    <button id="btn_num_clear" class="btn grey" type="button"><?php echo app('translator')->get('messages.clean'); ?></button>
                </span>
            </div>
        </div>

        <div style="margin-top:15px;">
			<div class="">
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="1" style="width:30%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="2" style="width:30%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="3" style="width:30%; margin:5px;"> 3 </a>
            </div>
            <div class="">
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="4" style="width:30%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="5" style="width:30%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="6" style="width:30%; margin:5px;"> 6 </a>
            </div>
            <div class="">
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="7" style="width:30%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="8" style="width:30%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="9" style="width:30%; margin:5px;"> 9 </a>
            </div>
            <div class="">
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="-" style="width:30%; margin:5px;"> - </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="0" style="width:30%; margin:5px;"> 0 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num" num="_" style="width:30%; margin:5px;"> _ </a>
            </div>
		</div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_box_id_submit" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<div id="modal_box_id2" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="" id="modal_box_id2_content">
	</div>
</div>


<div id="modal_box_id3" class="modal fade" tabindex="-1" data-focus-on="input:first" role="dialog" aria-hidden="true" >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 id="h4_title_text" class="modal-title"> 請建立一組臨時性密碼</h4>
    </div>
    <div class="modal-body">
    	<div class="form-group">
            <div class="input-group input-group-lg">
                <input id="input_box_id3" type="text" class="form-control">
                <span class="input-group-btn">
                    <button id="btn_num_clear3" class="btn grey" type="button"><?php echo app('translator')->get('messages.clean'); ?></button>
                </span>
            </div>
        </div>

        <div style="margin-top:15px;"> 
			<div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="A" style="width:10%; margin:5px;"> A </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="B" style="width:10%; margin:5px;"> B </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="C" style="width:10%; margin:5px;"> C </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="D" style="width:10%; margin:5px;"> D </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="E" style="width:10%; margin:5px;"> E </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="F" style="width:10%; margin:5px;"> F </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="G" style="width:10%; margin:5px;"> G </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="H" style="width:10%; margin:5px;"> H </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="I" style="width:10%; margin:5px;"> I </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="J" style="width:10%; margin:5px;"> J </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="K" style="width:10%; margin:5px;"> K </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="L" style="width:10%; margin:5px;"> L </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="M" style="width:10%; margin:5px;"> M </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="N" style="width:10%; margin:5px;"> N </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="O" style="width:10%; margin:5px;"> O </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="P" style="width:10%; margin:5px;"> P </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="Q" style="width:10%; margin:5px;"> Q </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="R" style="width:10%; margin:5px;"> R </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="S" style="width:10%; margin:5px;"> S </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="T" style="width:10%; margin:5px;"> T </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="U" style="width:10%; margin:5px;"> U </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="V" style="width:10%; margin:5px;"> V </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="W" style="width:10%; margin:5px;"> W </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="X" style="width:10%; margin:5px;"> X </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="Y" style="width:10%; margin:5px;"> Y </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="Z" style="width:10%; margin:5px;"> Z </a>
            </div>
            <div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="1" style="width:10%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="2" style="width:10%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="3" style="width:10%; margin:5px;"> 3 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="4" style="width:10%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="5" style="width:10%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="6" style="width:10%; margin:5px;"> 6 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="7" style="width:10%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="8" style="width:10%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="9" style="width:10%; margin:5px;"> 9 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="0" style="width:10%; margin:5px;"> 0 </a>
            </div>
		</div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_box_id_submit3" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<div id="modal_box_id4" class="modal fade" tabindex="-1" data-focus-on="input:first" role="dialog" aria-hidden="true" >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">請輸入卡號</h4>
    </div>
    <div class="modal-body">
    	<div class="form-group">
            <div class="input-group input-group-lg">
                <input id="input_box_id4" type="text" class="form-control" placeholder="卡號" onkeyup="return ValidateNumber(this,value)">
                <span class="input-group-btn">
                    <button id="btn_num_clear4" class="btn grey" type="button"><?php echo app('translator')->get('messages.clean'); ?></button>
                </span>
            </div>
        </div>

        <div style="margin-top:15px;"> 
			<div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="A" style="width:10%; margin:5px;"> A </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="B" style="width:10%; margin:5px;"> B </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="C" style="width:10%; margin:5px;"> C </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="D" style="width:10%; margin:5px;"> D </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="E" style="width:10%; margin:5px;"> E </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="F" style="width:10%; margin:5px;"> F </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="G" style="width:10%; margin:5px;"> G </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="H" style="width:10%; margin:5px;"> H </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="I" style="width:10%; margin:5px;"> I </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="J" style="width:10%; margin:5px;"> J </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="K" style="width:10%; margin:5px;"> K </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="L" style="width:10%; margin:5px;"> L </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="M" style="width:10%; margin:5px;"> M </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="N" style="width:10%; margin:5px;"> N </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="O" style="width:10%; margin:5px;"> O </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="P" style="width:10%; margin:5px;"> P </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="Q" style="width:10%; margin:5px;"> Q </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="R" style="width:10%; margin:5px;"> R </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="S" style="width:10%; margin:5px;"> S </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="T" style="width:10%; margin:5px;"> T </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="U" style="width:10%; margin:5px;"> U </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="V" style="width:10%; margin:5px;"> V </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="W" style="width:10%; margin:5px;"> W </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="X" style="width:10%; margin:5px;"> X </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="Y" style="width:10%; margin:5px;"> Y </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="Z" style="width:10%; margin:5px;"> Z </a>
            </div>
            <div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="1" style="width:10%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="2" style="width:10%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="3" style="width:10%; margin:5px;"> 3 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="4" style="width:10%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="5" style="width:10%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="6" style="width:10%; margin:5px;"> 6 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="7" style="width:10%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="8" style="width:10%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="9" style="width:10%; margin:5px;"> 9 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="0" style="width:10%; margin:5px;"> 0 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="-" style="width:10%; margin:5px;"> - </a> 
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="+" style="width:10%; margin:5px;"> + </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num4" num="." style="width:10%; margin:5px;"> . </a>
            </div>
		</div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button id="btn_box_id_submit4" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>


<div id="modal_mail_detail" class="modal fade modal-overflow" tabindex="-1" aria-hidden="false" >
    
</div>
<input type="hidden" id="input_code2">

<div id="frame_sign_pad" style="display:none;">
	<canvas id="sign" style="position:fixed;  background-color: #ffffff; top:0; left:0;z-index:20000;"></canvas id="sign">
	
	<div style="position: fixed; bottom:10px; right:10px; z-index:20005;">
		<button id="btn_canvas_clear" type="button" class="btn red-sunglo btn-lg sbold"style="font-size:30px;"><?php echo app('translator')->get('messages.clean_clear'); ?></button>
		<button type="button" class="btn yellow-mint btn-lg sbold"style="font-size:30px;"  onclick="signpad.skip()"><?php echo app('translator')->get('messages.pass_sign'); ?></button>
		<button type="button" class="btn green-meadow btn-lg sbold"style="font-size:30px;" onclick="signpad.submit()"><?php echo app('translator')->get('messages.submit'); ?></button>
	</div>
</div>
<input type="hidden" id="uname">
<input type="hidden" id="username">
<input type="hidden" id="uname2">
<input type="hidden" id="username2">
<input type="hidden" id="guest_type">
<input type="hidden" id="delete">
<input type="hidden" id="img_name">
<input type="hidden" id="input_code_txt">
<!-- Modal Begin-->
	<div class="modal-dialog">
		<!-- Modal content Begin-->
		<div class="modal fade modal-content" id="camera" role="dialog">
			<div class="modal-header bg-purple-plum">
				<button id="focus" type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title font-white"><i class="fa fa-user"></i> 郵件快照</h4>
			</div>
			
			<div class="modal-body">
   				<div id="screen">
   					
   				</div>
   			</div>
   			
   		<div class="modal-footer">
    			<div id="buttons">
    				<div class="buttonPane">
        				<a id="shootButton" href="#" class="btn blue btn-md" style="padding-left: 4%;">拍照</a>
        			</div>
        			<div class="buttonPaneGroup" style="display: none;">
        				<a id="cancelButton" href="#" class="btn blue btn-md btn-default" style="width:48%;padding-right: 4%;">取消</a>
            		<a id="uploadButton" href="" class="btn green btn-md" style="width: 48%;">確認</a>
        			</div>
    			</div>
    		</div>
		</div>
		<!-- Modal content End-->
	</div>

	<?php $Setting = app('anlutro\LaravelSettings\SettingStore'); ?>
<!-- Modal End-->
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="<?php echo e(asset('assets/global/plugins/respond.min.js')); ?>"></script>
<script src="<?php echo e(asset('assets/global/plugins/excanvas.min.js')); ?>"></script> 
<![endif]-->
<script src="<?php echo e(asset('assets/global/plugins/jquery.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/jquery-migrate.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/lodash.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/jquery.tmpl.min.js')); ?>" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="<?php echo e(asset('assets/global/plugins/jquery-ui/jquery-ui.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap/js/bootstrap.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/jquery.blockui.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/jquery.cokie.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/uniform/jquery.uniform.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-sweetalert/bootstrap-sweetalert.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/state-machine.js')); ?>" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="<?php echo e(asset('assets/global/scripts/app.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/layouts/layout/scripts/layout.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/layouts/layout/scripts/demo.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/layouts/global/scripts/quick-sidebar.min.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/pages/scripts/tasks.js')); ?>" type="text/javascript"></script>
<script src="<?php echo e(asset('assets/global/plugins/bootstrap-toastr/toastr.min.js')); ?>" type="text/javascript" ></script>
<script src="<?php echo e(asset('assets/photo/webcam/webcam.js')); ?>" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script type="text/x-jquery-tmpl" id="mailTmpl">
<div class="col-md-6 mail-item" mailnum="${number}" uid="${user_id}" color="${color}">
    <div class="panel panel-default">
        <div class="panel-heading bg-${color} font-white">
            <h3 class="panel-title"><i class="fa fa-gift"></i><?php echo app('translator')->get('messages.get_date'); ?>：${guest_in_time}</h3>
        </div>
        <div class="panel-body">
        	<?php echo app('translator')->get('messages.keeper'); ?>：${guest_in_id} <br>
        	<?php echo app('translator')->get('messages.recipient'); ?>：${host} <br>
        	<?php echo app('translator')->get('messages.keep_placement'); ?>：${guest_locker} <br>
        	<span class="label label-default bg-green-seagreen">${number}</span>
        </div>
        <div class="panel-footer" style="${style}">
			<a href="javascript:;" class="btn blue btn-sm btn_mail_delete" id="${id}" style="width:48%;padding-right: 4%;">
                <i class="fa fa-remove"></i> <?php echo app('translator')->get('messages.took_away'); ?>
            </a>
        </div>
    </div>
</div>
</script>

<script type="text/x-jquery-tmpl" id="memberTmpl">
	<button class="btn grey-steel btn-block btn-lg btn_step1" series="${no}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl2">
	<button class="btn grey-steel btn-block btn-lg btn_step_household" series="${no}" series2="${no2}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl3">
	<button class="btn grey-steel btn-block btn-lg btn_step_family" series="${no}" series2="${no2}" series3="${no3}">${no3}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl_outside">
	<button class="btn grey-steel btn-block btn-lg btn_outside" series="外部">外部</button>
</script>

<script type="text/x-jquery-tmpl" id="memberTmpl4">
	<button class="btn grey-steel btn-block btn-lg btn_step2" series="${no}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl5">
	<button class="btn grey-steel btn-block btn-lg btn_step_household2" series="${no}" series2="${no2}">${no}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl6">
	<button class="btn grey-steel btn-block btn-lg btn_step_family2" series="${no}" series2="${no2}" series3="${no3}">${no3}</button>
</script>
<script type="text/x-jquery-tmpl" id="memberTmpl_outside2">
	<button class="btn grey-steel btn-block btn-lg btn_outside2" series="外部">外部</button>
</script>
    
<script type="text/x-jquery-tmpl" id="sourceTmpl">
	<button class="btn grey-steel btn-block btn-lg btn_step2" source="${mail_source}"><?php echo app('translator')->get('messages.outside_visitor'); ?></button>
</script>

<script type="text/x-jquery-tmpl" id="typeTmpl">
	<button class="btn grey-steel btn-block btn-lg btn_step3" type="<?php echo app('translator')->get('messages.health_card'); ?>"><?php echo app('translator')->get('messages.health_card'); ?></button>
	<button class="btn grey-steel btn-block btn-lg btn_step3" type="<?php echo app('translator')->get('messages.personal_id'); ?>"><?php echo app('translator')->get('messages.personal_id'); ?></button>
	<button class="btn grey-steel btn-block btn-lg btn_step3" type="<?php echo app('translator')->get('messages.drive_card'); ?>"><?php echo app('translator')->get('messages.drive_card'); ?></button>

</script>

<script type="text/x-jquery-tmpl" id="memberLv2Tmpl">
	<div class="col-md-12">
		<div class="portlet box blue-hoki">
            <div class="portlet-title">
                <div class="caption" uid="${code}">
                    <i class="fa fa-users"></i><?php echo app('translator')->get('messages.no_'); ?> ${family}<?php echo app('translator')->get('messages.family'); ?> <span style="font-size:12px">(${code})</span>
                </div>
                <div class="actions">
	                {{if pending != 0}}
	                <a href="javascript:;" class="btn red btn-sm">
	                	<?php echo app('translator')->get('messages.pending'); ?>:${pending}
	                </a>
	                {{/if}}
	                <a href="javascript:;" class="btn green btn-sm">
	                	<div class="caption" uid="${code}">
		                  <?php echo app('translator')->get('messages.family_all_send'); ?>
		                </div>
	                </a>
                	<a href="javascript:;" class="btn btn-default btn-sm btn_add_user_att" uid="${code}" series="${no}" series2="${no2}" series3="${no3}">
	                    <i class="fa fa-plus"></i> <?php echo app('translator')->get('messages.add_member'); ?> 
	                </a>
                </div>
            </div>
            <div class="portlet-body memberSelector"  style="cursor:pointer;">
            	<p><?php echo app('translator')->get('messages.ps4_liver'); ?></p>
            	<div class="memberAttBox" uid="${code}">
            		
            	</div>
            </div>
        </div>
    </div>
</script>

<script type="text/x-jquery-tmpl" id="memberLv2Tmpl2">
	<div class="col-md-12">
		<div class="portlet box blue-hoki">
            <div class="portlet-title">
                <div class="caption2" uid="${code}">
                    <i class="fa fa-users"></i>><?php echo app('translator')->get('messages.no_'); ?> ${family}<?php echo app('translator')->get('messages.family'); ?> <span style="font-size:12px">(${code})</span>
                </div>
                <div class="actions">
	                {{if pending != 0}}
	                <a href="javascript:;" class="btn red btn-sm">
	                	<?php echo app('translator')->get('messages.pending'); ?>:${pending}
	                </a>
	                {{/if}}
	                <a href="javascript:;" class="btn green btn-sm">
	                	<div class="caption2" uid="${code}" style="padding:0px;font-size:13px;line-height:1.5;">
		                  <?php echo app('translator')->get('messages.family_all_send'); ?>
		                </div>
	                </a>
                	<a href="javascript:;" class="btn btn-default btn-sm btn_add_user_att2" uid="${code}" series="${no}" series2="${no2}" series3="${no3}">
	                    <i class="fa fa-plus"></i> <?php echo app('translator')->get('messages.add_member'); ?> 
	                </a>
                </div>
            </div>
            <div class="portlet-body memberSelector"  style="cursor:pointer;">
            	<p><?php echo app('translator')->get('messages.ps4_liver'); ?></p>
            	<div class="memberAttBox" uid="${code}">
            		
            	</div>
            </div>
        </div>
    </div>
</script>




<script type="text/x-jquery-tmpl" id="memberAttTmpl">
	<span class="label label-success bg-blue-madison" style="margin:5px;display: inline-block;" uid="${id}" uname="${name}" username="${username}" >${username}/${name}(${nickname})</span>
</script>
<script type="text/x-jquery-tmpl" id="memberAttTmpl2">
	<span class="label label-success bg-blue-madison2" style="margin:5px;display: inline-block;" uid="${id}" uname="${name}" username="${username}" >${username}/${name}(${nickname})</span>
</script>

<script type="text/x-jquery-tmpl" id="mailDetail">
	<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><?php echo app('translator')->get('messages.mail_check'); ?></h4>
    </div>
    <div class="modal-body">
        <ul class="list-group">
        	<li class="list-group-item"><?php echo app('translator')->get('messages.liver'); ?> ${user_name}(${user_username})</li>
        	<li class="list-group-item"><?php echo app('translator')->get('messages.place_num'); ?> <span class="label label-info">${box_id}</span></li>
            <li class="list-group-item"><?php echo app('translator')->get('messages.mail_num'); ?> ${mailnumber}</li>
            <li class="list-group-item"><?php echo app('translator')->get('messages.mail_from'); ?> ${mail_source}</li>
            <li class="list-group-item"><?php echo app('translator')->get('messages.mail_type'); ?> ${mailtype}</li>
            <li class="list-group-item"><?php echo app('translator')->get('messages.mail_send_date'); ?> ${mailsenddate}</li>
			{{if mailstate == 0}}
			<li class="list-group-item"><?php echo app('translator')->get('messages.handle_ing'); ?> <span class="label label-warning"><?php echo app('translator')->get('messages.mail_yet'); ?></span></li>
			{{/if}}
            {{if mailstate == 1}}
			<li class="list-group-item"><?php echo app('translator')->get('messages.handle_ing'); ?> <span class="label label-success"><?php echo app('translator')->get('messages.mail_got'); ?></span></li>
			<li class="list-group-item"><?php echo app('translator')->get('messages.mail_get_date'); ?> ${mailgetdate}</li>
			{{/if}}
        </ul>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
    </div>
</script>

<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;
		}
	}
});
//========================================================================
//    建立狀態機 - 操作<?php echo app('translator')->get('messages.step'); ?>State
//========================================================================
var state = StateMachine.create({
	initial: 'step1',
	events: [
		{ name: 'selectuser', from: ['step1','registering'], to: 'step2'},
		{ name: 'register' , from: ['registering','step2'], to: 'step1'},
		{ name: 'nextuser' , from: 'step2' , to: 'registering'},
		{ name: 'getpending' , from: 'step1', to:'pending'},
		{ name: 'pickup' , from: 'pending' , to:'step1'},
		{ name: 'cancel' , from: ['step2','registering','pending'] , to: 'step1'},
	],
	callbacks : {
		onstep1 : function(event,from,to){
			$('#btn_rec').hide();
			$('#btn_pickup').hide();
			$('#btn_pending').show();
			$('#btn_next_member').hide();
			$('#btn_backmail').show();
			$('#btn_cancel').hide();
			//清空mailBox
			$('#mailBox').empty();
		},
		onstep2 : function(event,from,to){
			$('#btn_rec').show();
			$('#btn_pickup').hide();
			$('#btn_pending').hide();
			$('#btn_next_member').show();
			$('#btn_backmail').hide();
			$('#btn_cancel').show();
		},
		onregistering : function(event,from,to){
			$('#btn_rec').show();
			$('#btn_pickup').hide();
			$('#btn_pending').hide();
			$('#btn_next_member').hide();
			$('#btn_backmail').hide();
			$('#btn_cancel').show();
		},
		onpending : function(event,from,to){
			$('#btn_rec').hide();
			$('#btn_pickup').show();
			$('#btn_pending').hide();
			$('#btn_next_member').hide();
			$('#btn_backmail').hide();
			$('#btn_cancel').show();
		},

		//Event
		onnextuser: function(event,from,to){
			clearAll();
			$('#frame_member2').hide();
			$('#frame_quick2').hide();
			$('#frame_household2').hide();
			$('#frame_member').show();
			$('#frame_quick').show();
			$('#frame_household').show();
		},
		onselectuser: function(event,from,to){
			$('#frame_member').hide();
			$('#frame_quick').hide();
			$('#frame_household').hide();
			$('#frame_member2').show();
			$('#frame_quick2').show();
			$('#frame_household2').show();
		},
		onregister: function(event,from,to){
			clearAll();
			$('#frame_member2').hide();
			$('#frame_quick2').hide();
			$('#frame_household2').hide();
			$('#frame_member').show();
			$('#frame_quick').show();
			$('#frame_household').show();
		},
		oncancel: function(event,from,to){
			clearAll();
			mailList = new Array;
			pickList = new Array;
			$('#disp_mail_num').val('0');
			$('#frame_member2').hide();
			$('#frame_quick2').hide();
			$('#frame_household2').hide();

			$('#frame_member').show();
			$('#frame_quick').show();
			$('#frame_household').show();
		},
		onpickup: function(event,from,to){
			clearAll();
			mailList = new Array;
			pickList = new Array;
			$('#disp_mail_num').val('0');
			getMember();
		},
	}
});

//========================================================================
//    建立狀態機 - 簽名板SignPad
//========================================================================
var signpad = StateMachine.create({
	initial: 'hide',
	events: [
		{ 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;
		},
		onsubmit : function(event,from,to){
			uploadSign();
		},
        onskip: function(event,form,to) {
            var canvas = $('#sign');//canvas物件
	        var ctx    = canvas[0].getContext("2d"); 
            
            ctx.clearRect(0, 0, canvas.width(), canvas.height());
            uploadSign();
        }
	}
});



//========================================================================
//    Init Set
//========================================================================
$(document).ready(function($) {  
	$("h2").removeClass();
	$(window).load(function(){
		$('#preloader').fadeOut('slow',function(){$(this).remove();});
	});
});

// Focus on load
 $('#input_code').focus();
 /*
 // Force focus
 $('#input_code').focusout(function(){
 	if(inputFocus == 'code'){
		$('#input_code').focus();
 	}
 });
 */

//========================================================================
//    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());
    });
});





//========================================================================
//  下一位住戶
//========================================================================
$(document).on('click','#btn_next_member',function(){
	state.nextuser();
});

//========================================================================
//  取消動作
//========================================================================
$(document).on('click','#btn_cancel',function(){
	$('#input_code').attr('readonly',false);
	state.cancel();
});


//========================================================================
//    全面快取變數初始化
//========================================================================
var clearAll = function(){
	$('#input_code').val('');
	$('#disp_username').val('');
	$('#disp_box_id').val('');
	data = {};
	$('#disp_step2').html(null);
	$('#disp_step3').html(null);
	$('.btn_step2').removeClass('red-intense');
	$('.btn_step2').addClass('grey-steel');
	$('.btn_step3').removeClass('green-sharp');
	$('.btn_step3').addClass('grey-steel');
};

//========================================================================
//    初始化會員選單
//========================================================================
var getMember = function(){
	$("#memberBox").empty();
	$("#memberHouseholdBox").empty();
	$("#memberQuickBox").empty();
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {	
			mode : 'getDoorplate'
		},
		success : function(result){
             $("#memberTmpl_outside").tmpl().appendTo("#memberBox");
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.doorplate};
	        	$("#memberTmpl").tmpl(tmplData).appendTo("#memberBox");
	        });
		},
		error : function(result){

		}
	});
}

var getMember2 = function(){
	$("#memberBox2").empty();
	$("#memberHouseholdBox2").empty();
	$("#memberQuickBox2").empty();
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {	
			mode : 'getDoorplate'
		},
		success : function(result){
            $("#memberTmpl_outside2").tmpl().appendTo("#memberBox2");
            _.each(result, function(item) {
	        	var tmplData = {'no' : item.doorplate};
	        	$("#memberTmpl4").tmpl(tmplData).appendTo("#memberBox2");
	        });
		},
		error : function(result){

		}
	});
}
//========================================================================
//    初始化來源選單
//========================================================================
var getSource = function(){
	$('#sourceBox').empty();
	$("#sourceTmpl").tmpl("").appendTo("#sourceBox");
}

//========================================================================
//    初始化類別選單
//========================================================================
var getType = function(){
	$('#typeBox').empty();
	$("#typeTmpl").tmpl("").appendTo("#typeBox");
	        
}

$(document).on('click','.btn_step3',function(){
	$("#guest_type").val($(this).attr('type'));
	$('#modal_box_id').modal('show');
});

//========================================================================
//    Click4 選擇住戶家庭
//========================================================================
$(document).on('click','.btn_step_family',function(){
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	var household = $(this).attr('series3');
	var GroupFamily;
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getFamily3',
			floor : floor,
			doorplate : doorplate,
			household : household,
		},
		success : function(result){
		$('#memberLv2Box').empty();
			_.each(result , function(item) {
				item.no=floor;
				item.no2=doorplate;
				item.no3=household;
				$('#memberLv2Tmpl').tmpl(item).appendTo('#memberLv2Box');
				if(item.atts != undefined){
					_.each(item.atts , function(item2) {
					$('#memberAttTmpl').tmpl(item2).appendTo('.memberAttBox[uid="'+item.code+'"]');
					GroupFamily=GroupFamily+","+item2.username;
					});
				}
			});
		},
		error : function(result){

		}
	});
	$('#modal_member_lv2').modal('show');
});

$(document).on('click','.btn_step_family2',function(){
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	var household = $(this).attr('series3');
	var GroupFamily;
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getFamily',
			floor : floor,
			doorplate : doorplate,
			household : household,
		},
		success : function(result){
		$('#memberLv2Box').empty();
			_.each(result , function(item) {
				 item.no=floor;
				 item.no2=doorplate;
				 item.no3=household;
				 item.pending=result.pending;
				$('#memberLv2Tmpl2').tmpl(item).appendTo('#memberLv2Box');
				if(item.atts != undefined){
					_.each(item.atts , function(item2) {
					$('#memberAttTmpl2').tmpl(item2).appendTo('.memberAttBox[uid="'+item.code+'"]');
					GroupFamily=GroupFamily+","+item2.username;
					});
				}
			});
		},
		error : function(result){

		}
	});
	$('#modal_member_lv2').modal('show');
});

//========================================================================
//    Click3 選擇住戶幾室
//========================================================================
$(document).on('click','.btn_step_household',function(){	
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getHousehold',
			floor : floor,
			doorplate : doorplate,
		},
		success : function(result){
			$("#memberHouseholdBox").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate,'no3' : item.household};
	        	$("#memberTmpl3").tmpl(tmplData).appendTo("#memberHouseholdBox");
	        });
		},
		error : function(result){

		}
	});
});

$(document).on('click','.btn_step_household2',function(){	
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getHousehold',
			floor : floor,
			doorplate : doorplate,
		},
		success : function(result){
			$("#memberHouseholdBox2").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate,'no3' : item.household};
	        	$("#memberTmpl6").tmpl(tmplData).appendTo("#memberHouseholdBox2");
	        });
		},
		error : function(result){

		}
	});
});
//========================================================================
//    Click1 選擇住戶樓層
//========================================================================
$(document).on('click','.btn_step1',function(){
	var doorplate=$(this).attr('series');
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getFloor',
			doorplate : doorplate
		},
		success : function(result){
			$("#memberQuickBox").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate};
	        	$("#memberTmpl2").tmpl(tmplData).appendTo("#memberQuickBox");
	        });
		},
		error : function(result){

		}
	});
});

$(document).on('click','.btn_step2',function(){
	var doorplate=$(this).attr('series');
	$.ajax({
		type : 'GET',
		url : '<?php echo e(action('Manage\MailController@getData')); ?>',
		dataType: 'json',
		data : {
			mode : 'getFloor',
			doorplate : doorplate
		},
		success : function(result){
			$("#memberQuickBox2").empty();	
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.floor,'no2' : item.doorplate};
	        	$("#memberTmpl5").tmpl(tmplData).appendTo("#memberQuickBox2");
	        });
		},
		error : function(result){

		}
	});
});

$(document).on('click','.btn_outside',function(){
	$('#uname').val('外部');
	$('#username').val('外部');
    getMember2();
    state.selectuser();
});
    
$(document).on('click','.btn_outside2',function(){
	$('#uname2').val('外部');
	$('#username2').val('外部');
	$('#modal_box_id').modal('show');
	$('#input_box_id').val('');
	$('#input_box_id3').val('');
	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('KeeperController@getBoxID')); ?>',
		dataType: 'json',
		data:{
			user_id : ""
		},
    	success:function(sendback){
    		$('#input_box_id').val(sendback.boxID);
    	},
    	error:function(sendback){
    	}
	});
});
    
$(document).on('click','#btn_box_id_submit',function(){
	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('KeeperController@checkBoxID')); ?>',
		dataType: 'json',
		data:{
			boxid : $('#input_box_id').val(),
			user_id : $('#username2').val()
		},
    	success:function(sendback){
    		if(sendback.checkboxid == "success"){
    			$.ajax({
					type : 'POST',
					url: '<?php echo e(action('KeeperController@keepers_tags_view')); ?>',
					data : {
					},
					success : function(sendback){
						$('#modal_box_id').modal('toggle');
						$('#modal_box_id2_content').html(sendback);
						$('#modal_box_id2').modal('show');
						$('#txt_relationships').val('');
						$('#txt_keeper_classs').val('');
						$('#txt_keeper_cost').val(0);
					}
				});
    		}else{
    			toastr['error']('您選擇的位置，目前有其他物品');
    		}
    	},
    	error:function(sendback){
    		
    	}
	});
});

$(document).on('click','#btn_box_id_submit2',function(){

	if($('#txt_relationships').val() == ""){
		toastr['error']('請選擇與收件人的關係');
	}else if($('#txt_keeper_classs').val() == ""){
		toastr['error']('請選擇物品的類別');
	}else{
		if($('#username2').val() != "外部"){
			$("#h4_title_text").text("請輸入寄物人手機號碼");
			$("#input_box_id3").attr("placeholder", "例如 0912123123");
		}else{
			$("#h4_title_text").text("請建立一組臨時性密碼");
			$("#input_box_id3").attr("placeholder", "建議輸入手機號碼較不容易忘記");
		}
		$('#modal_box_id2').modal('toggle');
		$('#modal_box_id3').modal('show');
		$('#input_box_id3').val('');
	}
});

$(document).on('click','#btn_box_id_submit3',function(){
	if($('#input_box_id3').val() == ""){
		if($('#username2').val() != "外部"){
			toastr['error']('手機號碼請勿空白');
		}else{
			toastr['error']('密碼請勿空白');
		}
	}else if ($('#input_box_id3').val().length < 4){
		if($('#username2').val() != "外部"){
			toastr['error']('請確定您手機號碼是否輸入錯誤');
		}else{
			toastr['error']('密碼請輸入四位數以上');
		}
	}else{
		$.ajax({
			type : 'GET',
			url: '<?php echo e(action('ConsoleController@CheckPassword')); ?>',
			dataType: 'json',
			data:{
				pwnumber : $('#input_box_id3').val()
			},
			success : function(sendback){
				if(sendback.checkpw == "success"){
					$('#modal_member_lv2').modal('hide');
					$('#modal_box_id3').modal('toggle');
					signpad.open();
				}else{
					if($('#username2').val() != "外部"){
						toastr['error']('目前此手機號碼有人使用中');
					}else{
						toastr['error']('目前此密碼有人使用中');
					}
				}
			},
			error : function(sendback){

			}
		});
	}
});

$(document).on('click','#btn_input_code',function(){
	$('#modal_box_id4').modal('show');
});

$(document).on('keypress','#input_box_id4',function(){
	$('#input_code').val($('#input_box_id4').val());
	$('#input_code').attr('readonly',true);
	inputFocus = 'none';
	var code = $('#input_code').val();
	if(code != ''){
		$.ajax({
			type : 'GET',
			url: '<?php echo e(action('KeeperController@getKeeper')); ?>',
			dataType: 'json',
			data:{
				type:"checkCode",
				code : code
			},
			success : function(sendback){
				state.getpending();
				var color = diffColor();
				$('#mailBox').empty();
				_.each(sendback , function(item){
					item['color'] = 'green';
					$("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
				});
				inputFocus = 'code';
				$('#input_code').attr('readonly',false);
			},
			error : function(sendback){
				console.log('checkCode Error');
				inputFocus = 'code';
				$('#input_code').attr('readonly',false);
			}
		});
	}else{
		toastr['error']('<?php echo app('translator')->get('messages.dont_check_block_value'); ?>');
		inputFocus = 'code';
		$('#input_code').attr('readonly',false);
	}
	$('#input_code').val('');
	$('#input_box_id4').val('');
	$('#modal_box_id4').modal('hide');
});

$(document).on('click','#btn_box_id_submit4',function(){
	$('#input_code').val($('#input_box_id4').val());
	$('#input_code').attr('readonly',true);
	inputFocus = 'none';
	var code = $('#input_code').val();
	if(code != ''){
		$.ajax({
			type : 'GET',
			url: '<?php echo e(action('KeeperController@getKeeper')); ?>',
			dataType: 'json',
			data:{
				type:"checkCode",
				code : code
			},
			success : function(sendback){
				state.getpending();
				var color = diffColor();
				$('#mailBox').empty();
				_.each(sendback , function(item){
					item['color'] = 'green';
					$("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
				});
				inputFocus = 'code';
				$('#input_code').attr('readonly',false);
			},
			error : function(sendback){
				console.log('checkCode Error');
				inputFocus = 'code';
				$('#input_code').attr('readonly',false);
			}
		});
	}else{
		toastr['error']('<?php echo app('translator')->get('messages.dont_check_block_value'); ?>');
		inputFocus = 'code';
		$('#input_code').attr('readonly',false);
	}
	$('#input_code').val('');
	$('#input_box_id4').val('');
	$('#modal_box_id4').modal('hide');
});

$(document).on('click','.bg-blue-madison',function(){
	getMember2();
	$('#uname').val($(this).attr('uname'));
	$('#username').val($(this).attr('username'));
	$('#modal_member_lv2').modal('hide');
	state.selectuser();
});

$(document).on('click','.caption',function(){
	getMember2();
	$('#uname').val($(this).attr('uid'));
	$('#username').val($(this).attr('uid'));
	$('#modal_member_lv2').modal('hide');
	state.selectuser();
});

$(document).on('click','.bg-blue-madison2',function(){
	$('#input_box_id').val('');
	var user_id = $(this).attr('username');
	$('#uname2').val($(this).attr('uname'));
	$('#username2').val($(this).attr('username'));
	$('#modal_box_id').modal('show');
	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('KeeperController@getBoxID')); ?>',
		dataType: 'json',
		data:{
			user_id : user_id
		},
    	success:function(sendback){
    		$('#input_box_id').val(sendback.boxID);
    	},
    	error:function(sendback){
    	}
	});
});

$(document).on('click','.caption2',function(){
	$('#input_box_id').val('');
	$('#uname2').val($(this).attr('uid'));
	$('#username2').val($(this).attr('uid'));
	$('#modal_box_id').modal('show');
	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('KeeperController@getBoxID')); ?>',
		dataType: 'json',
		data:{
		},
    	success:function(sendback){
    		$('#input_box_id').val(sendback.boxID);
    	},
    	error:function(sendback){
    	}
	});
});

//========================================================================
//    Click2 選擇來源
//========================================================================
$(document).on('click','.btn_step2',function(){
	var source = $(this).attr('source');
	data.source = source;
	$('#disp_step2').html(source);
	$('.btn_step2').removeClass('red-intense');
	$('.btn_step2').addClass('grey-steel');
	$(this).removeClass('grey-steel');
	$(this).addClass('red-intense');
});

//========================================================================
//    Click3 選擇類別
//========================================================================
$(document).on('click','.btn_step3',function(){
	var type = $(this).attr('type');
	data.type = type;
	$('#disp_step3').html(type);
	$('.btn_step3').removeClass('green-sharp');
	$('.btn_step3').addClass('grey-steel');
	$(this).removeClass('grey-steel');
	$(this).addClass('green-sharp');
});

//========================================================================
//    輸入信件條碼
//========================================================================
$("#input_code").keypress(function(e){
	code = (e.keyCode ? e.keyCode : e.which);
	if (code == 13){
		if($(this).val().length < 4){
			toastr['error']('請輸入至少四位數在進行查詢');
		}else{    
			$('#input_code').attr('readonly',true);
			inputFocus = 'none';
			var code = $(this).val();
			$('#input_code_txt').val(code);
			if(code != ''){
				$.ajax({
					type : 'GET',
					url: '<?php echo e(action('KeeperController@getKeeper')); ?>',
					dataType: 'json',
					data:{
						type:"checkCode",
						code : code
					},
					success : function(sendback){
						state.getpending();
						var color = diffColor();
						$('#mailBox').empty();
						_.each(sendback , function(item){
							item['color'] = 'green';
							$("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
						});
						inputFocus = 'code';
						$('#input_code').attr('readonly',false);
					},
					error : function(sendback){
						console.log('checkCode Error');
						inputFocus = 'code';
						$('#input_code').attr('readonly',false);
					}
				});
			}else{
				toastr['error']('<?php echo app('translator')->get('messages.dont_check_block_value'); ?>');
				inputFocus = 'code';
						$('#input_code').attr('readonly',false);
			}
			$(this).val('');
		}
	}
});

$(document).on('click','#btn_pending',function(){
	$.ajax({
		type : 'GET',
		url: '<?php echo e(action('KeeperController@putKeeper_rfid')); ?>',
		dataType: 'json',
		data:{
			code : "check"
		},
		success : function(sendback){
			state.getpending();
			var color = diffColor();
			$('#mailBox').empty();
			_.each(sendback , function(item){
				item['color'] = 'red';
				item['type'] = '';
				$("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
			});
			inputFocus = 'code';
			$('#input_code').attr('readonly',false);
		},
		error : function(sendback){
			console.log('checkCode Error');
			inputFocus = 'code';
			$('#input_code').attr('readonly',false);
		}
	});
});


$(document).on('click','#btn_backmail',function(){
	$.ajax({
		type : 'GET',
		url: '<?php echo e(action('KeeperController@putKeeper_rfid')); ?>',
		dataType: 'json',
		data:{
			code : "check2"
		},
		success : function(sendback){
			state.getpending();
			var color = diffColor();
			$('#mailBox').empty();
			_.each(sendback , function(item){
				item['color'] = 'green';
				item['style'] = 'display: none;';
				$("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
			});
			inputFocus = 'code';
			$('#input_code').attr('readonly',false);
		},
		error : function(sendback){
			console.log('checkCode Error');
			inputFocus = 'code';
			$('#input_code').attr('readonly',false);
		}
	});
});
//========================================================================
//    收件處理
//========================================================================
$(document).on('click','#btn_rec',function(){
	if(mailList.length <= 0){
		swal({
			title : '<?php echo app('translator')->get('messages.no_mail'); ?>',
			text : '<?php echo app('translator')->get('messages.selct_first_then_take'); ?>',
			type : 'error',
			cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
			closeOnCancel: false,
			allowOutsideClick: true
		});
	}else{
		swal({
			title: "<?php echo app('translator')->get('messages.check_got_mail'); ?>?",
			text: "<?php echo app('translator')->get('messages.got_mail_login_database'); ?>",
			type: "info",
			cancelButtonText: "<?php echo app('translator')->get('messages.cancel'); ?>",
			confirmButtonText: "<?php echo app('translator')->get('messages.check_got_mail'); ?>",
			showCancelButton: true,
			closeOnConfirm: false,
			showLoaderOnConfirm: true,
		},function(){
			$.ajax({
				type: 'POST',
				url: '<?php echo e(action('Manage\MailController@mailAction')); ?>',
				dataType: 'json',
				data: {
					mode: 'storeMail',
					_token: '<?php echo e(csrf_token()); ?>',
					data: JSON.stringify(mailList)
				},
				success : function(sendback){
					mailList = new Array;
					state.register();
					$('#disp_mail_num').val(mailList.length);
					getMember();
					swal({
						title : '<?php echo app('translator')->get('messages.success'); ?>',
						text : '<?php echo app('translator')->get('messages.this_got_mail_s'); ?>'+sendback.count+'<?php echo app('translator')->get('messages.mail_mails'); ?>',
						type : 'success',
						cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
						closeOnCancel: false,
						allowOutsideClick: true
					});
					console.log(mailList);
				},
				error : function(sendback){
					swal({
						title : '<?php echo app('translator')->get('messages.fail_write_in'); ?>',
						text : '<?php echo app('translator')->get('messages.trouble_write_in_fail'); ?>',
						type : 'error',
						cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
						closeOnCancel: false,
						allowOutsideClick: true
					});
				}
			});
		});
	}
});

//========================================================================
//    取件處理
//========================================================================
$(document).on('click','#btn_pickup',function(){
	if(pickList.length == 0){
		toastr['error']('<?php echo app('translator')->get('messages.now_no_mail'); ?>');
	}else{
		_.each(pickList,function(item){
			console.log(item);
		});

		swal({
			html: true,
			title: "<?php echo app('translator')->get('messages.check_take_mail'); ?>?",
			text: '<?php echo app('translator')->get('messages.check_mail_en_user'); ?><?php echo app('translator')->get('messages.user'); ?>:'+pickList[0].user+' ，<?php echo app('translator')->get('messages.total'); ?> '+pickList.length+' <?php echo app('translator')->get('messages.item_mail'); ?>',
			type: "info",
			cancelButtonText: "<?php echo app('translator')->get('messages.cancel'); ?>",
			confirmButtonText: "<?php echo app('translator')->get('messages.check_take_mail'); ?>",
			showCancelButton: true,
			closeOnConfirm: true,
			showLoaderOnConfirm: true,
		},function(){
			signpad.open();
		});
	}
});


//========================================================================
//    渲染信件Item RenderMail
//========================================================================
var renderMail = function (){
	var hasOld = false;

	$('.mail-item').each(function(){
		if($(this).attr('uid') == data.user_id){
			data.color = $(this).attr('color');
			var elem = $("#mailTmpl").tmpl(data).fadeIn().insertBefore($(this));
			hasOld = true;
			return false;
		}
	});
	if(hasOld == false){
		data.color = diffColor();
		$("#mailTmpl").tmpl(data).prependTo($('#mailBox'));
	}
	$('#disp_mail_num').val(mailList.length);
}

//========================================================================
//    新增住戶成員
//========================================================================
$(document).on('click','.btn_add_user_att',function(){
	var groupid = $(this).attr('uid');
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	var household = $(this).attr('series3');
	inputFocus="node";
	$('#input_user_groupid').val(groupid);
	$('#floor').val(floor);
	$('#doorplate').val(doorplate);
	$('#household').val(household);
	$('#modal_add_user_att').modal('show');
	$('#input_user_username').val('');
	$('#input_card_no').val('');
	$('#input_user_username').attr('readonly',false);
	$('#input_card_no').attr('readonly',false);
});
$(document).on('click','#focus',function(){
	$('#input_code').focus();
});

$(document).on('click','.btn_add_user_att2',function(){
	var groupid = $(this).attr('uid');
	var floor = $(this).attr('series');
	var doorplate = $(this).attr('series2');
	var household = $(this).attr('series3');
	inputFocus="node";
	$('#input_user_groupid2').val(groupid);
	$('#floor2').val(floor);
	$('#doorplate2').val(doorplate);
	$('#household2').val(household);
	$('#modal_add_user_att2').modal('show');
	$('#input_user_username2').val('');
	$('#input_card_no2').val('');
	$('#input_user_username2').attr('readonly',false);
	$('#input_card_no2').attr('readonly',false);
});

$(document).on('click','#btn_add_user_att_submit',function(){
	$.ajax({
		type : 'POST',
		dataType: 'json',
		url: "<?php echo e(route('manage::user::addUserAndCard')); ?>",
		data : {
			_token : '<?php echo e(csrf_token()); ?>',
			username : $('#input_user_username').val(),
			name : $('#input_user_att_name').val(),
			password : 123456,
			groupid :$('#input_user_groupid').val(),
            nickname :$('#nickname').val(),
			mobile :$('#input_phone_number').val(),
			card_no :$('#input_card_no').val()
		},
		success : function(sendback){
			toastr['success']('<?php echo app('translator')->get('messages.success'); ?>');
			var item2 = {};
			item2['user_id'] = $('#input_user_username').val();
			item2['name'] = $('#input_user_att_name').val();
			$('#memberAttTmpl').tmpl(item2).appendTo('.memberAttBox[uid="'+item2['user_id']+'"]');
			$('#input_user_att_name').val('');
			$('#input_user_username').val('');
			$('#nickname').val('');
			$('#input_phone_number').val('');
			$('#input_card_no').val('');
			$('#modal_add_user_att').modal('hide');
			$('.memberAttBox').empty();
			$('#input_user_username').attr('readonly',false);
			$('#input_card_no').attr('readonly',false);
			$.ajax({
				type : 'GET',
				url : '<?php echo e(action('Manage\MailController@getData')); ?>',
				dataType: 'json',
				data : {
					mode : 'getFamily',
					floor : $('#floor').val(),
					doorplate : $('#doorplate').val(),
					household : $('#household').val(),
				},
				success : function(result){
					_.each(result , function(item) {
						if(item.atts != undefined){
							_.each(item.atts , function(item2) {
							$('#memberAttTmpl').tmpl(item2).appendTo('.memberAttBox[uid="'+item.code+'"]');
							});
						}
					});
				},
				error : function(result){

				}
			});
		},

		error : function(sendback){
			var result = JSON.parse(sendback['responseText']);
			if (result['errors']['name']){
				toastr['error'](result['errors']['name']);
			}
			if (result['errors']['username']){
				toastr['error'](result['errors']['username']);	
			}
			
			
		}
	});
});

$(document).on('click','#btn_add_user_att_submit2',function(){
	$.ajax({
		type : 'POST',
		dataType: 'json',
		url: "<?php echo e(route('manage::user::addUserAndCard')); ?>",
		data : {
			_token : '<?php echo e(csrf_token()); ?>',
			username : $('#input_user_username2').val(),
			name : $('#input_user_att_name2').val(),
			password : 123456,
			groupid :$('#input_user_groupid2').val(),
            nickname :$('#nickname2').val(),
			mobile :$('#input_phone_number2').val(),
			card_no :$('#input_card_no2').val()
		},
		success : function(sendback){
			toastr['success']('<?php echo app('translator')->get('messages.success'); ?>');
			var item2 = {};
			item2['user_id'] = $('#input_user_username2').val();
			item2['name'] = $('#input_user_att_name2').val();
			$('#memberAttTmpl2').tmpl(item2).appendTo('.memberAttBox[uid="'+item2['user_id']+'"]');
			$('#input_user_att_name2').val('');
			$('#input_user_username2').val('');
			$('#nickname2').val('');
			$('#input_phone_number2').val('');
			$('#input_card_no2').val('');
			$('#modal_add_user_att2').modal('hide');
			$('.memberAttBox2').empty();
			$('#input_user_username2').attr('readonly',false);
			$('#input_card_no2').attr('readonly',false);
			$.ajax({
				type : 'GET',
				url : '<?php echo e(action('Manage\MailController@getData')); ?>',
				dataType: 'json',
				data : {
					mode : 'getFamily',
					floor : $('#floor2').val(),
					doorplate : $('#doorplate2').val(),
					household : $('#household2').val(),
				},
				success : function(result){
					_.each(result , function(item) {
						if(item.atts != undefined){
							_.each(item.atts , function(item2) {
							$('#memberAttTmpl2').tmpl(item2).appendTo('.memberAttBox[uid="'+item.code+'"]');
							});
						}
					});
				},
				error : function(result){

				}
			});
		},

		error : function(sendback){
			var result = JSON.parse(sendback['responseText']);
			if (result['errors']['name']){
				toastr['error'](result['errors']['name']);
			}
			if (result['errors']['username']){
				toastr['error'](result['errors']['username']);	
			}
			
			
		}
	});
});
//========================================================================
//    處理信件顏色渲染
//========================================================================
var colorList = [
	'blue-dark',
	'green-seagreen',
	'yellow-casablanca',
	'purple-wisteria'
];

var colorInt = 0;

var diffColor = function(){
	var color = colorList[colorInt];
	colorInt ++;
	if(colorInt > 3){
		colorInt = 0 ;
	}
	return color;
}


//========================================================================
//    處理信件閘內刪除的觸發
//========================================================================
$(document).on('click','.btn_mail_delete',function(){
	
	if($('.btn_mail_delete').attr('host')=='外部'){
		console.log('這是外部收');
	}
	signpad.open();
	$("#delete").val($(this).attr('id'));
});


//========================================================================
//    處理Box_id 的鍵盤事件
//========================================================================
$(document).on('click','.keyboard-num',function(){
	var $this = $(this),
		character = $this.attr('num');
    
    $('#input_box_id').val($('#input_box_id').val() + character);
});

$(document).on('click','#btn_num_clear',function(){
    $('#input_box_id').val('');
});

$(document).on('click','.keyboard-num3',function(){
	var $this = $(this),
		character = $this.attr('num');
    
    $('#input_box_id3').val($('#input_box_id3').val() + character);
});

$(document).on('click','#btn_num_clear3',function(){
    $('#input_box_id3').val('');
});

$(document).on('click','.keyboard-num4',function(){
	var $this = $(this),
		character = $this.attr('num');
    
    $('#input_box_id4').val($('#input_box_id4').val() + character);
});

$(document).on('click','#btn_num_clear4',function(){
    $('#input_box_id4').val('');
});

$(document).on('click','.btn_relationships',function(){
	var relationships = document.getElementById("txt_relationships");
	relationships.value = $(this).attr('value');
});

$(document).on('click','.btn_keeper_classs',function(){
	var keeperclass = document.getElementById("txt_keeper_classs");
	keeperclass.value = $(this).attr('value');
});

$(document).on('click','#btn_add_tags',function(){
	$('#modal_box_id2').modal('toggle');
	$('#modal_add_tag').modal('show');
	$('#input_relationship').val('');
	$('#input_keeper_class').val('');
});

$(document).on('click','#btn_add_tag_submit',function(){

	$.ajax({
		type : 'POST',
		url  : '<?php echo e(action('KeeperController@console_updateType')); ?>',
		dataType: 'json',
		data:{
			input_relationship : $('#input_relationship').val(),
			input_keeper_class : $('#input_keeper_class').val()
		},
		success : function(sendback){
			toastr['success']("新增成功");
			$.ajax({
				type : 'POST',
				url: '<?php echo e(action('KeeperController@keepers_tags_view')); ?>',
				data : {
				},
				success : function(sendback){
					$('#modal_add_tag').modal('toggle');
					$('#modal_box_id2_content').html(sendback);
					$('#modal_box_id2').modal('show');
					$('#txt_relationships').val('');
					$('#txt_keeper_classs').val('');
					$('#txt_keeper_cost').val(0);
				}
			});
		},
		error : function(sendback){
		}
	});
});


//========================================================================
//    手繪板處理
//========================================================================
$(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 ValidateNumber(e, pnumber)
{
    if (!/^[\w-+.]+$/.test(pnumber))
    {
        e.value = /^[\w-+.]+/.exec(e.value);
    }
    return false;
}
//========================================================================
//    上傳簽名檔
//========================================================================
function uploadSign() {
    // Generate the image data
    var Pic = document.getElementById("sign").toDataURL("image/png");
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
    <?php if($Setting->get('manage.keeper_cost.display') == 'on'): ?>
    	if($('#txt_keeper_cost').val() == ''){
    		$('#txt_keeper_cost').val('0');
    	}
    var cost = "\n"+"寄放金額：" + $('#txt_keeper_cost').val();
    <?php else: ?>
    var cost = "";
    <?php endif; ?>
    // Sending the image data to Server
    if($('#delete').val()==""){
    	if($('#username2').val() != "外部"){
			swal({
			  title: "請確定下列資料",
			  text: "寄件者："+$('#uname').val()+"\n"+"收件者："+$('#uname2').val()+"\n"+"寄放櫃號："+$('#input_box_id').val()+"\n"+"與收件人關係："+ $('#txt_relationships').val() + "\n" + "物品類別：" + $('#txt_keeper_classs').val() + cost +"\n"+"手機號碼："+$('#input_box_id3').val(),
			  imageUrl:"../../images/mailImage/" + $('#img_name').val(),
			  type: "warning",
			  showCancelButton: true,
			  confirmButtonClass: "btn-danger",
			  confirmButtonText: "確定",
			  cancelButtonText: "取消",
			  closeOnConfirm: false,
			  closeOnCancel: false
			},
			function(isConfirm) {
			  if (isConfirm) {
			    $.ajax({
					type : 'POST',
					url : '<?php echo e(action('KeeperController@postKeeper')); ?>',
					dataType : 'json',
					data: {
						guest:$('#username').val(),
						guest_in_id:$('#uname').val(),
						guest_name:$('#guest_type').val(),
						guest_locker:$('#input_box_id').val(),
						guest_phone:$('#input_box_id3').val(),
						keeper_relationship:$('#txt_relationships').val(),
						keeper_class:$('#txt_keeper_classs').val(),
						keeper_cost:$('#txt_keeper_cost').val(),
						guest_in_sign:Pic,
						keeper_image:$('#img_name').val(),
						host:$('#uname2').val(),
						host_name:$('#username2').val(),		
						_token : '<?php echo e(csrf_token()); ?>',
					},
					success : function(sendback){
						swal({
							title : '成功',
							text : '寄物成功！',
							type : 'success',
							cancelButtonText: "好，我了解",
							closeOnCancel: false,
							allowOutsideClick: true
						});
						state.register();
						$('#sign').attr('height',$(window).height());
						$('#sign').attr('width',$(window).width());
						$('#modal_member_lv2').modal('hide');
					},
					error : function(sendback){

					}
				});
			  } else {
			    swal("請重新選填", "", "error");
			    state.register();
			    $('#sign').attr('height',$(window).height());
				$('#sign').attr('width',$(window).width());
			  }
			});
    	}else{
			swal({
			  title: "請確定下列資料",
			  text: "寄件者："+$('#uname').val()+"\n"+"收件者："+$('#uname2').val()+"\n"+"寄放櫃號："+$('#input_box_id').val()+"\n"+"與收件人關係："+ $('#txt_relationships').val() + "\n" + "物品類別：" + $('#txt_keeper_classs').val() + cost +"\n"+"臨時密碼："+$('#input_box_id3').val(),
			  imageUrl:"../../images/mailImage/" + $('#img_name').val(),
			  type: "warning",
			  showCancelButton: true,
			  confirmButtonClass: "btn-danger",
			  confirmButtonText: "確定",
			  cancelButtonText: "取消",
			  closeOnConfirm: false,
			  closeOnCancel: false
			},
			function(isConfirm) {
			  if (isConfirm) {
			    $.ajax({
					type : 'POST',
					url : '<?php echo e(action('KeeperController@postKeeper')); ?>',
					dataType : 'json',
					data: {
						guest:$('#username').val(),
						guest_in_id:$('#uname').val(),
						guest_name:$('#guest_type').val(),
						guest_locker:$('#input_box_id').val(),
						guest_phone:$('#input_box_id3').val(),
						keeper_relationship:$('#txt_relationships').val(),
						keeper_class:$('#txt_keeper_classs').val(),
						keeper_cost:$('#txt_keeper_cost').val(),
						guest_in_sign:Pic,
						keeper_image:$('#img_name').val(),
						host:$('#uname2').val(),
						host_name:$('#username2').val(),		
						_token : '<?php echo e(csrf_token()); ?>',
					},
					success : function(sendback){
						swal({
							title : '成功',
							text : '寄物成功！',
							type : 'success',
							cancelButtonText: "好，我了解",
							closeOnCancel: false,
							allowOutsideClick: true
						});
						state.register();
						$('#sign').attr('height',$(window).height());
						$('#sign').attr('width',$(window).width());
						$('#modal_member_lv2').modal('hide');
					},
					error : function(sendback){

					}
				});
			  } else {
			    swal("請重新選填", "", "error");
			    state.register();
			    $('#sign').attr('height',$(window).height());
				$('#sign').attr('width',$(window).width());
			  }
			});
    	}

	}else{
		 $.ajax({
			type : 'POST',
			url : '<?php echo e(action('KeeperController@putKeeper')); ?>',
			dataType : 'json',
			data: {
				id:$('#delete').val(),
				guest_out_sign:Pic,
				input_code_txt : $('#input_code_txt').val(),
				_token : '<?php echo e(csrf_token()); ?>',
			},
			success : function(sendback){
				state.pickup();
				swal({
					title : '<?php echo app('translator')->get('messages.took_away'); ?>！',
					text : '<?php echo app('translator')->get('messages.tku_so_much'); ?>',
					type : 'success',
					cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
					closeOnCancel: false,
					allowOutsideClick: true
				});
				$.ajax({
					type : 'POST',
					url: '<?php echo e(action('KeeperController@updateStatus2')); ?>',
					dataType: 'json',
					data:{
						type:"checkCode",
						id : $("#delete").val(),
						guest_out_sign : Pic
					},
					success : function(sendback){
						
						var color = diffColor();
						$('#mailBox').empty();
						// _.each(sendback , function(item){
							// $("#mailTmpl").tmpl(item).prependTo($('#mailBox'));
						// });
						inputFocus = 'code';
						$('#input_code').attr('readonly',false);
					},
					error : function(sendback){
						console.log('checkCode Error');
						inputFocus = 'code';
						$('#input_code').attr('readonly',false);
					}
				});
			},
			error : function(sendback){

			}
		});
	}
}

$(document).on('click','#auto_create',function(){

	$.ajax({
		type : 'POST',
		dataType : 'json',
		url : "<?php echo e(route('manage::user::auto')); ?>",
		data : {
			_token : '<?php echo e(csrf_token()); ?>',
			code : $('#input_user_groupid').val()
		},
		success : function(sendback){
			var s_m = sendback.message + 1;
			var user_id = $('#input_user_groupid').val();
			user_id = user_id.substring(0,user_id.length - 3);
			user_id = user_id + s_m;
			
			$('#input_user_username').val(user_id);
			$('#input_card_no').val(user_id);
			document.getElementById("input_user_username").readOnly = true;
			document.getElementById("input_card_no").readOnly = true;
		},
		error :function(sendback){
			toastr['error']('發生錯誤。請重新整理後再次嘗試！');
		}
	});
});

$(document).on('click','#auto_create2',function(){

	$.ajax({
		type : 'POST',
		dataType : 'json',
		url : "<?php echo e(route('manage::user::auto')); ?>",
		data : {
			_token : '<?php echo e(csrf_token()); ?>',
			code : $('#input_user_groupid2').val()
		},
		success : function(sendback){
			var s_m = sendback.message + 1;
			var user_id = $('#input_user_groupid2').val();
			user_id = user_id.substring(0,user_id.length - 3);
			user_id = user_id + s_m;
			
			$('#input_user_username2').val(user_id);
			$('#input_card_no2').val(user_id);
			document.getElementById("input_user_username2").readOnly = true;
			document.getElementById("input_card_no2").readOnly = true;
		},
		error :function(sendback){
			toastr['error']('發生錯誤。請重新整理後再次嘗試！');
		}
	});
});

//========================================================================
//    處理拍照的觸發
//========================================================================
var isload = false;
$(document).on('click','.camera_Button',function(){
	var number = "";
	if(isload){
		resetWebcamReset();
		resetHost();
		return;
	}
	isload = true;
	var screen = $('#screen');
	var template = '<img src="../images/mailImage/{src}" style="width:auto;height:100%;margin-left:25px" alt="logo" class="logo-default"/>';
	/*----------------------------------
		Setting up the web camera
	----------------------------------*/
	webcam.set_swf_url("<?php echo e(url('assets/photo/webcam/webcam.swf')); ?>");	// 載入flash攝影組件的路徑
	webcam.set_api_url("<?php echo e(route('rest::picture')); ?>");	// The upload script 處理上傳照片的php
	webcam.set_quality(80);				// JPEG Photo Quality 設定JPEG品質
	webcam.set_shutter_sound(false,'');
	// Generating the embed code and adding it to the page:	
	screen.html(
		webcam.get_html(screen.width(), screen.height())	//在#screen中載入攝影元件
	);

	/*----------------------------------
		Binding event listeners
	----------------------------------*/
	var shootEnabled = false;
	
	//拍照
	$(document).on('click','#shootButton',function(){
   	if(!shootEnabled){
			return false;
		}
		
		webcam.freeze();	//凍結webcam，攝影鏡頭停止工作
		$("#shootButton").css('display', 'none');
		$(".buttonPaneGroup").css('display', 'inline');
		return false;
	});
	
	//取消照片
	$(document).on('click','#cancelButton',function(){
		webcam.reset(); //重置webcam，攝影鏡頭重新開始工作
		resetWebcamReset();
		return false;
	});
	
	//確認照片
	$(document).on('click','#uploadButton',function(){
		webcam.upload();	//上傳
		webcam.reset();	//重置webcam，攝影鏡頭重新開始工作
		return false;
	});

	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});

	//webcame透過set_hook方法接收後台php(upload.php)回傳的訊息
	function resetHost(){
		webcam.set_hook('onComplete', function(msg){	//onComplete表示上傳完成
			// alert(msg);
			// This response is returned by upload.php
			// and it holds the name of the image in a
			// JSON object format:
			msg = $.parseJSON(msg);	//解析JSON
			$('#camera').modal('hide');
			var Pid='#photosID'+number;
			var photos = $(Pid);
			photos.prepend(templateReplace(template,{src:msg.mail_image}));
			$('#img_name').val(msg.mail_image);
		});
	}

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
	
	webcam.set_hook('onError',function(e){	//onError表示上傳失敗
		screen.html(e);
	});

	function resetWebcamReset(){
		// webcam.reset();
		$(".buttonPaneGroup").css('display', 'none');
		$("#shootButton").css('display', 'inline');
	}
	resetHost();
});


//++++++++++++++Start Excute++++++++++++++
getMember();
getSource();
getType();


</script>
</body>
<!-- END BODY -->
</html>