{% extends 'shop/base.html' %}

{% block title %}{{ product.name }} - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <!-- ✅ Product Image Section -->
        <div class="col-md-6 text-center">
            <div class="product-image-container">
                <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-img img-fluid rounded-4 shadow-lg">
            </div>
        </div>

        <!-- ✅ Product Details Section -->
        <div class="col-md-6">
            <h1 class="fw-bold text-success product-title">{{ product.name }}</h1>
            <p class="fs-5 product-description">{{ product.description }}</p>

            <!-- ✅ Rating Display -->
            <div class="mb-3">
                <strong>Customer Rating:</strong>
                <span class="text-warning">
                    {% for _ in "12345"|slice:product.rating %}
                        <i class="fas fa-star"></i>
                    {% endfor %}
                    ({{ product.rating|default:"No ratings yet" }})
                </span>
            </div>

            <!-- ✅ Price Display -->
            <div class="price-box mb-4">
                <span class="fs-4 fw-bold text-primary">$ {{ product.price }}</span>
                <small class="text-muted d-block">Inclusive of all taxes</small>
            </div>

            <!-- ✅ QR Code Section -->
            <div class="mt-3">
                <h6 class="text-muted fw-bold">Scan for More Info:</h6>
                <div class="qr-code-container">
                    <img src="{{ product.qr_code.url }}" alt="QR Code for {{ product.name }}" class="qr-img shadow-sm">
                </div>
            </div>

            <!-- ✅ Rating Form -->
            {% if user.is_authenticated %}
            <form method="POST" action="{% url 'rate_product' product.id %}" class="mt-4">
                {% csrf_token %}
                <label for="rating" class="fw-bold">Rate this Product:</label>
                <div class="d-flex align-items-center">
                    <select name="rating" class="form-select w-auto me-2">
                        <option value="5">⭐ ⭐ ⭐ ⭐ ⭐</option>
                        <option value="4">⭐ ⭐ ⭐ ⭐</option>
                        <option value="3">⭐ ⭐ ⭐</option>
                        <option value="2">⭐ ⭐</option>
                        <option value="1">⭐</option>
                    </select>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-star me-2"></i> Submit Rating
                    </button>
                </div>
            </form>
            {% else %}
                <p class="mt-3"><a href="{% url 'login' %}" class="btn btn-outline-primary">Log in to rate</a></p>
            {% endif %}

            <!-- ✅ Buttons Section -->
            <div class="mt-4 d-flex gap-3">
                <a href="{% url 'add_to_cart_at_basket' product_id=product.id %}" class="btn btn-lg custom-btn shadow-sm">
                    <i class="fas fa-cart-plus"></i> Add to Cart
                </a>
                <a href="{% url 'remove_from_cart' product_id=product.id %}" class="btn btn-lg btn-outline-danger shadow-sm">
                    <i class="fas fa-trash-alt"></i> Remove
                </a>
            </div>
        </div>
    </div>

<!-- ✅ Recommended Products Section -->
<div class="recommended-section mt-5 p-4 rounded shadow-sm">
    <h3 class="fw-bold text-center text-orange">You May Also Like</h3>
    <hr class="border-orange">
    <div class="row">
        {% for recommended in recommended_products %}
        <div class="col-md-3">
            <div class="card shadow-sm border-0 p-2 mb-3">
                <a href="{% url 'product_detail' recommended.id %}" class="text-decoration-none text-dark">
                    <img src="{{ recommended.image.url }}" class="card-img-top rounded" alt="{{ recommended.name }}">
                    <div class="card-body text-center">
                        <h6 class="fw-bold text-orange">{{ recommended.name }}</h6>
                        <p class="text-primary fw-bold">${{ recommended.price }}</p>
                    </div>
                </a>
            </div>
        </div>
        {% empty %}
        <p class="text-center text-muted">No recommendations available.</p>
        {% endfor %}
    </div>
</div>

