{% extends "base.html" %}

{% block title %}Customer Reviews | Aarya Holidays & Cabs{% endblock %}

{% block structured_data %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "AggregateRating",
    "itemReviewed": {
        "@type": "Organization",
        "name": "Aarya Holidays & Cabs"
    },
    "ratingValue": "{{ average_rating|default:0 }}",
    "reviewCount": "{{ total_reviews|default:0 }}",
    "bestRating": "5",
    "worstRating": "1"
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "Aarya Holidays & Cabs Reviews",
    "url": "{{ seo_meta.absolute_url }}"
}
</script>
{% endblock %}

{% block content %}
<section class="section-pad review-page-hero">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">Community &amp; Reviews</span>
            <h1>Traveler stories, ratings, and helpful feedback.</h1>
            <p>Read verified approved reviews and share your own journey experience with Aarya Holidays &amp; Cabs.</p>
        </div>

        <div class="review-page-stats">
            <article>
                <span>⭐ Average Rating</span>
                <strong>{{ average_rating }} / 5</strong>
            </article>
            <article>
                <span>📝 Total Reviews</span>
                <strong>{{ total_reviews }}</strong>
            </article>
            <article>
                <span>❤️ Website Likes</span>
                <strong data-website-like-display>{{ website_like_count }}</strong>
            </article>
        </div>

        <div class="review-page-actions">
            <button class="btn btn-primary btn-lg" type="button" data-bs-toggle="modal" data-bs-target="#writeReviewModal">
                <i data-lucide="star" aria-hidden="true"></i>
                Write a Review
            </button>
            <button class="btn btn-outline-primary btn-lg community-like-button" type="button" data-website-like-button data-website-like-url="{% url 'travel:website_like' %}" data-website-like-version="{{ website_like_version }}" title="Like our website">
                <i class="fa-regular fa-heart" aria-hidden="true" data-website-like-icon></i>
                <span data-website-like-label>Like Our Website</span>
            </button>
        </div>
    </div>
</section>

<section class="section-pad pt-0">
    <div class="container">
        <form method="get" class="review-filter-bar">
            <input class="form-control form-control-lg" type="search" name="q" value="{{ review_search_query }}" placeholder="Search by name, city, or review text...">
            <select class="form-select form-select-lg" name="sort">
                <option value="newest" {% if review_sort == "newest" %}selected{% endif %}>Newest First</option>
                <option value="highest" {% if review_sort == "highest" %}selected{% endif %}>Highest Rating</option>
            </select>
            <button class="btn btn-primary btn-lg" type="submit">Apply</button>
        </form>

        <div class="row g-4 mt-1">
            {% for review in review_page_obj %}
                <div class="col-lg-4 col-md-6">
                    <article class="community-review-card review-page-card">
                        <div class="community-review-stars" aria-label="{{ review.rating }} star rating">
                            {% for _ in "12345" %}
                                <i class="fa-solid fa-star {% if forloop.counter <= review.rating %}is-active{% endif %}"></i>
                            {% endfor %}
                        </div>
                        <p class="community-review-message">{{ review.review }}</p>
                        <div class="community-review-meta">
                            <h4>{{ review.name }}</h4>
                            <span>{{ review.city|default:"Traveler" }} • {{ review.created_at|date:"d M Y" }}</span>
                        </div>
                        <button class="community-review-like" type="button" data-review-like-button data-url="{% url 'travel:review_like' review.id %}" aria-label="Like this review">
                            <i class="fa-solid fa-heart" aria-hidden="true"></i>
                            <span data-review-like-count>{{ review.likes }}</span>
                        </button>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="community-empty">No reviews match your search yet.</div>
                </div>
            {% endfor %}
        </div>

        {% if review_page_obj.paginator.num_pages > 1 %}
            <nav aria-label="Review pagination" class="review-pagination-wrap">
                <ul class="pagination justify-content-center">
                    {% if review_page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?q={{ review_search_query|urlencode }}&sort={{ review_sort }}&page={{ review_page_obj.previous_page_number }}">Previous</a>
                        </li>
                    {% endif %}

                    {% for page_num in review_page_obj.paginator.page_range %}
                        <li class="page-item {% if review_page_obj.number == page_num %}active{% endif %}">
                            <a class="page-link" href="?q={{ review_search_query|urlencode }}&sort={{ review_sort }}&page={{ page_num }}">{{ page_num }}</a>
                        </li>
                    {% endfor %}

                    {% if review_page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?q={{ review_search_query|urlencode }}&sort={{ review_sort }}&page={{ review_page_obj.next_page_number }}">Next</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    </div>
</section>
{% endblock %}