@php
    $testimonials = getTestimonials(limit: null, order: 'desc');
    $visaGalleries = getGalleriesByCategory(limit: 3, order: 'asc', category: 'visa-grant');
@endphp
@extends('client.raffles.layouts.app')
@section('content')
    @include('client.raffles.pages.partials.breadcumb')

    <section class="half-section position-relative">
        <div id="particles-01" data-particle="true"
            data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 10,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 1000}},&quot;color&quot;:{&quot;value&quot;:[&quot;#ff5b74&quot;, &quot;#820f89&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.7,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 2,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 7,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:2,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"
            class="position-absolute top-0px left-0px w-100 z-index-minus-1"></div>
        <div class="container-fluid">

            <div class="row justify-content-center">
                <div class="col-xxl-4 col-xl-5 col-lg-6 col-sm-8 text-center"
                    data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">Student
                        speaks</span>
                    <h3 class="alt-font text-dark-gray fw-600 ls-minus-1px mb-0">{{ $page->short_description }}</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-12 text-center"
                    data-anime="{ &quot;rotateX&quot;: [-40, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <div class="swiper swiper-horizontal-3d pt-8 pb-5 lg-pt-10 lg-pb-10 md-pt-12 sm-pt-15 sm-pb-11 swiper-pagination-bottom testimonials-style-04 magic-cursor"
                        data-slider-options="{ &quot;loop&quot;: true, &quot;slidesPerView&quot;: 1,&quot;centeredSlides&quot;:true,&quot;effect&quot;:&quot;coverflow&quot;,&quot;coverflowEffect&quot;:{&quot;rotate&quot;:0,&quot;stretch&quot;:100,&quot;depth&quot;:150,&quot;modifier&quot;:1.5,&quot;slideShadows&quot;:true}, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav.slider-navigation-style-04&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav.slider-navigation-style-04&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 5000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-04&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: true }, &quot;breakpoints&quot;: { &quot;768&quot;: { &quot;slidesPerView&quot;: 2 } } }">
                        <div class="swiper-wrapper">

                            @if ($testimonials)
                                @foreach ($testimonials as $testimonial)
                                    <div class="swiper-slide bg-white border-radius-4px">
                                        <div
                                            class="position-relative ps-13 pe-13 md-ps-10 md-pe-10 sm-ps-7 sm-pe-7 pt-20 pb-10 lg-pt-22 md-pt-30 sm-pt-20">
                                            <img alt src="{{ $testimonial->image }}"
                                                class="absolute-middle-center top-0px rounded-circle w-150px xs-w-100px border border-color-white box-shadow-extra-large border-8">
                                            <div class="testimonials-content">

                                                <p class="mb-25px">{!! $testimonial->description !!}
                                                </p>
                                            </div>
                                            <div
                                                class="testimonials-author fs-18 mb-5px text-gradient-fast-blue-purple fw-600 d-inline-block">
                                                {{ $testimonial->title }}</div>
                                            <div class="testimonials-position fs-15 lh-20">{{ $testimonial->designation }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif

                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 text-center"
                    data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <div
                        class="text-center bg-dark-gray text-white fs-16 lh-36 border-radius-30px d-inline-block ps-20px pe-20px align-middle me-10px mt-10px mb-10px">
                        <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                            class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                    </div>
                    <h6 class="text-dark-gray fw-400 mb-0 d-inline-block align-middle ls-minus-1px">Explore more <span
                            class="fw-700">Student Stories</span> on <a href="https://www.youtube.com/@raffleseducare"
                            target="_blank"><img class="img-fluid h-35px"
                                src="{{ asset('raffles/assets/images/youtube.png') }}" alt="YouTube Logo" /></a></h6>

                </div>
            </div>
        </div>
    </section>

    @if ($visaGalleries->galleries->isNotEmpty())
        <section class="half-section bg-gradient-very-light-gray ps-6 pe-6 lg-ps-2 lg-pe-2">
            <div class="container-fluid">
                <div class="row gy-3 row-cols-1 row-cols-lg-3 row-cols-sm-2">
                    @foreach ($visaGalleries->galleries as $gallery)
                        <div class="col fit-videos text-center md-mb-50px sm-mb-30px">
                            <div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
                                <iframe src="{{ $gallery->link }}" name="fitvid0"></iframe>
                            </div>
                            <div class="text-dark-gray fs-18 fw-600 mt-5">{{ $gallery->title }}</div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    @endif
@endsection