{% extends "base.html" %}

{% block title %}{{ package.package_name }} - VacationWeb{% endblock %}

{% block content %}
<div class="container" style="padding-top: 120px; padding-bottom: 50px;">
    <div class="row g-5">
        <div class="col-md-7">
            <div class="glass-card p-0 overflow-hidden" style="background: rgba(255,255,255,0.05); border-radius: 20px;">
                <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800" class="w-100">
                <div class="p-4">
                    <h1 class="text-warning mb-3">{{ package.package_name }}</h1>
                    <div class="d-flex gap-3 mb-4">
                        <span><i class="fas fa-clock text-warning me-2"></i>{{ package.duration_days }} Days</span>
                        <span><i class="fas fa-star text-warning me-2"></i>{{ avg_rating | round(1) if avg_rating else 'New' }}</span>
                    </div>
                    <h4>About this package</h4>
                    <p class="lead" style="opacity: 0.8;">{{ package.description }}</p>
                </div>
            </div>

            <div class="mt-5">
                <h4>Traveler Reviews</h4>
                {% for review in reviews %}
                <div class="mb-3 p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;">
                    <div class="text-warning">
                        {% for i in range(review.rating) %}<i class="fas fa-star"></i>{% endfor %}
                    </div>
                    <p class="mb-1">{{ review.comment }}</p>
                    <small class="text-white-50">— {{ review.user_name }}</small>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="col-md-5">
            <div class="glass-card p-4 text-center" style="background: rgba(255, 255, 255, 0.1); border: 1px solid #FFD700; border-radius: 20px; position: sticky; top: 120px;">
                <p class="text-white-50 mb-1">Total Price</p>
                <h2 class="display-4 fw-bold text-warning mb-4">RM {{ package.price }}</h2>
                <a href="/book/{{ package.package_id }}" class="btn btn-warning btn-lg w-100 fw-bold py-3 mb-3">
                    <i class="fas fa-calendar-check me-2"></i>Book This Trip
                </a>
                <p class="small text-white-50"><i class="fas fa-info-circle me-1"></i> Instant confirmation available</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}