<?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" />
<!-- 多選 -->
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css')); ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.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;
	}

	.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.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.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.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_source" style="display: none;">
							<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.choose_vistor'); ?><span class="label label-warning pull-right" id="disp_step2"></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="sourceBox"></div>
			                        </div>
                                </div>
                                <div class="panel-footer">  Up Down </div>
                            </div>
						</div>
						<div class="col-md-6 frame" id="frame_type" style="display: none;">
							<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.chose_sel_license'); ?><span class="label label-warning pull-right" id="disp_step3"></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="typeBox"></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" class="form-control" style="width:73%;" 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_next_member" type="button" class="btn blue-hoki btn-lg sbold">下一位</button>-->
                        <!-- <button id="btn_rec"         type="button" class="btn yellow-mint btn-lg sbold"><?php echo app('translator')->get('messages.sure'); ?></button> -->
                        <!--<button id="btn_pickup"      type="button" class="btn red-sunglo btn-lg sbold">取件</button>-->
                        <!-- <button id="btn_pending"     type="button" class="btn green-meadow btn-lg sbold"><?php echo app('translator')->get('messages.no_exit_check'); ?></button> -->
                        <!-- <button id="btn_backmail"    type="button" class="btn grey-mint btn-lg sbold"><?php echo app('translator')->get('messages.exit_check'); ?></button> -->
                        <button id="btn_cancel"    type="button" class="btn grey btn-lg sbold"><?php echo app('translator')->get('messages.cancel'); ?></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_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_people_number'); ?></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.people_number'); ?>">
                <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="">
			<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>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline dark"><?php echo app('translator')->get('messages.close'); ?></button>
        <button name="btn_box_id_submit" type="button" class="btn red"><?php echo app('translator')->get('messages.miss'); ?></button>
        <button name="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" 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.keyin_tel'); ?></h4>
    </div>
    <div class="modal-body">
    	<div class="form-group">
            <div class="input-group input-group-lg">
                <input id="input_box_id2" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.tel'); ?>">
                <span class="input-group-btn">
                    <button id="btn_num_clear2" 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-num2" num="A" style="width:10%; margin:5px;"> A </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="B" style="width:10%; margin:5px;"> B </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="C" style="width:10%; margin:5px;"> C </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="D" style="width:10%; margin:5px;"> D </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="E" style="width:10%; margin:5px;"> E </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="F" style="width:10%; margin:5px;"> F </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="G" style="width:10%; margin:5px;"> G </a>
                
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="H" style="width:10%; margin:5px;"> H </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="I" style="width:10%; margin:5px;"> I </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="J" style="width:10%; margin:5px;"> J </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="K" style="width:10%; margin:5px;"> K </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="L" style="width:10%; margin:5px;"> L </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="M" style="width:10%; margin:5px;"> M </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="N" style="width:10%; margin:5px;"> N </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="O" style="width:10%; margin:5px;"> O </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="P" style="width:10%; margin:5px;"> P </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="Q" style="width:10%; margin:5px;"> Q </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="R" style="width:10%; margin:5px;"> R </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="S" style="width:10%; margin:5px;"> S </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="T" style="width:10%; margin:5px;"> T </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="U" style="width:10%; margin:5px;"> U </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="V" style="width:10%; margin:5px;"> V </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="W" style="width:10%; margin:5px;"> W </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="X" style="width:10%; margin:5px;"> X </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="Y" style="width:10%; margin:5px;"> Y </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="Z" style="width:10%; margin:5px;"> Z </a>
				
            </div>
            <div class="">
            	
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="1" style="width:10%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="2" style="width:10%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="3" style="width:10%; margin:5px;"> 3 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="4" style="width:10%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="5" style="width:10%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="6" style="width:10%; margin:5px;"> 6 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="7" style="width:10%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="8" style="width:10%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="9" style="width:10%; margin:5px;"> 9 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="0" style="width:10%; margin:5px;"> 0 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="." style="width:10%; margin:5px;"> . </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="@" style="width:10%; margin:5px;"> @ </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="-" style="width:10%; margin:5px;"> - </a>        
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num2" num="_" style="width:0%; 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 name="btn_box_id_submit2" type="button" class="btn red"><?php echo app('translator')->get('messages.miss'); ?></button>
        <button name="btn_box_id_submit2" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </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 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" placeholder="放置位置">
                <span class="input-group-btn">
                    <button id="btn_num_clear3" class="btn grey" type="button">清空</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>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="." style="width:10%; margin:5px;"> . </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="@" style="width:10%; margin:5px;"> @ </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="-" style="width:10%; margin:5px;"> - </a>        
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num3" num="_" style="width:0%; 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.clean_clear'); ?></button>
        <button name="btn_box_id_submit3" type="button" class="btn red"><?php echo app('translator')->get('messages.miss'); ?></button>
        <button name="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 bs-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="" id="modal_box_id4_content">
	</div>
