{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Manimaran | Dashboard</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="f-22 mb-0">Dashboard</h2>
		<p class="gray f-14 mb-2">Welcome to Admin!</p>
		<div class="row">
			<div class="col-12">
				<div class="row dashboard-users mt-3 mb-3">
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-customer-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/users.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-worker-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Service Providers</p>
								<h5 class="bold f-20 mb-0">{{total_workers}}</h5>
							</div>
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/consultation.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/payment-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Payments</p>
								<h5 class="bold f-20 mb-0">£{{total_payments}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/revenue.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/booking-listing' " 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>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/booking.svg' %}">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<div class="book-card">
							<p class="f-15"><strong>Total Earnings</strong></p>
						</div>
					</div>
					
					<figure class="highcharts-figure">
						<div id="myearning"></div>
					</figure>
				</div>
			</div>
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card user-card p-3">
					<div class="top-card d-flex justify-content-between">
						<p class="f-15"><strong>Bookings</strong></p>
					</div>
					<figure class="highcharts-figure">
						<div id="bookingchart"></div>
					</figure>
				</div>
			</div>
		</div>

		<!-- New user tables -->
		<div class="manage-user-data table-customer border-0 mt-4">
			<div class="row">
				<div class="col-12 col-md-6">
					<div class="card px-0">
						<div class="card-header bg-white d-flex justify-content-between align-items-center">
						   <h2 class="f-20 mb-0">New Users</h2>
						   <div class="view-all"><a class="view-txt dark text-decoration-none " href="/get-customer-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>User Name</th>
									   <th>Email</th>
									</tr>
								 </thead>
								 <tbody>
								 {% for all_user in all_user %}
									<tr>
									   <td>
										 <div class="user-table-icon">
											 <img src="{% if all_user.avatar %}{{all_user.avatar}}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
											 <span>{{all_user.first_name}} {{all_user.last_name}}</span>
										 </div>
									   </td>
									   <td>{{all_user.email}}</td>
									</tr>
									{% endfor %}
								 </tbody>
							  </table>
						   </div>
						</div>
					 </div>
				</div>
				<div class="col-12 col-md-6">
					<div class="card px-0">
						<div class="card-header bg-white d-flex justify-content-between align-items-center">
						   <h2 class="f-20 mb-0">New Service Providers</h2>
						   <div class="view-all"><a class="view-txt dark text-decoration-none " href="/get-worker-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>User Name</th>
									   <th>Email</th>
									</tr>
								 </thead>
								 <tbody>
								 {% for worker in all_worker %}
									<tr>
									   <td>
										 <div class="user-table-icon">
											 <img src="{% if worker.avatar %}{{ worker.avatar }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
											 <span>{{worker.first_name}} {{worker.last_name}}</span>
										 </div>
									   </td>
									   <td>{{ worker.email }}</td>
									</tr>
								{% endfor %}
								 </tbody>
							  </table>
						   </div>
						</div>
					 </div>
				</div>
			</div>
			
		 </div>
		<!-- Booking table -->
		<div class="manage-user-data table-customer border-0 mt-4">
			<div class="card px-0">
			   <div class="card-header bg-white d-flex justify-content-between align-items-center">
				  <h2 class="f-20 mb-0">Booking List</h2>
				  <div class="view-all"><a class="view-txt dark text-decoration-none " href="/booking-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>Customer Name</th>
							  <th>Service Provider Name</th>
							  <th>Date & Time</th>
							  <th>Service</th>
							  <th>Price</th>
							  <th>Status</th>
						   </tr>
						</thead>
						<tbody>
						{% for booking in booking_obj %}
						   <tr>
							  <td>
								<div class="user-table-icon">
									<img src="{% if booking.user.avatar %}{{ booking.user.avatar }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
									<span>{{ booking.user.first_name }} {{ booking.user.last_name }}</span>
								</div>
							  </td>
							   <td>
								<div class="user-table-icon">
									<img src="{% if booking.worker.avatar %}{{ booking.worker.avatar }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
									<span>{{ booking.worker.first_name }} {{ booking.worker.last_name }}</span>
								</div>
							  </td>
							  <td>
								<div class="date-time">
									<span>{{ booking.booking_date }}</span>
									<span>( {{ booking.booking_time }} )</span>
								</div>
							  </td>
							  <td>{{ booking.sub_services.name }}</td>
							  <td>£{{ booking.price }}</td>
							  <td>
								 <div class="status-complete">
									{{ booking.booking_status }}
								 </div>
							  </td>
						   </tr>
						   {% endfor %}
						</tbody>
					 </table>
				  </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>
    document.addEventListener('DOMContentLoaded', function () {
      Highcharts.chart('myearning', {
        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: ''
          }
        },
  
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        colors: ['#B06B1A', '#efe1d1'],
        series: {{ series_data|safe }}
      });
    });
  </script>
<!-- earnings chart -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
      Highcharts.chart('bookingchart', {
        chart: {
          type: 'line'
        },
        title: {
          text: ''
        },
        subtitle: {
          text: ''
        },
        xAxis: {
          categories: {{ months|safe }}
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        colors: ['#B06B1A', '#efe1d1'],
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false
            },
            enableMouseTracking: false
          }
        },
        series: [{
          name: 'This Year',
          data: {{ bookings_this_year_data|safe }}
        }, {
          name: 'Last Year',
          data: {{ bookings_last_year_data|safe }}
        }]
      });
    });
  </script>
{% endblock %}