@extends('layout.manage')

@section('css_page_level')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.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.pt_manage')</a>
					</li>
				</ul>
				<div class="page-toolbar">

				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN DASHBOARD STATS -->
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-success">
						<div class="panel-heading">
							<h3 class="panel-title">{{$user->name}}({{$user->username}})</h3>
						</div>
						<div class="panel-body">
							 <p>@lang('messages.tel2') : {{$user->tel}}</p>
							 <p>@lang('messages.mobile') : {{$user->mobile}}</p>
						</div>
						<ul class="list-group">
							<li class="list-group-item">
								 @lang('messages.left_pt') <span id="point_free" class="badge badge-success">{{$user->reward_point_total}}</span>
							</li>
							<li class="list-group-item">
								 @lang('messages.buy_left_pt') <span id="point_buy" class="badge badge-success">{{$user->buy_point_total}}</span>
							</li>
						</ul>
					</div>
					<button type="button" class="btn green-meadow btn-block btn_point" style="margin-left:0px;" data-type="give_free">@lang('messages.issue_pt_desc1')</button>
					<button type="button" class="btn blue-madison btn-block btn_point" style="margin-left:0px;" data-type="give_buy">@lang('messages.issue_pt_desc2')</button>
					<hr>
					<button type="button" class="btn green-seagreen btn-block btn_point" style="margin-left:0px;" data-type="cost_free">@lang('messages.issue_pt_desc3')</button>
					<button type="button" class="btn blue-steel btn-block btn_point" style="margin-left:0px;" data-type="cost_buy">@lang('messages.issue_pt_desc4')</button>
				</div>
				<div class="col-md-9">
					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet light bordered">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-gift"></i>@lang('messages.pt_record')
							</div>
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#tab_1" data-toggle="tab">
									@lang('messages.given_pt') </a>
								</li>
								<li>
									<a href="#tab_2" data-toggle="tab">
									@lang('messages.buy_pt') </a>
								</li>
							</ul>
						</div>
						<div class="portlet-body">
							<div class="tab-content">
								<div class="tab-pane active" id="tab_1">
									<table class="table table-striped table-bordered table-hover datatable">
										<thead>
											<tr>
												<th>
													 @lang('messages.time')
												</th>
												<th>
													 @lang('messages.type')
												</th>
												<th>
													 @lang('messages.income')
												</th>
												<th>
													 @lang('messages.outcome')
												</th>
												<th>
													 @lang('messages.left_money')
												</th>
												<th>
													 @lang('messages.note')
												</th>
											</tr>
										</thead>
										<tbody>
										@foreach ($free_list as $one)
											<tr class="odd gradeX">
												<td>
													{{-- 時間 --}}
													{{$one->created_at}}
												</td>
												@if($one->type == 0)
													<td>
														{{-- 收入 --}}
														<span class="label label-primary">@lang('messages.income')</span>
													</td>
													<td>
														{{-- 收入point --}}
														{{$one->point}}
													</td>
													<td></td>
												@else
													<td>
														{{-- 支出 --}}
														<span class="label label-info">@lang('messages.outcome')</span>
													</td>
													<td></td>
													<td>
														{{-- 支出point --}}
														{{$one->point}}
													</td>
												@endif
												<td>
													{{-- 餘額point --}}
													{{$one->last_points}}
												</td>
												<td>
													{!!$one->memo!!}
												</td>
											</tr>
										@endforeach
										</tbody>
									</table>
								</div>
								<div class="tab-pane" id="tab_2">
									<table class="table table-striped table-bordered table-hover datatable">
										<thead>
											<tr>
												<th>
													 @lang('messages.time')
												</th>
												<th>
													 @lang('messages.type')
												</th>
												<th>
													 @lang('messages.income')
												</th>
												<th>
													 @lang('messages.outcome')
												</th>
												<th>
													 @lang('messages.left_money')
												</th>
												<th>
													 @lang('messages.note')
												</th>
											</tr>
										</thead>
										<tbody>
										@foreach ($buy_list as $one)
											<tr class="odd gradeX">
												<td>
													{{$one->created_at}}
												</td>
												@if($one->type == 0)
													<td>
														<span class="label label-primary">@lang('messages.income')</span>
													</td>
													<td>
														{{$one->point}}
													</td>
													<td></td>
												@else
													<td>
														<span class="label label-info">@lang('messages.outcome')</span>
													</td>
													<td></td>
													<td>
														{{$one->point}}
													</td>
												@endif
												<td>
													{{$one->last_points}}
												</td>
												<td>
													{!!$one->memo!!}
												</td>
											</tr>
										@endforeach
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>
		</div>

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

		<div class="modal fade bs-modal-sm" id="modal_point" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<form id="form_point">
						<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-body">
								<div id="form_point_alert" class="alert alert-danger display-hide">
									<button class="close" data-close="alert"></button>
									@lang('messages.col_invalid')
								</div>
								<div class="form-group">
									<label class="control-label">@lang('messages.points')<span class="required" aria-required="true"> * </span></label>
									<input id="point-input" name="point" type="number" class="form-control" placeholder="@lang('messages.enter_pt')" required onchange="revertPointSubmit()" min="1" step="1" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
								</div>
								<div class="form-group">
									<label class="control-label">@lang('messages.cause')<span class="required" aria-required="true"> * </span></label>
									<input id="info-input" name="info" type="text" class="form-control" placeholder="@lang('messages.enter_change_pt_reason')" required onchange="revertPointSubmit()">
								</div>
								<input type="hidden" name="type" value=""/>
								<input type="hidden" name="user_id" value="{{$user->id}}"/>
								<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn default" data-dismiss="modal">@lang('messages.close')</button>
							<button type="submit" class="btn blue" onclick="preventMultipleClick()" id="point-submit">@lang('messages.sure_submit')</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</div>
