@extends('adminlte::page')
@section('title', $pageTitle)
@section('content_header')
	<h1>{{ $pageTitle }}</h1>
@stop
@section('content')
	<div class="row">
		<div class="col-sm-12">
			<div class="table-responsive">
				<table id="orders" class="table table-striped table-bordered">
					<thead>
						<tr>
							<th>Order #</th>
							<th>Channel</th>
							<th>State</th>
							<th>Actions</th>
							<th>Payment Method</th>
							<th>Created</th>
							<th>Updated</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="modal fade" id="breadPayRefundModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				{{Form::open()}}
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">Total Amount to refund</h4>
					</div>
					<div class="modal-body">
							{{Form::text('total')}}
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary">Refund</button>
					</div>
				{{Form::close()}}
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
@stop
@section('js')
	<script>
		$('#breadPayRefundModal').on('show.bs.modal', function (event) {
			var button = $(event.relatedTarget);
			var total = button.data('total');
			var id = button.data('id');
			var modal = $(this);
			modal.find('form').attr('action',modal.find('form').attr('action')+'/refund/'+id);
			modal.find('input[name="total"]').val(total)
		})
		var table = $('#orders').DataTable({
			responsive: true,
			processing: true,
			serverSide: true,
			autoWidth: false,
			ajax: '{!! URL::to('bread/all') !!}',
			columnDefs: [
				{
					targets:   0,
					render: function(data){
						return '<a href="/orders/view/'+data+'/set/1">'+data+'</a>';

					}
				}
			],
			columnDefs: [
				{
					targets:   3,
					render: function(data, type, full, meta){
						console.log(typeof full.paymentData);
						var returnString = '';
						if(typeof full.paymentData === "object" && full.paymentData.hasOwnProperty('state')) {
							switch (full.paymentData.state) {
								case 'SETTLED':
									returnString = '<a href="/bread/refund/' + data + '">Refund</a>';
									break;
								case 'AUTHORIZED':
									returnString = '<a href="/bread/settle/' + data + '">Settle</a> | <a href="/bread/cancel/' + data + '">Cancel</a>';
									break;
								case 'PENDING':
									returnString = '<a href="/bread/authorize/' + data + '">Authorize</a> | <a href="/bread/cancel/' + data + '">Cancel</a>';
									break;
								default:
									returnString = '';
							}
						}
						return returnString;
					}
				}
			],
			columns: [
				{ data: 'channelOrderNum', name: 'channelOrderNum' },
				{ data: 'channel', name: 'channel' },
				{ data: 'paymentData.state', name: 'state' },
				{ data: 'id', name: 'paymentData'},
				{ data: 'paymentMethod', name: 'paymentMethod' },
				{ data: 'created_at', name: 'created_at' },
				{ data: 'updated_at', name: 'updated_at' }
			]
		});
	</script>
@stop