@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->point_free}}</span>
							</li>
							<li class="list-group-item">
								 @lang('messages.buy_left_pt') <span id="point_buy" class="badge badge-success">{{$user->point_buy}}</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'] == 'income')
										<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['left_point']}}
										</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'] == 'income')
										<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['left_point']}}
										</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 name="point" type="number" class="form-control" placeholder="@lang('messages.enter_pt')">
						</div>
						<div class="form-group">
							<label class="control-label">@lang('messages.cause')<span class="required" aria-required="true"> * </span></label>
							<input name="info" type="text" class="form-control" placeholder="@lang('messages.enter_change_pt_reason')">
						</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">@lang('messages.sure_submit')</button>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</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>
$(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