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

{% block title %}Booking #{{ booking.booking_number }} - PRACA{% endblock %}

{% block extra_css %}
<style>
    .timeline {
        position: relative;
        padding-left: 2rem;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 2rem;
        padding-left: 1.5rem;
        border-left: 2px solid #e9ecef;
    }
    .timeline-item.current {
        border-left-color: #0d6efd;
    }
    .timeline-item:last-child {
        padding-bottom: 0;
    }
    .timeline-marker {
        position: absolute;
        left: -0.5rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: #e9ecef;
        top: 0.25rem;
    }
    .timeline-item.current .timeline-marker {
        background-color: #0d6efd;
    }
    .timeline-content {
        padding-left: 1rem;
    }
    .item-card {
        transition: all 0.3s ease;
    }
    .item-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Booking Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Booking #{{ booking.booking_number }}</h1>
            <p class="text-muted mb-0">
                <span class="badge bg-{{ booking.get_status_display|lower }}">
                    {{ booking.get_status_display }}
                </span>
                <span class="ms-2">
                    <i class="far fa-calendar-alt me-1"></i>
                    Booked on {{ booking.created_at|date:"F j, Y" }}
                </span>
                <span class="ms-2">
                    <i class="fas fa-{{ booking.booking_type_icon }} me-1"></i>
                    {{ booking.get_booking_type_display }}
                </span>
            </p>
        </div>
        <div class="text-end">
            <a href="{% url 'bookings:booking_invoice' booking.booking_number %}" class="btn btn-outline-primary me-2">
                <i class="fas fa-file-invoice me-1"></i> View Invoice
            </a>
            <a href="{% url 'bookings:booking_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back to Bookings
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Booking Status Timeline -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Booking Status</h2>
                    <div class="timeline">
                        {% for log in booking.bookingstatuslog_set.all %}
                        <div class="timeline-item {% if forloop.last %}current{% endif %}">
                            <div class="timeline-marker"></div>
                            <div class="timeline-content">
                                <h3 class="h6">{{ log.get_status_display }}</h3>
                                <p class="text-muted small mb-1">
                                    {{ log.timestamp|date:"F j, Y \a\t g:i A" }}
                                </p>
                                {% if log.notes %}
                                <p class="mb-0">{{ log.notes }}</p>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Booking Items -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Booking Items</h2>
                    
                    {% for item in booking.bookingitem_set.all %}
                    <div class="card item-card mb-3 border-0 shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2">
                                    {% if item.equipment and item.equipment.image %}
                                        <img src="{{ item.equipment.image.url }}" alt="{{ item.equipment.name }}" 
                                            class="img-fluid rounded" style="width: 100%; height: 100px; object-fit: cover;">
                                    {% elif item.service and item.service.image %}
                                        <img src="{{ item.service.image.url }}" alt="{{ item.service.name }}" 
                                            class="img-fluid rounded" style="width: 100%; height: 100px; object-fit: cover;">
                                    {% else %}
                                        <div class="bg-light text-center p-3 rounded h-100 d-flex align-items-center justify-content-center">
                                            <i class="fas fa-{{ item.item_type_icon }} fa-3x text-muted"></i>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <h5 class="card-title mb-1">
                                        {% if item.equipment %}
                                            {{ item.equipment.name }}
                                        {% elif item.service %}
                                            {{ item.service.name }}
                                        {% endif %}
                                    </h5>
                                    <p class="text-muted small mb-2">
                                        {% if item.equipment %}
                                            <i class="fas fa-tag me-1"></i> {{ item.equipment.category }}
                                            {% if item.equipment.brand %}
                                                <span class="mx-1">•</span>
                                                <i class="fas fa-trademark me-1"></i> {{ item.equipment.brand }}
                                            {% endif %}
                                        {% elif item.service %}
                                            <i class="fas fa-tag me-1"></i> {{ item.service.category }}
                                        {% endif %}
                                    </p>
                                    {% if item.notes %}
                                    <p class="small text-muted mb-0">
                                        <i class="fas fa-sticky-note me-1"></i> {{ item.notes|truncatechars:60 }}
                                    </p>
                                    {% endif %}
                                </div>
                                <div class="col-md-4 text-end">
                                    <div class="mb-2">
                                        <span class="text-muted">Unit Price:</span>
                                        <span class="ms-2 fw-bold">KSh {{ item.unit_price|floatformat:2|intcomma }}</span>
                                    </div>
                                    <div class="mb-2">
                                        <span class="text-muted">Qty:</span>
                                        <span class="ms-2">{{ item.quantity }}</span>
                                    </div>
                                    {% if item.daily_rate and item.total_days %}
                                    <div class="mb-2">
                                        <span class="text-muted">Days:</span>
                                        <span class="ms-2">{{ item.total_days }} @ KSh {{ item.daily_rate|floatformat:2|intcomma }}/day</span>
                                    </div>
                                    {% endif %}
                                    <div class="mt-3 pt-2 border-top">
                                        <span class="text-muted">Subtotal:</span>
                                        <span class="ms-2 fw-bold text-primary">KSh {{ item.subtotal|floatformat:2|intcomma }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    
                    <!-- Rental Period (for equipment bookings) -->
                    {% if booking.booking_type == 'equipment' %}
                    <div class="card border-0 bg-light mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-3"><i class="far fa-calendar-alt me-2"></i> Rental Period</h6>
                                    <p class="mb-1">
                                        <strong>Start:</strong> {{ booking.start_date|date:"F j, Y" }} at {{ booking.pickup_time|time:"g:i A" }}
                                    </p>
                                    <p class="mb-0">
                                        <strong>End:</strong> {{ booking.end_date|date:"F j, Y" }} at {{ booking.return_time|time:"g:i A" }}
                                    </p>
                                    <p class="small text-muted mt-1 mb-0">
                                        ({{ booking.total_days }} day{{ booking.total_days|pluralize }} total)
                                    </p>
                                </div>
                                {% if booking.delivery_required %}
                                <div class="col-md-6">
                                    <h6 class="text-muted mb-3"><i class="fas fa-truck me-2"></i> Delivery Information</h6>
                                    <p class="mb-1">
                                        <strong>Address:</strong> {{ booking.delivery_address }}
                                    </p>
                                    {% if booking.delivery_fee > 0 %}
                                    <p class="mb-0">
                                        <strong>Delivery Fee:</strong> KSh {{ booking.delivery_fee|floatformat:2|intcomma }}
                                    </p>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    
                    <!-- Order Summary -->
                    <div class="card border-0 bg-light">
                        <div class="card-body">
                            <h6 class="text-muted mb-3">Order Summary</h6>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Subtotal ({{ booking.bookingitem_set.count }} item{{ booking.bookingitem_set.count|pluralize }}):</span>
                                <span>KSh {{ booking.subtotal|floatformat:2|intcomma }}</span>
                            </div>
                            {% if booking.delivery_fee > 0 %}
                            <div class="d-flex justify-content-between mb-2">
                                <span>Delivery Fee:</span>
                                <span>KSh {{ booking.delivery_fee|floatformat:2|intcomma }}</span>
                            </div>
                            {% endif %}
                            {% if booking.tax_amount > 0 %}
                            <div class="d-flex justify-content-between mb-2">
                                <span>Tax ({{ booking.tax_rate }}%):</span>
                                <span>KSh {{ booking.tax_amount|floatformat:2|intcomma }}</span>
                            </div>
                            {% endif %}
                            <div class="d-flex justify-content-between fw-bold border-top pt-2 mt-2">
                                <span>Total Amount:</span>
                                <span>KSh {{ booking.total_amount|floatformat:2|intcomma }}</span>
                            </div>
                            {% if booking.security_deposit > 0 %}
                            <div class="d-flex justify-content-between text-success mt-2">
                                <span>Security Deposit:</span>
                                <span>KSh {{ booking.security_deposit|floatformat:2|intcomma }}</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Equipment Details -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Equipment Details</h2>
                    <div class="d-flex">
                        <div class="flex-shrink-0 me-4">
                            {% if booking.equipment.image %}
                                <img src="{{ booking.equipment.image.url }}" alt="{{ booking.equipment.name }}" 
                                     class="img-fluid" style="max-width: 150px;">
                            {% else %}
                                <div class="bg-light text-center p-3" style="width: 150px; height: 150px;">
                                    <i class="fas fa-tools fa-3x text-muted"></i>
                                </div>
                            {% endif %}
                        </div>
                        <div>
                            <h3 class="h6">{{ booking.equipment.name }}</h3>
                            <p class="text-muted">{{ booking.equipment.category }}</p>
                            <div class="mb-2">
                                <span class="fw-bold">Daily Rate:</span>
                                <span>KSh {{ booking.daily_rate|floatformat:2 }}</span>
                            </div>
                            <div class="mb-2">
                                <span class="fw-bold">Security Deposit:</span>
                                <span>KSh {{ booking.security_deposit|floatformat:2 }}</span>
                            </div>
                            {% if booking.delivery_required %}
                            <div class="alert alert-info p-2 small mb-0">
                                <i class="fas fa-truck me-1"></i>
                                Delivery included to: {{ booking.delivery_address }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rental Period -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Rental Period</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <h3 class="h6 text-muted">Pickup</h3>
                                <p class="h5 mb-1">{{ booking.start_date|date:"l, F j, Y" }}</p>
                                {% if booking.pickup_time %}
                                <p class="mb-0">{{ booking.pickup_time|time:"g:i A" }}</p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <h3 class="h6 text-muted">Return</h3>
                                <p class="h5 mb-1">{{ booking.end_date|date:"l, F j, Y" }}</p>
                                {% if booking.return_time %}
                                <p class="mb-0">{{ booking.return_time|time:"g:i A" }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 text-center">
                        <span class="badge bg-primary">
                            {{ booking.total_days }} day{{ booking.total_days|pluralize }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Special Requests -->
            {% if booking.special_requests %}
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-3">Special Requests</h2>
                    <p class="mb-0">{{ booking.special_requests }}</p>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Customer Information -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Customer Information</h2>
                    <div class="mb-3">
                        <h3 class="h6 text-muted mb-1">Name</h3>
                        <p class="mb-0">{{ booking.user.get_full_name|default:"N/A" }}</p>
                    </div>
                    <div class="mb-3">
                        <h3 class="h6 text-muted mb-1">Email</h3>
                        <p class="mb-0">{{ booking.customer_email }}</p>
                    </div>
                    <div class="mb-3">
                        <h3 class="h6 text-muted mb-1">Phone</h3>
                        <p class="mb-0">{{ booking.customer_phone|default:"N/A" }}</p>
                    </div>
                    {% if booking.user.profile.company %}
                    <div class="mb-3">
                        <h3 class="h6 text-muted mb-1">Company</h3>
                        <p class="mb-0">{{ booking.user.profile.company }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Booking Summary -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="h5 mb-4">Booking Summary</h2>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Daily Rate ({{ booking.total_days }} days):</span>
                        <span>KSh {{ booking.subtotal|floatformat:2 }}</span>
                    </div>
                    {% if booking.delivery_required %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>Delivery Fee:</span>
                        <span>KSh {{ booking.delivery_fee|floatformat:2 }}</span>
                    </div>
                    {% endif %}
                    <div class="d-flex justify-content-between mb-2">
                        <span>Security Deposit:</span>
                        <span>KSh {{ booking.security_deposit|floatformat:2 }}</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fw-bold fs-5">
                        <span>Total Amount:</span>
                        <span>KSh {{ booking.total_amount|floatformat:2 }}</span>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-body">
                    <h2 class="h5 mb-4">Need Help?</h2>
                    <p class="small text-muted">
                        If you have any questions about your booking, please contact our support team.
                    </p>
                    <div class="d-grid gap-2">
                        <a href="mailto:{{ settings.CONTACT_EMAIL }}" class="btn btn-outline-primary">
                            <i class="fas fa-envelope me-1"></i> Email Support
                        </a>
                        <a href="tel:{{ settings.CONTACT_PHONE|cut:' ' }}" class="btn btn-outline-secondary">
                            <i class="fas fa-phone-alt me-1"></i> Call Us
                        </a>
                        {% if booking.status == 'pending' %}
                        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#cancelBookingModal">
                            <i class="fas fa-times-circle me-1"></i> Cancel Booking
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Cancel Booking Modal -->
{% if booking.status == 'pending' %}
<div class="modal fade" id="cancelBookingModal" tabindex="-1" aria-labelledby="cancelBookingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelBookingModalLabel">Cancel Booking</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to cancel this booking?</p>
                <p class="small text-muted">
                    Cancellations made within 24 hours of the pickup time may be subject to a cancellation fee.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <form action="{% url 'bookings:booking_cancel' booking.booking_number %}" method="post" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Yes, Cancel Booking</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
    /* Timeline Styling */
    .timeline {
        position: relative;
        padding-left: 1.5rem;
        margin: 0 0 0 1rem;
        border-left: 2px solid #e9ecef;
    }
    
    .timeline-item {
        position: relative;
        padding-bottom: 1.5rem;
        padding-left: 1.5rem;
    }
    
    .timeline-item:last-child {
        padding-bottom: 0;
    }
    
    .timeline-marker {
        position: absolute;
        left: -1.75rem;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #dee2e6;
        top: 4px;
    }
    
    .timeline-item.current .timeline-marker {
        background-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
    }
    
    .timeline-content {
        position: relative;
    }
    
    .badge {
        font-size: 0.8em;
        padding: 0.4em 0.8em;
        text-transform: capitalize;
    }
    
    .bg-pending {
        background-color: #ffc107;
        color: #000;
    }
    
    .bg-confirmed {
        background-color: #198754;
    }
    
    .bg-cancelled {
        background-color: #dc3545;
    }
    
    .bg-completed {
        background-color: #6c757d;
    }
</style>
{% endblock %}