</div>

<!-- 輸入感應卡卡號 -->
<div id="modal_box_id5" 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_bb_cardno'); ?></h4>
    </div>
    <div class="modal-body">
    	<div class="form-group">
            <div class="input-group input-group-lg">
                <input id="input_box_id5" type="text" class="form-control" placeholder="<?php echo app('translator')->get('messages.card_no'); ?>">
                <span class="input-group-btn">
                    <button id="btn_num_clear5" 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-num5" num="A" style="width:10%; margin:5px;"> A </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="B" style="width:10%; margin:5px;"> B </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="C" style="width:10%; margin:5px;"> C </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="D" style="width:10%; margin:5px;"> D </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="E" style="width:10%; margin:5px;"> E </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="F" style="width:10%; margin:5px;"> F </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="G" style="width:10%; margin:5px;"> G </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="H" style="width:10%; margin:5px;"> H </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="I" style="width:10%; margin:5px;"> I </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="J" style="width:10%; margin:5px;"> J </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="K" style="width:10%; margin:5px;"> K </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="L" style="width:10%; margin:5px;"> L </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="M" style="width:10%; margin:5px;"> M </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="N" style="width:10%; margin:5px;"> N </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="O" style="width:10%; margin:5px;"> O </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="P" style="width:10%; margin:5px;"> P </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="Q" style="width:10%; margin:5px;"> Q </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="R" style="width:10%; margin:5px;"> R </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="S" style="width:10%; margin:5px;"> S </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="T" style="width:10%; margin:5px;"> T </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="U" style="width:10%; margin:5px;"> U </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="V" style="width:10%; margin:5px;"> V </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="W" style="width:10%; margin:5px;"> W </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="X" style="width:10%; margin:5px;"> X </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="Y" style="width:10%; margin:5px;"> Y </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="Z" style="width:10%; margin:5px;"> Z </a>
            </div>
            <div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="1" style="width:10%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="2" style="width:10%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="3" style="width:10%; margin:5px;"> 3 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="4" style="width:10%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="5" style="width:10%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="6" style="width:10%; margin:5px;"> 6 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="7" style="width:10%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="8" style="width:10%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="9" style="width:10%; margin:5px;"> 9 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="0" style="width:10%; margin:5px;"> 0 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="." style="width:10%; margin:5px;"> . </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="@" style="width:10%; margin:5px;"> @ </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" num="-" style="width:10%; margin:5px;"> - </a>        
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num5" 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 name="btn_box_id_submit5" type="button" class="btn red"><?php echo app('translator')->get('messages.miss'); ?></button>
        <button name="btn_box_id_submit5" type="button" class="btn green"><?php echo app('translator')->get('messages.submit'); ?></button>
    </div>
</div>

