{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<!-- Begin Page Content -->
 <title>Manimaran | Customer Details</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="topHead">Customer Details</h2>
            <!-- <p class="f-13">Welcome to Lorem Ipsum Admin Dashboard</p> -->
        </div>
        <!-- customer details-->
        <div class="user-profile user-profileContent d-flex align-items-center justify-content-around">
            <div class="user-img text-center">
                <img src="{% if cust_obj.avatar %}{{ cust_obj.avatar }}{% else %}{% static '/admin/images/user-default.png' %}{% endif %}">
            </div>
            <div class="user-detail">
               <div>
                     <h6>User Name</h6>
                     <p>{{cust_obj.first_name}} {{ cust_obj.last_name}}</p>
               </div>
               <div>
                     <h6>Phone Number</h6>
                     <p>{{ cust_obj.phone_number }}</p>
               </div>
               <div>
                     <h6>Email ID</h6>
                     <p>{{ cust_obj.email }}</p>
               </div>
               <div>
                     <h6>Status</h6>
                     <p class="status">{% if cust_obj.status == 1 %}Active{% else %}Inactive{% endif %}</p>
               </div>
            </div>
        </div>

        <!-- appointments-->
        <div class="row mt-5">
            <div class="appointTab d-flex justify-content-between align-items-center">
                <div class="head">
                    <h2 class="topHead">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">Appointment</p>
                                </div>
                                <div class="table-users manage-user-table">
                                    <div class="table-responsive w-100">          
                                      <table class="table w-100">
                                        <thead>
                                          <tr>
                                            <th>Service Provider</th>
                                            <th>Date & Time</th>
                                            <th>Services</th>
                                            <th>Payment</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                        {% for come in upcoming %}
                                        <tr>
                                            <td>
                                                <div class="table-users">								                    		
                                                    <h6 class="f-14">{{come.worker.first_name}} {{come.worker.last_name}}</h6>
                                                </div>
                                            </td>
                                            <td>{{come.booking_date }}<br><span>( {{come.booking_time}} )</span></td>
                                            <td>{{come.sub_service.name}}</td>
                                            <td>£{{ come.price }}</td>
                                        </tr>  
                                        {% endfor %}
                                        </tbody>
                                      </table>        
                                    </div>
                                </div>
                            </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="past" role="tabpanel" aria-labelledby="past-tab">
                    <div class="col-12 col-md-12">
                        <div class="card dashboard-card">
                            <div class="top-card">
                                <p class="f-18">Appointment</p>
                            </div>
                            <div class="table-users manage-user-table">
                                    <div class="table-responsive w-100">          
                                      <table class="table w-100">
                                        <thead>
                                          <tr>
                                            <th>Service Provider</th>
                                            <th>Date & Time</th>
                                            <th>Services</th>
                                            <th>Payment</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                        {% for come in upcoming %}
                                        <tr>
                                            <td>
                                                <div class="table-users">								                    		
                                                    <h6 class="f-14">{{come.worker.first_name}} {{come.worker.last_name}}</h6>
                                                </div>
                                            </td>
                                            <td>{{come.booking_date }}<br><span>( {{come.booking_time}} )</span></td>
                                            <td>{{come.sub_service.name}}</td>
                                            <td>£{{ come.price }}</td>
                                        </tr>  
                                        {% endfor %}
                                        </tbody>
                                      </table>        
                                    </div>
                        </div>
                </div>
                  </div>
                </div>	    			
        </div>
    </div>
</div>

<!-- /.container-fluid -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{% endblock %}