{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Investment Edu | Dashboard</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="f-22 mb-2 bold">Dashboard</h2>
		<div class="row">
			<div class="col-12">
				<div class="row dashboard-users mt-3 mb-3">
					<div class="col-12 col-md-4" onclick="location.href='/user-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL USERS</p>
								<h5 class="bold f-20 mb-0">{{total_users}}</h5>
							</div>
							<div class="usericons pink">
								<img class="total-lefticon" src="{% static 'admin/images/team.png' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4" onclick="location.href='/get-subscribers' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL SUBSCRIPTION</p>
								<h5 class="bold f-20 mb-0">{{total_subscribers}}</h5>
							</div>
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/subscription.png' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4" onclick="location.href='/blog-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL BLOGS</p>
								<h5 class="bold f-20 mb-0">{{total_blogs}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/blogging.png' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4"  onclick="location.href='/event-listing'"  style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL EVENTS</p>
								<h5 class="bold f-20 mb-0">{{total_events}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/conference.png' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4" onclick="location.href='/investment-education-listing'"  style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL INVESTMENT EDUCATION</p>
								<h5 class="bold f-20 mb-0">{{total_education}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/education.png' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4" onclick="location.href='/get-investment-research-list'"  style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">TOTAL INVESTMENT RESEARCH</p>
								<h5 class="bold f-20 mb-0">{{total_research}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/analytics.png' %}">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!---user listing-->
		<div class="row manage-user-data table-customer border-0 mt-1">
			<div class="col-6">
				<div class="card px-4 py-3">
				<div class="table-header bg-white d-flex justify-content-between align-items-center border-btm">
					<h2 class="f-20 bold">Users </h2>
					<div class="view-all"><a class="view-txt dark text-decoration-none " href="/user-listing">View All</a></div>
				</div>
				<div class="manage-user-table">
					<div class="table-responsive">
						<table class="table" id="dataTable" width="100%" cellspacing="0">
							<thead>
							<tr>
								<th><p>Users Name</p></th>
								<th> Email</th>
								<th><p>Sign Up Date</p></th>
								<th>Action</th>
							</tr>
							</thead>
							<tbody>
							{% for user in users_obj %}
							<tr>
								<td>{{user.username}}</td>
								<td>
									{{ user.email}}
								</td>
								<td>
									{{ user.start_date|date:"d M  Y" }}
								</td>								
								<td>                  
									<a href="/user-details/{{user.id}}" class="edit-btn"><img src="{% static 'admin/images/eye.png' %}"></a>
								</td>
							</tr>
							{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
				</div>
			</div>
			<div class="col-6">
				<div class="card px-4 py-3">
				<div class="table-header bg-white d-flex justify-content-between align-items-center border-btm">
					<h2 class="f-20 bold">Subscribers </h2>
					<div class="view-all"><a class="view-txt dark text-decoration-none " href="/user-listing">View All</a></div>
				</div>
				<div class="manage-user-table">
					<div class="table-responsive">
						{% if sub_obj %}
						<table class="table" id="dataTable" width="100%" cellspacing="0">
							<thead>
							<tr>
								<th>User Name</th>
                            	<th>Subscription Name</th>
                            	<th>Price</th>
								<th>Start Date</th>
								<th>Expiry Date</th>
								<th>Status</th>
							</tr>
							</thead>
							<tbody>
							
							{% for sub in sub_obj %}
								<tr>
								 <td>{{ sub.user.first_name }} {{ sub.user.last_name }}</td>
								 <td>{{ sub.subscription.subscription_name }}</td>
								 <td>{{ sub.subscription.price }}</td>
								 <td>{{ sub.buyDate }}</td>    
								 <td>{{ sub.expiry_date }}</td>  
								 <td>{{ sub.is_active }}</td>     
								</tr> 
							{% endfor %}
							
							</tbody>
						</table>
						{% else %}
						<p>No data found</p>
						{% endif %}
					</div>
				</div>
				</div>
			</div>
		</div>
		<!-- Chart-->
		<div class="row mt-4">
			<div class="col-12 col-md-12">
				<div class="card dashboard-card">
					<div class="row top-card d-flex justify-content-between mb-3">
						<div class="col-12 col-md-8 book-card">
							<p class="f-18 mb-0"><strong>Users</strong></p>
						</div>
					</div>
					<figure class="highcharts-figure">
						<div id="totalusers"></div>				   
					</figure>
				</div>
			</div>
		</div>
	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		Highcharts.chart('totalusers', {
		  chart: {
			type: 'column'
		  },
		  title: {
			text: '',
			align: 'left'
		  },
		  subtitle: {
			text: '',
			align: 'left'
		  },
		  xAxis: {
			title: {
			  text: 'Months'
			},
			categories: {{ categories|safe }},
			crosshair: true,
			accessibility: {
			  description: 'Months'
			}
		  },
		  yAxis: {
			min: 0,
			title: {
			  text: 'User Count'
			}
		  },
		  tooltip: {
			valueSuffix: ' users'
		  },
		  plotOptions: {
			column: {
			  pointPadding: 0.2,
			  borderWidth: 0
			}
		  },
		  colors: ['#B06B1A'],
		  series: {{ user_series_data|safe }},
		});
	  });

</script>

{% endblock %}