<!-- 選擇門組(有樓層管制的)  -->
<div id="modal_box_id7" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" style="overflow:visible;">
	<div class="" id="modal_box_id7_content" >
		<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" style="height: 25vh;">
	    	<div class="form-group">
		    	<label style="color:black;font-size:24px;font-weight:bold;">門組</label><br>
		        <select id="door" name="door" class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-select-all-text="全選" data-deselect-all-text="取消"> 
		        	
		        </select>
	        </div>

	        <div class="form-group">
		        <label style="color:black;font-size:24px;font-weight:bold;">可到樓層</label><br>
		        <select id="floor_limit" name="floor_limit" class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-select-all-text="全選" data-deselect-all-text="取消"> 
		        	
		        </select>
	        </div>
	    </div>
	    <div class="modal-footer">
	        <button type="button" data-dismiss="modal" class="btn btn-outline dark">取消</button>
	        <button name="btn_box_id_submit7" type="button" class="btn green">送出</button>
	    </div>
	</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_guest_cause" 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_id6" 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_id6" type="text" class="form-control" placeholder="卡號" onkeyup="return ValidateNumber(this,value)">
                <span class="input-group-btn">
                    <button id="btn_num_clear6" 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-num6" num="A" style="width:10%; margin:5px;"> A </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="B" style="width:10%; margin:5px;"> B </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="C" style="width:10%; margin:5px;"> C </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="D" style="width:10%; margin:5px;"> D </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="E" style="width:10%; margin:5px;"> E </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="F" style="width:10%; margin:5px;"> F </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="G" style="width:10%; margin:5px;"> G </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="H" style="width:10%; margin:5px;"> H </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="I" style="width:10%; margin:5px;"> I </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="J" style="width:10%; margin:5px;"> J </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="K" style="width:10%; margin:5px;"> K </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="L" style="width:10%; margin:5px;"> L </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="M" style="width:10%; margin:5px;"> M </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="N" style="width:10%; margin:5px;"> N </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="O" style="width:10%; margin:5px;"> O </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="P" style="width:10%; margin:5px;"> P </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="Q" style="width:10%; margin:5px;"> Q </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="R" style="width:10%; margin:5px;"> R </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="S" style="width:10%; margin:5px;"> S </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="T" style="width:10%; margin:5px;"> T </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="U" style="width:10%; margin:5px;"> U </a>
            </div>
            <div class="">
            	<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="V" style="width:10%; margin:5px;"> V </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="W" style="width:10%; margin:5px;"> W </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="X" style="width:10%; margin:5px;"> X </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="Y" style="width:10%; margin:5px;"> Y </a>
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="Z" style="width:10%; margin:5px;"> Z </a>
            </div>
            <div class="">
				<a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="1" style="width:10%; margin:5px;"> 1 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="2" style="width:10%; margin:5px;"> 2 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="3" style="width:10%; margin:5px;"> 3 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="4" style="width:10%; margin:5px;"> 4 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="5" style="width:10%; margin:5px;"> 5 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="6" style="width:10%; margin:5px;"> 6 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="7" style="width:10%; margin:5px;"> 7 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="8" style="width:10%; margin:5px;"> 8 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="9" style="width:10%; margin:5px;"> 9 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="0" style="width:10%; margin:5px;"> 0 </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="-" style="width:10%; margin:5px;"> - </a> 
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" num="+" style="width:10%; margin:5px;"> + </a>
                <a href="javascript:;" class="btn btn-default grey btn-lg keyboard-num6" 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_submit6" 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>


<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="guest_type">
<input type="hidden" id="delete">
<input type="hidden" id="img_name">
<!-- 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>
<!-- 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>
<!-- 多選 -->
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/select2/js/select2.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js')); ?>"></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-user"></i><?php echo app('translator')->get('messages.visit_date'); ?>：${guest_in_time}</h3>
        </div>
        <div class="panel-body">
        	受訪者戶號：${host} <br>
        	受訪者姓名：${host_name} <br>
        	抵押證件：${guest_pawn} <br>
			證件放置：${location} <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.exit_bye'); ?> 
            </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="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">

	<?php foreach($pawns as $pawn): ?>
		<button class="btn grey-steel btn-block btn-lg btn_step3" type="<?php echo e($pawn->name); ?>"><?php echo e($pawn->name); ?> </button>

	<?php endforeach; ?>
	
</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="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="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;
		}
	}
});

//========================================================================
//    建立狀態機 - 操作步驟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_source').hide();
			$('#frame_type').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_source').show();
			$('#frame_type').show();
		},
		onregister: function(event,from,to){
			clearAll();
			$('#frame_source').hide();
			$('#frame_type').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_source').hide();
			$('#frame_type').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($) {  
	$(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){
			 _.each(result, function(item) {
	        	var tmplData = {'no' : item.doorplate};
	        	$("#memberTmpl").tmpl(tmplData).appendTo("#memberBox");
	        });
		},
		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'));

	$('#input_box_id').val("");
    $('#input_box_id2').val("");
    $('#input_box_id3').val("");
	$('#txt_relationships').val("");
	$('#txt_guest_cause').val("");
    $('#input_box_id5').val("");

	$('#modal_box_id').modal('show');
	state.selectuser();
});

//========================================================================
//    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 : 'getFamily2',
			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');
});
//========================================================================
//    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){

		}
	});
});
//========================================================================
//    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_input_code',function(){
	$('#modal_box_id6').modal('show');
});

$(document).on('click','button[name="btn_box_id_submit"]',function(){

	$('#modal_box_id').modal('toggle');
	$('#modal_box_id2').modal('show');
});

