{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Seer | Dashboard</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="f-22">Dashboard</h2>
		<div class="row">
			<div class="col-12">
				<div class="row dashboard-users">
					<div class="col-12 col-md-3" onclick="location.href='/user-list' " 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">{{user_obj}}</h5>
								<img class="total-user-grph" src="{% static 'admin/images/graph-pink.svg' %}">
							</div>
							<div class="usericons pink">
								<img class="total-lefticon" src="{% static 'admin/images/user-icon.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-3"  onclick="location.href='/fortuneteller-list' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Fortune Tellers</p>
								<h5 class="bold f-20 mb-0">{{fortune_obj}}</h5>
								<img class="total-user-grph" src="{% static 'admin/images/graph-purple.svg' %}">
							</div>
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/consultation.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-3" onclick="location.href='/payments' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Payment</p>
								<h5 class="bold f-20 mb-0">${{total_earning}}</h5>
								<img class="total-user-grph" src="{% static 'admin/images/graph-blue.svg' %}">
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/revenue.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-3" onclick="location.href='/booking-list' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Total Bookings</p>
								<h5 class="bold f-20 mb-0">{{total_bookings}}</h5>
								<img class="total-user-grph" src="{% static 'admin/images/graph-blue.svg' %}">
							</div>
							<div class="usericons yellow">
								<img class="total-lefticon" src="{% static 'admin/images/appointment.svg' %}">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			{% comment %} <div class="col-12 col-md-6">
				<div class="card dashboard-card">
					<p class="f-15">Total Earnings</p>
					<figure class="highcharts-figure">
						<div id="totaluser"></div>
					</figure>
				</div>
			</div> {% endcomment %}
			<div class="col-12 col-md-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<div class="book-card">
							<p class="f-15 mb-0"><strong>Earnings</strong></p>
						</div>
					</div>
					<div class="chart-region">
					         <canvas id="earning"></canvas>

						  {% comment %} <div id="container"></div>  {% endcomment %}
					</div>
				</div>
			</div> 
			 <div class="col-12 col-md-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<div class="book-card">
							<p class="f-15 mb-0"><strong>Bookings</strong></p>
						</div>
					</div>
					<div class="chart-region">
						<canvas id="BookingGraph"></canvas>
					</div>
				</div>
			</div> 
		</div>
		<div class="row new-user-table mt-3">
			<div class="col-12 col-md-6">
				<div class="card user-card">
					<div class="top-card d-flex justify-content-between">
						<p class="f-15">New Users</p>
						<p class="f-15 bold dark" onclick="location.href='/user-list'" style="cursor:pointer;">View All</p>
					</div>
					<div class="table-users">
						<div class="table-responsive w-100">          
							<table class="table w-100">
							<thead>
								<tr>
								<th>Users Name</th>
								<th>Email</th>
								</tr>
							</thead>
							<tbody>
							{% for user in five_user_obj %}
							<tr>
								<td>
									<div class="table-users">
										<img src="{% if user.primary_image %}{{base_url}}{{user.primary_image}}{% else %}{% static 'admin/images/user-default.png' %}{% endif %}">
										<h6 class="f-14">{% if user.first_name %}{{user.first_name}} {{user.last_name}}{% else %}N/A{% endif %}</h6>
									</div>
								</td>
								<td>{% if user.email %}{{user.email}} {% else %} N/A {% endif %}</td>			
							</tr>
							{% endfor %}
							</tbody>
							</table>        
						</div>
					</div>
				</div>
			</div>
			<div class="col-12 col-md-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<p class="f-15">New Fortuneteller</p>
						<p class="f-15 bold dark" onclick="location.href='/fortuneteller-list'" style="cursor: pointer;">View All</p>
					</div>
					<div class="table-users">
						<div class="table-responsive w-100">          
							<table class="table w-100">
							<thead>
								<tr>
								<th>Users Name</th>
								<th>Email</th>							
								</tr>
							</thead>
							<tbody>
							{% for fortune in five_fortune_obj %}
							<tr>
								<td>
									<div class="table-users">
										<img src="{% if fortune.image %}{{base_url}}{{ fortune.image }}{% else %}{% static 'admin/images/user-default.png' %}{% endif %}">
										<h6 class="f-14">{% if fortune.first_name %}{{ fortune.first_name }} {{ fortune.last_name }}{% else %}N/A{% endif %}</h6>
									</div>
								</td>
								<td>{% if fortune.email %}{{fortune.email}} {% else %} N/A {% endif %}</td>							
							</tr>  
							{% endfor %}
							</tbody>
							</table>        
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row new-user-table advisors mt-3">
			<div class="col-12 col-md-12">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<p class="f-15">Booking Lists</p>
						<p class="f-15 bold dark" onclick="location.href='/booking-list'" style="cursor:pointer;">View All</p>
					</div>
					<div class="table-users">
						<div class="table-responsive w-100">          
							<table class="table w-100">
							<thead>
								<tr>
								<th>Users ID</th>
								<th>Date & Time</th>
								<th>Category</th>
								<th>Fortuneteller Name</th>
								<th>Status</th>
								</tr>
							</thead>
							<tbody>
								{% for book in booking_data %}
							<tr>
								<td>#{{book.appointment_id}}</td>
								<td>
									<div class="table-users">
										<p class="f-14 mb-0">{{book.appointement_date}}</p>
										<p class="f-14 mb-0"> ( {{book.appointment_time}} )</p>
									</div>
								</td>
								<td>{{book.service.service_name}}</td>
								<td>{{ book.fortune_teller.first_name}} {{ book.fortune_teller.last_name}} 
								</td>
								<td>
									<span class="complete relative d-block">
										{{ book.appointment_status }}
									</span>
								</td>
								
							</tr>
							{% endfor %}  
							</tbody>
							</table>        
						</div>
					</div>
				</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>
let bookings_data = '{{ bookings }}'
let current_year = '{{year}}'
user_count1 = JSON.parse(bookings_data)
const canvas = document.getElementById('BookingGraph');

// Prepare the data for the graph
const labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
const data = {
  labels: labels,
  datasets: [
    {
      label: current_year + ' - Bookings',
      data:user_count1,
      borderColor: 'rgba(217, 58, 140, 0.8)', // Customize the color as needed
      fill: false,
    },
  ],
};

// Create the chart
const chart = new Chart(canvas, {
  type: 'line',
  data: data,
//   options: {
//     responsive: true,
//     plugins: {
//       title: {
//         display: true,
//         text: 'Bookings',
//       },
//     },
//   },
	options: {
		legend: {display: false},
		title: {
		display: true,
		text: "Bookings"
		}
	}
});



let earning_data = '{{earning}}'
earning_data1 = JSON.parse(earning_data)
var xValues = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
var yValues = [55, 49, 44, 24, 15,22,54,67,24,55,66];
var barColors = ["rgba(217, 58, 140, 0.8)", "rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)", "rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)","rgba(217, 58, 140, 0.8)"];

new Chart(earning, {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      label: current_year + ' - Earnings',
      backgroundColor: barColors,
      data: earning_data1
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "Earnings"
    }
  }
});


</script>

{% endblock %}