{% extends 'base.html' %}
{% block title %}My Bookings{% endblock %}

{% block content %}
<div class="flex min-h-screen bg-gray-100">

  <!-- Sidebar -->
  <aside class="w-64 bg-white shadow-md p-6">
    <h2 class="text-xl font-bold mb-6">Welcome, {{ request.user.first_name }}</h2>
    <nav class="space-y-3">
      <a href="/customer/dashboard/" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700 {% if request.path == '/customer/dashboard/' %}bg-blue-200 font-semibold text-blue-800{% else %}text-gray-700{% endif %}">Dashboard Home</a>
      <a href="{% url 'my_bookings' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700 {% if request.path == '/my-bookings/' %}bg-blue-200 font-semibold text-blue-800{% else %}text-gray-700{% endif %}">My Bookings</a>
	  <a href="{% url 'book_services' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Book Services</a>
      <a href="{% url 'customer_profile_update' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Profile</a>
      <a href="{% url 'handlelogout' %}" class="block px-4 py-2 rounded text-red-600 hover:bg-red-100">Logout</a>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-8">
    <h1 class="text-2xl font-bold mb-4">My Bookings</h1>
   
  {% if bookings %}
    <div class="space-y-4">
        {% for booking in bookings %}
        <div class="bg-white shadow p-4 rounded-lg flex justify-between items-center">
            <div>
                <p class="font-medium text-lg">Service Name: {{ booking.service.name }}</p>               
				<p class="font-medium text-lg">Comments: {{ booking.comments }}</p> 
				<p class="font-medium text-lg">Booking Date: {{ booking.created_at|date:"Y-m-d H:i" }} GMT</p> 				
            </div>
			 <div>
                
            </div>
           <form id="cancelForm{{ booking.id }}" method="post" action="{% url 'cancel_booking' booking.id %}">
			{% csrf_token %}
			<button type="button" class="text-red-600 hover:underline" onclick="showConfirm({{ booking.id }})">
				Cancel
			</button>
		</form>

		<!-- Custom Confirm Modal -->
		<div id="confirmBox{{ booking.id }}" class="hidden fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center">
		  <div class="bg-white p-6 rounded shadow-md text-center">
			<p class="mb-4">Do you really want to cancel the request?</p>
			<button onclick="submitCancel({{ booking.id }})" class="bg-red-600 text-white px-4 py-2 rounded mr-2">Yes</button>
			<button onclick="hideConfirm({{ booking.id }})" class="bg-gray-400 text-black px-4 py-2 rounded">No</button>
		  </div>
		</div>

        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-gray-600">You have no bookings.</p>
    {% endif %}
  </main>

</div>
<script>
function showConfirm(id) {
    document.getElementById('confirmBox' + id).classList.remove('hidden');
}
function hideConfirm(id) {
    document.getElementById('confirmBox' + id).classList.add('hidden');
}
function submitCancel(id) {
    document.getElementById('cancelForm' + id).submit();
}
</script>
{% endblock %}