$(document).on('click','button[name="btn_box_id_submit2"]',function(){
	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('GuestController@guest_getBoxID')); ?>',
		dataType: 'json',
    	success:function(sendback){
    		$('#input_box_id3').val(sendback.location);
    	},
    	error:function(sendback){

    	}
	});
	$('#modal_box_id2').modal('toggle');
	$('#modal_box_id3').modal('show');

});

$(document).on('click','button[name="btn_box_id_submit3"]',function(){

	$.ajax({
		type : 'POST',
		url: '<?php echo e(action('GuestController@guest_checkBoxID')); ?>',
		dataType: 'json',
		data:{
			location : $('#input_box_id3').val()
		},
    	success:function(sendback){
    		if(sendback.message == "success"){
				$.ajax({
					type : 'POST',
					url: '<?php echo e(action('GuestController@guest_tags_view')); ?>',
					data : {
					},
					success : function(sendback){
						$('#modal_box_id3').modal('toggle');
						$('#modal_box_id4_content').html(sendback);
						$('#modal_box_id4').modal('show');
						$('#txt_relationships').val('');
						$('#txt_guest_cause').val('');
					}
				});

    		}else{
    			toastr['error']('您選擇的位置，目前有其他物品');
    		}
    	},
    	error:function(sendback){
    		
    	}
	});
}); 
    
$(document).on('click','button[name="btn_box_id_submit4"]',function(){
	$('#modal_box_id4').modal('toggle');
	$('#modal_box_id5').modal('show');
}); 

//感應卡號的送出 按下後觸發事件
$(document).on('click','button[name="btn_box_id_submit5"]',function(){
	$.ajax({
		type : 'GET',
		url: '<?php echo e(action('ConsoleController@checkGuestRFID')); ?>',
		dataType: 'json',
		data:{
			rfid : $('#input_box_id5').val()
		},
		success : function(sendback){
			if(sendback.checkRFID == "success"){
				//門組開啟 且有設定樓層管制的門組
				if(sendback.checkDoor == "true"){
					$.ajax({
						type : 'POST',
						data : {
							username :$('#username').val()　
						},
						url: '<?php echo e(action('GuestController@get_guest_door')); ?>',
						success : function(sendback){
							$('#modal_box_id5').modal('toggle');

							//把已選的卡片號碼回填
							var select = $('#door');
							select.empty();
							$.each(sendback.door, function(idx, obj) {
				                select.append('<option value="' + obj.id + '" >' + obj.name +'</option>');
				                //若是只有一個樓層管制門組 則直接選定
				                if(sendback.door.length == 1){
									select.val([obj.id]);
								}
				            });

				            select.selectpicker('refresh');

				            select = $('#floor_limit');
				            $.each(sendback.floor, function(idx, obj) {
				                select.append('<option value="' + obj.value + '" >' + obj.location +'</option>');
				            });
				            select.val(sendback.floor_limit);
				            select.selectpicker('refresh');
							$('#modal_box_id7').modal('show');
						}
					});
				}else{
					$('#modal_box_id5').modal('toggle');
					signpad.open();
				}
				
			}else{
				toastr['error']('目前此卡號有人使用中');
			}
		},
		error : function(sendback){

		}
	});
}); 

//選擇門組的送出 按下後觸發事件
$(document).on('click','button[name="btn_box_id_submit7"]',function(){
	$('#modal_box_id7').modal('toggle');
	signpad.open();
}); 


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


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

	$.ajax({
		type : 'POST',
		url  : '<?php echo e(action('GuestController@guest_console_updateType')); ?>',
		dataType: 'json',
		data:{
			input_relationship : $('#input_relationship').val(),
			input_guest_cause : $('#input_guest_cause').val()
		},
		success : function(sendback){
			toastr['success']("新增成功");
			$.ajax({
				type : 'POST',
				url: '<?php echo e(action('GuestController@guest_tags_view')); ?>',
				success : function(sendback){
					$('#modal_add_tag').modal('toggle');
					$('#modal_box_id4_content').html(sendback);
					$('#modal_box_id4').modal('show');
					$('#txt_relationships').val('');
					$('#txt_keeper_classs').val('');
				}
			});
		},
		error : function(sendback){
		}
	});
});

