@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
@endsection

@section('page-content-wrapper')
	<div class="page-content-wrapper" id="main">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<h3 class="page-title">
			@inject('setting','anlutro\LaravelSettings\Facade')
			{{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
			</h3>
			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-home"></i>
						<a href="{{ route('manage::index') }}">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.account_manage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">學生帳號</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="portlet light bordered">
						<div class="portlet-body">
							<div class="table-toolbar">
                				<div class="row">
                					<div class="col-md-12" style="margin-bottom:10px;">
										<button id="btn_modal_add_user" class="btn green">新增帳號 <i class="fa fa-plus"></i></button>
										<a id="btn_row_bar" class="btn green pull-right" style="margin-right: 5px;">篩選 / 排序 <i class="fa fa-credit-card"></i></a>
									</div>
									<div id="row_bar" class="col-md-12" style="margin-bottom: 10px;display: none;">
										<form id="form_query">
											<input type="hidden" name="input_filter" id="input_filter">
											<a class="btn btn-info pull-right btn_filter" uid="3" style="margin-right: 5px;">最後登入時間排序 </a>
											<a class="btn btn-danger pull-right btn_filter" uid="4" style="margin-right: 5px;">未啟用帳號篩選</a>
										</form> 
									</div>
									
                					<form id="form_page" name="form_page_url" action="{{ route('manage::user::index_ntnu') }}" class="form-horizontal">
	                					<div class="col-md-6">
											<div class="dataTables_length" id="table_guest_length">
	                        					<label>顯示</label>
	                        					<select onchange="$('#form_page').submit();" name="prepage" aria-controls="table_guest" class="form-control input-sm input-xsmall input-inline">
	                          						<option value="10" {{Input::get('prepage')==10? 'selected':''}}>10</option>
	                          						<option value="20" {{Input::get('prepage')==20? 'selected':''}}>20</option>
	                          						<option value="50" {{Input::get('prepage')==50? 'selected':''}}>50</option>
	                        					</select> 則
	                      					</div>
	                    				</div>
										<div align="right" style="margin-right:20px;">
	                    					<input type="text" id="search_name" name="search_name" style="width: 100px;" class="form-control input-sm input-inline" placeholder="請輸入姓名">
	                    					<select id="search_type" name="search_type" class="form-control input-sm input-xsmall input-inline">
	                    						<option value="0">姓名</option>
	                    						<option value="1">帳號</option>
	                    						<option value="2">卡號</option>
	                    					</select>
											<input type="submit" value="查詢" class="btn blue" style="height:30px;padding:0px 10px 0px 10px;">
											<input id="clear_submit" type="submit" value="搜尋條件清空" class="btn red" style="height:30px;padding:0px 10px 0px 10px;">
										</div>
	                    				@foreach(Input::all() as $key => $v)
	                      					@if(is_array($v))
	                        					@foreach($v as $k1 => $v1)
	                          						<input type="hidden" name="{{ $key.'[]'}}" value="{{$v1}}">
	                        					@endforeach
	                    		  			@else
	            		            			@if($key!='prepage' && $key!='select_door' && $key!='select_floor' && $key!='select_house' && $key!='page' && $key!='search_name' && $key!='search_type')
	    		                	      			<input type="hidden" name="{{$key}}" value="{{$v}}">
			                        			@endif
	                      					@endif
	                    				@endforeach
	                  				</form>
                				</div>
                			</div>
                			<!-- End Quick Filter -->
                			<table class="table table-striped table-bordered table-hover" id="table_guest">
								<thead>
									<tr>
										<th>
											會員帳號
										</th>
										<th>
											會員姓名
										</th>
										<th>
											狀態
										</th>
										<th>
											動作
										</th>
									</tr>
								</thead>
								<tbody>
									@foreach($users as $user)
										<tr class="odd gradeX">
											<td>
												{{$user->username}}
											</td>
											<td>
												{{$user->name}}
											</td>
											<td>
												@if($user->status == '0')
													<span class="label label-sm label-warning"> @lang('messages.inactive') </span>
												@elseif($user->status == '1')
													<span class="label label-sm label-success"> @lang('messages.normal') </span>
												@endif
											</td>
											<td>
												<div class="btn-group">
													<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
													@lang('messages.action') <i class="fa fa-angle-down"></i>
													</button>
													<ul class="dropdown-menu pull-right" role="menu">
														<li>
															<a class="btn_user_edit" uid="{{$user->username}}" href="javascript:;">
															<i class="fa fa-pencil"></i>
															@lang('messages.edit') </a>
														</li>
														<li>
															<a class="btn_user_card_set" uid="{{$user->id}}" href="javascript:;">
															<i class="fa fa-credit-card"></i>
															@lang('messages.card_setting') </a>
														</li>
													</ul>
												</div>
											</td>
										</tr>
									@endforeach
								</tbody>
							</table>
                		</div>
						<div class="row">
                     		<div class="col-md-5 col-xs-5">
                        		<div class="dataTables_info" id="table_list_info" role="status" aria-live="polite">
                           			<p>顯示第 {{ $users->firstItem() }} 到第 {{ $users->lastItem() }} 則 共有 {{ $users->total() }} 則</p>
                        		</div>
                     		</div>
                     		<div class="col-md-7 col-xs-7">
                        		<div class="pull-right" id="table_list_paginate">
	                           		{!! $users->appends(Input::all())->render() !!}
                        		</div>
							</div>
						</div>
                	</div>	
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
		</div>
	<div class="modal" id="modal_add_user"  role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<form id="add_form" class="form-horizontal">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">@lang('messages.create_account')</h4>
				</div>
				<div class="modal-body form">
					<!-- BEGIN FORM-->
						<div class="form-body">
							<div id="form_error_alert" class="alert alert-danger display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.col_invalid')
							</div>
							<div id="form_success_alert" class="alert alert-success display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.valid_and_sent')
							</div>
							<blockquote>
								<h4>Step 1. @lang('messages.basic_account_setting')</h4>
							</blockquote>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.account')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-user"></i>
										<input id="username" name="username" type="text" class="form-control" placeholder="@lang('messages.keyin_account')">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.pwd')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-lock"></i>
										<input id="password" name="password" type="password" class="form-control" placeholder="請輸入密碼 Password">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.pwd_confirm')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-lock"></i>
										<input id="password2" name="password2" type="password" class="form-control" placeholder="@lang('messages.pwd_confirm_again')">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.name')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input id="name" name="name" type="text" class="form-control" placeholder="@lang('messages.keyin_name')">
								</div>
							</div>

							<div class="form-group">
								<label class="col-md-3 control-label">學號<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div>
										<input id="s_number" name="s_number" type="text" class="form-control" placeholder="請輸入學號">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.email')</label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-envelope"></i>
										<input id="email" name="email" type="text" class="form-control" placeholder="@lang('messages.keyin_email')">
									</div>
								</div>
							</div>
							<blockquote>
								<h4>Step 2. @lang('messages.user_basic_info')</h4>
							</blockquote>
							<div class="form-group">
								<label class="col-md-3 control-label">科系</label>
								<div class="col-md-6">
									<div>
										<input id="d_name" name="d_name" type="text" class="form-control" placeholder="請輸入科系">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">校區</label>
								<div class="col-md-6">
									<div>
										<input id="campus" name="campus" type="text" class="form-control" placeholder="請輸入校區">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行名稱</label>
								<div class="col-md-6">
									<div>
										<input id="bank_name" name="bank_name" type="text" class="form-control" placeholder="請輸入銀行名稱">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行分行</label>
								<div class="col-md-6">
									<div>
										<input id="bank_branch" name="bank_branch" type="text" class="form-control" placeholder="請輸入銀行分行">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行帳號<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div>
										<input id="bank_account" name="bank_account" type="text" class="form-control" placeholder="請輸入銀行帳號">
									</div>
								</div>
							</div>
							
							<blockquote>
								<h4>Step 3. @lang('messages.advanced_config')</h4>
							</blockquote>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.enable_status')</label>
								<input id="status" name="status" type="checkbox" class="make-switch " data-on-text="&nbsp;@lang('messages.active')&nbsp;" data-off-text="&nbsp;@lang('messages.stop')&nbsp;" checked>
							</div>
						</div>

					<!-- END FORM-->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
					<button type="submit" class="btn blue" id="btn_form_add">@lang('messages.add')</button>
				</div>
			</div>
			</form>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<div class="modal" id="modal_edit_user" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<form id="edit_form" class="form-horizontal">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">@lang('messages.edit_members')</h4>
				</div>
				<div class="modal-body form">
					<!-- BEGIN FORM-->
						<div class="form-body">
							<div id="form_error_alert" class="alert alert-danger display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.col_invalid')
							</div>
							<div id="form_success_alert" class="alert alert-success display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.update_success')
							</div>
							<blockquote>
								<h4>Step 1. @lang('messages.basic_account_setting')</h4>
							</blockquote>
							<input name="id" type="hidden"/>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.account')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-user"></i>
										<input id="username_edit" name="username" type="text" class="form-control" placeholder="@lang('messages.keyin_account')">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.pwd')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-lock"></i>
										<input id="password_edit" name="password" type="password" class="form-control" placeholder="@lang('messages.keyin_pwd')">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.pwd_confirm')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-lock"></i>
										<input id="password2_edit" name="password2" type="password" class="form-control" placeholder="@lang('messages.pwd_confirm_again')">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.name')<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<input id="name_edit" name="name" type="text" class="form-control" placeholder="@lang('messages.keyin_name')">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">學號<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div>
										<input id="s_number_edit" name="s_number" type="text" class="form-control" placeholder="請輸入學號">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.email')</label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-envelope"></i>
										<input id="email_edit" name="email" type="text" class="form-control" placeholder="@lang('messages.keyin_email')">
									</div>
								</div>
							</div>
							<blockquote>
								<h4>Step 2. @lang('messages.user_basic_info')</h4>
							</blockquote>
							<div class="form-group">
								<label class="col-md-3 control-label">科系</label>
								<div class="col-md-6">
									<div>
										<input id="d_name_edit" name="d_name" type="text" class="form-control" placeholder="請輸入科系">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">校區</label>
								<div class="col-md-6">
									<div>
										<input id="campus_edit" name="campus" type="text" class="form-control" placeholder="請輸入校區">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行名稱</label>
								<div class="col-md-6">
									<div>
										<input id="bank_name_edit" name="bank_name" type="text" class="form-control" placeholder="請輸入銀行名稱">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行分行</label>
								<div class="col-md-6">
									<div>
										<input id="bank_branch_edit" name="bank_branch" type="text" class="form-control" placeholder="請輸入銀行分行">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">銀行帳號<span class="required" aria-required="true"> * </span></label>
								<div class="col-md-6">
									<div>
										<input id="bank_account_edit" name="bank_account" type="text" class="form-control" placeholder="請輸入銀行帳號">
									</div>
								</div>
							</div>
							<blockquote>
								<h4>Step 3. @lang('messages.advanced_config')</h4>
							</blockquote>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.enable_status')</label>
								<input id="status_edit" name="status" type="checkbox" class="make-switch" data-on-text="&nbsp;@lang('messages.active')&nbsp;" data-off-text="&nbsp;@lang('messages.stop')&nbsp;">
							</div>
						</div>
					<!-- END FORM-->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
					<button type="submit" class="btn blue" id="btn_form_edit">@lang('messages.update')</button>
				</div>
			</div>
			</form>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

	<div class="modal" id="modal_card" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">@lang('messages.card_setting')</h4>
				</div>
				<div class="modal-body form">
					<!-- BEGIN FORM-->
					<form id="card_add_form">
						<div class="form-body">
							<input name="user_id" type="hidden">
							<div id="card_form_error_alert_nocard" class="alert alert-danger display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.user_without_card')
							</div>
							<blockquote>
								<h4>@lang('messages.create_card')</h4>
							</blockquote>
							<div id="card_form_error_alert_add" class="alert alert-danger display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.card_wrong')
							</div>
							<div id="card_form_success_alert_add" class="alert alert-success display-hide">
								<button class="close" data-close="alert"></button>
								@lang('messages.card_create_success')
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">@lang('messages.card_no')</label>
								<div class="col-md-6">
									<div class="input-icon">
										<i class="fa fa-credit-card"></i>
										<input id="card_no" name="card_no" type="text" class="form-control" placeholder="@lang('messages.keyin_card_no')">
									</div>
								</div>
							</div>
							<button type="submit" class="btn blue">@lang('messages.add')</button>
							<blockquote>
								<h4>@lang('messages.user_card_list')</h4>
							</blockquote>
							<div id="card_list">

							</div>
						</div>
					</form>
					<!-- END FORM-->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.full.min.js') }}" ></script>

@endsection

@section('js_page_level')
<script>

$(document).on('click','#btn_row_bar',function(){
	$('#row_bar').slideToggle('slow');
});

$(document).on('click','.btn_filter',function(){
	var uid = $(this).attr('uid');
	$('#input_filter').val(uid);
	var form = $('#form_query');
	form.attr("action", '{{ route('manage::user::index_ntnu') }}');
	form.submit();
});

$(document).on('change','#search_type',function(){
	if($('#search_type').attr('value') == '0'){
		$('#search_name').attr('placeholder','請輸入姓名');
	}else if($('#search_type').attr('value') == '1'){
		$('#search_name').attr('placeholder','請輸入帳號');
	}else{
		$('#search_name').attr('placeholder','請輸入卡號');
	}
});

$(document).ready(function(){
	$("#status").bootstrapSwitch();
	$("#status_edit").bootstrapSwitch();
	$('#table_list').find('.group-checkable').change(function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).attr("checked", true);
            } else {
                $(this).attr("checked", false);
            }
        });
        jQuery.uniform.update(set);
    });

	$('#add_form').validate({
		errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
		rules:{
			username:{
				required:true,
				minlength: 3 ,
				maxlength:25 ,
				noUnderline: true
			},
			password:{
				required: true,
				minlength: 6
			},
			password2:{
				equalTo:"#password"
			},
			name:{
				required: true,
				minlength: 2,
				maxlength: 25,
				noSpace:true
			},
			bank_account:{
				required:true
			},
			s_number:{
				required:true
			},
			email:{
				email: true
			}
		},
		messages:{
			username:{
				required:"@lang('messages.keyin_user_account')",
				minlength: "@lang('messages.at_least_3')",
				maxlength: "@lang('messages.max_25')"
			},
			password:{
				required: "@lang('messages.keyin_user_pwd')",
				minlength: "@lang('messages.pwd_at_least_6')"
			},
			password2:{
				equalTo:"@lang('messages.pwd_not_the_same')"
			},
			name:{
				required: "@lang('messages.keyin_username')",
				minlength: "@lang('messages.username_at_least_2')",
				maxlength: "@lang('messages.username_max_25')"
			},
			s_number:{
				required: "請輸入學號",
			},
			bank_account:{
				required: "請輸入銀行帳號",
			},
			email:{
				email: "@lang('messages.email_format_invalid')"
			}
		},

        invalidHandler: function (event, validator) { //display error alert on form submit
            $('#form_success_alert').hide();
            $('#form_error_alert').show();
            $('.modal').scrollTop($('#form_error_alert'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            $('#form_success_alert').show();
            $('#form_error_alert').hide();
            //確認表單正確，Ajax送出
            $.ajax({
				type: 'POST',
				dataType: 'json',
				url: "{{ route('manage::user::add') }}",
				data: {
					_token   : $('#_token').val(),
					username : $('#username').val(),
					password : $('#password').val(),
					name     : $('#name').val(),
					s_number : $('#s_number').val(),
					email    : $('#email').val(),
					d_name : $('#d_name').val(),
					campus : $('#campus').val(),
					bank_name : $('#bank_name').val(),
					bank_branch : $('#bank_branch').val(),
					bank_account : $('#bank_account').val(),
					status   : $("#status").bootstrapSwitch('state')
				},
				success: function(sendback){
					$('#modal_add_user').modal('hide');
					window.location.reload();
				},
				error   : function ( data )
		        {
		            var errors = data.responseJSON;
		            //以下是目前測試到的可行解，但還是要實際嘗試才知道怎麼使用。
		            $.each(errors, function (key, data) {
					    console.log(key);
					    if( key == 'errors'){
					    	$.each(data, function (index, data) {
					    		$( "input[name='"+index+"']").closest('.form-group').addClass('has-error');
					    		$( "input[name='"+index+"']").closest('.form-control').after( '<span class="help-block help-block-error">'+data+'</span>' )
					    	});
					    }
					});
					$('#form_success_alert').hide();
            		$('#form_error_alert').show();
					$('.modal').scrollTop($('#form_error_alert'));
		        }
			});
        }
	});

	$('#edit_form').validate({
		errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
		rules:{
			username:{
				required:true,
				minlength: 3 ,
				maxlength:25 ,
				noUnderline: true
			},
			password:{
				minlength: 6
			},
			password2:{
				equalTo:"#edit_form input[name='password']"
			},
			name:{
				required: true,
				minlength: 2,
				maxlength: 25,
				noSpace: true
			},
			s_number:{
				required:true
			},
			bank_account:{
				required:true
			},
			email:{
				email: true
			}
		},
		messages:{
			username:{
				required:"@lang('messages.keyin_user_account')",
				minlength: "@lang('messages.at_least_3')",
				maxlength: "@lang('messages.max_25')"
			},
			password:{
				minlength: "@lang('messages.pwd_at_least_6')"
			},
			password2:{
				equalTo:"@lang('messages.pwd_not_the_same')"
			},
			name:{
				required: "@lang('messages.keyin_username')",
				minlength: "@lang('messages.username_at_least_2')",
				maxlength: "@lang('messages.username_max_25')"
			},
			s_number:{
				required: '請輸入學號',
			},
			bank_account:{
				required: '請輸入銀行帳號',
			},
			email:{
				email: "@lang('messages.email_format_invalid')"
			}
		},

        invalidHandler: function (event, validator) { //display error alert on form submit
            $('#form_success_alert').hide();
            $('#form_error_alert').show();
            $('.modal').scrollTop($('#form_error_alert'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            $('#form_success_alert').show();
            $('#form_error_alert').hide();
            //確認表單正確，Ajax送出
            $.ajax({
				type: 'POST',
				dataType: 'json',
				url: "{{ route('manage::user::edit') }}",
				data: {
					_token   : $('#_token').val(),
					id   : $('#edit_form input[name = "id"]').val(),
					username : $('#username_edit').val(),
					password : $('#password_edit').val(),
					name     : $('#name_edit').val(),
					email    : $('#email_edit').val(),
					s_number : $('#s_number_edit').val(),
					d_name : $('#d_name_edit').val(),
					campus : $('#campus_edit').val(),
					bank_name : $('#bank_name_edit').val(),
					bank_branch : $('#bank_branch_edit').val(),
					bank_account : $('#bank_account_edit').val(),
					status   : $("#status_edit").bootstrapSwitch('state')
				},
				success: function(sendback){
					$('#modal_edit_user').modal('hide');
					window.location.reload();
				},
				error   : function ( data )
		        {
		            var errors = data.responseJSON;
		            //以下是目前測試到的可行解，但還是要實際嘗試才知道怎麼使用。
		            $.each(errors, function (key, data) {
					    console.log(key);
					    if( key == 'errors'){
					    	$.each(data, function (index, data) {
					    		$( "input[name='"+index+"']").closest('.form-group').addClass('has-error');
					    		$( "input[name='"+index+"']").closest('.form-control').after( '<span class="help-block help-block-error">'+data+'</span>' )
					    	});
					    }
					});
					$('#form_success_alert').hide();
            		$('#form_error_alert').show();
					$('.modal').scrollTop($('#form_error_alert'));
		        }
			});
        }
	});

	$(document).on('click','#clear_submit',function(){
		document.getElementById('search_name').value = "";
	});

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

	$(document).on('click','.btn_user_edit',function(){
		var uid = $(this).attr('uid');
		$.ajax({
			type : 'GET',
			url  : "{{ route('manage::user::edit') }}",
			dataType : 'json',
			data : {
				'username' : uid
			},
			success: function(sendback){
				$.each(sendback, function (key, data) {
					if(key == 'status'){
						if( data == 0 ){
							$("#edit_form input[name='"+key+"']").bootstrapSwitch('state',false);
						}
						else{
							$("#edit_form input[name='"+key+"']").bootstrapSwitch('state',true);
						}
					}else{
						$( "#edit_form input[name='"+key+"']").val(data);
					}
				});
				$('#modal_edit_user').modal('show');
			},
			error: function(){
				toastr['error']("@lang('messages.error_need_refresh')");
			}
		})
	});
});

	$(document).on('click','.btn_user_card_set',function(){
		var uid = $(this).attr('uid');
		$('#card_add_form input[name="user_id"]').val(uid);
		getCardList(uid);
		$('#modal_card').modal('show');
		$("#card_no").focus();
	});

	var getCardList = function(uid){
		$('#card_list').html('');
		$('#card_form_error_alert_nocard').show();
		$.ajax({
			type  : 'GET',
			dataType : 'json',
			url   : "{{ route('manage::user::card_list') }}",
			data  : {
				uid : uid,
			},
			success : function(sendback){
				$('#card_form_error_alert_nocard').hide();
				$('#card_list').html('');
				$.each(sendback.cards, function(i, obj) {
					var html = '<div class="row">'+
									'<div class="col-md-offset-2 col-md-8 margin-top-10">'+
										'<div class="input-group">'+
											'<div class="input-group-btn">'+
												'<button type="button" class="btn red btn_card_remove" cardno="'+obj.id+'"> @lang('messages.remove') <i class="fa fa-remove"></i></button>'+
											'</div>'+
											'<input type="text" class="form-control" readonly value="'+obj.card_no+'">'+
										'</div>'+
									'</div>'+
								'</div>';
					$('#card_list').append(html);
				 });
			},
			error  : function(sendback){
				
			}
		});
	}

	$('#card_add_form').validate({
		errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
		rules:{
			card_no:{
				required:true,
			}
		},
		messages:{
			card_no:{
				required:"@lang('messages.not_input_card_no')",
			}
		},

        invalidHandler: function (event, validator) { //display error alert on form submit
            $('#form_success_alert').hide();
            $('#form_error_alert').show();
            $('.modal').scrollTop($('#form_error_alert'));
        },

        highlight: function (element) { // hightlight error inputs
           $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            //確認表單正確，Ajax送出
            $.ajax({
				type: 'POST',
				dataType: 'json',
				url: "{{ route('manage::user::card_add') }}",
				data: {
					_token   : $('#_token').val(),
					user_id  : $('#card_add_form input[name = "user_id"]').val(),
					card_no  : $('#card_add_form input[name = "card_no"]').val(),
				},
				success: function(sendback){
					getCardList($('#card_add_form input[name="user_id"]').val());
					$('#card_add_form input[name = "card_no"]').val('');
					toastr['success']("@lang('messages.card_no_add_success')");
				},
				error   : function (sendback){
					toastr['error'](sendback.responseJSON.message);
		        }
			});
        }
	});

	$(document).on('click','.btn_card_remove',function(){
		var card_id = $(this).attr('cardno');
		bootbox.confirm({
		    size: 'small',
		    message: "@lang('messages.sure_del_user_card')",
		    callback: function(result){
		    	if(result === true){
		    		$.ajax({
		    			type: 'POST',
		    			dataType: 'json',
		    			url : '{{ route("manage::user::card_remove") }}',
		    			data: {
		    				_token : $('#_token').val(),
		    				card_id : card_id
		    			},
		    			success: function(sendback){
		    				toastr['success']("@lang('messages.del_card_success')");
		    				getCardList($('#card_add_form input[name="user_id"]').val());
		    			}
		    		})
		    	}
			}
		})
	});

	$('select[name=form_page_url]').change(function(){
		var url = location.pathname;
		location.href = url.replace(/page=(\d+)/,'page=1');
	});

	//判斷使用者姓名是否用"空白"
	jQuery.validator.addMethod("noSpace", function(value, element) {
		return value.includes(" ") !==true && value.includes("　") !==true ;
	}, "使用者姓名不可有空白");

	//判斷手機、電話是否用"空白"
	jQuery.validator.addMethod("nospace", function(value, element) {
		return value.includes(" ") !==true && value.includes("　") !==true ;
	}, "手機、電話不允許輸入空白鍵！");
	
	//判斷帳號是否含"_"(底線)
	jQuery.validator.addMethod("noUnderline", function(value, element) {
		return value.includes("_") !==true ;
	}, "使用者帳號不可含_底線的符號！");
</script>
@endsection