{% extends 'shop/base.html' %}
{% block title %}Leave a Review - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg border-0">
                <!-- ✅ Product Image Section -->
                <div class="text-center mt-3">
                    <div class="product-image-container">
                        <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-img img-fluid rounded-3 shadow">
                    </div>
                    <h4 class="mt-3 fw-bold text-success">{{ product.name }}</h4>
                    <p class="text-muted small">Leave a review for this product</p>
                </div>

                <!-- ✅ Review Form Section -->
                <div class="card-body p-4">
                    <form method="POST">
                        {% csrf_token %}

                        <!-- ⭐ Rating Field -->
                        <div class="mb-4">
                            <label class="fw-bold form-label">⭐ Rating:</label>
                            <div class="rating-stars">
                                {{ form.rating }}
                            </div>
                        </div>

                        <!-- 📝 Review Comment Field -->
                        <div class="mb-4">
                            <label class="fw-bold form-label">📝 Your Review:</label>
                            <div class="input-group">
                                <span class="input-group-text bg-success"><i class="fas fa-pen"></i></span>
                                {{ form.comment }}
                            </div>
                        </div>

                        <!-- ✅ Submit Button -->
                        <button type="submit" class="btn btn-outline-success w-100">
                            <i class="fas fa-paper-plane me-2"></i> Submit Review
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 🎨 Custom Styles -->
<style>
/* 🌟 Container Styling */
.container {
    max-width: 700px;
}

/* 🏆 Product Image */
.product-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    border: 4px solid #148818;
    transition: transform 0.3s ease-in-out;
}

.product-img:hover {
    transform: scale(1.05);
}

/* ✅ Stylish Rating Dropdown */
.rating-stars select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* 🎨 Input Styling */
.input-group-text {
    background-color: #148818;
    color: white;
    border: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
}
</style>
{% endblock %}