{% extends "base.html" %}
{% block title %}{{ package.destination_name }} Details{% endblock %}

{% block content %}
<div class="row animate-on-scroll">
    <div class="col-md-6">
        <img src="{{ package.image_url }}" class="img-fluid rounded" alt="{{ package.description }}">
    </div>
    <div class="col-md-6">
        <h2>{{ package.destination_name }} - {{ package.state_name }}</h2>
        <p>{{ package.description }}</p>
        <p class="fw-bold">Price: RM {{ package.price }}</p>
        
        {% if session.logged_in %}
        <form action="{{ url_for('book_package', package_id=package.package_id) }}" method="POST" class="mb-4">
            <label>Choose Travel Date:</label>
            <input type="date" name="travel_date" class="form-control mb-2" required>
            <button type="submit" class="btn btn-primary mt-2">Book Now</button>
        </form>

        <h4>Submit a Review</h4>
        <form action="{{ url_for('review_package', package_id=package.package_id) }}" method="POST">
            <div class="mb-2">
                <label>Rating (1-5):</label>
                <input type="number" name="rating" class="form-control" min="1" max="5" required>
            </div>
            <div class="mb-2">
                <label>Comment:</label>
                <textarea name="comment" class="form-control" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-warning">Submit Review</button>
        </form>
        {% else %}
        <a href="{{ url_for('login') }}" class="btn btn-primary">Login to Book & Review</a>
        {% endif %}
    </div>
</div>

<hr>
<h3 class="mt-4">Reviews (Average Rating: {{ avg_rating | round(1) }}/5)</h3>
{% for review in reviews %}
<div class="card p-3 mb-2 animate-on-scroll">
    <strong>{{ review.user_name }}</strong> - <span class="text-warning">{{ review.rating }}/5</span>
    <p>{{ review.comment }}</p>
    <small>{{ review.review_date }}</small>
</div>
{% else %}
<p>No reviews yet.</p>
{% endfor %}
{% endblock %}