@extends('layout.app')
@section('content')

<style>
    header .themeBtn {
        border: 3px solid #fff !important;
        color: #fff !important;
        font-weight: 700;
        background-color: #2626267d;
    }

    .navbar-brand img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(292deg) brightness(109%) contrast(102%);
    }
</style>

<section class="heroSection">
    <div class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" data-background="{{optional($index->getMedia('slider_image1')->first())->getUrl() }}">
                        <div class="container">
                            <div class="row no-gutters">
                                <div class="col-md-5">
                                    <div class="heroText slideOne">
                                        <h1>{!! $data->description1 ?? '' !!}</h1>
                                        <div><a href="{{ route('front.contact') }}" class="themeBtn">Contact us</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" data-background="{{optional($index->getMedia('slider_image2')->first())->getUrl() }}">
                        <div class="container">
                            <div class="row no-gutters">
                                <div class="col-md-5">
                                    <div class="heroText slideOne">
                                        <h1>{!! $data->description2 ?? ''!!}</h1>
                                        <div><a href="{{ route('front.contact') }}" class="themeBtn">Contact us</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-3">
                <figure>
                    <img src="{{optional($index->getMedia('cta_image')->first())->getUrl()}}" class="img-fluid" alt="">
                </figure>
            </div>
            <div class="col-md-9" data-aos="fade-up">
                <q>{!! $data->cta_description ?? '' !!}</q>
            </div>
        </div>
    </div>
</section>
<!-- !@ CTA Section -->

<!-- About Section -->
<section class="about-section">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-5 col-md-6">
                <span class="subtitle" data-aos="fade-up">{{$data->about_heading ?? ''}}</span>
                <h2 class="heading" data-aos="fade-up">{{$data->about_sub_heading ?? ''}}</h2>
                <p data-aos="fade-up">{!! $data->about_description ?? '' !!}</p>
                <div data-aos="fade-up">
                    <a href="{{route('front.contact')}}" class="themeBtn blackbtn mt-lg-4 mt-md-3 mt-0">Contact Us</a>
                </div>
            </div>
            <div class="col-md-6">
                <figure class="aboutimg" data-aos="fade-up">
                    <img src="{{optional($index->getMedia('about_image')->first())->getUrl() }}" class="img-fluid" alt="">
                </figure>
            </div>
        </div>
    </div>
</section>
<!--!@ About Section -->

<!-- Blog Section -->
<section class="blog-section">
    <img src="{{asset('images/icons/obj.webp')}}" data-aos="fade-right" class="img-fluid obj" alt="">
    <div class="container">
        <div class="text-center mb-5">
            <h1 class="heading" data-aos="fade-up">Bush River Resort</h1>
        </div>
        <div class="row">
            <div class="col-md-4" data-aos="fade-up">
                <div class="blogcard">
                    <figure>
                        <img src="{{ optional($index->getMedia('sporting_clay_home_image')->first())->getUrl() }}" class="img-fluid" alt="">
                    </figure>
                    <div class="card-body">
                        <h4>{{$data->sporting_clay_home_heading ?? ''}}</h4>
                        <p>{!! $data->sporting_clay_home_description !!}</p>
                        {{-- @php--}}
                        {{-- $words = explode(' ', $sportingData->sport_description);--}}
                        {{-- $selectedWords = array_slice($words, 0, 16);--}}
                        {{-- $sportingShortDescription = implode(' ', $selectedWords);--}}
                        {{-- @endphp--}}
                        {{-- <p>{{$sportingShortDescription ?? ''}}</p>--}}
                        <a href="{{ route('front.sportingClay') }}">Read More <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4" data-aos="fade-up">
                <div class="blogcard">
                    <figure>
                        <img src="{{ optional($index->getMedia('quail_club_home_image')->first())->getUrl() }}" class="img-fluid" alt="">
                    </figure>
                    <div class="card-body">
                        <h4>{{$data->quail_club_home_heading ?? ''}}</h4>
                        <p>{!! $data->quail_club_home_description !!}</p>
                        <a href="{{ route('front.quailClub') }}">Read More <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4" data-aos="fade-up">
                <div class="blogcard">
                    <figure>
                        <img src="{{ optional($index->getMedia('pheasant_tower_home_image')->first())->getUrl() }}" class="img-fluid" alt="">
                    </figure>
                    <div class="card-body">
                        <h4>{{$data->pheasant_tower_home_heading ?? ''}}</h4>
                        <p>{!! $data->pheasant_tower_home_description !!}</p>
                        <a href="{{ route('front.pheasantTowerShoot') }}">Read More <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- !@Blog Section -->

<!-- Discover Section -->
<section class="about-section discover-section">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-7">
                <figure class="aboutimg" data-aos="fade-up">
                    <img src="{{optional($index->getMedia('discover_image')->first())->getUrl() }}" class="img-fluid" alt="">
                </figure>
            </div>
            <div class="col-lg-5 col-md-6">
                <span class="subtitle" data-aos="fade-up">{{$data->discover_heading ?? ''}}</span>
                <h2 class="heading" data-aos="fade-up">{{$data->discover_sub_heading ?? ''}}</h2>
                <p data-aos="fade-up">{!! $data->discover_description ?? '' !!}</p>
                <div data-aos="fade-up">
                    <a href="{{route('front.contact')}}" class="themeBtn blackbtn mt-lg-4 mt-md-3 mt-0">Contact Us</a>
                </div>
            </div>

        </div>
    </div>
