{% extends 'base.html' %}
{% load i18n static core_tags %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <!-- Back to Dashboard -->
            <div class="mb-4">
                <a href="{% url 'dashboard' %}" class="btn btn-link text-decoration-none text-muted ps-0">
                    <i class="bi {% if LANGUAGE_BIDI %}bi-arrow-right{% else %}bi-arrow-left{% endif %} me-2"></i>{% trans "Back to Dashboard" %}
                </a>
            </div>

            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <h2 class="fw-bold mb-3">{% trans "Rate Your Experience" %}</h2>
                        <p class="text-muted">
                            {% trans "How was the service provided by" %} 
                            <strong>{{ parcel.carrier.username }}</strong>?
                        </p>
                    </div>

                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Star Rating -->
                        <div class="mb-4 text-center">
                            <label class="form-label d-block mb-2">{% trans "Rating" %}</label>
                            <div class="rating-stars">
                                {% for radio in form.rating %}
                                    {{ radio.tag }}
                                    <label for="{{ radio.id_for_label }}" class="star-label">
                                        <i class="bi bi-star-fill"></i>
                                    </label>
                                {% endfor %}
                            </div>
                            {% if form.rating.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.rating.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Comment -->
                        <div class="mb-4">
                            <label for="{{ form.comment.id_for_label }}" class="form-label">{% trans "Comment" %}</label>
                            {{ form.comment }}
                            {% if form.comment.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.comment.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg rounded-pill">
                                {% trans "Submit Review" %}
                            </button>
                            <a href="{% url 'dashboard' %}" class="btn btn-light rounded-pill">
                                {% trans "Cancel" %}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Star Rating Styles */
    .rating-stars {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .rating-stars input[type="radio"] {
        display: none;
    }
    
    .rating-stars label {
        font-size: 2rem;
        color: #ddd;
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .rating-stars label:hover,
    .rating-stars label:hover ~ label,
    .rating-stars input[type="radio"]:checked ~ label {
        color: #ffc107; /* Bootstrap warning color (yellow) */
    }
</style>
{% endblock %}