{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<style>
	.user-profile p.status {
    display: inline;
    color: #3EDB90;
    background-color: #3edb9030;
    padding: 0 20px;
}
</style>
<title>Seer | User Details</title>
<div class="main-content pt-4">
	<div class="content-wrapper">
		<h2 class="f-22">User</h2>
		<div class="row mt-4 mb-5">
            <div class="col-12 col-md-4">
                <div class="card dashboard-card user-img text-center">
                    <img class="user-class" src="{% if user_obj.primary_image %}{{base_url}}{{ user_obj.primary_image }}{% else %}{% static 'admin/images/user-default.png' %}{% endif %}" />
                    <h6 class="mb-1">{% if user_obj.first_name %}{{user_obj.first_name}} {{user_obj.last_name}} {% else %} N/A{%endif%}</h6>
                    <p class="mb-0">{% if user_obj.email %}{{user_obj.email}}{% else %} N/A {%endif%}</p>
                </div>
            </div>
            <div class="col-12 col-md-8">
                <div class="  card  user-mains dashboard-card user-detail main-user-content">
                  <div class="row w-100 m-auto user-profile">
                   <div class="col-12 col-md-4 mb-3">
                         <h6>User Name</h6>
                         <p>{% if user_obj.first_name %}{{user_obj.first_name}} {{user_obj.last_name}} {% else %} N/A {%endif%}</p>
                   </div>
                   <div class="col-12 col-md-4 mb-3">
                         <h6>Phone Number</h6>
                         <p>{% if user_obj.phone_number %}{{user_obj.phone_number}} {% else %} N/A{%endif%}</p>
                   </div>
                   <div class="col-12 col-md-4 mb-3">
                         <h6>Date of Birth</h6>
                         <p>{% if user_obj.date_of_birth %}{{user_obj.date_of_birth}}{% else %} N/A{%endif%}</p>
                   </div>
                   <div class="col-12 col-md-4">
                         <h6>Email ID</h6>
                         <p>{% if user_obj.email %}{{user_obj.email}}{% else %} N/A {%endif%}</p>
                   </div>
                    <div class="col-12 col-md-4">
                         <h6>Country Origin</h6>
                         <p>{% if user_obj.country_origin %}{{user_obj.country_origin}}{% else %} N/A {%endif%}</p>
                   </div>
                   <div class="col-12 col-md-4">
                         <h6>City</h6>
                         <p>{% if user_obj.city %}{{user_obj.city}}{% else %} N/A {%endif%}</p>
                   </div>
                    <div class="col-12 col-md-4">
                         <h6>State</h6>
                         <p>{% if user_obj.state %}{{user_obj.state}}{% else %} N/A {%endif%}</p>
                   </div>
                   <div class="col-12 col-md-4">
                         <h6>Status</h6>
                         <p class="status">{% if user_obj.status %}Active{% else %}Inactive {% endif %}</p>
                   </div>
                </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">Appointments</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 user-card">
                                <div class="top-card">
                                    <p class="f-18">Upcoming Appointments</p>
                                </div>
                                <div class="table-users">
                                    <div class="table-responsive w-100">  
                                    {% if upcoming_booking %}        
                                      <table class="table w-100">
                                        <thead>
                                          <tr>
                                            <th>Fortuneteller 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.fortune_teller.first_name}} {{book.fortune_teller.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>Fortuneteller 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.fortune_teller.first_name}} {{book.fortune_teller.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>
		
	</div>
</div>

{%endblock%}

{%block js%}


{% endblock %}