</section>
<!-- !@Discover Section -->

<!-- Gallery Section -->
<section class="gallery-section">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                @foreach($galleries->take(2) as $gallery)
                <figure data-aos="fade-up">
                    <a href="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" data-fancybox="">
                        <img src="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" class="img-fluid" alt="">
                    </a>
                </figure>
                @endforeach
            </div>
            <div class="col-md-4">

                @foreach($galleries->skip(2)->take(1) as $gallery)
                <figure data-aos="fade-up">
                    <a href="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" data-fancybox="">
                        <img src="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" class="img-fluid" alt="">
                    </a>
                </figure>
                @endforeach
                <div class="galleryText">
                    <img src="{{asset('images/obj1.webp')}}" class="img-fluid" data-aos="fade-up" alt="">
                    <h2 class="heading" data-aos="fade-up">Our Gallery</h2>
                    <div data-aos="fade-up">
                        <a href="{{ route('front.gallery') }}" class="btn themeBtn blackbtn">View More</a>
                    </div>
                </div>
                @foreach($galleries->skip(3)->take(1) as $gallery)
                <figure data-aos="fade-up">
                    <a href="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" data-fancybox="">
                        <img src="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" class="img-fluid" alt="">
                    </a>
                </figure>
                @endforeach
            </div>
            <div class="col-md-4">
                @foreach($galleries->skip(4)->take(2) as $gallery)
                <figure data-aos="fade-up">
                    <a href="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" data-fancybox="">
                        <img src="{{asset('uploads/gallery/'.($gallery->gallery_image ?? ''))}}" class="img-fluid" alt="">
                    </a>
                </figure>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- !@Gallery Section -->

<!-- Showcase Section -->
{{-- <section class="showcase-section">
        <div class="container">
            <div class="showcaseText">
                <h2 class="heading" data-aos="fade-up">{{$data->showcase_heading ?? ''}}</h2>
<p data-aos="fade-up">{!! $data->showcase_description !!}</p>
<div data-aos="fade-up">
    <a href="#" class="btn themeBtn">Explore Now</a>
</div>
</div>
</div>
<img src="{{($index->getMedia('showcase_image')->first()->getUrl()) }}" data-aos="fade-up" data-aos-delay="500" class="img-fluid bg" alt="">
</section>--}}
<!-- !@ Showcase Section -->

<!-- Testimonial Section -->
{{--<section class="testimonial-section">
        <div class="container">
            <img src="{{($index->getMedia('testimonial_image')->first()->getUrl()) }}" data-aos="fade-up" class="img-fluid" alt="">
<h2 class="heading" data-aos="fade-up">{{$data->testimonial_heading ?? ''}}</h2>
<div class="col-md-9 mx-auto">
    <div class="swiper testimonialSlider" data-aos="fade-up">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <p>{!! $data->testimonial_description ?? '' !!}</p>
            </div>
        </div>
    </div>
    <div class="swiper-controls" data-aos="fade-up">
        <div class="swiper-button-prev prev"></div>
        <div class="swiper-button-next next"></div>
    </div>
</div>
</div>
</section>--}}
<!-- !@Testimonial Section -->


<!-- Insta Slider -->
<section class="insta-sec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-10">
                <h5 class="heading" data-aos="fade-up">Live In The Moment</h5>
            </div>
            <div class="col-md-2" data-aos="fade-up">
                <div class="swiper-button-prev prev2"></div>
                <div class="swiper-button-next next2"></div>
            </div>
        </div>
    </div>
    <div class="swiper instaSlider" data-aos="fade-up">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <figure>
                    <img src="{{($index->getMedia('moment_image1')->first()->getUrl()) }}" class="img-fluid" alt="Insta Slide img">
                </figure>
                <a class="overlay" href="{{($index->getMedia('moment_image1')->first()->getUrl()) }}" data-fancybox=""></a>
            </div>
            <div class="swiper-slide">
                <figure>
                    <img src="{{($index->getMedia('moment_image2')->first()->getUrl()) }}" class="img-fluid" alt="Insta Slide img">
                </figure>
                <a class="overlay" href="{{($index->getMedia('moment_image2')->first()->getUrl()) }}" data-fancybox=""></a>
            </div>
            <div class="swiper-slide">
                <figure>
                    <img src="{{($index->getMedia('moment_image3')->first()->getUrl()) }}" class="img-fluid" alt="Insta Slide img">
                </figure>
                <a class="overlay" href="{{($index->getMedia('moment_image3')->first()->getUrl()) }}" data-fancybox=""></a>
            </div>
            <div class="swiper-slide">
                <figure>
                    <img src="{{($index->getMedia('moment_image4')->first()->getUrl()) }}" class="img-fluid" alt="Insta Slide img">
                </figure>
                <a class="overlay" href="{{($index->getMedia('moment_image4')->first()->getUrl()) }}" data-fancybox=""></a>
            </div>
            <div class="swiper-slide">
                <figure>
                    <img src="{{($index->getMedia('moment_image5')->first()->getUrl()) }}" class="img-fluid" alt="Insta Slide img">
                </figure>
                <a class="overlay" href="{{($index->getMedia('moment_image5')->first()->getUrl()) }}" data-fancybox=""></a>
            </div>
        </div>
    </div>
</section>
<!-- !@Insta Slider -->
@endsection