@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>
@endsection

@section('js_page_level')
<script>
	// 讓按鈕的文字與禁用狀態變化
	const pointSubmit = document.getElementById('point-submit');

	function preventMultipleClick(){
		// 避免因點擊時立即停用按鈕，反使得表單無法送出
		setTimeout(function () { 
			pointSubmit.innerText = "處理中...";
			pointSubmit.disabled=true;
		}, 1); 
	}

	function revertPointSubmit(){ 
		// 輸入欄位後恢復按鈕的文字與禁用狀態，避免按鈕被鎖定而無法送出表單
		pointSubmit.innerText = "@lang('messages.sure_submit')";
		pointSubmit.disabled=false;
	}
</script>
<script>
$(document).ready(function(){
	$('.datatable').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.show') _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",
        "order": [
            [0, "desc"]
        ] // set first column as a default sort by asc
	});

	$('#form_point').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:{
			point:{
				required:true,
				number:true
			},
			info:{
				required:true
			}
		},
		messages:{
			point:{
				required:'@lang('messages.enter_issue_pt')',
				number:'@lang('messages.only_allow_number')'
			},
			info:{
				required:'@lang('messages.enter_reason_for_pt_change')'
			}
		},

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('#form_point_alert').show();
            $(document).scrollTop($('#form_point_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: "{{ action('PointController@givePoint') }}",
				data: $('#form_point').serialize(),
				success: function(sendback){
					window.location.reload();
				},
				error   : function ( data ){
		        	toastr['error'](data.responseJSON.message);
		        	$('#form_point input[name="point"]').val('');
		        	$('#form_point input[name="info"]').val('');
		        }
			});
        }
	});

});

$(document).on('click','.btn_point',function(){
	switch($(this).data('type')){
		case 'give_free':
			$('#modal_point .modal-title').html('@lang('messages.issue_given_pt')');
			$('#modal_point input[name="type"]').val($(this).data('type'));
			$('#modal_point').modal('show');
			break;

		case 'give_buy':
			$('#modal_point .modal-title').html('@lang('messages.issue_buy_pt')');
			$('#modal_point input[name="type"]').val($(this).data('type'));
			$('#modal_point').modal('show');
			break;

		case 'cost_free':
			$('#modal_point .modal-title').html('@lang('messages.deduct_given_pt')');
			$('#modal_point input[name="type"]').val($(this).data('type'));
			$('#modal_point').modal('show');
			break;

		case 'cost_buy':
			$('#modal_point .modal-title').html('@lang('messages.deduct_buy_pt')');
			$('#modal_point input[name="type"]').val($(this).data('type'));
			$('#modal_point').modal('show');
			break;


	}
	
});
</script>
@endsection