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

{% block title %}{{ item.name }} - PRACA Enterprises{% endblock %}

{% block extra_css %}
<style>
    /* Gallery Styles */
    .equipment-gallery {
        margin-bottom: 2rem;
        position: relative;
    }
    .main-image-container {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #f8f9fa;
        margin-bottom: 1rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    }
    .main-image {
        width: 100%;
        height: 500px;
        object-fit: contain;
        background: white;
        padding: 1.5rem;
        transition: transform 0.3s ease;
    }
    .main-image:hover {
        transform: scale(1.02);
    }
    .thumbnail-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .thumbnail {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        background: white;
        padding: 0.25rem;
    }
    .thumbnail:hover, .thumbnail.active {
        border-color: var(--bs-primary);
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    
    /* Specification Table */
    .specs-table {
        width: 100%;
    }
    .specs-table td {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: top;
    }
    .specs-table tr:last-child td {
        border-bottom: none;
    }
    .specs-table .text-muted {
        width: 40%;
        color: #6c757d;
    }
    
    /* Price Badge */
    .price-badge {
        font-size: 1.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        background: linear-gradient(135deg, #0d6efd, #0b5ed7);
        color: white;
        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
        transition: all 0.3s ease;
    }
    .price-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
    }
    
    /* Owner Info Card */
    .owner-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 12px;
        overflow: hidden;
    }
    .owner-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 991.98px) {
        .main-image {
            height: 400px;
        }
        .sticky-top {
            position: static !important;
        }
    }
    @media (max-width: 575.98px) {
        .main-image {
            height: 300px;
            padding: 1rem;
        }
        .price-badge {
            font-size: 1.25rem;
            padding: 0.6rem 1.2rem;
        }
    }
    
    /* Utility Classes */
    .text-underline-hover {
        text-decoration: none;
        position: relative;
    }
    .text-underline-hover:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        background-color: currentColor;
        transition: width 0.3s ease;
    }
    .text-underline-hover:hover:after {
        width: 100%;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4 py-lg-5">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'equipment:home' %}"><i class="fas fa-home me-1"></i> Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'equipment:home' %}?category={{ item.category.id }}">{{ item.category.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ item.name|truncatechars:30 }}</li>
        </ol>
    </nav>
    
    <!-- Report Button -->
    {% if user.is_authenticated and item.owner != user %}
    <div class="text-end mb-4">
        <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#reportModal">
            <i class="fas fa-flag me-1"></i> Report Item
        </button>
    </div>
    {% endif %}
    
    <div class="row g-4">
        <!-- Left Column - Images -->
        <div class="col-lg-7">
            <div class="equipment-gallery">
                <!-- Main Image Container -->
                <div class="main-image-container">
                    {% with item.get_all_images as images %}
                    {% if images %}
                        <img id="mainImage" 
                             src="{{ images.0.image.url }}" 
                             alt="{{ item.name }} - {{ images.0.caption }}" 
                             class="main-image img-fluid"
                             data-bs-toggle="modal" 
                             data-bs-target="#imageGalleryModal"
                             onerror="handleImageError(this)">
                        
                        <!-- Status Badge -->
                        <div class="position-absolute top-0 end-0 m-3">
                            {% if item.status == 'available' %}
                                <span class="badge bg-success bg-opacity-90 px-3 py-2">
                                    <i class="fas fa-check-circle me-1"></i> Available
                                </span>
                            {% elif item.status == 'rented' %}
                                <span class="badge bg-danger bg-opacity-90 px-3 py-2">
                                    <i class="fas fa-times-circle me-1"></i> Rented
                                </span>
                            {% else %}
                                <span class="badge bg-secondary bg-opacity-90 px-3 py-2">
                                    <i class="fas fa-question-circle me-1"></i> {{ item.get_status_display }}
                                </span>
                            {% endif %}
                        </div>
                    {% else %}
                        <img id="mainImage" 
                             src="{% static 'img/placeholder-equipment.svg' %}" 
                             alt="{{ item.name }}" 
                             class="main-image img-fluid"
                             style="height: 500px; object-fit: contain; background: #f8f9fa;">
                        
                        <!-- Status Badge -->
                        <div class="position-absolute top-0 end-0 m-3">
                            <span class="badge bg-secondary bg-opacity-90 px-3 py-2">
                                <i class="fas fa-question-circle me-1"></i> {{ item.get_status_display }}
                            </span>
                        </div>
                    {% endif %}
                    {% endwith %}
                </div>
                    
                    <!-- Owner Badge -->
                    <div class="position-absolute top-0 start-0 m-3">
                        {% if item.owner %}
                        <span class="badge bg-info bg-opacity-90 text-dark px-3 py-2">
                            <i class="fas fa-user-tag me-1"></i> User Listed
                        </span>
                        {% else %}
                        <span class="badge bg-primary bg-opacity-90 text-white px-3 py-2">
                            <i class="fas fa-store me-1"></i> Platform Owned
                        </span>
                        {% endif %}
                    </div>
                    
                    <!-- Favorite Button -->
                    <div class="position-absolute bottom-0 end-0 m-3">
                        <button class="btn btn-light btn-lg rounded-circle shadow-sm" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="left" 
                                title="Add to favorites">
                            <i class="far fa-heart text-danger"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Thumbnails -->
                <div class="thumbnail-container">
                    {% with item.get_all_images as images %}
                        {% for img in images %}
                            <img src="{{ img.image.url }}" 
                                 alt="{{ item.name }} - {{ img.caption }}" 
                                 class="thumbnail {% if forloop.first %}active{% endif %}"
                                 data-full-image="{{ img.image.url }}"
                                 data-caption="{{ img.caption }}"
                                 onclick="changeImage(this)"
                                 onerror="handleImageError(this)">
                        {% empty %}
                            <img src="{% static 'img/placeholder-equipment.svg' %}" 
                                 alt="{{ item.name }}" 
                                 class="thumbnail active"
                                 data-full-image="{% static 'img/placeholder-equipment.svg' %}"
                                 data-caption="No image available"
                                 onclick="changeImage(this)"
                                 onerror="handleImageError(this)">
                        {% endfor %}
                    {% endwith %}
                </div>
                
                <!-- Image Counter -->
                <div class="text-muted small mt-2 text-center">
                    <span id="currentImage">1</span> of {{ item.equipmentimage_set.count|add:1 }}
                </div>
            </div>
            
            <!-- Owner Information -->
            {% if item.owner %}
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="avatar avatar-lg rounded-circle bg-light text-primary d-flex align-items-center justify-content-center">
                                <i class="fas fa-user-tie fa-xl"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-1">Listed by {{ item.owner.get_full_name|default:item.owner.username }}</h5>
                            <p class="text-muted small mb-2">
                                <i class="fas fa-star text-warning"></i>
                                <span class="ms-1">4.8 (24 reviews)</span>
                                <span class="mx-2">•</span>
                                <i class="fas fa-check-circle text-success"></i>
                                <span class="ms-1">Verified</span>
                            </p>
                            <div class="d-flex flex-wrap gap-2">
                                <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#contactOwnerModal">
                                    <i class="fas fa-envelope me-1"></i> Contact
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

        <!-- Right Column - Details -->
        <div class="col-lg-5">
            <div class="sticky-top" style="top: 1.5rem;">
                <!-- Title and Category -->
                <div class="mb-3">
                    <h1 class="h2 mb-2">{{ item.name }}</h1>
                    <div class="d-flex align-items-center text-muted mb-3">
                        <i class="fas fa-tag me-2"></i>
                        <span>{{ item.category.name }}</span>
                        <span class="mx-2">•</span>
                        <i class="fas fa-map-marker-alt me-1"></i>
                        <span>{{ item.location }}</span>
                    </div>
                    
                    <!-- Rating and Reviews -->
                    <div class="d-flex align-items-center mb-4">
                        <div class="rating-stars me-2">
                            <i class="fas fa-star text-warning"></i>
                            <i class="fas fa-star text-warning"></i>
                            <i class="fas fa-star text-warning"></i>
                            <i class="fas fa-star text-warning"></i>
                            <i class="fas fa-star-half-alt text-warning"></i>
                        </div>
                        <span class="text-muted ms-2">4.7 (128 reviews)</span>
                        <a href="#reviews" class="text-underline-hover ms-3 small">
                            See all reviews <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Price Section -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <span class="h3 mb-0 fw-bold text-primary">${{ item.daily_rate|floatformat:2 }}</span>
                                <span class="text-muted">/ day</span>
                            </div>
                            {% if item.weekly_rate %}
                            <div class="text-end">
                                <span class="h5 mb-0 fw-bold">${{ item.weekly_rate|floatformat:2 }}</span>
                                <span class="text-muted d-block small">/ week (save {{ item.weekly_discount }}%)</span>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- Availability Badge -->
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-calendar-check text-success me-2"></i>
                            </div>
                            <div>
                                <span class="fw-medium">Available for rent</span>
                                <div class="text-muted small">Minimum rental: 1 day</div>
                            </div>
                        </div>
                        
                        <!-- Quick Actions -->
                        <div class="d-grid gap-2 mb-3">
                            <a href="{% url 'bookings:create_booking' item.id %}" class="btn btn-primary btn-lg" {% if item.status != 'available' %}disabled{% endif %}>
                                <i class="fas fa-shopping-cart me-2"></i> Book Now
                            </a>
                            <button class="btn btn-outline-secondary">
                                <i class="far fa-envelope me-2"></i> Request Information
                            </button>
                        </div>
                        
                        <!-- Quick Info -->
                        <div class="border-top pt-3">
                            <div class="row g-2">
                                <div class="col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 text-primary">
                                            <i class="fas fa-shield-alt"></i>
                                        </div>
                                        <div class="ms-2">
                                            <div class="small">Insurance</div>
                                            <div class="fw-medium small">Included</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 text-primary">
                                            <i class="fas fa-truck"></i>
                                        </div>
                                        <div class="ms-2">
                                            <div class="small">Delivery</div>
                                            <div class="fw-medium small">Available</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 text-primary">
                                            <i class="fas fa-undo"></i>
                                        </div>
                                        <div class="ms-2">
                                            <div class="small">Free Cancellation</div>
                                            <div class="fw-medium small">24 hours</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 text-primary">
                                            <i class="fas fa-headset"></i>
                                        </div>
                                        <div class="ms-2">
                                            <div class="small">Support</div>
                                            <div class="fw-medium small">24/7</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Share Buttons -->
                <div class="text-center mb-4">
                    <span class="text-muted me-2">Share:</span>
                    <a href="#" class="text-decoration-none text-primary me-3">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="text-decoration-none text-info me-3">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-decoration-none text-danger me-3">
                        <i class="fab fa-pinterest"></i>
                    </a>
                    <a href="#" class="text-decoration-none text-success">
                        <i class="fab fa-whatsapp"></i>
                    </a>
                </div>
            </div>
        </div>

            <!-- Description & Specs Tabs -->
            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <ul class="nav nav-tabs card-header-tabs" id="equipmentTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">
                                <i class="fas fa-file-alt me-2"></i> Description
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab" aria-controls="specs" aria-selected="false">
                                <i class="fas fa-list-ul me-2"></i> Specifications
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
                                <i class="fas fa-star me-2"></i> Reviews (24)
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location" type="button" role="tab" aria-controls="location" aria-selected="false">
                                <i class="fas fa-map-marker-alt me-2"></i> Location
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body p-4">
                    <div class="tab-content" id="equipmentTabsContent">
                        <!-- Description Tab -->
                        <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <div class="mb-4">
                                <h4 class="mb-3">About this equipment</h4>
                                <div class="description-content">
                                    {{ item.description|linebreaks }}
                                </div>
                            </div>
                            
                            <!-- Features -->
                            <div class="mb-4">
                                <h5 class="mb-3">Key Features</h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="d-flex">
                                            <div class="feature-icon bg-primary bg-opacity-10 text-primary rounded-3 me-3">
                                                <i class="fas fa-check"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-1">High Performance</h6>
                                                <p class="text-muted small mb-0">Designed for professional use with top-tier components</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex">
                                            <div class="feature-icon bg-success bg-opacity-10 text-success rounded-3 me-3">
                                                <i class="fas fa-bolt"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-1">Powerful</h6>
                                                <p class="text-muted small mb-0">{{ item.power_rating|default:"High-powered" }} performance for demanding tasks</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex">
                                            <div class="feature-icon bg-warning bg-opacity-10 text-warning rounded-3 me-3">
                                                <i class="fas fa-shield-alt"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-1">Fully Insured</h6>
                                                <p class="text-muted small mb-0">Comprehensive insurance coverage included</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex">
                                            <div class="feature-icon bg-info bg-opacity-10 text-info rounded-3 me-3">
                                                <i class="fas fa-tools"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-1">Well-Maintained</h6>
                                                <p class="text-muted small mb-0">Regularly serviced and in excellent condition</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Included Accessories -->
                            <div>
                                <h5 class="mb-3">What's Included</h5>
                                <div class="row g-3">
                                    <div class="col-6 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span>All necessary cables</span>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span>User manual</span>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span>Carrying case</span>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span>Battery & charger</span>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            <span>1-year warranty</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Specifications Tab -->
                        <div class="tab-pane fade" id="specs" role="tabpanel" aria-labelledby="specs-tab">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mb-3">General</h5>
                                    <table class="table table-borderless specs-table">
                                        <tbody>
                                            {% if item.equipment_model %}
                                            <tr>
                                                <td class="text-muted" width="50%">Make</td>
                                                <td><strong>{{ item.equipment_model.make.name|default:"N/A" }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Model</td>
                                                <td><strong>{{ item.equipment_model.name|default:"N/A" }}</strong></td>
                                            </tr>
                                            {% endif %}
                                            <tr>
                                                <td class="text-muted">Category</td>
                                                <td><strong>{{ item.category.name }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Year</td>
                                                <td><strong>{{ item.year|default:"N/A" }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Serial Number</td>
                                                <td><code>{{ item.serial_number|default:"Not specified" }}</code></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-3">Technical Details</h5>
                                    <table class="table table-borderless specs-table">
                                        <tbody>
                                            <tr>
                                                <td class="text-muted" width="50%">Condition</td>
                                                <td>
                                                    <span class="badge bg-{{ item.condition|lower }} bg-opacity-10 text-{{ item.condition|lower }} border border-{{ item.condition|lower }} border-opacity-25">
                                                        <i class="fas fa-{{ item.condition|lower }} me-1"></i>
                                                        {{ item.get_condition_display }}
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Status</td>
                                                <td>
                                                    <span class="badge bg-{{ item.status|lower }} bg-opacity-10 text-{{ item.status|lower }}">
                                                        {{ item.get_status_display }}
                                                    </span>
                                                </td>
                                            </tr>
                                            {% if item.weight %}
                                            <tr>
                                                <td class="text-muted">Weight</td>
                                                <td><strong>{{ item.weight }} kg</strong></td>
                                            </tr>
                                            {% endif %}
                                            {% if item.dimensions %}
                                            <tr>
                                                <td class="text-muted">Dimensions</td>
                                                <td><strong>{{ item.dimensions }}</strong></td>
                                            </tr>
                                            {% endif %}
                                            <tr>
                                                <td class="text-muted">Location</td>
                                                <td>
                                                    <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                                    <strong>{{ item.location }}</strong>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            {% if item.additional_specs %}
                            <div class="mt-4">
                                <h5 class="mb-3">Additional Specifications</h5>
                                <div class="table-responsive">
                                    <table class="table table-borderless specs-table">
                                        <tbody>
                                            {% for key, value in item.additional_specs.items %}
                                            <tr>
                                                <td class="text-muted" width="30%">{{ key|title }}</td>
                                                <td><strong>{{ value }}</strong></td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- Reviews Tab -->
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <div class="text-center py-5">
                                <div class="display-4 text-primary mb-3">4.7</div>
                                <div class="h2 text-warning mb-3">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <p class="text-muted">Based on 24 reviews</p>
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#writeReviewModal">
                                    <i class="far fa-edit me-2"></i>Write a Review
                                </button>
                            </div>
                            
                            <!-- Review List -->
                            <div class="border-top pt-4">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h5 class="mb-0">Customer Reviews</h5>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="sortReviews" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fas fa-sort me-1"></i> Newest First
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="sortReviews">
                                            <li><a class="dropdown-item active" href="#">Newest First</a></li>
                                            <li><a class="dropdown-item" href="#">Highest Rated</a></li>
                                            <li><a class="dropdown-item" href="#">Lowest Rated</a></li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <!-- Sample Review -->
                                <div class="mb-4 pb-4 border-bottom">
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="d-flex align-items-center">
                                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-circle me-2" width="40" height="40" alt="User">
                                            <div>
                                                <h6 class="mb-0">John D.</h6>
                                                <small class="text-muted">2 weeks ago</small>
                                            </div>
                                        </div>
                                        <div class="text-warning">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                        </div>
                                    </div>
                                    <h6 class="mb-2">Great equipment, worked perfectly!</h6>
                                    <p class="mb-0">The camera was in excellent condition and worked perfectly for our shoot. The owner was very responsive and helpful. Would definitely rent again!</p>
                                </div>
                                
                                <!-- More reviews would be dynamically loaded here -->
                                
                                <div class="text-center mt-4">
                                    <button class="btn btn-outline-primary">
                                        <i class="fas fa-sync-alt me-2"></i>Load More Reviews
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Location Tab -->
                        <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                            <div class="text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-map-marker-alt text-danger" style="font-size: 3rem;"></i>
                                    <h4 class="mt-3">Equipment Location</h4>
                                    <p class="text-muted">{{ item.location }}</p>
                                </div>
                                
                                <!-- Map Placeholder -->
                                <div class="ratio ratio-16x9 bg-light rounded-3 overflow-hidden mb-4">
                                    <div class="d-flex align-items-center justify-content-center h-100">
                                        <div class="text-center p-4">
                                            <i class="fas fa-map-marked-alt text-muted mb-3" style="font-size: 2.5rem;"></i>
                                            <p class="mb-0">Map would be displayed here</p>
                                            <small class="text-muted">Interactive map showing equipment location</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row g-3 mt-4">
                                    <div class="col-md-6">
                                        <div class="card h-100 border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                                    <i class="fas fa-truck fa-lg"></i>
                                                </div>
                                                <h5>Delivery Available</h5>
                                                <p class="text-muted small mb-0">Contact owner for delivery options and pricing</p>
                                                <button class="btn btn-sm btn-outline-primary mt-3">
                                                    <i class="fas fa-truck me-1"></i> Request Delivery
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card h-100 border-0 shadow-sm">
                                            <div class="card-body text-center">
                                                <div class="bg-success bg-opacity-10 text-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                                    <i class="fas fa-store fa-lg"></i>
                                                </div>
                                                <h5>Pickup Available</h5>
                                                <p class="text-muted small mb-0">Arrange a time to pick up the equipment in person</p>
                                                <button class="btn btn-sm btn-outline-success mt-3">
                                                    <i class="fas fa-calendar-alt me-1"></i> Schedule Pickup
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Booking Sidebar -->
        <div class="col-lg-5">
            <div class="card shadow-sm sticky-top" style="top: 20px;">
                <div class="card-body">
                    <h4 class="card-title mb-4">Rent This Equipment</h4>
                    
                    <div class="text-center mb-4">
                        <span class="badge bg-primary price-badge">
                            ${{ item.daily_rate }} <small class="text-white-50">/ day</small>
                        </span>
                        {% if item.weekly_rate %}
                            <span class="mx-2 text-muted">or</span>
                            <span class="badge bg-success price-badge">
                                ${{ item.weekly_rate }} <small class="text-white-50">/ week</small>
                            </span>
                        {% endif %}
                    </div>

                    {% if item.status != 'available' %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            This item is currently {{ item.get_status_display|lower }}.
                        </div>
                    {% endif %}

                    <form method="post" action="{% url 'bookings:create_booking' equipment_id=item.id %}" class="booking-form" id="bookingForm">
                        {% csrf_token %}
                        
                        <!-- Booking Summary -->
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Booking Summary</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Daily Rate:</span>
                                    <span id="daily-rate">Ksh {{ item.daily_rate|floatformat:2 }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Rental Period:</span>
                                    <span id="rental-period">1 day</span>
                                </div>
                                <div class="d-flex justify-content-between fw-bold">
                                    <span>Subtotal:</span>
                                    <span id="subtotal">Ksh {{ item.daily_rate|floatformat:2 }}</span>
                                </div>
                                <div class="d-none" id="delivery-fee-container">
                                    <div class="d-flex justify-content-between mt-2 pt-2 border-top">
                                        <span>Delivery Fee:</span>
                                        <span id="delivery-fee">Ksh 0.00</span>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2 pt-2 border-top fw-bold">
                                    <span>Total:</span>
                                    <span id="total-amount">Ksh {{ item.daily_rate|floatformat:2 }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Location Information -->
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Location Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="location" class="form-label">Pickup Location*</label>
                                    <input type="text" class="form-control" id="location" name="location" required
                                           placeholder="Enter pickup location" value="{{ item.location|default:'' }}">
                                    <div class="form-text mt-1">Where will you pick up the equipment?</div>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="delivery_required" name="delivery_required">
                                    <label class="form-check-label" for="delivery_required">
                                        I need delivery to my location (additional charges may apply)
                                    </label>
                                </div>
                                
                                <div id="delivery-address-container" class="d-none">
                                    <label for="delivery_address" class="form-label">Delivery Address*</label>
                                    <textarea class="form-control" id="delivery_address" name="delivery_address" 
                                              rows="3" placeholder="Enter full delivery address"></textarea>
                                    <div class="form-text mt-1">Please provide the complete delivery address including any specific instructions.</div>
                                </div>
                            </div>
                        </div>

                        <!-- Date and Time Selection -->
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Rental Period</h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="startDate" class="form-label">Start date*</label>
                                        <input type="date" class="form-control" id="startDate" name="start_date" required 
                                               min="{{ today|date:'Y-m-d' }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="endDate" class="form-label">End date*</label>
                                        <input type="date" class="form-control" id="endDate" name="end_date" required 
                                               min="{{ today|date:'Y-m-d' }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="pickup_time" class="form-label">Pickup time</label>
                                        <input type="time" class="form-control" id="pickup_time" name="pickup_time" value="08:00">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="return_time" class="form-label">Return time</label>
                                        <input type="time" class="form-control" id="return_time" name="return_time" value="17:00">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Contact Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="customer_email" class="form-label">Email Address*</label>
                                    <input type="email" class="form-control" id="customer_email" name="customer_email" required
                                           value="{{ request.user.email|default:'' }}">
                                    <div class="form-text">All booking confirmations and updates will be sent to this email.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="customer_phone" class="form-label">Phone Number*</label>
                                    <input type="tel" class="form-control" id="customer_phone" name="customer_phone" required
                                           placeholder="+254700000000" pattern="^\+?1?\d{9,15}$">
                                    <div class="form-text">Include country code (e.g., +254 for Kenya)</div>
                                </div>
                                <div class="mb-3">
                                    <label for="special_requests" class="form-label">Special Requests (Optional)</label>
                                    <textarea class="form-control" id="special_requests" name="special_requests" 
                                              rows="3" placeholder="Any special requirements or instructions..."></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Terms and Conditions -->
                        <div class="form-check mb-4">
                            <input class="form-check-input" type="checkbox" id="agree_terms" name="agree_terms" required>
                            <label class="form-check-label" for="agree_terms">
                                I agree to the <a href="{% url 'terms' %}" target="_blank">Terms & Conditions</a> and 
                                <a href="{% url 'privacy' %}" target="_blank">Privacy Policy</a> *
                            </label>
                        </div>

                        <div class="row g-3 mt-4">
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    <i class="fas fa-calendar-check me-2"></i> Book Now
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-outline-primary btn-lg w-100" id="addToCartBtn">
                                    <i class="fas fa-cart-plus me-2"></i> Add to Cart
                                </button>
                            </div>
                        </div>
                    </form>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // Get all necessary elements
                            const deliveryCheckbox = document.getElementById('delivery_required');
                            const deliveryAddressContainer = document.getElementById('delivery-address-container');
                            const deliveryAddress = document.getElementById('delivery_address');
                            const startDateInput = document.getElementById('startDate');
                            const endDateInput = document.getElementById('endDate');
                            const rentalPeriodEl = document.getElementById('rental-period');
                            const subtotalEl = document.getElementById('subtotal');
                            const totalEl = document.getElementById('total-amount');
                            const deliveryFeeContainer = document.getElementById('delivery-fee-container');
                            const deliveryFeeEl = document.getElementById('delivery-fee');
                            
                            // Constants
                            const dailyRate = parseFloat('{{ item.daily_rate|default:0 }}');
                            const baseDeliveryFee = 500; // Base delivery fee in Ksh
                            
                            // Initialize date inputs
                            function initializeDates() {
                                const today = new Date();
                                const tomorrow = new Date(today);
                                tomorrow.setDate(tomorrow.getDate() + 1);
                                
                                const formatDate = (date) => {
                                    const year = date.getFullYear();
                                    const month = String(date.getMonth() + 1).padStart(2, '0');
                                    const day = String(date.getDate()).padStart(2, '0');
                                    return `${year}-${month}-${day}`;
                                };
                                
                                startDateInput.min = formatDate(today);
                                endDateInput.min = formatDate(today);
                                
                                if (!startDateInput.value) {
                                    startDateInput.value = formatDate(today);
                                }
                                
                                if (!endDateInput.value) {
                                    endDateInput.value = formatDate(tomorrow);
                                }
                                
                                // Trigger initial calculation
                                updateBookingSummary();
                            }
                            
                            // Calculate number of days between two dates
                            function calculateDays(start, end) {
                                if (!start || !end) return 1;
                                const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
                                const startDate = new Date(start);
                                const endDate = new Date(end);
                                const diffDays = Math.round(Math.abs((endDate - startDate) / oneDay)) + 1;
                                return diffDays > 0 ? diffDays : 1;
                            }
                            
                            // Format currency
                            function formatCurrency(amount) {
                                return 'Ksh ' + parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                            }
                            
                            // Update booking summary
                            function updateBookingSummary() {
                                try {
                                    if (!startDateInput?.value || !endDateInput?.value) {
                                        console.error('Missing date inputs');
                                        return;
                                    }
                                    
                                    const days = calculateDays(startDateInput.value, endDateInput.value);
                                    const subtotal = dailyRate * days;
                                    const hasDelivery = deliveryCheckbox?.checked || false;
                                    const deliveryFee = hasDelivery ? baseDeliveryFee : 0;
                                    const total = subtotal + deliveryFee;
                                    
                                    console.log('Updating summary:', { days, subtotal, hasDelivery, deliveryFee, total });
                                    
                                    // Update UI
                                    if (rentalPeriodEl) rentalPeriodEl.textContent = days + ' day' + (days !== 1 ? 's' : '');
                                    if (subtotalEl) subtotalEl.textContent = formatCurrency(subtotal);
                                    if (totalEl) totalEl.textContent = formatCurrency(total);
                                    
                                    // Update delivery fee display
                                    if (deliveryFeeContainer) {
                                        if (hasDelivery) {
                                            deliveryFeeContainer.classList.remove('d-none');
                                            if (deliveryFeeEl) deliveryFeeEl.textContent = formatCurrency(deliveryFee);
                                        } else {
                                            deliveryFeeContainer.classList.add('d-none');
                                        }
                                    }
                                } catch (error) {
                                    console.error('Error updating booking summary:', error);
                                }
                            }
                            
                            // Toggle delivery address field
                            if (deliveryCheckbox && deliveryAddressContainer) {
                                deliveryCheckbox.addEventListener('change', function() {
                                    if (this.checked) {
                                        deliveryAddressContainer.classList.remove('d-none');
                                        deliveryAddress.required = true;
                                    } else {
                                        deliveryAddressContainer.classList.add('d-none');
                                        deliveryAddress.required = false;
                                        deliveryAddress.value = '';
                                    }
                                    updateBookingSummary();
                                });
                                
                                // Initialize delivery address state
                                deliveryCheckbox.dispatchEvent(new Event('change'));
                            }
                            
                            // Set up date change handlers
                            if (startDateInput && endDateInput) {
                                // Set minimum dates and initialize values
                                initializeDates();
                                
                                // Handle start date changes
                                startDateInput.addEventListener('change', function() {
                                    endDateInput.min = this.value;
                                    if (new Date(endDateInput.value) < new Date(this.value)) {
                                        endDateInput.value = this.value;
                                    }
                                    updateBookingSummary();
                                });
                                
                                // Handle end date changes
                                endDateInput.addEventListener('change', function() {
                                    if (new Date(this.value) < new Date(startDateInput.value)) {
                                        this.value = startDateInput.value;
                                    }
                                    updateBookingSummary();
                                });
                                
                                // Initial update of booking summary
                                updateBookingSummary();
                            }
                        });
                    </script>

                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">Included in your rental:</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Free delivery within 20 miles</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i> 24/7 support</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Equipment insurance</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Free setup assistance</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Equipment Section -->
    <div class="mt-5">
        {% load equipment_tags %}
        {% related_equipment item %}
    </div>
    
    <!-- FAQ Section -->
    <div class="mt-5 pt-4">
        <h3 class="h4 mb-4">Frequently Asked Questions</h3>
        <div class="accordion" id="faqAccordion">
            {% for faq in faqs %}
            <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                    <button class="accordion-button {% if not forloop.first %}collapsed{% endif %} bg-white text-dark fw-medium" 
                            type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#collapse{{ forloop.counter }}" 
                            aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" 
                            aria-controls="collapse{{ forloop.counter }}">
                        {{ faq.question }}
                    </button>
                </h2>
                <div id="collapse{{ forloop.counter }}" 
                     class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" 
                     aria-labelledby="heading{{ forloop.counter }}" 
                     data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        {{ faq.answer|linebreaksbr }}
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="alert alert-info">
                No frequently asked questions available at the moment.
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Write Review Modal -->
<div class="modal fade" id="writeReviewModal" tabindex="-1" aria-labelledby="writeReviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title" id="writeReviewModalLabel">Write a Review</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-4 text-center">
                        <div class="h3 text-warning mb-2">
                            <i class="far fa-star rating-star" data-rating="1"></i>
                            <i class="far fa-star rating-star" data-rating="2"></i>
                            <i class="far fa-star rating-star" data-rating="3"></i>
                            <i class="far fa-star rating-star" data-rating="4"></i>
                            <i class="far fa-star rating-star" data-rating="5"></i>
                        </div>
                        <p class="text-muted small">Tap a star to rate</p>
                        <input type="hidden" id="rating" name="rating" value="5">
                    </div>
                    <div class="mb-3">
                        <label for="reviewTitle" class="form-label">Title</label>
                        <input type="text" class="form-control" id="reviewTitle" placeholder="Summarize your experience">
                    </div>
                    <div class="mb-4">
                        <label for="reviewText" class="form-label">Your Review</label>
                        <textarea class="form-control" id="reviewText" rows="4" placeholder="Share details about your experience with this equipment"></textarea>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">Submit Review</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- Image Gallery Modal -->
<div class="modal fade" id="imageGalleryModal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="imageGalleryModalLabel">Image Gallery</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-0">
                <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        {% with item.get_all_images as images %}
                            {% for img in images %}
                                <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="false">
                                    <img src="{{ img.image.url }}" 
                                         class="d-block w-100" 
                                         alt="{{ item.name }} - {{ img.caption }}"
                                         style="max-height: 70vh; object-fit: contain;">
                                    <div class="carousel-caption d-none d-md-block">
                                        <p class="bg-dark bg-opacity-75 d-inline-block px-3 py-1 rounded">
                                            {{ img.caption|default:"" }}
                                        </p>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endwith %}
                    </div>
                    {% with item.get_all_images as images %}
                        {% if images|length > 1 %}
                            <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        {% endif %}
                    {% endwith %}
                </div>
            </div>
            <div class="modal-footer border-0">
                <div class="d-flex justify-content-center w-100">
                    {% with item.get_all_images as images %}
                        {% for img in images %}
                            <img src="{{ img.image.url }}" 
                                 class="img-thumbnail mx-1" 
                                 alt=""
                                 style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
                                 data-gallery-index="{{ forloop.counter0 }}" class="gallery-thumb">
                        {% endfor %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    // Add to cart functionality
    document.addEventListener('DOMContentLoaded', function() {
        // Add to cart button click handler
        const addToCartBtn = document.getElementById('addToCartBtn');
        if (addToCartBtn) {
            addToCartBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Get the form data
                const form = document.getElementById('bookingForm');
                const formData = new FormData(form);
                
                // Add the action parameter to indicate this is for cart
                formData.append('action', 'add_to_cart');
                
                // Submit the form to the cart add URL
                fetch('{% url "bookings:cart_add" equipment_id=item.id %}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show success message
                        const toast = new bootstrap.Toast(document.getElementById('cartToast'));
                        toast.show();
                        
                        // Update cart count in header
                        const cartCount = document.querySelector('.cart-count');
                        if (cartCount) {
                            cartCount.textContent = data.cart_count;
                        }
                    } else {
                        // Show error message
                        alert('Error adding item to cart: ' + (data.error || 'Unknown error'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while adding the item to your cart.');
                });
            });
        }
        document.querySelectorAll('.gallery-thumb').forEach(thumb => {
            thumb.addEventListener('click', function() {
                const index = parseInt(this.getAttribute('data-gallery-index'));
                const carouselItems = document.querySelectorAll('#galleryCarousel .carousel-item');
                
                carouselItems.forEach((item, idx) => {
                    if (idx === index) {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });
                
                // Update carousel to show selected slide
                const carousel = bootstrap.Carousel.getInstance(document.getElementById('galleryCarousel'));
                if (carousel) {
                    carousel.to(index);
                }
            });
        });
    });
    
    // Existing code continues...
    // Handle image loading errors
    function handleImageError(img) {
        // Only replace if not already showing the placeholder
        if (!img.src.includes('placeholder-equipment.svg')) {
            img.onerror = null;
            // Use the new SVG placeholder
            img.src = '{% static "img/placeholder-equipment.svg" %}';
            // Add a class to indicate this is a placeholder
            img.classList.add('img-placeholder');
            // If this is a thumbnail, update its data attributes too
            if (img.classList.contains('thumbnail')) {
                img.setAttribute('data-full-image', img.src);
                img.setAttribute('data-caption', 'Image not available');
            }
        }
        return true;
    }
    
    // Rating stars interaction
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Rating stars interaction
        document.querySelectorAll('.rating-star').forEach(star => {
            star.addEventListener('click', function() {
                const rating = parseInt(this.getAttribute('data-rating'));
                const stars = document.querySelectorAll('.rating-star');
                
                stars.forEach((s, index) => {
                    if (index < rating) {
                        s.classList.remove('far');
                        s.classList.add('fas');
                    } else {
                        s.classList.remove('fas');
                        s.classList.add('far');
                    }
                });
                
                document.getElementById('rating').value = rating;
            });
        });

        // Initialize date pickers for booking
        const today = new Date().toISOString().split('T')[0];
        const pickupDate = document.getElementById('pickupDate');
        const returnDate = document.getElementById('returnDate');
        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');

        if (pickupDate && returnDate) {
            pickupDate.min = today;
            pickupDate.addEventListener('change', function() {
                returnDate.min = this.value;
            });
        }


        // Handle review form submission
        const reviewForm = document.getElementById('reviewForm');
        if (reviewForm) {
            reviewForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const reviewModal = bootstrap.Modal.getInstance(document.getElementById('writeReviewModal'));
                if (reviewModal) {
                    reviewModal.hide();
                }
                // Show success message
                const toast = new bootstrap.Toast(document.getElementById('reviewSuccessToast'));
                toast.show();
            });
        }
    });

    // Image gallery functionality
    function changeImage(element) {
        // Remove active class from all thumbnails
        document.querySelectorAll('.thumbnail').forEach(thumb => {
            thumb.classList.remove('active');
        });
        
        // Add active class to clicked thumbnail
        element.classList.add('active');
        
        // Update main image source and data attributes
        const mainImage = document.getElementById('mainImage');
        mainImage.src = element.getAttribute('data-full-image');
        mainImage.alt = element.alt;
        
        // Update modal image if it's open
        const modalImage = document.getElementById('modalImage');
        if (modalImage) {
            modalImage.src = element.getAttribute('data-full-image');
            modalImage.alt = element.alt;
            
            const modalCaption = document.getElementById('modalCaption');
            if (modalCaption) {
                modalCaption.textContent = element.getAttribute('data-caption') || '';
            }
        }
    }
</script>
{% endblock %}