@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/bootstrap-fileinput/bootstrap-fileinput.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/icheck/skins/all.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="#">@lang('messages.homepage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.reserve_facility')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">@lang('messages.pub_manage')</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">計時制</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light bordered">
						<div class="portlet-body">
							<div class="table-toolbar">
								<div class="row">
									<div class="col-md-6">
										<div class="btn-group">
											<a href="{{ action('InstTimeController@create') }}"  class="btn green">
											@lang('messages.add') <i class="fa fa-plus"></i>
											</a>
										</div>
									</div>
									<div class="col-md-6">
										<button type="button" class="btn blue-madison btn-lg pull-right btn_leave"> 離場 </button>
									</div>
								</div>
							</div>
							<table class="table table-striped table-bordered table-hover" id="table_inst_list">
							<thead>
							<tr>
								<th>
									 @lang('messages.pub_name')
								</th>
								<th>
									 @lang('messages.meal_use_point')
								</th>
								<th>
									 @lang('messages.deduct_pt_way')
								</th>
								<th>
									 @lang('messages.status')
								</th>
								<th style="width:8%">
									 @lang('messages.action')
								</th>
							</tr>
							</thead>
							<tbody>
							@foreach ($insts as $inst)
							<tr class="odd gradeX">
								<td>
									<a href="{{ action('InstOrderTimeController@show',['id' => $inst->id]) }}"> {{$inst->name}} </a>
								</td>
								<td>
									{{$inst->point_use}}
								</td>
								<td>
																	</td>
								<td>
									@if($inst->status == 1)
									<span class="label label-sm label-success"> @lang('messages.activating') </span>
									@else
									<span class="label label-sm label-warning"> @lang('messages.inactive') </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 href="{{ action('InstTimeController@edit',['id' => $inst->id]) }}">
												<i class="fa fa-pencil"></i>
												@lang('messages.edit') </a>
											</li>
											<li>
												<a href="{{ action('InstOrderTimeController@show',['id' => $inst->id]) }}">
												<i class="fa fa-eye"></i>
												查看進出場紀錄 </a>
											</li>
											<li class="divider">
											</li>
											<li>
												<a class="btn_delete_inst" uid="{{$inst->id}}" href="javascript:;">
												<i class="fa fa-trash-o"></i>
												@lang('messages.del') </a>
											</li>
										</ul>
									</div>
								</td>
							</tr>
							@endforeach
							</tbody>
							</table>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
		</div>

	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
	<!-- /.modal -->
	<div class="modal" id="modal_leave" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-blue-madison">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title font-white"> <i class="fa fa-pencil"></i> 離場 </h4>
				</div>
				<div class="modal-body form">
					<div class="form-body">
						<div class="row">
							<!--/span-->
							<div class="col-md-12">
								<div class="form-group">
									<label class="control-label col-md-3">@lang('messages.acc_card_query')</label>
									<div class="col-md-9">
										<div class="input-group" style="text-align:left">
											<input type="text" class="form-control" name="user" id="leave_user_query">
											<span class="input-group-btn">
											<a href="javascript:;" class="btn green" id="btn_leave_user_query">
											<i class="fa fa-check"></i> @lang('messages.just_search') </a>
											</span>
										</div>
										<span class="help-block">@lang('messages.use_card_query_acc')</span>
									</div>
								</div>
							</div>
							<!--/span-->
						</div>
						<div class="row">
							<!--/span-->
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-md-3 control-label">@lang('messages.query_account')</label>
									<div class="col-md-9">
										<select id="leave_user_query_id" name="leave_user_query_id" class="form-control selectpicker" data-placeholder="@lang('messages.select_liver')" data-live-search="true" tabindex="1">
											<optgroup label="@lang('messages.liver')">
												@foreach($users as $user)
												<option value="{{ $user->username }}" username="{{ $user->username }}">{{ $user->name }}({{ $user->username }})</option>
												@endforeach
											</optgroup>
											<optgroup label="@lang('messages.admin')">
												@foreach($admins as $admin)
												<option value="{{ $admin->username }}" username="{{ $user->username }}">{{ $admin->name }}({{ $admin->username }})</option>
												@endforeach
				    						</optgroup>
										</select>
										<span class="help-block">@lang('messages.use_acc_card_query')</span>
									</div>
								</div>
							</div>
							<!--/span-->
						</div>
						<div class="row" id="leave_display" style="display:none;">
							<div class="col-md-12">
								<div class="well">
									<h4 id="leave_display_username" class="block" style="text-align:center;">@lang('messages.acc_name')</h4>
									<input type="hidden" id="order_id">
									<input type="hidden" id="equipment_order">
									<input type="hidden" id="cost_point">
									<input type="hidden" id="return_pawn">
									<input type="hidden" id="return_user_id">
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">公設名稱</label>
										<div class="col-md-9">
											<div id="inst_name"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">入場時間</label>
										<div class="col-md-9">
											<div id="enter_time"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">離開時間</label>
										<div class="col-md-9">
											<div id="leave_time"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">時間</label>
										<div class="col-md-9">
											<span id="time" class="badge badge-warning"></span> <small>小時</small>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">入場人數</label>
										<div class="col-md-9">
											<span id="person" class="badge badge-success"></span> <small>人</small>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">使用點數</label>
										<div class="col-md-9">
											<span id="point_use" class="badge badge-success"></span> <small>點(次) * </small>
											<span id="time2" class="badge badge-info"></span> <small>小時 * </small>
											<span id="person2" class="badge badge-warning"></span> <small>人 = 本次消費點數 </small>
											<span id="cost2" class="badge badge-danger"></span> <small>點</small>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="control-label col-md-3">扣點方式</label>
										<div class="col-md-9">
											<div id="point_type"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="col-md-3 control-label">歸還物品</label>
										<div class="col-md-9">
											<div id="equipments"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:10px;">
										<label class="col-md-3 control-label">歸還抵押物</label>
										<div class="col-md-9">
											<div id="pawn"></div>
										</div>
									</div>
									<div class="row" style="margin-bottom:5px;">
										<div class="col-md-8">
										</div>
										<div class="col-md-4">
											<div class="panel panel-success">
												<div class="panel-heading">
													<h3 class="panel-title">@lang('messages.user_pt_info')</h3>
												</div>
												{{-- <div class="panel-body">
													 Panel content
												</div> --}}
												<ul class="list-group">
													<li class="list-group-item">
														 @lang('messages.left_pt') <span id="point_free" class="badge badge-success"></span>
													</li>
													<li class="list-group-item">
														 @lang('messages.buy_left_pt') <span id="point_buy" class="badge badge-success"></span>
													</li>
													<li class="list-group-item">
														 @lang('messages.consume_pt') <span id="cost" class="badge badge-danger"></span>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="row" style="margin-bottom:5px;">
										<div class="col-md-12">
											<button class="btn red btn-lg col-md-offset-5" id="btn_leave_send"> <i class="fa fa-check"></i> 離場 </button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn default" data-dismiss="modal">關閉</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
