{% extends 'base/base.html' %}
{% load static %}

{% block title %}My Bookings - PRACA Equipment Rental{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h1 class="h3 mb-1">My Bookings</h1>
            <p class="text-muted mb-0">View and manage your equipment rental history</p>
        </div>
        <a href="{% url 'equipment:home' %}" class="btn btn-primary">
            <i class="fas fa-plus-circle me-1"></i> Rent Equipment
        </a>
    </div>

    <!-- Bookings Tabs -->
    <ul class="nav nav-tabs mb-4" id="bookingsTab" 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">
                Upcoming ({{ upcoming_bookings|length }})
            </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">
                Past ({{ past_bookings|length }})
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="cancelled-tab" data-bs-toggle="tab" data-bs-target="#cancelled" type="button" role="tab">
                Cancelled ({{ cancelled_bookings|length }})
            </button>
        </li>
    </ul>

    <div class="tab-content" id="bookingsTabContent">
        <!-- Upcoming Bookings -->
        <div class="tab-pane fade show active" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
            {% if upcoming_bookings %}
                {% for booking in upcoming_bookings %}
                    {% include 'bookings/partials/booking_card.html' with booking=booking %}
                {% endfor %}
            {% else %}
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-calendar-alt fa-4x text-muted"></i>
                    </div>
                    <h3 class="h5">No Upcoming Bookings</h3>
                    <p class="text-muted">You don't have any upcoming equipment rentals.</p>
                    <a href="{% url 'equipment:list' %}" class="btn btn-primary">
                        <i class="fas fa-plus-circle me-1"></i> Rent Equipment
                    </a>
                </div>
            {% endif %}
        </div>

        <!-- Past Bookings -->
        <div class="tab-pane fade" id="past" role="tabpanel" aria-labelledby="past-tab">
            {% if past_bookings %}
                {% for booking in past_bookings %}
                    {% include 'bookings/partials/booking_card.html' with booking=booking %}
                {% endfor %}
                
                {% if past_bookings.has_other_pages %}
                <nav aria-label="Past bookings pagination" class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if past_bookings.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?past_page={{ past_bookings.previous_page_number }}#past">Previous</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Previous</span>
                            </li>
                        {% endif %}
                        
                        {% for i in past_bookings.paginator.page_range %}
                            {% if past_bookings.number == i %}
                                <li class="page-item active">
                                    <span class="page-link">{{ i }} <span class="sr-only">(current)</span></span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?past_page={{ i }}#past">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if past_bookings.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?past_page={{ past_bookings.next_page_number }}#past">Next</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Next</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-history fa-4x text-muted"></i>
                    </div>
                    <h3 class="h5">No Past Bookings</h3>
                    <p class="text-muted">You haven't completed any rentals yet.</p>
                </div>
            {% endif %}
        </div>

        <!-- Cancelled Bookings -->
        <div class="tab-pane fade" id="cancelled" role="tabpanel" aria-labelledby="cancelled-tab">
            {% if cancelled_bookings %}
                {% for booking in cancelled_bookings %}
                    {% include 'bookings/partials/booking_card.html' with booking=booking %}
                {% endfor %}
                
                {% if cancelled_bookings.has_other_pages %}
                <nav aria-label="Cancelled bookings pagination" class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if cancelled_bookings.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?cancelled_page={{ cancelled_bookings.previous_page_number }}#cancelled">Previous</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Previous</span>
                            </li>
                        {% endif %}
                        
                        {% for i in cancelled_bookings.paginator.page_range %}
                            {% if cancelled_bookings.number == i %}
                                <li class="page-item active">
                                    <span class="page-link">{{ i }} <span class="sr-only">(current)</span></span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?cancelled_page={{ i }}#cancelled">{{ i }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if cancelled_bookings.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?cancelled_page={{ cancelled_bookings.next_page_number }}#cancelled">Next</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Next</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-ban fa-4x text-muted"></i>
                    </div>
                    <h3 class="h5">No Cancelled Bookings</h3>
                    <p class="text-muted">You haven't cancelled any bookings yet.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .booking-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.125);
        margin-bottom: 1.5rem;
    }
    
    .booking-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    
    .booking-status {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .booking-dates {
        font-size: 0.9rem;
    }
    
    .booking-price {
        font-weight: 600;
        color: #0d6efd;
    }
    
    .nav-tabs .nav-link {
        color: #6c757d;
        font-weight: 500;
    }
    
    .nav-tabs .nav-link.active {
        color: #0d6efd;
        font-weight: 600;
    }
    
    .empty-state {
        padding: 3rem 0;
    }
    
    .empty-state-icon {
        font-size: 3rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Activate tab from URL hash
    const urlHash = window.location.hash;
    if (urlHash) {
        const tabTrigger = document.querySelector(`[data-bs-target="${urlHash}"]`);
        if (tabTrigger) {
            new bootstrap.Tab(tabTrigger).show();
        }
    }
    
    // Update tab in URL when clicked
    const tabElms = document.querySelectorAll('button[data-bs-toggle="tab"]');
    tabElms.forEach(tabElm => {
        tabElm.addEventListener('shown.bs.tab', function (event) {
            const target = event.target.getAttribute('data-bs-target');
            if (target) {
                window.location.hash = target;
            }
        });
    });
});
</script>
{% endblock %}