@extends(getTemplate('admin'))
@section('content')
	<div class="gadmin-pagesidebar-width-1 gadmin-mhide">
		<div class="panel panel-default gadmin-pagesidebar-width-1-panel">
			<!-- begin panel-heading -->
			<div class="panel-heading gadmin-pagesidebar-width-1-heading">
				<h4 class="panel-title">{{__('memberships::memberships.admin_payments_customerspayments')}}</h4>
			</div>
			<!-- end panel-heading -->
			<div class="gadmin-pagesidebar-body">
				<div class="gadmin-pagesidebar-main">
					<ul class="nav gadmin-pagesidebar-ul">
						@if(module_exists('booking_memberships'))
						<li><a href="{{url('admin/module/booking_memberships/show_active_members')}}" class="pjax">{{__('memberships::memberships.admin_payments_activedesks')}}</a></li>
						@endif
						@if(module_exists('memberships'))
								<li><a class="pjax active">{{__('memberships::memberships.admin_payments_activememberships')}}</a></li>
								<li><a href="{{url('admin/user/subscriptions')}}" class="pjax">{{__('memberships::memberships.admin_payments_allmembershiporders')}}</a></li>
								<li><hr></li>
						@endif
						@if(module_exists('events'))
							<li><a href="{{url('admin/module/events/show_event_attending_lists')}}" class="pjax">{{__('memberships::memberships.admin_payments_alleventorders')}}</a></li>
						@endif
						@if(module_exists('meeting_rooms'))
							<li><a href="{{url('admin/module/meeting_rooms/show_rooms')}}" class="pjax">{{__('memberships::memberships.admin_payments_allroomorders')}}</a></li>
						@endif
						@if(module_exists('store'))
							<li><a href="{{url('admin/module/store/show_order_shippings')}}" class="pjax">{{__('memberships::memberships.admin_payments_allstoreorders')}}</a></li>
						@endif
						@if(module_exists('payments'))
							<li><hr></li>
							<li><a href="{{url('admin/module/payments/sales')}}" class="pjax">{{__('memberships::memberships.admin_payments_allpaymentorders')}}</a></li>
							<li><a href="{{url('admin/module/payments/stats')}}" class="pjax">{{__('memberships::memberships.admin_payments_allorderstats')}}</a></li>
						@endif
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="gadmin-pagesidebar-width-2">
		<div class="panel panel-default" data-sortable-id="ui-widget-6">
			<!-- begin panel-heading -->
			<div class="panel-heading">
				<div class="panel-heading-btn">
					<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-expand"><i class="fa fa-expand"></i></a>
				</div>
				<h4 class="panel-title">{{$title}}</h4>
			</div>
			<!-- end panel-heading -->
			<div id="info-alert" class="alert" style="display:none">
				<span class="close"  onclick="$('#info-alert').fadeOut()">×</span>
				<div class="alert-container"></div>
			</div>
			<div class="panel-body">
				<ul class="nav nav-tabs admin-tabs-2">
					<li class="nav-item"><a href="#tab-billingorders" data-toggle="tab" class="nav-link active"><i class="fas fa-receipt"></i> <span class="d-none d-md-inline">Active Subscriptions</span></a></li>
					<li class="nav-item"><a href="#tab-billingsubs" data-toggle="tab" class="nav-link"><i class="far fa-credit-card"></i> <span class="d-none d-md-inline">Expired Subscriptions</span></a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane fade show active" id="tab-billingorders">
						<!-- begin row -->
						<div class="row" style="display:block">
							<!-- begin col-12 -->
							<div class="col-lg-12">
								<div class="panel panel-inverse">
									<!-- begin panel-body -->
									<div class="panel-body">
										<div class="table-responsive">
											<table id="data-table-active" class="table table-striped table-bordered table-booking-orders-fa" width="100%">
												<thead>
												<tr>
													<th width="1%">#</th>
													<th class="text-nowrap">Member</th>
													<th class="text-nowrap">Description</th>
													<th class="text-nowrap">Status</th>
													<th class="text-nowrap">Start Date</th>
													<th class="text-nowrap">Expiration Date</th>
													<th class="text-nowrap">Subscription</th>
												</tr>
												</thead>
											</table>
										</div>
									</div>
									<!-- end panel-body -->
								</div>
							</div>
							<!-- end col-12 -->
						</div>
						<!-- end row -->
					</div>
					<div class="tab-pane fade" id="tab-billingsubs">
						<!-- begin row -->
						<div class="row" style="display:block">
							<!-- begin col-12 -->
							<div class="col-lg-12">
								<div class="panel panel-inverse">
									<!-- begin panel-body -->
									<div class="panel-body">
										<div class="table-responsive">
											<table id="data-table-expired" class="table table-striped table-bordered table-booking-orders-fa" width="100%">
												<thead>
												<tr>
													<th width="1%">#</th>
													<th class="text-nowrap">Member</th>
													<th class="text-nowrap">Description</th>
													<th class="text-nowrap">Status</th>
													<th class="text-nowrap">Start Date</th>
													<th class="text-nowrap">Expiration Date</th>
													<th class="text-nowrap">Subscription</th>
												</tr>
												</thead>
											</table>
										</div>
									</div>
									<!-- end panel-body -->
								</div>
							</div>
							<!-- end col-12 -->
						</div>
						<!-- end row -->
					</div>
				</div>
			</div>
		</div>
	</div>
	@push('custom-js')
		<script>
			$(document).ready(function() {
				// Re-draw tables on tab click
				$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
					$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
				} );
				// Render Active Subscriptions
				let tableActive = $('#data-table-active');
				tableActive.DataTable({
					"ajax": site_root + "admin/ajax/dt_feed/SubActiveMemberships",
					"columns": [
						{
							"width": "4%",
							"data": "id",
							// "render": function(data, type, row ){
							// 	return  '<input type="checkbox" data-id="' + data + '">';
							// }
						},
						{ "data": "user"},
						{ "data": "description"},
						{ "data": "status"},
						{ "data": "start_date"},
						{ "data": "expiry_date"},
						{ "data": "subscription"},
					],
					"lengthMenu": [[10, 25, 50, 100, 500, 1000, 5000, -1], [10, 25, 50, 100, 500, 1000, 5000, "All"]],
					"pageLength": 25,
					"colReorder": true,
					"stateSave":  true,
					"fixedHeader": {
						header: true,
						headerOffset: tableActive.height()
					},
					"buttons": [
						{ extend: "copy", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "csv", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "excel", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "pdf", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "print", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} }
					],
					"responsive": true,
					"dom": "Bflrtip",
					"language": {
						"decimal":        "",
						"emptyTable":     "No data available in table",
						"info":           "Showing _START_ to _END_ of _TOTAL_ entries",
						"infoEmpty":      "Showing 0 to 0 of 0 entries",
						"infoFiltered":   "(filtered from _MAX_ total entries)",
						"infoPostFix":    "",
						"thousands":      ",",
						"lengthMenu":     "_MENU_",
						"loadingRecords": "Loading...",
						"processing":     "Processing...",
						"search":         "",
						"searchPlaceholder": "Search...",
						"zeroRecords":    "No matching records found",
						"paginate": {
							"first":      "First",
							"last":       "Last",
							"next":       "Next",
							"previous":   "Previous"
						},
						"aria": {
							"sortAscending":  ": activate to sort column ascending",
							"sortDescending": ": activate to sort column descending"
						}
					},
				});
				// Render Expired Subscriptions
				let tableExpiry = $('#data-table-expired');
				tableExpiry.DataTable({
					"ajax": site_root + "admin/ajax/dt_feed/SubExpiredMemberships",
					"columns": [
						{
							"width": "4%",
							"data": "id",
							// "render": function(data, type, row ){
							// 	return  '<input type="checkbox" data-id="' + data + '">';
							// }
						},
						{ "data": "user"},
						{ "data": "description"},
						{ "data": "status"},
						{ "data": "start_date"},
						{ "data": "expiry_date"},
						{ "data": "subscription"},
					],
					"lengthMenu": [[10, 25, 50, 100, 500, 1000, 5000, -1], [10, 25, 50, 100, 500, 1000, 5000, "All"]],
					"pageLength": 25,
					"colReorder": true,
					"stateSave":  true,
					"fixedHeader": {
						header: true,
						headerOffset: tableExpiry.height()
					},
					"buttons": [
						{ extend: "copy", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "csv", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "excel", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "pdf", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} },
						{ extend: "print", className: "btn-sm", exportOptions: {columns: [0,1,2,3,4,5,6]} }
					],
					"responsive": true,
					"dom": "Bflrtip",
					"language": {
						"decimal":        "",
						"emptyTable":     "No data available in table",
						"info":           "Showing _START_ to _END_ of _TOTAL_ entries",
						"infoEmpty":      "Showing 0 to 0 of 0 entries",
						"infoFiltered":   "(filtered from _MAX_ total entries)",
						"infoPostFix":    "",
						"thousands":      ",",
						"lengthMenu":     "_MENU_",
						"loadingRecords": "Loading...",
						"processing":     "Processing...",
						"search":         "",
						"searchPlaceholder": "Search...",
						"zeroRecords":    "No matching records found",
						"paginate": {
							"first":      "First",
							"last":       "Last",
							"next":       "Next",
							"previous":   "Previous"
						},
						"aria": {
							"sortAscending":  ": activate to sort column ascending",
							"sortDescending": ": activate to sort column descending"
						}
					},
				});
			})
		</script>
	@endpush
@endsection