@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/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.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.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/icheck/icheck.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>
@endsection

@section('js_page_level')
<script>
$(document).ready(function(){
	$('.show-tooltip').tooltip();

	$('.show-popover').popover({
		html:true
	})

	$('#table_inst_list').dataTable({
		// Internationalisation. For more info refer to http://datatables.net/manual/i18n
		"language": {
		    "aria": {
		        "sortAscending": ": activate to sort column ascending",
		        "sortDescending": ": activate to sort column descending"
		    },
		    "emptyTable": "@lang('messages.datatable_no_data')",
		    "info": "@lang('messages.display_from') _START_ @lang('messages.display_to') _END_ @lang('messages.then_total') _TOTAL_ @lang('messages.records')",
		    "infoEmpty": "@lang('messages.no_match')",
		    "infoFiltered": "(@lang('messages.from') _MAX_ @lang('messages.records_filter'))",
		    "lengthMenu": "@lang('messages.display') _MENU_ @lang('messages.records')",
		    "search": "@lang('messages.quick_filter'):",
		    "zeroRecords": "@lang('messages.no_data')",
		    "paginate": {
		        "previous":"@lang('messages.last_page')",
		        "next": "@lang('messages.next_page')",
		        "last": "@lang('messages.lastest')",
		        "first": "@lang('messages.most_previous')"
		    }
		},

		"lengthMenu": [
		    [10, 20, 50, -1],
		    [10, 20, 50, "All"] // change per page values here
		],
		// set the initial value
		"pageLength": 10,
		"pagingType": "bootstrap_full_number",
		"columnDefs": [{  // set default column settings
		    'orderable': false,
		    'targets': [0]
		}, {
		    "searchable": false,
		    "targets": [0]
		}]
	});

	$(document).on('click','.btn_delete_inst',function(){
		var id = $(this).attr('uid');
		bootbox.confirm("確定刪除此公設？", function(result) {
			if(result == true){
				$.ajax({
					type : 'DELETE',
					dataType : 'json',
					url  : "{{ action('InstTimeController@destroy',['id'=>'']) }}/"+id,
					data : {
						_token   : $('#_token').val(),
						id       : id
					},
					success : function(sendback){
						window.location.reload();
					},
					error : function(sendback){
						bootbox.alert('@lang('messages.del_fail')');
					}
				})
			}
		});
	});

});

