{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Fortune Teller Details</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Fortune Teller</h2>
	    			</div>
	    		</div>
	    		<div class="row mt-4 mb-5">
	    			<div class="col-4">
	    				<div class="user-profile">
	    				<div class="user-img text-center">
	    					<img src="{% if fortune_obj.image %}{{base_url}}{{ fortune_obj.image }}{% else %}/static/admin/images/user-default.png {% endif %}" />
	    					<h6>{% if fortune_obj.first_name %}{{fortune_obj.first_name}} {{fortune_obj.last_name}} {%else%} N/A{%endif%}</h6>
	    					<p>{% if fortune_obj.email %}{{fortune_obj.email}}{%else%} N/A {%endif%}</p>
	    				</div>
	    			</div>
	    			</div>
	    			<div class="col-8">
	    				<div class="user-profile h-100">
	    				<div class="user-detail h-100">
	    				   <div>
	    				   	  <h6>Fortune Name</h6>
	    				   	  <p>{% if fortune_obj.first_name %}{{fortune_obj.first_name}} {{fortune_obj.last_name}} {%else%} N/A{%endif%}</p>
	    				   </div>
	    				   <div>
	    				   	  <h6>Phone Number</h6>
	    				   	  <p>{% if fortune_obj.phone_number %}{{fortune_obj.phone_number}} {%else%} N/A{%endif%}</p>
	    				   </div>
	    				   <div>
	    				   	  <h6>Date of Birth</h6>
	    				   	  <p>{% if fortune_obj.date_of_birth %}{{fortune_obj.date_of_birth}}{%else%} N/A{%endif%}</p>
	    				   </div>
	    				   <div>
	    				   	  <h6>Email ID</h6>
	    				   	  <p>{% if fortune_obj.email %}{{fortune_obj.email}}{%else%} N/A {%endif%}</p>
	    				   </div>
						   <div>
							<h6>Bank Detail</h6>
							<p>{% if fortune_obj.bank_details %}{{fortune_obj.bank_details}}{%else%} N/A {%endif%}</p>
					 		</div>
	    				   <div>
	    				   	  <h6>Status</h6>
	    				   	  <p class="status">{% if fortune_obj.status == 1%}Active{% else %}Inactive {% endif %}</p>
	    				   </div>
	    				</div>
	    			</div>
	    			</div>	    	
	    		</div>
	    		<div class="row">
	    			<div class="appointTab d-flex justify-content-between align-items-center">
	    				<div class="head">
	    					<h2 class="topHead mb-0">Appointment</h2>	
	    				</div>
	    				<div class="tab">
	    					<ul class="nav nav-tabs" id="myTab" role="tablist">
							  <li class="nav-item" role="presentation">
							    <button class="nav-link active" id="upcoming-tab" data-bs-toggle="tab" data-bs-target="#upcoming" type="button" role="tab" aria-controls="upcoming" aria-selected="true">Upcoming</button>
							  </li>
							  <li class="nav-item" role="presentation">
							    <button class="nav-link" id="past-tab" data-bs-toggle="tab" data-bs-target="#past" type="button" role="tab" aria-controls="past" aria-selected="false">Past</button>
							  </li>
							</ul>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="tab-content" id="myTabContent">
					  <div class="tab-pane fade show active" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
					 			<div class="col-12 col-md-12">
			    				<div class="card dashboard-card">
			    					<div class="top-card">
			    						<p class="f-18">Upcoming Appointment</p>
			    					</div>
			    					<div class="table-users">
										<div class="table-responsive w-100">  
										{% if upcoming_booking %}        
										  <table class="table w-100">
											<thead>
											  <tr>
												<th>User Name</th>
												<th>Date & Time</th>
												<th>Services</th>
												<th>Payment</th>
												<th>Status</th>
											  </tr>
											</thead>
											<tbody>
											{% for book in upcoming_booking%}
											<tr>
												<td>
													<div class="table-users">								                    		
														<h6 class="f-14">{{book.seer_user.first_name}} {{book.seer_user.last_name}}</h6>
													</div>
												</td>
												<td>{{ book.appointement_date }}<br><span>( {{ book.appointment_time}} )</span></td>
												<td>{{ book.service.service_name}}</td>
												<td>${{ book.price }}</td>
												<td>
													<span class="complete relative d-block">
													   {{ book.appointment_status }}
												  </span>
												</td>
											</tr>
											{% endfor %}  
											</tbody>
										  </table>    
										  {% else %}
										   <p class="not-found " style="text-align:center;">No Data Found</p>     
										  {% endif %}    
										</div>
									</div>
			    				</div>
    					</div>
					  </div>
					  <div class="tab-pane fade" id="past" role="tabpanel" aria-labelledby="past-tab">
						<div class="card user-card">
							<div class="top-card">
								<p class="f-18">Past Appointment</p>
							</div>
							<div class="table-users">
								<div class="table-responsive w-100">      
								{% if past_booking %}    
								  <table class="table w-100">
									<thead>
									  <tr>
										<th>User Name</th>
										<th>Date & Time</th>
										<th>Services</th>
										<th>Payment</th>
										<th>Status</th>
									  </tr>
									</thead>
									<tbody>
									{% for book in past_booking %}
									<tr>
										<td>
											<div class="table-users">								                    		
												<h6 class="f-14">{{book.seer_user.first_name}} {{book.seer_user.last_name}}</h6>
											</div>
										</td>
										<td>{{book.appointement_date}}<br><span>( {{book.appointment_time}} )</span></td>
										<td>{{book.service.service_name}}</td>
										<td>${{book.price}}</td>
										<td>
											<span class="complete relative d-block">
											   {{book.appointment_status}}
										  </span>
										</td>
									</tr> 
									{% endfor %} 
									</tbody>
								  </table>  
								  {% else %}
								  <p style="text-align:center;" class="not-found ">No Data Found</p>     
								  {% endif %} 
								</div>
							</div>
						</div>
					  </div>
					</div>	    			
	    		</div>
	    	</div>
	    </div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->


<!-- end of js -->
{% endblock %}