@php
    $testimonialElement = getContent('testimonial.element', orderById: true);
@endphp

<section class="testimonials py-120 section-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="section-heading">
                    <h2 class="section-heading__title">Our Partners</h2>
                    <p class="section-heading__desc">Meet our dedicated partners, integral contributors fueling our agribusiness initiative. These key collaborators play a vital role in supporting and enhancing our project, bringing diverse expertise and resources to ensure collective success in transforming the agricultural landscape.</p>
                </div>
            </div>
        </div>
        <div class="testimonial-slider">
            @foreach ($testimonialElement as $testimonial)
                <div class="testimonails-card">
                    <div class="testimonial-item d-flex flex-wrap justify-content-center gap-3">
                        <div class="testimonial-item__content">
                            <div class="testimonial-item__info">
                                <div class="testimonial-item__thumb">
                                    <img src="{{ getImage('assets/images/frontend/testimonial/' . @$testimonial->data_values->image, '200x200') }}" class="fit-image">
                                    <span class="testimonial-item__thumb-icon">
                                        <i class="fas fa-quote-right"></i>
                                    </span>
                                </div>
                                <div class="testimonial-item__details">
                                    <h4 class="testimonial-item__name"> {{ __(@$testimonial->data_values->author) }}
                                    </h4>
                                    <span class="testimonial-item__designation">{{ __(@$testimonial->data_values->designation) }} </span>
                                </div>
                            </div>
                        </div>
                        <p class="testimonial-item__desc"> {{ __(@$testimonial->data_values->quote) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/slick.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/slick.min.js') }}"></script>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.testimonial-slider').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                speed: 1500,
                dots: true,
                pauseOnHover: true,
                arrows: false,
                prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-long-arrow-alt-left"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="fas fa-long-arrow-alt-right"></i></button>',
                responsive: [{
                        breakpoint: 1199,
                        settings: {
                            arrows: false,
                            slidesToShow: 1,
                            dots: true,
                        }
                    },
                    {
                        breakpoint: 991,
                        settings: {
                            arrows: false,
                            slidesToShow: 1
                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            arrows: false,
                            slidesToShow: 1
                        }
                    }
                ]
            });
        })(jQuery);
    </script>
@endpush