//按離場後，跳出離場視窗，並自動focus在刷卡位置
$(document).on('click','.btn_leave',function(){
	$('#modal_leave').modal('show');
	$("#leave_user_query").focus();
});

// 離場: 用戶查詢(按查詢紐)
$(document).on('click','#btn_leave_user_query',function(){
	leave_user_query();
	$("#leave_user_query").focus();
});

// 離場: 用戶查詢(下拉選單)
$(document).on('change','#leave_user_query_id',function(){
	var username = $(this).val();
	$('#leave_user_query').val(username);
	leave_user_query();
});

// 離場: 用戶查詢(按leave)
$(document).on('keypress','#leave_user_query',function(e){
	if(e.which == 13){
		leave_user_query();
	}
});

var leave_user_query = function(){
	var user = $('#leave_user_query').val();
	$.ajax({
		type: 'GET',
		url: '{{ action("InstOrderTimeController@getLeaveUser") }}',
		dataType:'json',
		data:{
			user : user
		},
		success: function(sendback){
			$('#leave_user_query_id').val(sendback.username).trigger('change.select2');
			$('#leave_display_username').html(sendback.username+' - '+sendback.name);
			$('#return_user_id').val(sendback.user_id);
			$("#order_id").val(sendback.result.id);
			$("#equipment_order").val(sendback.result.equipment_order);
			$("#cost_point").val(sendback.result.cost);
			$("#return_pawn").val(sendback.result.pawn);
			$('#point_buy').html(sendback.point_buy.useable_point);
			$('#point_free').html(sendback.point_free.useable_point);
			
			$.each(sendback.result, function (key, data) {
				$("#"+key).html(data);
			});
			$('#leave_display').show();
		},
		error: function(sendback){
			clear_leave_display();
			toastr["error"](sendback.responseText);
		}

	});
}

//資料登錄欄位清除
var clear_leave_display = function(){
	$('#leave_display_username').html('');
	$('#leave_user_query').val('');
	$('#leave_user_id').val('');
	$('#person').val('');
	$("#equipments").val('');
	$('#point_cost').html('');
	$('#leave_display').hide();
}

//按離場的離場按鈕後，將資料送出
$(document).on('click','#btn_leave_send',function(){
	$.ajax({
		type:'POST',
		url:'{{ action("InstOrderTimeController@postLeaveSend") }}',
		dataType:'json',
		data:{
			_token:'{{ csrf_token() }}',
			user_id : $('#return_user_id').val(),
			order_id : $('#order_id').val(),
			equipment_order: $('#equipment_order').val(),
			pawn: $('#return_pawn').val(),
			point_free: $('#point_free').val(),
			point_buy: $('#point_buy').val(),
			cost_point: $('#cost_point').val()
		},
		success: function(sendback){
			if(sendback.success == true){
				if(sendback.equipment != ''){
					toastr['info'](sendback.equipment);
				}
				if(sendback.pawn != ''){
					toastr['warning'](sendback.pawn);
				}
				toastr['success'](sendback.message);
				clear_leave_display();
			}else{
				toastr['error']("【"+sendback.message+"】，<br>請補足點數後再完成離場手續！");
			}
		},
		error: function(){
			toastr["error"]('資料送出失敗，請重新確認。');
		}
	});
});

</script>
@endsection