@extends(getTemplate('admin'))
@section('content')
	@push('custom-css')
		<link href="{{asset('assets/core/plugins/nvd3/build/nv.d3.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/core/plugins/jquery-jvectormap/jquery-jvectormap.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/core/plugins/bootstrap-calendar/css/bootstrap_calendar.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/core/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
	@endpush
	<style>.tab-content > .tab-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }</style>
			<!-- begin row -->
			<div class="row">
				<div class="col-lg-7 col-md-7 col-sm-12">
				<div class="row">
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/payments/sales')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-euro-sign"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Payments & Invoices</h4>
							</div>
							</a>
						</div>
					</div>
					@if(module_exists('Memberships'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/payments/sales')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-credit-card"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Membership Orders</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					@if(module_exists('Desks'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/booking_memberships/show_active_members')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-id-card"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Active Subscriptions</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					@if(module_exists('Events'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/events/show_event_attending_lists')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-credit-card"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Event Orders</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					@if(module_exists('MeetingRooms'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/meeting_rooms/show_rooms')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-credit-card"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Meeting Room Orders</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/users')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-users"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">All Member Accounts</h4>
							</div>
							</a>
						</div>
					</div>
					@if(module_exists('Events'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/events/show_events')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-ticket-alt"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Events & Trainings</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					@if(module_exists('MeetingRooms'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/meeting_rooms/show_room_departments')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-calendar-plus"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Meeting Rooms</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
					@if(module_exists('Blog'))
					<div class="col-lg-4 col-md-4 col-sm-12">
						<div class="card">
							<a href="{{url('admin/module/blog/show_posts')}}" class="gadmin-dashboard-cards-a">
								<div class="card-block gadmin-dashboard-cards-i">
									<i class="fas fa-comment-alt"></i>
								</div>
							<div class="card-block">
								<h4 class="card-title gadmin-dashboard-cards-title">Blogs & News</h4>
							</div>
							</a>
						</div>
					</div>
					@endif
				</div>
				</div>
				<!-- Notifications -->
				<div class="col-lg-5 col-md-5 col-sm-12">
					<div class="note note-light m-b-15">
						<div class="note-content gadmin-title-1">
							<h4><i class="fa fa-bolt"></i> <b>Important Notifications</b> <a href="{{url('admin/main/notifications')}}" class="btn btn-xs btn-inverse pull-right"><i class="fa fa-list"></i> View More</a></h4>
							<div data-scrollbar="true" data-height="515px">
{{--							@if($logs->exists())
								@foreach($logs as $log)
										{!! $log->details('styled') !!}
								@endforeach
							@else
								<div class="alert alert-info">
									<i class="fa fa-info-circle"></i> No Notifications yet.
								</div>
							@endif--}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- begin row -->
			<div class="row">
				<!-- begin col-8 -->
				@if(module_exists('Social'))
				<div id="msg-container" class="col-lg-7 col-md-7 col-sm-12 gadmin-dashboard-messages" data-placeholder="loader" data-partial="messages" data-container="msg-container">

					<div id="wrap" style="display:none"></div>
				</div>
				@endif
				<!-- end col-8 -->
				<!-- begin col-4 -->
				<div class="col-lg-5 col-md-5 col-sm-12">
					<div id="task_list_container" class="widget-todolist widget-todolist-rounded m-b-30" data-partial="task.dashboard_list_task" data-container="task_list_container" data-id="widget">
					</div>
				</div>
				<!-- end col-4 -->

				<!-- begin col-4 -->
				<div class="col-lg-7 col-md-7 col-sm-12">
					@include('themes.admin.'.setting('active_admin_theme').'.components.admin-alert-messenger')
				</div>
				<!-- end col-4 -->
				<!-- begin col-4 -->
				@if(module_exists('Events'))
				<div class="col-lg-5 col-md-5 col-sm-12">
					<!-- begin panel -->
					<div class="panel panel-white">
						<div class="gadmin-heading">
							<h4 class="panel-title">Upcoming Events</h4>
						</div>
						<div id="schedule-calendar" class="bootstrap-calendar"></div>
						<div class="list-group">
							<a href="{{url('admin/module/events/show_events')}}" class="list-group-item d-flex justify-content-between align-items-center text-ellipsis">
								Admin Created Events
								<span class="badge f-w-500 bg-gradient-black f-s-10">8</span>
							</a>
							<a href="{{url('admin/module/events/show_events')}}" class="list-group-item d-flex justify-content-between align-items-center text-ellipsis">
								Members Created Events
								<span class="badge f-w-500 bg-gradient-black f-s-10">5</span>
							</a>
						</div>
					</div>
					<!-- end panel -->
				</div>
				@endif
				<!-- end col-4 -->
			</div>
			<!-- begin col-4 -->
			<div class="row">
				<!-- begin col-3 -->
				<div class="col-lg-3 col-md-6 col-sm-12">
					@php
						$cs = 0;
						if(intval($todayVisits) != 0)
							$cs = 100 - intval($lastWeekVisitorsCount) / intval($todayVisits) * 100;
						$cs = intval($cs);
						$cStat = ($cs >= 0) ? 'Better than last week ('.$cs.'%)': 'Worse than last week ('.(-1)*$cs.'%)';
					@endphp
					<div class="widget widget-stats bg-gradient-gadmin">
						<div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
						<div class="stats-content">
							<div class="stats-title">TODAY'S VISITS</div>
							<div class="stats-number">{{$todayVisits}}</div>
							<div class="stats-progress progress">
								<div class="progress-bar" style="width: {{$cs}}%;"></div>
							</div>
							<div class="stats-desc">{{$cStat}}</div>
						</div>
					</div>
				</div>
				<!-- end col-3 -->
				<!-- begin col-3 -->
				<div class="col-lg-3 col-md-6 col-sm-12">
					<div class="widget widget-stats bg-gradient-gadmin">
						<div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
						<div class="stats-content">
							<div class="stats-title">TOTAL VISITORS</div>
							<div class="stats-number">{{$totalVisits}}</div>
							<div class="stats-progress progress">
								<div class="progress-bar" style="width: 40.5%;"></div>
							</div>
							<div class="stats-desc"><a href="{{url('admin/main/statistics')}}">View stats</a></div>
						</div>
					</div>
				</div>
				<!-- end col-3 -->
				<!-- begin col-3 -->
				<div class="col-lg-3 col-md-6 col-sm-12">
					<div class="widget widget-stats bg-gradient-gadmin">
						<div class="stats-icon stats-icon-lg"><i class="fas fa-user-friends fa-fw"></i></div>
						<div class="stats-content">
							<div class="stats-title">TOTAL MEMBERS</div>
							<div class="stats-number">{{$users->count()}}</div>
							<div class="stats-progress progress">
								<div class="progress-bar" style="width: 76.3%;"></div>
							</div>
							<div class="stats-desc">Better than last week (76.3%)</div>
						</div>
					</div>
				</div>
				<!-- end col-3 -->
				<!-- begin col-3 -->
				@if(module_exists('Social'))
				<div class="col-lg-3 col-md-6 col-sm-12">
					<div class="widget widget-stats bg-gradient-gadmin">
						<div class="stats-icon stats-icon-lg"><i class="fas fa-user-circle fa-fw"></i></div>
						<div class="stats-content">
							<div class="stats-title">NEW NETWORK POSTS</div>
							<div class="stats-number">0</div>
							<div class="stats-progress progress">
								<div class="progress-bar" style="width: 54.9%;"></div>
							</div>
							<div class="stats-desc">Better than last week (54.9%)</div>
						</div>
					</div>
				</div>
				@endif
				<!-- end col-3 -->

			</div>
			<!-- end row -->
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12">
					<!-- begin panel -->
					<div class="panel panel-white">
						<div class="gadmin-heading">
							<h4 class="panel-title">Latest Registered Accounts</h4>
						</div>
						<ul class="registered-users-list clearfix">
							@foreach($lastUsers as $user)
								<li>
									<a href="{{url('admin/user/profile/'.$user->id)}}"><img src="{{$user->avatar}}" alt="{{ucwords($user->first_name.' '.$user->last_name)}}" /></a>
									<h4 class="username text-ellipsis">
										{{ucwords($user->first_name.' '.$user->last_name)}}
										<small>{{$user->address->country}}</small>
									</h4>
								</li>
							@endforeach
						</ul>
						<div class="panel-footer text-center">
							<a href="{{url('admin/user/show')}}" class=" btn btn-sm btn-default">View All Accounts</a>
						</div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-4 -->
			</div>

			<div class="row">
				<!-- begin col-8 -->
				<div class="col-lg-8">
					<div class="widget-chart with-sidebar inverse-mode">
						<div class="widget-chart-content bg-black">
							<h4 class="chart-title">
								Visitors Analytics <span class="pull-right">Total Site Hits: <b id="tsh">{{$totalHits}}</b></span>
								<small>Where do our visitors come from</small>
							</h4>
							<div id="visitors-line-chart" class="widget-chart-full-width nvd3-inverse-mode" style="height: 260px;"></div>
						</div>
						<div class="widget-chart-sidebar bg-black-darker">
							<div class="chart-number">
								<span id="all-visits">{{$totalVisits}}</span>
								<small>Total visitors</small>
							</div>
							<div id="visitors-donut-chart" class="nvd3-inverse-mode p-t-10" style="height: 180px"></div>
							<ul class="chart-legend f-s-11">
								<li><i class="fa fa-circle fa-fw text-primary f-s-9 m-r-5 t-minus-1"></i> <span id="returnVisitors">0.00%</span><span>Return Visitors</span></li>
								<li><i class="fa fa-circle fa-fw text-success f-s-9 m-r-5 t-minus-1"></i> <span id="newVisitors">0.00%</span> <span>New Visitors</span></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- end col-8 -->
				<!-- begin col-4 -->
				<div class="col-lg-4">
					<div class="panel panel-inverse" data-sortable-id="index-1">
						<div class="panel-heading">
							<h4 class="panel-title">
								Visitors Origin
							</h4>
						</div>
						<div id="visitors-map" class="bg-black" style="height: 179px;"></div>
						<div id="countries_ip" class="list-group">
							@php $num = 1; @endphp
							@foreach($arrCounts as $k => $v )
                                @if($num <= 3)
                                    <a href="javascript:;" class="list-group-item list-group-item-inverse d-flex justify-content-between align-items-center text-ellipsis">
                                        {{$num.'. '.$k}}
                                        <span class="badge f-w-500 bg-gradient-teal f-s-10">{{$v}}</span>
                                    </a>
                                @endif
							@php  $num++; @endphp
							@endforeach
						</div>
					</div>
				</div>
				<!-- end col-4 -->
			</div>
	<!-- end row -->
	@push('custom-js')
		<script>
			var countryNamesArr = {!!$countryNamesArr!!};
			var visitors = {};
		</script>
		<script src="{{asset('assets/core/plugins/flot/jquery.flot.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/flot/jquery.flot.time.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/flot/jquery.flot.resize.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/flot/jquery.flot.pie.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/sparkline/jquery.sparkline.js')}}"></script>
		<script src="{{asset('assets/core/plugins/d3/d3.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/nvd3/build/nv.d3.js')}}"></script>
		<script src="{{asset('assets/core/plugins/jquery-jvectormap/jquery-jvectormap.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/jquery-jvectormap/jquery-jvectormap-world-merc-en.js')}}"></script>
		<script src="{{asset('assets/core/plugins/bootstrap-calendar/js/bootstrap_calendar.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js')}}"></script>
		<script src="{{asset('assets/core/plugins/tinymce_5.7/js/tinymce/jquery.tinymce.min.js')}}"></script>
		<script src="{{asset('assets/core/plugins/tinymce_5.7/js/tinymce/tinymce.min.js?apiKey=27xhkb8mfltvjs62yqkw8kh3tynd73sdf3wi7va8qdr7221f')}}"></script>
		<script src="{{asset('assets/themes/admin/default/assets/js/demo/dashboard-v2.js')}}"></script>
		<script defer async>
			$(document).ready(function() {
				if(page === 'dashboard') {
					@if(module_exists('Social'))
						// Load Social Messenger
						$('#msg-container').append('<div id="loader" class="text-center"><p><i class="fas fa-spinner fa-spin" style="font-size:72px"></i></p><br/><h3 class="text-center">Loading Messenger..</h3></div>');
						setTimeout(function() {
							load_ci_partial($('#msg-container'));
						},500);
					@endif
					// Load Tasks
					load_partial($('#task_list_container'));

					var total_days = 30;
					$.ajax({
						type: 'GET',
						url: site_root + 'admin/ajax/dashboard_get_visitors_graph/' + total_days,
						dataType: 'json',
						success: function(data) {
							// if(data['all'][2] != 0){
							// 	visitors = data;
							// }
							visitors = data;
							DashboardV2.init();
						},
						data: {},
						async: true
					});
				}
			});
		</script>
	@endpush
@endsection