My updated version of rating tab are following:
<div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab" tabindex="0">
                            <div class="row g-4">
                                <!-- Left column: Average rating and star distribution -->
                                <div class="col-lg-6">
                                    <div class="ms-xxl-5">
                                        <?php
                                        if (!empty($product_ratings)) {
                                            $totalRatings = (int)$product_ratings['no_of_rating'];
                                            $star_1 = (int)($product_ratings['star_1'] ?? 0);
                                            $star_2 = (int)($product_ratings['star_2'] ?? 0);
                                            $star_3 = (int)($product_ratings['star_3'] ?? 0);
                                            $star_4 = (int)($product_ratings['star_4'] ?? 0);
                                            $star_5 = (int)($product_ratings['star_5'] ?? 0);

                                            $totalStars = $star_1 * 1 + $star_2 * 2 + $star_3 * 3 + $star_4 * 4 + $star_5 * 5;
                                            $averageRating = $totalRatings ? round($totalStars / $totalRatings, 1) : 0;

                                            function rating_percentage($count, $total) {
                                                return ($total > 0) ? round(($count / $total) * 100) : 0;
                                            }
                                        ?>
                                            <div class="border border-gray-100 rounded-8 px-40 py-52 flex-center flex-column flex-shrink-0 text-center">
                                                <h2 class="mb-6 text-main-600"><?= $averageRating ?></h2>
                                                <div class="flex-center gap-8">
                                                    <?php
                                                    $fullStars = floor($averageRating);
                                                    $halfStar = (($averageRating - $fullStars) >= 0.5);
                                                    for ($i = 1; $i <= 5; $i++) {
                                                        if ($i <= $fullStars) {
                                                            echo '<span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>';
                                                        } elseif ($i == $fullStars + 1 && $halfStar) {
                                                            echo '<span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star-half"></i></span>';
                                                        } else {
                                                            echo '<span class="text-15 fw-medium text-gray-300 d-flex"><i class="ph-fill ph-star"></i></span>';
                                                        }
                                                    }
                                                    ?>
                                                </div>
                                                <span class="mt-16 text-gray-500">平均產品評分</span>
                                            </div>

                                            <div class="border border-gray-100 rounded-8 px-24 py-40 flex-grow-1">
                                                <?php foreach ([5 => $star_5, 4 => $star_4, 3 => $star_3, 2 => $star_2, 1 => $star_1] as $star => $countStar):
                                                    $widthPercent = rating_percentage($countStar, $totalRatings);
                                                ?>
                                                    <div class="flex-align gap-8 mb-<?= $star === 1 ? '0' : '20' ?>">
                                                        <span class="text-gray-900 flex-shrink-0"><?= $star ?></span>
                                                        <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Rating <?= $star ?>" aria-valuenow="<?= $widthPercent ?>" aria-valuemin="0" aria-valuemax="100">
                                                            <div class="progress-bar bg-main-600 rounded-pill" style="width: <?= $widthPercent ?>%"></div>
                                                        </div>
                                                        <div class="flex-align gap-4">
                                                            <?php for ($i = 1; $i <= 5; $i++): ?>
                                                                <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                            <?php endfor; ?>
                                                        </div>
                                                        <span class="text-gray-900 flex-shrink-0"><?= $countStar ?></span>
                                                    </div>
                                                <?php endforeach; ?>
                                            </div>
                                        <?php } else { ?>
                                            <p style="margin-left: 10px;margin-right: 10px;">沒有用戶評分</p>
                                        <?php } ?>
                                    </div>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h6 style="padding-top: 15px;margin-left: 10px;margin-right: 10px;">產品評價</h6>
                                    <!-- Dynamic reviews loop -->
                                    <?php if (!empty($product_ratings['product_rating'])): ?>
                                        <?php foreach($product_ratings['product_rating'] as $review): ?>
                                            <div class="d-flex align-items-start gap-24 pb-44 border-bottom border-gray-100 mb-44" style="margin-left: 10px;margin-right: 10px;">
                                                <!--<img src="<?= !empty($review['user_profile']) ? $review['user_profile'] : (THEME_ASSETS_URL . 'images/marketpro/thumbs/comment-img1.png') ?>" alt="<?= htmlspecialchars($review['user_name'] ?? 'User') ?>" class="w-52 h-52 object-fit-cover rounded-circle flex-shrink-0">-->
                                                <div class="flex-grow-1">
                                                    <div class="flex-between align-items-start gap-8 ">
                                                        <div class="">
                                                            <h6 class="mb-12 text-md"><?= htmlspecialchars($review['user_name'] ?? '匿名用戶') ?></h6>
                                                            <div class="flex-align gap-8">
                                                                <?php
                                                                $rating = isset($review['rating']) ? (int)$review['rating'] : 0;
                                                                for ($i = 1; $i <= 5; $i++) {
                                                                    if ($i <= $rating) {
                                                                        echo '<span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>';
                                                                    } else {
                                                                        echo '<span class="text-15 fw-medium text-gray-300 d-flex"><i class="ph-fill ph-star"></i></span>';
                                                                    }
                                                                }
                                                                ?>
                                                            </div>
                                                        </div>
                                                        <span class="text-gray-800 text-xs"><?= !empty($review['data_added']) ? date('Y-m-d H:i:s', strtotime($review['data_added'])) : '' ?></span>
                                                    </div>
                                                    <p class="text-gray-700"><?= !empty($review['comment']) ? nl2br(htmlspecialchars($review['comment'] ?? '')) : '此用戶並沒有留下評價' ?></p>
                                                    <!--
                                                    <div class="flex-align gap-20 mt-44">
                                                        <button class="flex-align gap-12 text-gray-700 hover-text-main-600" type="button">
                                                            <i class="ph-bold ph-thumbs-up"></i>
                                                            Like
                                                        </button>
                                                        <a href="#comment-form" class="flex-align gap-12 text-gray-700 hover-text-main-600">
                                                            <i class="ph-bold ph-arrow-bend-up-left"></i>
                                                            Reply
                                                        </a>
                                                    </div>
                                                    -->
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <p style="margin-left: 10px;margin-right: 10px;">暫未有用戶為此產品評分</p>
                                    <?php endif; ?>
                                </div>

                                  
                            </div>
                        </div>  

I want to add the area to show the user uploaded images (max 5 pix per each comment) at the comment text below, just a preview size, and allow user click on the image to open the lightbox to view the full size of image.