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

<!-- Begin Page Content -->
<title>Manimaran | Service Provider Details</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="topHead">Service Provide Details</h2>
            <!-- <p class="f-13">Welcome to Lorem Ipsum Admin Dashboard</p> -->
        </div>
        <!-- customer details-->
        <div class="user-profile 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>Date of Birth</h6>
                     <p>{{ cust_obj.dob }}</p>
               </div>
               <div>
                     <h6>Email ID</h6>
                     <p>{{ cust_obj.email }}</p>
               </div>
                <div>
                     <h6>Address</h6>
                     <p>{{ cust_obj.address }}</p>
               </div>
                <div>
                     <h6>Experince</h6>
                     <p>{{ cust_obj.experience }}</p>
               </div>
                <div>
                     <h6>Services</h6>
                     {% for ser in service_obj %}
                     <p>{{ ser.services.name }}</p>
                     {% endfor %}
               </div>
               <div>
                     <h6>Status</h6>
                     <p class="status">{% if cust_obj.status == 1 %}Active{% else %}Inactive{% endif %}</p>
               </div>
               <div>
                     <h6>Account Status</h6>
                      <p class="status">{% if cust_obj.is_worker_approved == 0 %}Pending{% elif cust_obj.is_worker_approved == 1%}Approved{% else %}Disapproved{% endif %}</p>
               </div>
            </div>
            {% if cust_obj.is_worker_approved == 0 %}
              <div style="margin-top:40px">
                     <h6>Do you want to approve this account ?</h6>
                      <a href="/approve-worker-account/{{cust_obj.id}}" class="edit-btn"><i class="fa fa-check" aria-hidden="true" style="font-size:40px; margin-left: 111px;"></i></a>
                      <a href="/disapprove-worker-account/{{cust_obj.id}}" class="edit-btn"><i class="fa fa-times" aria-hidden="true" style="font-size:40px; color:red;"></i></a>
               </div>
            {% elif cust_obj.is_worker_approved ==  2 %}
              <div style="margin-top:40px">
            <h6>This account is Disapproved. Do you want to approved this account?</h6>
             <button type="submit" class="btn dark-btn" onclick="location.href='/approve-worker-account/{{cust_obj.id}}';" style="margin-left: 209px; background: #3EDB90;">Submit</button>
            {% endif %}
            </div>
        </div>


        <div class="top-bar mb-4 mt-5">
            <h2 class="topHead">Service Provide Bank Details</h2>
            <!-- <p class="f-13">Welcome to Lorem Ipsum Admin Dashboard</p> -->
        </div>
        <div class="user-profile worker-details-col">
            <div class="user-detail">
               <div>
                     <h6>Bank</h6>
                     <p>{% if bank_obj.bank %}{{ bank_obj.bank }}{% else %}N/A{% endif %}</p>
               </div>
               <div>
                     <h6>Sort Code</h6>
                     <p>{% if bank_obj.sort_code %}{{ bank_obj.sort_code }}{% else %}N/A{% endif %}</p>
               </div>
               <div>
                     <h6>Account Number</h6>
                     <p>{% if bank_obj.account_number %}{{ bank_obj.account_number }}{% else %}N/A{% 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>Customer Name</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.user.first_name}} {{come.user.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>Customer Name</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.user.first_name}} {{come.user.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 %}