<!-- ✅ Recently Viewed Products Section -->
<div class="recently-viewed-section mt-5 p-4 rounded shadow-sm">
    <h3 class="fw-bold text-center text-orange">Recently Viewed</h3>
    <hr class="border-orange">
    <div class="row">
        {% for recent in recently_viewed_products %}
        <div class="col-md-3">
            <div class="card shadow-sm border-0 p-2">
                <a href="{% url 'product_detail' recent.id %}" class="text-decoration-none text-dark">
                    <img src="{{ recent.image.url }}" class="card-img-top rounded" alt="{{ recent.name }}">
                    <div class="card-body text-center">
                        <h6 class="fw-bold text-orange">{{ recent.name }}</h6>
                        <p class="text-primary fw-bold">${{ recent.price }}</p>
                    </div>
                </a>
            </div>
        </div>
        {% empty %}
        <p class="text-center text-muted">No recently viewed products yet.</p>
        {% endfor %}
    </div>
</div>


<!-- ✅ Customer Reviews Section -->
<div class="customer-reviews mt-5">
    <h3 class="fw-bold text-center">Customer Reviews</h3>
    <hr>
    <div class="row">
        {% for review in product.reviews.all %}
        <div class="col-md-6">
            <div class="review-card p-3 rounded shadow-sm mb-3">
                <div class="d-flex align-items-center">
                    {% if review.user.profile.image %}
                        <img src="{{ review.user.profile.image.url }}" class="profile-img rounded-circle me-3" alt="User Profile">
                    {% else %}
                        <i class="fas fa-user-circle profile-icon me-3"></i>
                    {% endif %}

                    <div>
                        <h5 class="fw-bold">{{ review.user.username }}</h5>
                        <p class="small">{{ review.created_at|date:"F d, Y" }}</p>
                    </div>
                </div>

                <!-- ✅ Star Rating -->
                <div class="review-stars">
                    {% for _ in "12345"|slice:review.rating %}
                        <i class="fas fa-star text-warning"></i>
                    {% endfor %}
                </div>
                <p class="mt-2">{{ review.comment }}</p>

                <!-- ✅ Display Admin Reply if Exists -->
                {% if review.reply %}
                <div class="review-reply mt-3 p-3 border rounded dark-mode-reply">
                    <strong class="text-success">Admin Reply:</strong>
                    <p>{{ review.reply.reply_text }}</p>
                    <small class="small">
                        Replied by {{ review.reply.admin.username }} on {{ review.reply.replied_at|date:"F d, Y" }}
                    </small>
                </div>
                {% endif %}


                <!-- ✅ Admin Reply Button (Only for Staff) -->
                {% if user.is_staff and not review.reply %}
                <div class="mt-3">
                    <a href="{% url 'reply_to_review' review.id %}" class="btn btn-sm btn-success">
                        <i class="fas fa-reply"></i> Reply
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <p class="text-center text-orange">No reviews yet. Be the first to leave a review!</p>
        {% endfor %}
    </div>
</div>


    <!-- ✅ Submit Review Button -->
    {% if user.is_authenticated %}
        <div class="text-center mt-4">
            <a href="{% url 'submit_review' product.id %}" class="btn custom-review-btn shadow-lg">
                <i class="fas fa-pen-fancy me-2"></i> Write a Review
            </a>
        </div>
    {% else %}
        <p class="text-center mt-4">
            <a href="{% url 'login' %}" class="btn custom-review-btn shadow-lg">
                <i class="fas fa-sign-in-alt me-2"></i> Log in to Write a Review
            </a>
        </p>
    {% endif %}
</div>

<!-- 💎 Custom Styles for Product Page -->
<style>

/* ✅ Recently Viewed Products Section */
.recently-viewed-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #fff3e0; /* Light Orange Background */
    border-radius: 10px;
    border-left: 5px solid #ff9800; /* Orange Accent Line */
}

.dark-mode .recently-viewed-section {
    background-color: #332200;
    color: white;
}

/* ✅ Orange Text for Product Titles */
.text-orange {
    color: #ff9800; /* Orange */
}

/* ✅ Border Accent */
.border-orange {
    border-top: 3px solid #ff9800;
}

