@extends('layout.app')

@section('page-title', 'Testimonials')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('/new-design/home.php') }}" class="text">About</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Trustpilot Reviews</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="testimonials" class="wt-pages">

        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                        <div class="super-heading">
                            What our<br>
                            customers say...
                        </div>
                    </div>
                </div>
            </div>

            <!-- Testimonials -->
             <div class="container">
                <div class="tf-grid-layout md-col-indented">
                    <div class="vertical-line" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                    </div>
                    <div class="container">
                        <div class="tf-grid-layout md-col-3" id="testimonials-container">
                        </div>
                        <div class="tf-grid-layout text-center">
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s" style="visibility: visible; animation-delay: 0s; animation-name: fadeInUp;">
                                <button data-page="1" id="load-more-testimonials-btn" class="tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                    <span class="text text-uppercase">Load More</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Testimonials -->
        </section>

        <section class="flat-spacing-wt">
            <div class="container">
                <div class="tf-grid-layout">
                    <!-- TrustBox script -->
                    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
                    <!-- End TrustBox script -->
                    <!-- TrustBox widget - Grid -->
                    <div class="trustpilot-widget" data-locale="en-US" data-template-id="539adbd6dec7e10e686debee" data-businessunit-id="47783f620000640005020fa2" data-style-height="700px" data-style-width="100%" data-review-languages="en">
                        <a href="https://www.trustpilot.com/review/www.westminsterteak.com" target="_blank" rel="noopener">Trustpilot</a>
                    </div>
                    <!-- End TrustBox widget -->
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection

@push('after-foot-js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const loadMoreBtn = document.getElementById('load-more-testimonials-btn');

            function loadTestimonials() {
                const page = parseInt(loadMoreBtn.dataset.page);

                fetch('/ajax/load-testimonials.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ 'page': page })
                })
                .then(res => res.text())
                .then(data => {
                    document.getElementById('testimonials-container').insertAdjacentHTML('beforeend', data);
                    loadMoreBtn.dataset.page = (page+1);
                });
            }

            // Attach click event after DOM is ready
            loadMoreBtn.addEventListener('click', loadTestimonials);

            // Make first call
            loadTestimonials();
        });
    </script>
@endpush