{{ header }}
<div id="sreview-reviews" class="container-xl flex-grow-1">
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb pr-breadcrumb fsz-12">
            {% for breadcrumb in breadcrumbs %}
                {% if loop.last %}
                    <li class="breadcrumb-item pr-breadcrumb-item">{{ breadcrumb.text }}</li>
                {% else %}
                    <li class="breadcrumb-item pr-breadcrumb-item">
                        <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
    <main>
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [
                    {% for breadcrumb in breadcrumbs %}
                        {% if loop.first %}
                        {% else %}
                            {
                                "@type": "ListItem",
                                "position": {{ loop.index -1 }},
                                "item": {
                                    "@id": "{{ breadcrumb.href }}",
                                    "name": "{{ breadcrumb.text }}"
                                }
                            }{% if not loop.last %},{% endif %}
                        {% endif %}
                    {% endfor %}
                ]
            }
        </script>
        {% if reviews_microdata %}
            <script type="application/ld+json">
                {{ reviews_microdata|raw }}
            </script>
        {% endif %}
        {{ content_top }}
        <div class="row g-3 g-xxl-4 pr-category">
            <div id="content" class="col-xl-12">
                <div class="pr-store-reviews content-block">
                    <div class="pr-page-title mb-3 mb-xl-4">
                        <h1>{{ heading_title }}</h1>
                    </div>
                    <div class="pr-store-reviews-rating d-flex flex-column flex-md-row align-items-center justify-content-between my-3 pb-3 mb-3 position-relative">
                        <div>
                            <div class="pr-store-reviews-rating-main text-center mb-3 mb-md-0 p-4 d-flex flex-column align-items-center justify-content-center gap-3 br-12">
                                <div class="dark-text fsz-18 fw-700">{{ text_store_rating }}</div>
                                <span class="pr-store-reviews-rating-main-value position-relative d-flex align-items-center justify-content-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" viewBox="0 0 84 84" fill="none">
                                        <path d="M57.5587 23.3218L48.4866 4.22157C45.8153 -1.40263 38.1847 -1.40264 35.5134 4.22156L26.4413 23.3218L6.22862 26.3736C0.253859 27.2757 -2.11851 35.0123 2.22929 39.416L16.7989 54.1726L13.3518 75.0558C12.3255 81.2734 18.5134 86.0369 23.8381 83.1282L42 73.2069L60.1619 83.1282C65.4866 86.0369 71.6745 81.2734 70.6482 75.0558L67.2011 54.1726L81.7707 39.416C86.1185 35.0123 83.7461 27.2757 77.7714 26.3736L57.5587 23.3218Z" fill="#FFC445"></path>
                                    </svg>
                                    <span class="position-relative z-1 white-text fsz-24 fw-700 lh-sm">{{ store_rating }}</span>
                                </span>
                                <div class="grey-text">{{ text_review_total }}: {{ review_total }}</div>
                                <button id="storeReviewAdd" type="button" class="button button-secondary w-100 d-xl-none">
                                    <span class="button-text">{{ button_write_review }}</span>
                                </button>
                            </div>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    reviewsAdd();
                                });
                            </script>
                        </div>
                        <div class="pr-store-reviews-rating-details d-grid">
                            {% for store_rating_with_subject in store_rating_with_subjects %}
                                <div class="pr-store-reviews-rating-details-item text-center d-flex flex-column align-items-center justify-content-center gap-3 p-3 p-xl-4 br-6">
                                    <div class="pr-store-reviews-rating-details-item-header dark-text fw-500">{{ store_rating_with_subject.name }}</div>
                                    <div class="rating-circle position-relative" data-rating="{{ store_rating_with_subject.value }}">
                                        <svg class="circle" width="60" height="60">
                                            <circle class="bg" cx="30" cy="30" r="26"></circle>
                                            <circle class="progress" cx="30" cy="30" r="26" style="stroke-dasharray: 163.363; stroke-dashoffset: 0; stroke: rgb(74, 178, 70);"></circle>
                                        </svg>
                                        <div class="rating-text dark-text fsz-18 fw-700 position-absolute">{{ store_rating_with_subject.value }}</div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                initReviewRatingAnimation();
                            });
                        </script>
                    </div>
                    <div class="row g-3">
                        <div class="col-xl-8 order-1 order-xl-0">
                            {% if not reviews %}
                            <p class="fw-500 secondary-text">{{ text_empty }}</p>
                            {% endif %}
                            <div id="reviews-container" class="pr-store-reviews-items d-flex flex-column gap-3">
                                {% for review in reviews %}
                                    <div class="pr-store-reviews-item br-12 d-flex flex-column gap-3 p-3 p-xl-4">
                                        <div class="pr-store-reviews-item-author d-flex gap-3 align-items-center pb-3">
                                            <div class="pr-store-reviews-rating-value position-relative d-flex align-items-center justify-content-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
                                                    <path d="M30.1498 12.2144L25.3978 2.20951C23.9985 -0.7365 20.0015 -0.736504 18.6022 2.2095L13.8502 12.2144L3.26261 13.813C0.132974 14.2855 -1.1097 18.338 1.16772 20.6447L8.7994 28.3743L6.9938 39.3131C6.45621 42.57 9.69752 45.0652 12.4866 43.5416L22 38.3447L31.5134 43.5416C34.3025 45.0652 37.5438 42.57 37.0062 39.3131L35.2006 28.3743L42.8323 20.6447C45.1097 18.338 43.867 14.2855 40.7374 13.813L30.1498 12.2144Z" fill="#FFC445"></path>
                                                </svg>
                                                <span class="position-relative z-1 white-text fsz-12 fw-700 lh-sm">{{ review.avg_rating_stars }}</span>
                                            </div>
                                            <div class="pr-store-reviews-item-author-info d-flex flex-column gap-1">
                                                <div class="pr-store-reviews-item-author-name dark-text fsz-14 fw-600">{{ review.author }}</div>
                                                <div class="pr-store-reviews-item-date d-flex align-items-center gap-1 grey-text fsz-12">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
                                                        <path d="M1 5.16666H13M3.66667 1.16666V2.49999M10.3333 1.16666V2.49999M4 7.83332C4 8.01742 3.85076 8.16666 3.66667 8.16666C3.48257 8.16666 3.33333 8.01742 3.33333 7.83332M4 7.83332C4 7.64923 3.85076 7.49999 3.66667 7.49999C3.48257 7.49999 3.33333 7.64923 3.33333 7.83332M4 7.83332H3.33333M7.33333 7.83332C7.33333 8.01742 7.1841 8.16666 7 8.16666C6.81591 8.16666 6.66667 8.01742 6.66667 7.83332M7.33333 7.83332C7.33333 7.64923 7.1841 7.49999 7 7.49999C6.81591 7.49999 6.66667 7.64923 6.66667 7.83332M7.33333 7.83332H6.66667M10.6667 7.83332C10.6667 8.01742 10.5174 8.16666 10.3333 8.16666C10.1492 8.16666 10 8.01742 10 7.83332M10.6667 7.83332C10.6667 7.64923 10.5174 7.49999 10.3333 7.49999C10.1492 7.49999 10 7.64923 10 7.83332M10.6667 7.83332H10M4 11.1667C4 11.3508 3.85076 11.5 3.66667 11.5C3.48257 11.5 3.33333 11.3508 3.33333 11.1667M4 11.1667C4 10.9826 3.85076 10.8333 3.66667 10.8333C3.48257 10.8333 3.33333 10.9826 3.33333 11.1667M4 11.1667H3.33333M7.33333 11.1667C7.33333 11.3508 7.1841 11.5 7 11.5C6.81591 11.5 6.66667 11.3508 6.66667 11.1667M7.33333 11.1667C7.33333 10.9826 7.1841 10.8333 7 10.8333C6.81591 10.8333 6.66667 10.9826 6.66667 11.1667M7.33333 11.1667H6.66667M10.6667 11.1667C10.6667 11.3508 10.5174 11.5 10.3333 11.5C10.1492 11.5 10 11.3508 10 11.1667M10.6667 11.1667C10.6667 10.9826 10.5174 10.8333 10.3333 10.8333C10.1492 10.8333 10 10.9826 10 11.1667M10.6667 11.1667H10M3 13.8333H11C12.1046 13.8333 13 12.9379 13 11.8333V3.83332C13 2.72875 12.1046 1.83332 11 1.83332H3C1.89543 1.83332 1 2.72875 1 3.83332V11.8333C1 12.9379 1.89543 13.8333 3 13.8333Z" stroke="#9DA4AE" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                    {{ review.date_added }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pr-store-reviews-item-themes d-flex flex-column flex-md-row pb-3">
                                            {% for rev in review.review_subject_array %}
                                                <div class="pr-store-reviews-item-themes-details d-flex align-items-center gap-2">
                                                    <div class="pr-store-reviews-item-themes-details-title dark-text fsz-14 fw-600">{{ rev.name }}:</div>
                                                    <span class="pr-store-reviews-item-themes-details-value secondary-text fsz-12 fw-700 d-flex align-items-center justify-content-center br-4">{{ rev.rating }}</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <div class="pr-store-reviews-item-text dark-text fsz-14">
                                            {{ review.text }}
                                        </div>
                                        {% if review.admin_text is defined and review.admin_text is not empty %}
                                            <div class="pr-store-reviews-item-answer p-3 bg-grey br-8 fsz-14 ">
                                                <div class="fw-600 mb-2">{{ admin_text }}</div>
                                                <div class="pr-store-reviews-item-answer-content">{{ review.admin_text }}</div>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                            {% if has_more %}
                                <div class="text-center mt-4">
                                    <button id="load-more-reviews" class="pr-footer-contacts-button button button-primary" data-page="{{ current_page + 1 }}" data-ajax-url="{{ ajax_url }}">
                                        <span class="button-text">{{ oct_show_more }}</span>
                                    </button>
                                </div>
                            {% endif %}
                            {% if description %}
                                <div class="pr-store-reviews-description">
                                    {{ description }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="pr-store-reviews-add-column col-xl-4 d-none d-xl-block order-0 order-xl-1 mb-3 mb-xl-0">
                            <form method="post" enctype="multipart/form-data" id="add-review-form" class="pr-store-reviews-add pr-sticky-column sticky-top z-2 br-12 p-3 p-xl-4">
                                <div class="pr-store-reviews-add-title fw-700 dark-text pb-4 mb-4 d-flex align-items-center gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                                        <path d="M12.5 4.5L17.5 9.5M13 20H21M5.95517 20.3587L2.1936 20.9857C1.50003 21.1013 0.89873 20.5 1.01433 19.8064L1.64125 16.0448C1.74659 15.4128 2.04678 14.8295 2.49985 14.3764L14.9758 1.90042C16.1764 0.699858 18.1229 0.69986 19.3235 1.90042L20.0996 2.67653C21.3001 3.87709 21.3001 5.82359 20.0996 7.02415L7.62358 19.5002C7.1705 19.9532 6.58719 20.2534 5.95517 20.3587Z" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    {{ text_review_write }}
                                </div>
                                {% if subjects %}
                                    <div class="grey-text fsz-14 mb-3">{{ text_review_criteria }}:</div>
                                    {% for subject in subjects %}
                                        <div class="pr-store-reviews-add-criteria d-flex align-items-center justify-content-between mb-3">
                                            <label class="pr-store-reviews-add-criteria-title me-3 dark-text fsz-14 fw-600">{{ subject.name }}</label>
                                            <div class="pr-store-reviews-rating-stars d-flex align-items-center justify-content-center" id="block-rev-{{ subject.oct_sreview_subject_id }}">
                                                <label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="1" checked/></label>
                                                <label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="2" checked/></label>
                                                <label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="3" checked/></label>
                                                <label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="4" checked/></label>
                                                <label class="pr-store-reviews-rating-star pr-store-reviews-rating-star-is"><input class="d-none" type="radio" name="rating[{{ subject.oct_sreview_subject_id }}]" value="5" checked/></label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                                <div class="form-floating mb-3">
                                    <input type="text" name="author" value="{{ author }}" class="form-control" id="inputStoreReviewName" placeholder="{{ entry_name }}" inputmode="text" autocomplete="name">
                                    <label for="inputStoreReviewName" class="secondary-text fsz-14 px-3"><span class="required">* </span>{{ entry_name }}</label>
                                </div>
                                <textarea name="text" class="form-control" id="inputStoreReviewComment" placeholder="{{ entry_review }}" rows="6"></textarea>
                                <div class="fsz-12 grey-text my-3">{{ text_note }}</div>
                                <div class="form-group mb-3">
                                    {{ captcha }}
                                </div>
                                <button type="submit" class="button button-secondary button-large w-100"><span class="button-text fsz-14">{{ button_send_review }}</span></button>
                            </form>
                            <script>
                                window.addEventListener('DOMContentLoaded', () => {
                                    reviewsRating('.pr-store-reviews-add');
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    {{ content_bottom }}
</div>
<script>
    $("#inputStoreReviewName, #inputStoreReviewComment, #add-review-form [name='captcha']").on("change paste keyup", function() {
        $(this).removeClass('error_style');
    });

	const reviewWriteUrl = '{{ ajax_write_url|raw }}';

	$('#add-review-form').on('submit', function(event) {
		event.preventDefault();
		$.ajax({
			type: 'post',
			url: reviewWriteUrl,
			dataType: 'json',
			data: $('#add-review-form').serialize(),
			cache: false,
			success: function(json) {
				if (json['error']) {
					$('#add-review-form .text-danger').remove();
					let errorOption = '';

					$.each(json['error'], function(i, val) {
						$('#add-review-form [name="' + i + '"]').addClass('error_style');
						errorOption += '<div class="alert-text-item">' + val + '</div>';
					});

					prNotify('danger', errorOption);
				} else {
					if (json['success']) {
						prNotify('success', json['success']);
						$('input[name=\'author\']').val('');
						$('textarea[name=\'text\']').val('');
						$('input[name=\'rating\']:checked').prop('checked', false);
						$('#add-review-form .pr-module-rating-star-is').removeClass('pr-module-rating-star-is');
					}
				}
			}
		});
	});

    $('#load-more-reviews').on('click', function() {
        const btn = $(this);
        const page = btn.data('page');
        const ajaxUrl = btn.data('ajax-url');
        
        btn.prop('disabled', true);
        btn.find('.button-text').text('{{ text_loading }}');
        
        $.ajax({
            url: ajaxUrl + '&page=' + page,
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.reviews && response.reviews.length > 0) {
                    response.reviews.forEach(function(review) {
                        let reviewSubjects = '';
                        if (review.review_subject_array && review.review_subject_array.length > 0) {
                            review.review_subject_array.forEach(function(rev) {
                                reviewSubjects += '<div class="dark-text fw-400"><span class="light-text fw-500">' + rev.name + ':</span> ' + rev.rating + '</div>';
                            });
                        }

                        let adminText = '';
                        if (review.admin_text && review.admin_text.trim() !== '') {
                            adminText = '<div class="pr-store-reviews-item-answer p-3 bg-grey br-8 fsz-14 ">' +
                                            '<div class="fw-600 mb-2">{{ admin_text }}</div>' +
                                            '<div class="pr-store-reviews-item-answer-content">' + review.admin_text + '</div>' +
                                        '</div>';
                        }

                        const reviewHtml = '<div class="pr-product-reviews-item-box">' +
                            '<div class="pr-product-reviews-item br-4 p-3">' +
                            '<div class="pr-product-reviews-item-header d-flex flex-column flex-sm-row justify-content-between align-items-sm-center pb-3">' +
                            '<div class="pr-store-reviews-item-author d-flex align-items-center">' +
                            '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="29" viewBox="0 0 28 29" fill="none">' +
                            '<path d="M22.2895 0.346191H5.71053C1.97474 0.346191 0 2.32093 0 6.05672V22.6357C0 26.1106 1.72863 28.0396 4.97368 28.2946C5.03411 28.3108 5.09305 28.3314 5.15789 28.3314C5.18884 28.3314 5.21689 28.3168 5.24784 28.3138C5.40553 28.3212 5.54695 28.3462 5.71053 28.3462H22.2895C22.4531 28.3462 22.5959 28.3212 22.7522 28.3138C22.7831 28.3182 22.8097 28.3314 22.8421 28.3314C22.9069 28.3314 22.9659 28.3108 23.0263 28.2946C26.2714 28.0381 28 26.1106 28 22.6357V6.05672C28 2.32093 26.0253 0.346191 22.2895 0.346191ZM22.1053 26.8725H5.89474V25.9441C5.89474 24.6296 6.29711 20.344 11.4801 20.344H16.5199C21.7029 20.344 22.1053 24.631 22.1053 25.9441V26.8725ZM26.5263 22.6357C26.5263 25.0496 25.5728 26.373 23.5789 26.7473V25.9441C23.5789 22.6813 21.7294 18.8703 16.5199 18.8703H11.4801C6.27058 18.8703 4.42105 22.6813 4.42105 25.9441V26.7473C2.42716 26.3715 1.47368 25.0496 1.47368 22.6357V6.05672C1.47368 3.16682 2.81916 1.81988 5.71053 1.81988H22.2895C25.1808 1.81988 26.5263 3.16682 26.5263 6.05672V22.6357ZM14.0119 6.24093C11.1677 6.24093 8.85398 8.55461 8.85398 11.3988C8.85398 14.243 11.1677 16.5567 14.0119 16.5567C16.8561 16.5567 19.1698 14.243 19.1698 11.3988C19.1698 8.55461 16.8561 6.24093 14.0119 6.24093ZM14.0119 15.083C11.9797 15.083 10.3277 13.4296 10.3277 11.3988C10.3277 9.36809 11.9797 7.71461 14.0119 7.71461C16.0441 7.71461 17.6961 9.36809 17.6961 11.3988C17.6961 13.4296 16.0441 15.083 14.0119 15.083Z" fill="#9CA3AF" />' +
                            '</svg>' +
                            '<div class="pr-store-reviews-item-info ms-2 d-flex flex-column align-items-start">' +
                            '<span class="dark-text fw-500 fsz-14">' + review.author + '</span>' +
                            '<div class="pr-module-item-rating-stars d-flex align-items-center justify-content-center mt-1" data-rating="' + review.avg_rating_stars + '">' +
                            '<span class="pr-module-item-rating-star"><span class="pr-module-item-rating-star-inner"></span></span>' +
                            '<span class="pr-module-item-rating-star"><span class="pr-module-item-rating-star-inner"></span></span>' +
                            '<span class="pr-module-item-rating-star"><span class="pr-module-item-rating-star-inner"></span></span>' +
                            '<span class="pr-module-item-rating-star"><span class="pr-module-item-rating-star-inner"></span></span>' +
                            '<span class="pr-module-item-rating-star"><span class="pr-module-item-rating-star-inner"></span></span>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<span class="d-inline-flex align-items-center fsz-12 light-text mt-2 mt-sm-0">' +
                            '<svg class="me-1" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                            '<path d="M9.69231 0.923565H8.92308V0.462027C8.92308 0.207258 8.71631 0.000488281 8.46154 0.000488281C8.20677 0.000488281 8 0.207258 8 0.462027V0.923565H4V0.462027C4 0.207258 3.79323 0.000488281 3.53846 0.000488281C3.28369 0.000488281 3.07692 0.207258 3.07692 0.462027V0.923565H2.30769C0.819692 0.923565 0 1.74326 0 3.23126V9.6928C0 11.1808 0.819692 12.0005 2.30769 12.0005H9.69231C11.1803 12.0005 12 11.1808 12 9.6928V3.23126C12 1.74326 11.1803 0.923565 9.69231 0.923565ZM2.30769 1.84664H3.07692V2.30818C3.07692 2.56295 3.28369 2.76972 3.53846 2.76972C3.79323 2.76972 4 2.56295 4 2.30818V1.84664H8V2.30818C8 2.56295 8.20677 2.76972 8.46154 2.76972C8.71631 2.76972 8.92308 2.56295 8.92308 2.30818V1.84664H9.69231C10.6628 1.84664 11.0769 2.2608 11.0769 3.23126V3.6928H0.923077V3.23126C0.923077 2.2608 1.33723 1.84664 2.30769 1.84664ZM9.69231 11.0774H2.30769C1.33723 11.0774 0.923077 10.6633 0.923077 9.6928V4.61587H11.0769V9.6928C11.0769 10.6633 10.6628 11.0774 9.69231 11.0774ZM4.16617 6.61587C4.16617 6.95557 3.89109 7.23126 3.55078 7.23126C3.21109 7.23126 2.93224 6.95557 2.93224 6.61587C2.93224 6.27618 3.20493 6.00049 3.54462 6.00049H3.55078C3.89047 6.00049 4.16617 6.27618 4.16617 6.61587ZM6.6277 6.61587C6.6277 6.95557 6.35263 7.23126 6.01232 7.23126C5.67263 7.23126 5.39378 6.95557 5.39378 6.61587C5.39378 6.27618 5.66647 6.00049 6.00616 6.00049H6.01232C6.35201 6.00049 6.6277 6.27618 6.6277 6.61587ZM9.08924 6.61587C9.08924 6.95557 8.81417 7.23126 8.47386 7.23126C8.13417 7.23126 7.85532 6.95557 7.85532 6.61587C7.85532 6.27618 8.12801 6.00049 8.4677 6.00049H8.47386C8.81355 6.00049 9.08924 6.27618 9.08924 6.61587ZM4.16617 9.07741C4.16617 9.4171 3.89109 9.6928 3.55078 9.6928C3.21109 9.6928 2.93224 9.4171 2.93224 9.07741C2.93224 8.73772 3.20493 8.46203 3.54462 8.46203H3.55078C3.89047 8.46203 4.16617 8.73772 4.16617 9.07741ZM6.6277 9.07741C6.6277 9.4171 6.35263 9.6928 6.01232 9.6928C5.67263 9.6928 5.39378 9.4171 5.39378 9.07741C5.39378 8.73772 5.66647 8.46203 6.00616 8.46203H6.01232C6.35201 8.46203 6.6277 8.73772 6.6277 9.07741ZM9.08924 9.07741C9.08924 9.4171 8.81417 9.6928 8.47386 9.6928C8.13417 9.6928 7.85532 9.4171 7.85532 9.07741C7.85532 8.73772 8.12801 8.46203 8.4677 8.46203H8.47386C8.81355 8.46203 9.08924 8.73772 9.08924 9.07741Z" fill="#9CA3AF"></path>' +
                           '</svg>' +
                           review.date_added +
                           '</span>' +
                           '</div>' +
                           '<div class="pr-product-reviews-item-content pt-3 fsz-16 fw-300 border-bottom-0">' +
                           review.text +
                           '<div class="mt-3">' + reviewSubjects + '</div>' +
                           '</div>' +
                           '</div>' +
                           adminText +
                           '</div>';

                       $('#reviews-container').append(reviewHtml);
                   });

                   const newProductsContainer = document.getElementById('reviews-container');
                   const ratingContainers = newProductsContainer.querySelectorAll('.pr-module-rating-stars');

                    ratingContainers.forEach(container => {
                        const rating = parseFloat(container.getAttribute('data-rating'));
                        updateRating(container, rating);
                    });

                   btn.data('page', page + 1);

                   if (!response.has_more) {
                       btn.hide();
                   }
               } else {
                   btn.hide();
               }
           },
           error: function() {
               console.error('error loading more reviews');
           },
           complete: function() {
               btn.prop('disabled', false);
               btn.find('.button-text').text('{{ oct_show_more }}');
           }
       });
   });
</script>
{{ footer }}