{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
{% load tz %}
{% get_current_timezone as TIME_ZONE %}
{% timezone TIME_ZONE %}
{% now "Y-m-d" as current_date %}

<title>Kila Kolis | Dashboard</title>
<style>
.booked-box img {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    object-fit: cover;
}
.appoint-btn .dark-btn {
    background: linear-gradient(90deg, #EA5F8B, #A654AC, #6149CD) !important;
}
.dashboard-appoint {
    display: grid;
    grid-template-rows: .5fr 2fr;
}
.dashboard-appoint .booked-appointments {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<div class="welcome-admin">
			<!-- <div class="row align-items-center">
				<div class="col-12 col-md-5">
					<div class="dashboard-welcome text-white">
						<div class="current-time mb-4">
							<span class="f-12"><img class="me-2" src="{% static 'admin/images/cal.png' %}"> <span class="pe-1">  {{ current_date }} </span> | <span class="ps-1" id="real-time"></span></span>
						</div>
						{% endtimezone %}
						<h2 class="f-24 bold">Welcome back, {{admin_obj.firstName}} {{admin_obj.lastName}}</h2>
						<p class=" f-14 mb-0">Have a nice day and great work.</p>
					</div>
				</div>
				<div class="col-12 col-md-4">
					<div class="dashboard-welcome-img">
						<img class="total-wecome" src="{% static 'admin/images/3d-casual-life-girl-winner-holding-medal-in-hands.png' %}">
					</div>
				</div>
			</div> -->
		</div>
		<div class="dashboard-wrapper">
			<div class="dashboard-users mt-1 mb-3 gap-0 row">
					<div class="dashboard-box col-xxl-4 col-4" onclick="location.href='/user-listing' " style="cursor: pointer;">
						<div class="dash-total-users users-box relative">
							<div class="usericons pink user-icon">
								<img class="total-lefticon" src="{% static 'admin/images/all-users.png' %}">
							</div>
							<div class="user-total-right">
								<h5 class="bold f-20 mb-0">{{total_users}}</h5>
								<p class="gray f-12 mb-0">Total Users</p>
							</div>
						</div>
					</div>
					<!--  <div class="dashboard-box" onclick="location.href='/travel-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="usericons pink travel-icon">
								<img class="total-lefticon" src="{% static 'admin/images/route.png' %}">
							</div>
							<div class="user-total-right">
								<h5 class="bold f-20 mb-0">{{total_travellers}}</h5>
								<p class="gray f-12 mb-0">Total Travelers</p>
							</div>
						</div>
					</div>  -->
					<div class="dashboard-box col-xxl-4 col-4" onclick="location.href='/travel-listing' " style="cursor: pointer;">
						<div class="dash-total-users amount-box relative">
							<div class="usericons pink travel-icon">
								<img class="total-lefticon" src="{% static 'admin/images/route.png' %}">
							</div>
							<div class="user-total-right">
								<h5 class="bold f-20 mb-0">$ {{admin_obj.earnings}}</h5>
								<p class="gray f-12 mb-0">Total Earnings</p>
							</div>
						</div>
					</div>  	
            <div class="dashboard-box col-xxl-4 col-4" onclick="location.href='/route-listing' " style="cursor: pointer;">
							<div class="dash-total-users route-box relative">
								<div class="usericons pink route-icon">
									<img class="total-lefticon" src="{% static 'admin/images/travel-icon.png' %}">
								</div>
								<div class="user-total-right">
									<h5 class="bold f-20 mb-0">{{total_routes}}</h5>
									<p class="gray f-12 mb-0">Total Routes</p>
								</div>
						</div>
					</div>
			</div>
		</div>

		<!-- All patients table -->
		<div class="manage-user-data table-customer border-0 mt-4">
			<div class="row">
				<div class="col-12">
					<div class="card px-0">
						<div class="card-header bg-white d-flex justify-content-between align-items-center">
						   <h2 class="f-18 bold mb-0">All Users</h2>
						   <div class="view-all"><a class="view-txt gray bold f-14" href="/user-listing">See All <i class="fas fa-long-arrow-alt-right"></i></a></div>
						</div>
						<div class="manage-user-table">
						   <div class="table-responsive">
							  <table class="table" id="dataTable" width="100%" cellspacing="0">
								 <thead>
									<tr>
									   <th>ID</th>
									   <th><p>User Name</p></th>
									   <th><p>Phone Number</p></th>
									   <th><p>Email Address</p></th>
									   <th><p>Status</p></th>
									</tr>
								 </thead>
								 <tbody>
								{% for all_user in users_obj %} 
									<tr>
										<td>{{all_user.id }}</td>
									   <td>
										 <div class="user-table-icon">
											 <img src="{% if all_user.image %}{{all_user.image}}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
											 <span>{{all_user.name}}</span>
										 </div>
									   </td>
									   <td><span class="light-blue">{{all_user.phone_number}}</span></td>
									   <td>{{all_user.email}}</td>
									   <td><span class="status-active">{% if all_user.status == 1 %}Active{% else %}Inactive{% endif %}</span></td>
									</tr>
								{% endfor %} 
								 </tbody>
							  </table>
						   </div>
						</div>
					 </div>
				</div>
			</div>
		 </div>
         <div class="manage-user-data table-customer border-0 mt-4">
			<div class="row">
				<div class="col-12">
					<div class="card px-0">
						<div class="card-header bg-white d-flex justify-content-between align-items-center">
						   <h2 class="f-18 bold mb-0">All Routes</h2>
						   <div class="view-all"><a class="view-txt gray bold f-14" href="/route-listing">See All <i class="fas fa-long-arrow-alt-right"></i></a></div>
						</div>
						<div class="manage-user-table">
						   <div class="table-responsive">
							  <table class="table" id="dataTable" width="100%" cellspacing="0">
								 <thead>
									<tr>
									   <th>ID</th>
									   <th><p>Sender</p></th>
									   <th><p>Traveler</p></th>
									   <th><p>Parcel Description</p></th>
									   <th><p>Weight Of Parcel</p></th>
									   <th><p>City</p></th>
									   <th><p>Payment</p></th>
									</tr>
								 </thead>
                                 <tbody>
                                    {% if route_obj %}
                                      {% for doctor in route_obj %}
                                        <tr>
                                          <td>{{ doctor.id }}</td>
                                          <td>
                                            <div class="user-table-icon">
                                              <img src="{% if doctor.requests.sender.image %}{{ doctor.requests.sender.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user">
                                              <span>{{ doctor.requests.sender.full_name }}</span>
                                            </div>
                                          </td>
                                          <td>
                                            <div class="user-table-icon">
                                              <img src="{% if doctor.requests.traveller.image %}{{ doctor.requests.traveller.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user">
                                              <span>{{ doctor.requests.traveller.full_name }}</span>
                                            </div>
                                          </td>
                                          <td><span class="light-blue">{{ doctor.requests.parcel_description }}</span></td>
                                          <td><span class="light-blue">{{ doctor.requests.weight_parcel }}</span></td>
                                          <td><span class="light-blue">{{ doctor.requests.city }}</span></td>
                                          <td><span class="light-blue">{{ doctor.payment }}</span></td>
                                        </tr>
                                      {% endfor %}
                                    {% else %}
                                      <tr>
                                        <td colspan="12" class="text-center" style="color: black; font-size: 18px; font-weight: 500;">No data found</td>
                                      </tr>
                                    {% endif %}
                                  </tbody>
							  </table>
						   </div>
						</div>
					 </div>
				</div>
			</div>
		 </div>
		<!-- All Nurses 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-18 bold mb-0">All Travelers</h2>
				  <div class="view-all"><a class="view-txt f-14 gray bold" href="/travel-listing">See All <i class="fas fa-long-arrow-alt-right"></i></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>Traveler ID</p></th>
							  <th><p>Traveler Name</p></th>
							  <th><p>Phone Number</p></th>
							  <th><p>Email Address</p></th>
							  <th><p>Status</p></th>
						   </tr>
						</thead>
						<tbody>
						{% for doctor in traveller_obj %}
						   <tr>
							<td>{{doctor.id}}</td>
							  <td>
								<div class="user-table-icon">
									<img src="{% if doctor.image %}{{ doctor.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
									<span>{{ doctor.name }}</span>
								</div>
							  </td>
							  <td><span class="light-blue">{{ doctor.phone_number }}</span></td>
							  <td>{{ doctor.email }}</td>
							  <td><span class="status-active">{% if doctor.status == True %}Active{% else %}InActive{% endif %}</span></td>
						   </tr>
						{% endfor %}
						</tbody>
					 </table>
				  </div>
			   </div>
			</div>
		 </div>
	</div>
</div> -->

{% endblock %}

{% block js %}
<script>
function updateTime() {
    var currentTime = new Date();
    var hours = currentTime.getHours().toString().padStart(2, '0');
    var minutes = currentTime.getMinutes().toString().padStart(2, '0');
    var seconds = currentTime.getSeconds().toString().padStart(2, '0');
    document.getElementById('real-time').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
{% endblock %}