The following html with php is the part to display the product rating and comment on the online shop product page:
<div class="pt-20">
            <div class="product-dContent border rounded-24">
                <div class="product-dContent__box">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" 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>
                                        <?php } else { ?>
                                            <p style="margin-left: 10px;margin-right: 10px;">沒有用戶評分</p>
                                        <?php } ?>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div style="display: flex;justify-content: space-between;">
                                        <h6 style="padding-top: 15px;margin-left: 10px;margin-right: 10px;">產品評價</h6>
                                        <?php if ($product['product'][0]['is_purchased'] == 1) : ?>
                                            <?php if (empty($my_rating)) : ?>
                                                <button 
                                                    type="button"
                                                    class="btn btn-info rating-comp-open-btn"
                                                    data-product-id="<?= htmlspecialchars($product['product'][0]['id'] ?? '') ?>"
                                                    data-user-id="<?= htmlspecialchars($this->ion_auth->user()->row()->id ?? '') ?>"
                                                    data-product-name="<?= htmlspecialchars($product['product'][0]['name'] ?? '') ?>"
                                                    data-store-name="<?= htmlspecialchars($product['product'][0]['store_name'] ?? '') ?>"
                                                >
                                                    留下評價
                                                </button>
                                            <?php else : ?>
                                                <button 
                                                    type="button"
                                                    class="btn btn-info rating-comp-open-btn"
                                                    data-product-id="<?= htmlspecialchars($product['product'][0]['id'] ?? '') ?>"
                                                    data-user-id="<?= htmlspecialchars($this->ion_auth->user()->row()->id ?? '') ?>"
                                                    data-product-name="<?= htmlspecialchars($product['product'][0]['name'] ?? '') ?>"
                                                    data-store-name="<?= htmlspecialchars($product['product'][0]['store_name'] ?? '') ?>"
                                                >
                                                    更改評價
                                                </button>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    </div>
                                    <!-- 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>
                                                    <?php if (!empty($review['images']) && is_array($review['images'])): ?>
                                                        <div class="review-images d-flex flex-wrap gap-12 mt-20" style="max-width: 100%;">
                                                            <?php 
                                                            // Limit max 5 images
                                                            $images_to_show = array_slice($review['images'], 0, 5); 
                                                            foreach ($images_to_show as $index => $img): 
                                                                $img_url = htmlspecialchars(($img)); // Make sure to sanitize URLs
                                                            ?>
                                                                <a href="<?= $img_url ?>" class="glightbox" data-gallery="review-<?= htmlspecialchars($review['id'] ?? $index) ?>" style="flex-shrink:0; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; display: block;">
                                                                    <img src="<?= $img_url ?>" alt="User image <?= $index + 1 ?>" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" />
                                                                </a>
                                                            <?php endforeach; ?>
                                                        </div>
                                                    <?php endif; ?>
                                                    <!--
                                                    <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>  
                        
                    </div>
                </div>
            </div>
        </div>

I want to update the layout design with following change:
1. Add the rating count for each star (1-5) at right side of the part for display the 平均產品評分 (so that, the rating count show at the right column and 平均產品評分 show at the left column)
2. Keep the product rating and comment display at the above part below
3. Show maximum 3 user comment on the page, and the other show in the popup modal, provide the see more button at the bottom of whole rating container to open the popup modal.