<div class="reviews-container">
        <div class="reviews-summary mb-4">
            <div class="d-flex align-items-center">
                <div class="average-rating me-3">
                    <span class="rating-number"><?php echo e(number_format($averageRating, 1)); ?></span>
                    <div class="stars">
                        <?php for($i = 1; $i <= 5; $i++): ?>
                            <i class="fas fa-star <?php if($i <= $averageRating): ?> text-warning <?php else: ?> text-muted <?php endif; ?>"></i>
                        <?php endfor; ?>
                    </div>
                </div>
                <div class="reviews-info">
                    <h6 class="mb-0"><?php echo e(__('review.average_rating')); ?></h6>
                    <small class="text-muted"><?php echo e($totalReviews); ?> <?php echo e(__('review.total_reviews')); ?></small>
                </div>
            </div>
        </div>

        <div class="reviews-list">
            <?php $__currentLoopData = $reviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="review-item card mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="reviewer-name mb-1"><?php echo e($review->name); ?></h6>
                                <div class="stars mb-2">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                        <i class="fas fa-star <?php if($i <= $review->rating): ?> text-warning <?php else: ?> text-muted <?php endif; ?>"></i>
                                    <?php endfor; ?>
                                </div>
                            </div>
                            <small class="text-muted"><?php echo e($review->created_at->format('d/m/Y')); ?></small>
                        </div>
                        <p class="review-text mb-2"><?php echo e($review->review); ?></p>
                        
                        <?php if($review->images && count($review->images) > 0): ?>
                            <div class="review-images">
                                <div class="row">
                                    <?php $__currentLoopData = $review->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="col-md-2 col-sm-3 col-4 mb-1">
                                            <div class="review-image-container">
                                                <img src="<?php echo e(asset('storage/' . $image)); ?>" 
                                                     alt="Review image" 
                                                     class="img-fluid review-image"
                                                     onclick="openImageModal('<?php echo e(asset('storage/' . $image)); ?>')"
                                                     style="cursor: pointer;">
                                            </div>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <?php if($reviews->hasPages()): ?>
            <div class="pagination-wrapper mt-4">
                <?php echo e($reviews->links()); ?>

            </div>
        <?php endif; ?>

    <style>
        .reviews-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .reviews-summary {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .average-rating {
            text-align: center;
        }

        .rating-number {
            font-size: 2rem;
            font-weight: bold;
            color: #495057;
            display: block;
        }

        .stars {
            font-size: 1.2rem;
        }

        .review-item {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            transition: box-shadow 0.2s ease;
        }

        .review-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .reviewer-name {
            color: #495057;
            font-weight: 600;
        }

        .review-text {
            color: #6c757d;
            line-height: 1.6;
        }

        .no-reviews {
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .text-muted {
            color: #6c757d !important;
        }

        /* Pagination Styles */
        .pagination-wrapper {
            display: flex;
            justify-content: center;
        }

        .pagination {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            gap: 5px;
        }

        .page-item {
            margin: 0 2px;
        }

        .page-link {
            display: block;
            padding: 8px 12px;
            text-decoration: none;
            color: #007bff;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .page-link:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }

        .page-item.active .page-link {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

        .page-item.disabled .page-link {
            color: #6c757d;
            pointer-events: none;
            background-color: #fff;
            border-color: #dee2e6;
        }

        .review-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .review-image {
            width: 100%;
            height: 80px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .review-image:hover {
            transform: scale(1.05);
        }

        /* Modal para visualizar imagens */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }

        .image-modal-content {
            margin: auto;
            display: block;
            width: 70%;
            max-width: 800px;
            height: auto;
            margin-top: 5%;
            object-fit: contain;
        }

        .image-modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .image-modal-close:hover {
            color: #bbb;
        }
    </style>

    <!-- Modal para visualizar imagens -->
    <div id="imageModal" class="image-modal">
        <span class="image-modal-close" onclick="closeImageModal()">&times;</span>
        <img class="image-modal-content" id="modalImage">
    </div>

    <script>
        function openImageModal(imageSrc) {
            document.getElementById('modalImage').src = imageSrc;
            document.getElementById('imageModal').style.display = 'block';
        }

        function closeImageModal() {
            document.getElementById('imageModal').style.display = 'none';
        }

        // Fechar modal ao clicar fora da imagem
        document.getElementById('imageModal').onclick = function(e) {
            if (e.target === this) {
                closeImageModal();
            }
        }

        // Fechar modal com tecla ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeImageModal();
            }
        });
    </script>
</div>
<?php /**PATH /home/hellotourspt/hellotours.pt/resources/views/partials/review-list.blade.php ENDPATH**/ ?>