@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
   <style>
        .testimonial_card {
    position: relative;
    margin-top: 105px;
    padding: 15px 0px 15px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
        margin: 105px 12px 0 12px;
}

.testimonial_card::after {
    position: absolute;
    content: "";
    background: var(--primary);
    width: 50%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.testimonial_card .tf__single_testimonial_img {
    width: 150px;
    height: 150px;
    border: 5px solid #fff;
    box-shadow: var(--boxShadow);
    border-radius: 50%;
    overflow: hidden;
    margin-left: 0;
    position: absolute;
    z-index: 9;
    top: -80px;
}

.tf__single_testimonial_text {
    background: #fff;
    padding: 90px 30px 40px 30px;
    border-radius: 25px;
    position: relative;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

@media (min-width: 1200px) and (max-width: 1399.99px) {
    .tf__single_testimonial_text {
        padding: 90px 20px 20px 20px;
    }
}
   </style>
@endpush


@section('content')
    <section class="site-top-banner search-top-banner opacity-04 position-relative">
        <img src="{{-- {{ getPageBackgroundSettings($page) }} --}} /store/1/default_images/category_cover.png" class="img-cover" alt=""/>

        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-9 col-lg-7">
                    <div class="top-search-categories-form">
                        <h1 class="text-white font-30 mb-15">{{ $title }}</h1>
                        
                    </div>
                </div>
            </div>
        </div>
    </section>

      <div class="position-relative testimonials-container">

                <div id="parallax1" class="ltr">
                    <div data-depth="0.2" class="gradient-box left-gradient-box"></div>
                </div>

                <section class="container home-sections home-sections-swiper">
                    <div class="text-center">
                        <h2 class="section-title">{{-- {{ trans('home.testimonials') }} --}} أراء خريجين دبلوم مونتيسورى الدولي</h2>
                        <p class="section-hint">{{ trans('home.testimonials_hint') }}</p>
                    </div>

                    {{--<div class="position-relative">
                        <div class="swiper-container testimonials-swiper px-12">
                            <div class="swiper-wrapper">

                                @foreach($testimonials as $testimonial)
                                    <div class="swiper-slide">
                                        <div class="testimonials-card position-relative py-15 py-lg-30 px-10 px-lg-20 rounded-sm shadow bg-white text-center">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="testimonials-user-avatar">
                                                    <img src="{{ $testimonial->user_avatar }}" alt="{{ $testimonial->user_name }}" class="img-cover rounded-circle">
                                                </div>
                                                <h4 class="font-16 font-weight-bold text-secondary mt-30">{{ $testimonial->user_name }}</h4>
                                                <span class="d-block font-14 text-gray">{{ $testimonial->user_bio }}</span>
                                                @include('web.default.includes.webinar.rate',['rate' => $testimonial->rate, 'dontShowRate' => true])
                                            </div>

                                            <p class="mt-25 text-gray font-14">{!! nl2br($testimonial->comment) !!}</p>

                                            <div class="bottom-gradient"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>

                        <div class="d-flex justify-content-center">
                            <div class="swiper-pagination testimonials-swiper-pagination"></div>
                        </div>
                    </div>--}}
                    
                    <div class="position-relative testimonials-container">

                <div id="parallax1" class="ltr">
                    <div data-depth="0.2" class="gradient-box left-gradient-box"></div>
                </div>

                <section class="container home-sections home-sections-swiper">
                   

                    <div class="position-relative">
                       
                        <div class="swiper-container testimonials-swiper2 px-12">
                            <div class="swiper-wrapper">

                                @foreach($testimonials as $testimonial)
                                    <div class="swiper-slide">
                                        <div class="testimonial_card">
                                            <div class="tf__single_testimonial_img">
                                             <img src="{{ $testimonial->user_avatar }}" alt="{{ $testimonial->user_name }}" class="img-fluid d-block">
                                                </div>
                                               <div class="tf__single_testimonial_text text-primary fw-bold">
                                                   <h3 class="d-flex justify-content-between">
                                                       <i class="fa fa-quote-right"></i>
                                                       
                                                         <span>
                                                                {{ $testimonial->user_name }}
                                                         </span>
                                                    
                                                      
                                                           <i class="fa fa-quote-left"></i>
                                                   </h3>
                                                    <p class="designation text-center font-16 mb-10">{{ $testimonial->user_bio }}</p>
                                                     <p class="designation text-center font-16 mb-10">{{ $testimonial->country }}</p>
                                <p class="feedback">{!! nl2br($testimonial->comment) !!}</p>
                                <span class="rating d-flex justify-content-center mt-50">
                                    @for ($i = 1; $i <=5 ; $i++)
                                        @if ($i <= $testimonial->rating )
                                            <i class="fa fa-star"></i>
                                        @else
                                            <i class="fa fa-star"></i>
                                        @endif
                                    @endfor
                                </span>
                                               </div>
                                        </div>
                                        {{--<div class="testimonials-card position-relative py-15 py-lg-30 px-10 px-lg-20 rounded-sm shadow bg-white text-center">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="testimonials-user-avatar">
                                                    <img src="{{ $testimonial->user_avatar }}" alt="{{ $testimonial->user_name }}" class="img-cover rounded-circle">
                                                </div>
                                                <h4 class="font-16 font-weight-bold text-secondary mt-30">{{ $testimonial->user_name }}</h4>
                                                <span class="d-block font-14 text-gray">{{ $testimonial->user_bio }}</span>
                                                @include('web.default.includes.webinar.rate',['rate' => $testimonial->rate, 'dontShowRate' => true])
                                            </div>

                                            <p class="mt-25 text-gray font-14">{!! nl2br($testimonial->comment) !!}</p>

                                            <div class="bottom-gradient"></div>
                                        </div>--}}
                                    </div>
                                @endforeach
                            </div>

                        </div>

                        {{--<div class="d-flex justify-content-center">
                            <div class="swiper-pagination testimonials-swiper-pagination"></div>
                             <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
                        </div>--}}
                    </div>
                </section>

                <div id="parallax2" class="ltr">
                    <div data-depth="0.4" class="gradient-box right-gradient-box"></div>
                </div>

                <div id="parallax3" class="ltr">
                    <div data-depth="0.8" class="gradient-box bottom-gradient-box"></div>
                </div>
            </div>
                </section>

                {{--<div id="parallax2" class="ltr">
                    <div data-depth="0.4" class="gradient-box right-gradient-box"></div>
                </div>

                <div id="parallax3" class="ltr">
                    <div data-depth="0.8" class="gradient-box bottom-gradient-box"></div>
                </div>--}}
            </div>

@endsection

@push('scripts_bottom')
   
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>
 <script src="/assets/default/js/parts/home.min.js"></script>
 <script>
     new Swiper('.testimonials-swiper2', {
        slidesPerView: 1,
        spaceBetween: 16,
        loop: false,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.testimonials-swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            991: {
                slidesPerView: 2,
            },

            660: {
                slidesPerView: 1,
            },
        }
    });
 </script>
@endpush
