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

<!-- Begin Page Content -->
<title>Kila Kolis | Travel List</title>
<div class="content-wrapper">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h2 class="f-20 bold"> Travel Listing</h2>
        </div>
        <div class="manage-user-data table-customer mt-4">
            <div class="card px-0">


                <div class="card-header bg-white ">
                  <form action="/travel-listing" method="get" class="px-3 py-2">
                    <div class="row g-2 align-items-center justify-content-end">
                  
                      <!-- Search -->
                      <div class="col-md-3">
                        <input type="text" name="search" class="form-control m-0" value="{{ search_post|default:'' }}"
                               placeholder="Search by name or phone">
                      </div>
                  
                      <!-- Start Date -->
                      <div class="col-md-2">
                        <input type="date" name="start_date" class="form-control m-0"
                               value="{{ start_date|default:'' }}" placeholder="From Date">
                      </div>
                  
                      <!-- End Date -->
                      <div class="col-md-2">
                        <input type="date" name="end_date" class="form-control m-0"
                               value="{{ end_date|default:'' }}" placeholder="To Date">
                      </div>
                  
                      <!-- Submit -->
                      <div class="col-md-auto">
                        <button type="submit" class="btn btn-primary dark-btn px-4">Search</button>
                      </div>
                  
                      <!-- Reset -->
                      <div class="col-md-auto">
                        <a href="/travel-listing" class="dark-btn d-block text-decoration-none px-4">Reset</a>
                      </div>
                    </div>
                  </form>
                  
                  
                    {% comment %} <h2 class="f-16 bold mb-0">All Travel Lists</h1> {% endcomment %}
                </div>
                <div class="manage-user-table">
                    <div class="table-responsive">
                        <table class="table table-bordered " id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th> ID</th>
                                    <th>Name</th>
                                    <!-- <th>Doctor Type</th> -->
                        
                                    <th>Travelling From</th>
                                    <th>Travelling To</th>
                                    <th>Departure Date</th>
                                    <th>Departure Time</th>
                                    <th>Arrival Date</th>
                                    <th>Arrival Time</th>
                                    <th>Capacity</th>
                                    <th>Action</th>

                                     
                                </tr>
                            </thead>
                            <tbody>
                              {% if doc_obj %}
                                {% for doctor in doc_obj %}
                                  <tr>
                                    <td>{{doctor.id}}</td>
                                    <td>
                                        <div class="user-table-icon">
                                            <img src="{% if doctor.image_url %}{{doctor.image_url}}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user">
                                            <span>{{doctor.name}}</span>
                                        </div>
                                    </td>
                                        
                                    <td><span class="light-blue">{{doctor.travelling_from}}</span></td>                       
                                    <td><span class="light-blue">{{doctor.travelling_to}}</span></td>                       
                                    <td><span class="light-blue">{{doctor.departure_date}}</span></td>                       
                                    <td><span class="light-blue">{{ doctor.departure_time|time:"g:i A" }}</span></td>
                                    <td><span class="light-blue white-space">{{doctor.arrival_date}}</span></td>                       
                                    <td><span class="light-blue">{{doctor.arrival_time|time:"g:i A"}}</span></td>                            
                                    <td><span class="light-blue">{{doctor.total_capacity}}</span></td>                            
                                    <td>
                                      <div class="action-btns">
                                          <!-- <a href="/edit-user-details/{{doctor.id}}" class="edit-btn" data-toggle="tooltip" data-placement="top" title="Edit"><img src="/static/admin/images/btn_edit.png" class="img-fluid edit"></a>
                                          <a onclick="theFunction({{doctor.id}});" class="edit-btn" data-toggle="tooltip" data-placement="top" title="Delete"><img src="/static/admin/images/btn_delete.png" class="img-fluid del"></a> -->

                                          <a href="/travel-details/{{doctor.id}}" class="view-btn"><img src="/static/admin/images/btn_view.png" data-toggle="tooltip" data-placement="top" title="View" class="img-fluid view"></a>
                                          <!-- <a href="/doctor-documents/{{ doctor.id}}" class="view-btn doc"><i class="far fa-file-alt"  data-toggle="tooltip" data-placement="top" title="Documents"></i></a> -->
                                      </div>
                                  </td>                                           
                                  </tr>
                                {% endfor %}
                              {% else %}
                                <tr>
                                  <td colspan="18" class="text-center" style="color: black; font-size: 18px; font-weight: 500;">No data found</td>

                                </tr>
                              {% endif %}
                            </tbody>
                        </table>
                  
                    </div>
                </div>
            </div>
        </div>
        {% if doc_obj %}
<div class="demo-inline-spacing">
  <div class="pagination justify-content-center">
    <ul class="pagination">
      {% if doc_obj.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ doc_obj.previous_page_number }}">&laquo;</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
      {% endif %}

      {% for i in doc_obj.paginator.page_range %}
        {% if doc_obj.number == i %}
          <li class="page-item active"><span class="page-link">{{ i }}</span></li>
        {% else %}
          <li class="page-item">
            <a class="page-link" href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ i }}">{{ i }}</a>
          </li>
        {% endif %}
      {% endfor %}

      {% if doc_obj.has_next %}
        <li class="page-item">
          <a class="page-link" href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ doc_obj.next_page_number }}">&raquo;</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
      {% endif %}
    </ul>
  </div>
</div>
{% endif %}

          <!--end of Pagination-->
    </div>
    </div>
</div>



<!-- Delete Patient Modal -->
<div class="modal fade small-modal" id="delPatientModal" tabindex="-1" aria-labelledby="delPatientModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">
	     	<div class="modal-header border-0">        
	        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	      </div>
        <div class="modal-body pt-0">
          <div class="delete-brand-modal text-center pt-3">
                <img src="/static/admin/images/deleteicon.png" class="bin-icon">
                <h3 class="f-20 bold">Are you sure you want to delete this User? </h3>
          </div>
        </div>
	      <div class="modal-footer justify-content-center border-0">		       
		        <button type="button" class="dark-btn" id="delete-customer" >Delete</button>
            <input type="hidden" id="model_delete_id">

		        <button type="button" class="border-btn" data-bs-dismiss="modal">Cancel</button>
	      </div>
	    </div>
  	</div>
</div>
<style>
  input[type="date"]::before {
      color: gray;
      content: attr(placeholder);
  }
  input[type="date"]:focus::before,
  input[type="date"]:valid::before {
      content: "";
  }
</style>
<!-- /.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>

<script>

  function theFunction(e){
    $('#model_delete_id').val(e)
        $('#delPatientModal').modal('show');
        return false;
    }

    $(document).on('click','#delete-customer',function(e){
        del_id = $('#model_delete_id').val()
        window.location.href='/delete-user/'+ del_id;
    });


</script>


{% endblock %}