{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Reviews List</title>
{% endblock title %}

{% block content %}
<div class="page-content">
  <!-- Start Container Fluid --> 
    <div class="container-fluid">

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center gap-1">
                        <h4 class="card-title flex-grow-1">All Product Reviews List</h4>
                    </div>
                    <div>
                        <div class="table-responsive">
                            <table class="table align-middle mb-0 table-hover table-centered">
                                <thead class="bg-light-subtle">
                                    <tr>
                                        <th style="width: 20px;">
                                            <div class="form-check ms-1">
                                                <input type="checkbox" class="form-check-input" id="customCheck1">
                                                <label class="form-check-label" for="customCheck1"></label>
                                            </div>
                                        </th>
                                        <th>Product</th>
                                        <th>Customer</th>
                                        <th>Rating</th>
                                        <th>Review</th>
                                        <th>Review Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for review in reviews %}
                                    <tr>
                                        <td>
                                            <div class="form-check ms-1">
                                                <input type="checkbox" class="form-check-input" id="customCheck{{ forloop.counter }}">
                                                <label class="form-check-label" for="customCheck{{ forloop.counter }}">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="rounded bg-light avatar-md d-flex align-items-center justify-content-center">
                                                    {% if review.product.images.all %}
                                                        <img src="{{ review.product.images.first.image.url }}" style="border-radius:5px;" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="{{ review.product.name }}" alt="{{ review.product.name }}" class="avatar-md">
                                                    {% else %}
                                                        <img src="{% static '/assets/images/product/default.png' %}" style="border-radius:5px;" alt="{{ review.product.name }}" class="avatar-md">
                                                    {% endif %}
                                                </div>{{ review.product.name }}
                                            </div>
                                        </td>
                                        <td>{{ review.customer.user.first_name|capfirst }} {{ review.customer.user.last_name|capfirst }}</td>
                                        <td>
                                            <span class="text-warning">{{ review.get_rating_display }}</span>
                                        </td>
                                        <td>{{ review.review_description|default:"No review description provided." }}</td>
                                        <td>{{ review.created_at|date:"d-m-Y" }}<br>
                                            {{ review.created_at|date:"h:i A" }}
                                        </td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="#" class="btn btn-soft-primary btn-sm view-review-btn" 
                                                   data-bs-toggle="modal" 
                                                   data-bs-target="#exampleModalScrollable" 
                                                   data-review-id="{{ review.id }}" 
                                                   data-review-customer-first-name="{{ review.customer.user.first_name }}" 
                                                   data-review-customer-last-name="{{ review.customer.user.last_name }}" 
                                                   data-review-product="{{ review.product.name }}" 
                                                   data-review-rating="{{ review.rating }}" 
                                                   data-review-description="{{ review.review_description }}" 
                                                   data-review-date="{{ review.created_at|date:"Y-m-d h:i A" }}" 
                                                   data-review-product-image="{{ review.product.images.first.image.url }}">
                                                    <iconify-icon icon="mdi:eye" class="align-middle fs-18"></iconify-icon>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="8" class="text-center text-warning fw-bold p-5">No reviews available.</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <!-- Modal -->
                            <div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header" style="background-color: #f8f9fa;">
                                            <h5 class="modal-title" id="exampleModalScrollableTitle" style="font-weight: 600;">Product Review Details</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <!-- Product Image -->
                                            <div style="text-align: center; margin-bottom: 20px;">
                                                <img id="modalProductImage" src="" alt="Product Image" 
                                                     style="width: 30%; display: none; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);">
                                            </div>
                            
                                            <!-- Customer and Product Details -->
                                            <div style="padding: 10px;">
                                                <p><strong>Customer:</strong> <span id="modalCustomerFirstName"></span> <span id="modalCustomerLastName"></span></p>
                                                <p><strong>Product:</strong> <span id="modalProductName"></span></p>
                                            </div>
                                            
                                            <!-- Rating -->
                                            <div style="display: flex; align-items: center; gap: 5px; padding: 10px;">
                                                <strong>Rating:</strong> 
                                                <span id="modalRatingStars" style="display: inline-block; font-size: 1.25em; color: #ffc107;"></span>
                                            </div>
                            
                                            <!-- Review Description -->
                                            <div style="padding: 10px;">
                                                <p><strong>Review Description:</strong></p>
                                                <p id="modalReviewDescription" style="line-height: 1.6; color: #555;"></p>
                                            </div>
                            
                                            <!-- Review Date -->
                                            <div style="padding: 10px;">
                                                <p><strong>Review Date:</strong> <span id="modalReviewDate" style="color: #555;"></span></p>
                                            </div>
                                        </div>
                                        <div class="modal-footer" style="background-color: #f8f9fa;">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end table-responsive -->
                    </div>
                    <div class="card-footer border-top">
                        <!-- Pagination Controls -->
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end mb-0">
                                {% if reviews.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ reviews.previous_page_number }}">Previous</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">Previous</a>
                                    </li>
                                {% endif %}

                                {% for page_num in reviews.paginator.page_range %}
                                    {% if reviews.number == page_num %}
                                        <li class="page-item active">
                                            <a class="page-link" href="#">{{ page_num }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if reviews.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ reviews.next_page_number }}">Next</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End Container Fluid -->

    <!-- ========== Footer Start ========== -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <script>document.write(new Date().getFullYear())</script> &copy; Aquarium E-Commerce. Developed by 
                    <iconify-icon icon="iconamoon:heart-duotone" class="fs-18 align-middle text-danger"></iconify-icon> 
                    <a href="https://geegatechnologies.com/" class="fw-bold footer-text" target="_blank">GeegaTechnologies</a>
                </div>
            </div>
        </div>
    </footer>
    <!-- ========== Footer End ========== -->
</div>

<script>
    document.querySelectorAll('.view-review-btn').forEach(button => {
        button.addEventListener('click', function() {
            const customerFirstName = this.getAttribute('data-review-customer-first-name');
            const customerLastName = this.getAttribute('data-review-customer-last-name');
            const productName = this.getAttribute('data-review-product');
            const rating = parseInt(this.getAttribute('data-review-rating'), 10); // Convert to integer
            const reviewDescription = this.getAttribute('data-review-description');
            const reviewDate = this.getAttribute('data-review-date');
            const productImage = this.getAttribute('data-review-product-image');
    
            document.getElementById('modalCustomerFirstName').textContent = capitalizeFirstLetter(customerFirstName);
            document.getElementById('modalCustomerLastName').textContent = capitalizeFirstLetter(customerLastName);
            document.getElementById('modalProductName').textContent = productName;
            document.getElementById('modalReviewDescription').textContent = reviewDescription;
            document.getElementById('modalReviewDate').textContent = reviewDate;
    
            // Display product image
            const productImageElement = document.getElementById('modalProductImage');
            if (productImage) {
                productImageElement.src = productImage;
                productImageElement.style.display = 'block';
            } else {
                productImageElement.style.display = 'none';
            }
    
            // Generate stars for the rating
            const ratingStarsElement = document.getElementById('modalRatingStars');
            ratingStarsElement.innerHTML = ' '; // Clear previous stars
            for (let i = 1; i <= 5; i++) {
                if (i <= rating) {
                    ratingStarsElement.innerHTML += '<i class="bi bi-star-fill" style="color: #ffc107;"></i> '; 
                } else {
                    ratingStarsElement.innerHTML += '<i class="bi bi-star" style="color: #ffc107;"></i> ';
                }
            }
        });
    });
    
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
</script>
{% endblock content %}