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

<!-- Begin Page Content -->

 <title>Manimaran | Booking List</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4 d-flex justify-content-between align-items-center">
            <h2 class="topHead">Bookings List</h2>
             <div class="export-btn">
                <button class="outline-btn" onclick="location.href='export-csv-booking'" type="submit">Export CSV</button>
            </div>
        </div>
        <form action="/booking-listing" method="get">
        <div class="users-top-filters d-flex align-items-end">

            <div class="search filters-search relative mr-4">
                <input type="text" class="mb-0" placeholder="Type in to search .." name="search" value="{% if search_post %}{{search_post}}{% endif %}">
                <div class="search-icons">
                    <button type="button" class="search-icn-btn">
                        <img src="{% static 'admin/img/search.svg' %}" alt="">
                    </button>
                </div>
            </div>
            <div class="from-date me-3">
                <label class="d-block">From</label>
                <input type="date" id="start_date" name="start_date" value="{{ search_start }}" class="mb-0">
            </div>
            <div class="from-date to me-3">
                <label class="d-block">To</label>
                <input type="date" id="end_date" value="{{ search_end }}" name="end_date" class="mb-0">
            </div>
            <div class="search-data">
                <button type="submit" class="btn dark-btn rounded"> Search</button>
            </div>
        </div>
        </form>
        <div class="manage-user-data table-customer border-0 mt-4">
            <div class="card px-0">
                <div class="card-header bg-white ">
                        <h2 class="f-20 mb-0">Bookings List</h1>
                </div>
                <div class="manage-user-table">
                        <div class="table-responsive">
                {% if book_obj %}
                <table class="table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th><p>Customer Name</p></th>
                            <th><p>ServiceProvider Name</p></th>
                            <th><p class="booking-time">Booking Date</p></th>
                            <!-- <th>Booking Time</th> -->
                            <th><p>Category</p></th>
                            <th><p>Total Price</p></th>
                            <th><p>Status</p></th>
                            <th><p>Action</p></th>

                        </tr>
                    </thead>
                    <tbody>
                    {% for booking in book_obj %}
                        <tr>
                            <td>
                                <div class="table-users name">
                                    <!-- <img src="{% if booking.user.avatar %}{{ booking.user.avatar }}{% else %}{% static 'admin/images/user.png' %}{% endif %}" alt=""> -->
                                     {{booking.user.first_name}} {{booking.user.last_name}}
                                    </div>

                            </td>    
                            <td>
                                <div class="table-users name">
                                    <!-- <img src="{% if booking.worker.avatar %}{{ booking.worker.avatar }}{% else %}{% static 'admin/images/user.png' %}{% endif %}" alt="">  -->
                                    {{booking.worker.first_name}} {{booking.worker.last_name}}  
                                </div>
                                
                            </td>                    
                            <td>
                               <div class="date-time">
                                    <span>{{booking.booking_date}}</span>
                                    <span class="d-block">({{booking.booking_time}})</span>
                               </div> 
                            </td>
                            <td>{{booking.sub_services.name}}</td>
                            <td>£ {{booking.total_amount}}</td>                       
                            <td>
                                <div class="complete-status relative">
                                    <span>{{booking.booking_status}}</span>
                                </div>
                            </td>   
                            <td>
                                <div class="action-btns"> 
                                    <a href="/booking-details/{{booking.id}}" class="edit-btn"><img src="{% static 'admin/images/view.svg' %}"></a>
                                </div>
                            </td>
                          
                        </tr> 
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="text-align: center;">No data found.</p>
                {% endif %}
            
            </div>
                </div>
            </div>
        </div>
        {% if book_obj %}
        <div class="demo-inline-spacing">
            <div class="pagination justify-content-center">
             <ul class="pagination">
                  {% if book_obj.has_previous %}
                       <li><a href="?page={{ book_obj.previous_page_number }}">&laquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                  {% endif %}
                  {% for i in book_obj.paginator.page_range %}
                    {% if book_obj.number == i %}
                      <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                    {% else %}
                      <li><a class='page-link ' data-href="?page={{ i }}" href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                  {% endfor %}
                  {% if cust_obj.has_next %}
                    <li><a href="?page={{ book_obj.next_page_number }}">&raquo;</a></li>
                  {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                  {% endif %}
                  </ul>
            </div>
          </div>
          {% endif %}
          <!--end of Pagination-->
    </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 %}