/* ✅ Product Card Styling */
.card {
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
    background-color: #fff;
    border: 2px solid #ff9800; /* Orange Border */
}

.card:hover {
    transform: scale(1.05);
    border-color: #ff5722; /* Darker Orange on Hover */
}

.card-img-top {
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .card {
    background-color: #222;
    border-color: #ff9800;
}

.dark-mode .text-orange {
    color: #ffcc80; /* Light Orange */
}

/* ✅ Recommended Products Section */
.recommended-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #fff3e0; /* Light Orange Background */
    border-radius: 10px;
    border-left: 5px solid #ff9800; /* Orange Accent Line */
}

.dark-mode .recommended-section {
    background-color: #332200;
    color: white;
}

/* ✅ Orange Text for Product Titles */
.text-orange {
    color: #ff9800; /* Orange */
}

/* ✅ Border Accent */
.border-orange {
    border-top: 3px solid #ff9800;
}

/* ✅ Product Card Styling */
.card {
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
    background-color: #fff;
    border: 2px solid #ff9800; /* Orange Border */
}

.card:hover {
    transform: scale(1.05);
    border-color: #ff5722; /* Darker Orange on Hover */
}

.card-img-top {
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .card {
    background-color: #222;
    border-color: #ff9800;
}

.dark-mode .text-orange {
    color: #ffcc80; /* Light Orange */
}

/* 🌟 Container Styling */
.container {
    max-width: 900px;
}

/* ✅ Product Image Styling */
.product-image-container {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.product-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out;
}

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

/* 🌙 Dark Mode */
.dark-mode .product-img {
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
}

/* 💰 Price Box */
.price-box {
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: inline-block;
}

.dark-mode .price-box {
    background-color: #333;
    color: white;
}

/* 🏷️ QR Code Styling */
.qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    width: 140px;
}

.qr-img {
    width: 100px;
}

/* 🌙 Dark Mode QR Code */
.dark-mode .qr-code-container {
    background-color: #333;
}

/* 🔘 Custom Buttons */
.custom-btn {
    background-color: #148818;
    color: white;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.custom-btn:hover {
    background-color: #0f6f12;
    transform: scale(1.05);
}

.dark-mode .custom-btn {
    background-color: #00c853;
    color: black;
}

.dark-mode .custom-btn:hover {
    background-color: #00a646;
}

/* 🔘 Remove from Cart Button */
.btn-outline-danger {
    border-color: red;
    color: red;
}

.dark-mode .btn-outline-danger {
    border-color: #ff5252;
    color: #ff5252;
}

.dark-mode .btn-outline-danger:hover {
    background-color: #ff5252;
    color: white;
}

/* ✅ Review Card */
.review-card {
    background-color: #fff;
    border-radius: 8px;
    border-left: 5px solid #148818;
    transition: all 0.3s ease-in-out;
}

.review-card:hover {
    transform: scale(1.02);
}

.dark-mode .review-card {
    background-color: #333;
    border-left: 5px solid #00c853;
    color: white;
}

/* ✅ User Profile Image */
.profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* 🌙 Dark Mode User Profile */
.dark-mode .profile-img {
    border: 2px solid #00c853;
}

/* Default User Icon */
.profile-icon {
    font-size: 50px;
    color: #148818;
}

.dark-mode .profile-icon {
    color: #00c853;
}

/* ⭐ Star Ratings */
.text-warning {
    color: #ffc107 !important;
}

.dark-mode .text-warning {
    color: #ffdd57 !important;
}

/* 🏆 Review Stars */
.review-stars i {
    color: #ffc107;
}

.dark-mode .review-stars i {
    color: #ffdd57;
}

/* ✅ Submit Review Button */
.custom-review-btn {
    background-color: #148818;
    color: white;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.custom-review-btn:hover {
    background-color: #0f6f12;
    transform: scale(1.05);
}

.dark-mode .custom-review-btn {
    background-color: #00c853;
    color: black;
}

.dark-mode .custom-review-btn:hover {
    background-color: #00a646;
    color: white;
}

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

{% endblock %}