$(document).on('keypress','#input_box_id5',function(e){
	if(e.which == 13){
		$.ajax({
		type : 'GET',
		url: '<?php echo e(action('ConsoleController@checkGuestRFID')); ?>',
		dataType: 'json',
		data:{
			rfid : $('#input_box_id5').val()
		},
		success : function(sendback){
			if(sendback.checkRFID == "success"){
				$('#modal_box_id5').modal('toggle');
				signpad.open();
			}else{
				toastr['error']('目前此卡號有人使用中');
			}
		},
		error : function(sendback){

		}
	});
	}
});


//畫面右側的鍵盤
$(document).on('keypress','#input_box_id6',function(e){
	if(e.which == 13){
		$('#input_code').attr('readonly',true);
		inputFocus = 'none';
		var code = $(this).val();
		if(code != ''){
			$.ajax({
				type : 'GET',
				url: '<?php echo e(action('GuestController@putGuest_rfid')); ?>',
				dataType: 'json',
				data:{
					code : code
				},
				success : function(sendback){
					state.getpending();
					var color = diffColor();
					$('#mailBox').empty();
					_.each(sendback , function(item){
                        if (item['status'] == 1) {
                            item['color'] = 'red';
                            item['style'] = '';
                        } else if (item['status'] == 2) {
                            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);
				}
			});
		}else{
			toastr['error']('<?php echo app('translator')->get('messages.dont_check_block_value'); ?>');
			inputFocus = 'code';
					$('#input_code').attr('readonly',false);
		}
		$(this).val('');
		$('#modal_box_id6').modal('hide');
	}
});


$(document).on('click','#btn_box_id_submit6',function(){
	$('#input_code').val($('#input_box_id6').val());
	$('#input_code').attr('readonly',true);
		inputFocus = 'none';
		var code = $('#input_code').val();
		if(code != ''){
			$.ajax({
				type : 'GET',
				url: '<?php echo e(action('GuestController@putGuest_rfid')); ?>',
				dataType: 'json',
				data:{
					code : code
				},
				success : function(sendback){
					state.getpending();
					var color = diffColor();
					$('#mailBox').empty();
					_.each(sendback , function(item){
                        if (item['status'] == 1) {
                            item['color'] = 'red';
                            item['style'] = '';
                        } else if (item['status'] == 2) {
                            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);
				}
			});
		}else{
			toastr['error']('<?php echo app('translator')->get('messages.dont_check_block_value'); ?>');
			inputFocus = 'code';
					$('#input_code').attr('readonly',false);
		}
		$(this).val('');
	$('#input_box_id6').val('');
	$('#modal_box_id6').modal('hide');
}); 

//========================================================================
//    Click1-1 選擇住戶個類別
//========================================================================
$(document).on('click','.bg-blue-madison,.caption',function(){
	$('#uname').val($(this).attr('uname'));
	$('#username').val($(this).attr('username'));
	$('#modal_member_lv2').modal('hide');
	state.selectuser();
});

//========================================================================
//    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){
		//如果是步驟一的時候
	
		$('#input_code').attr('readonly',true);
		inputFocus = 'none';
		var code = $(this).val();
		if(code != ''){
			$.ajax({
				type : 'GET',
				url: '<?php echo e(action('GuestController@putGuest_rfid')); ?>',
				dataType: 'json',
				data:{
					code : code
				},
				success : function(sendback){
					state.getpending();
					var color = diffColor();
					$('#mailBox').empty();
					_.each(sendback , function(item){
                        if (item['status'] == 1) {
                            item['color'] = 'red';
                            item['style'] = '';
                        } else if (item['status'] == 2) {
                            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);
				}
			});
		}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('GuestController@putGuest_rfid')); ?>',
		dataType: 'json',
		data:{
			code : "check"
		},
		success : function(sendback){
			state.getpending();
			var color = diffColor();
			$('#mailBox').empty();
			_.each(sendback , function(item){
                item['color'] = 'red';
                item['style'] = '';
				$("#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('GuestController@putGuest_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_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']);	
			}
			
			
		}
	});
});
//========================================================================
//    處理信件顏色渲染
//========================================================================
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(){
	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-num2',function(){ //手機的鍵盤
	var $this = $(this),
		character = $this.attr('num');
    
    $('#input_box_id2').val($('#input_box_id2').val() + character);
});

$(document).on('click','#btn_num_clear2',function(){ //手機的清除
    $('#input_box_id2').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','.keyboard-num5',function(){
	var $this = $(this),
		character = $this.attr('num');
    
    $('#input_box_id5').val($('#input_box_id5').val() + character);
});

$(document).on('click','#btn_num_clear5',function(){
    $('#input_box_id5').val('');
});

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

$(document).on('click','#btn_num_clear6',function(){
    $('#input_box_id6').val('');
});


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

$(document).on('click','.btn_guest_cause',function(){//事由選擇
	var guest_cause = document.getElementById("txt_guest_cause");
	guest_cause.value = $(this).attr('value');
});

//========================================================================
//    手繪板處理
//========================================================================
$(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,/, "")
    // Sending the image data to Server
    if($('#delete').val()==""){
    	swal({
		  title: "請確定下列資料",
		  text: "受訪者："+$('#uname').val()+"\n"+"拜訪者：外部訪客"+"\n"+"抵押證件："+$('#guest_type').val()+"\n"+"拜訪人數："+$('#input_box_id').val()+"\n"+"電話："+$('#input_box_id2').val()+"\n"+"證件放置位置："+$('#input_box_id3').val()+"\n"+"關係:"+$('#txt_relationships').val()+"\n"+"事由:"+$('#txt_guest_cause').val()+"\n"+"卡號："+$('#input_box_id5').val(),
		  imageUrl:"../../images/mailImage/" + $('#img_name').val(),
		  type: "warning",
		  showCancelButton: true,
		  confirmButtonClass: "btn-danger",
		  confirmButtonText: "確定",
		  cancelButtonText: "取消",
		  closeOnConfirm: false,
		  closeOnCancel: false
		},
		function(isConfirm) {
		  if (isConfirm) {

		  	var options = document.getElementById('door').options, text = '';
	        for (var i=0; i < options.length; i++) {
	            if (options[i].selected){
	                text = text + "," + options[i].value ;
	            }
	        }

	        if( $('#door').val() != '' && $('#door').val() != null){
	        	var door = text.slice(1);
	        }else{
	        	var door = "";
	        }

	        var options = document.getElementById('floor_limit').options, text = '';
	        for (var i=0; i < options.length; i++) {
	            if (options[i].selected){
	                text = text + "," + options[i].value ;
	            }
	        }

	        if( $('#floor_limit').val() != '' && $('#floor_limit').val() != null){
	        	var floor_limit = text.slice(1)
	        }else{
	        	var floor_limit = "";
	        }

		    $.ajax({
				type : 'POST',
				url : '<?php echo e(action('GuestController@postGuest')); ?>',
				dataType : 'json',
				data: {
					host:$('#uname').val(),
					host_name:$('#username').val(),
					guest_pawn:$('#guest_type').val(),
					guest_count:$('#input_box_id').val(),
					guest_phone:$('#input_box_id2').val(),
					location:$('#input_box_id3').val(),
					guest_relationship:$('#txt_relationships').val(),
					guest_cause:$('#txt_guest_cause').val(),
					guest_photo:$('#img_name').val(),
					guest_rfid:$('#input_box_id5').val(),
					guest_in_sign:Pic,
					door: door,
					floor_limit: floor_limit,
					_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");
			    $('#input_box_id').val("");
			    $('#input_box_id2').val("");
			    $('#input_box_id3').val("");
				$('#txt_relationships').val("");
				$('#txt_guest_cause').val("");
	            $('#input_box_id5').val("");
			    state.register();
			    $('#sign').attr('height',$(window).height());
				$('#sign').attr('width',$(window).width());
		  }
		});
	}else{
		 $.ajax({
			type : 'POST',
			url : '<?php echo e(action('GuestController@putGuest')); ?>',
			dataType : 'json',
			data: {
				id:$('#delete').val(),
				guest_out_sign:Pic,
				_token : '<?php echo e(csrf_token()); ?>',
			},
			success : function(sendback){
				state.pickup();
				swal({
					title : '<?php echo app('translator')->get('messages.byebye'); ?>！',
					text : '<?php echo app('translator')->get('messages.tks_4_coming'); ?>',
					type : 'success',
					cancelButtonText: "<?php echo app('translator')->get('messages.got_it'); ?>",
					closeOnCancel: false,
					allowOutsideClick: true
				});
				$('#delete').val("");
			},
			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']('發生錯誤。請重新整理後再次嘗試！');
        }
    });
});



//========================================================================
//    處理拍照的觸發
//========================================================================
var isload = false;
$(document).on('click','.guest_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>