@extends('layouts.front-layout')
@section('title') Home @endsection

@section('content')

    <!-- preLoader -->
    <div class="preLoader black">
        <img src="{{ $setting->settingImage('logo') ?? '' }}" alt="img">
    </div>
    <!-- preLoader -->

    <div class="preLoader white"></div>

    <section class="mainbanner">
        <video class="mainbanner__video" autoplay muted loop playsinline>
            <source src="{{$setting->settingImage('home_top_banner_video') ?? ''}}" type="video/mp4">
        </video>
        <div class="swiper mainbanner__slider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner">
                        <div class="container">
                            <div class="row aic justify-content-center">
                                <div class="col-lg-6">
                                    <div class="slideOne">
                                        <h3 data-swiper-parallax="-200">{{$setting->home_banner_first_heading ?? ''}}</h3>
                                        <h1 data-swiper-parallax="-200">{{$setting->home_banner_second_heading ?? ''}}</h1>
                                        <p data-swiper-parallax="-200">
                                            {!! $setting->home_banner_description ?? '' !!}
                                        </p>
                                        <div class="btn-group">
                                            <a href="{{ route('about') }}" class="themeBtn">Read More</a>
                                            <a href="{{ route('contact') }}" class="themeBtn bdrbtn">Contact US</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <figure class="mainbanner__bottom">
            <img src="{{asset('upload/images/banner-shape.png')}}" alt="image" class="img-fluid">
        </figure>
    </section>



    <section class="about-section">
        <div class="container">
            <div class="aboutbackgroud"
                 style=" background: url({{ pagesSingleImage('About', 'about_second_image') ?? '' }})center/cover no-repeat;">
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-11">
                        <div class="about-content" data-aos="fade-up">
                            <h2 class="mainHead">{{$pageData['About']['heading'] ?? ''}}
                                <span> {{$pageData['About']['sub_heading'] ?? ''}}</span></h2>
                            {!! $pageData['About']['first_description'] ?? '' !!}
                            <a href="#" class="themeBtn">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


{{--    <section class="maze-section">--}}
{{--        <div class="container">--}}
{{--            <h2 class="mainHead text-center"--}}
{{--                data-aos="fade-up">{{ $pageData['Maze Rental']['maze_rental_section_first_title'] ?? '' }}--}}
{{--                <span>{{ $pageData['Maze Rental']['maze_rental_section_second_title'] ?? '' }}</span></h2>--}}
{{--            <div class="row align-items-center">--}}

{{--                @forelse($get_maze_rentals as $maze_rental)--}}

{{--                    <div class="col-md-6" data-aos="fade-up">--}}
{{--                        <div class="mazewrap2">--}}
{{--                            <figure>--}}
{{--                                <img src="{{$maze_rental->mazeRentalImage('maze_rental_image') ? : ''}}"--}}
{{--                                     class="img-fluid" alt="">--}}
{{--                            </figure>--}}
{{--                            <div class="mazecntnt2">--}}
{{--                                <h3>{{$maze_rental->maze_rental_name ? : ''}}</h3>--}}
{{--                                <a href="" class="pricered"><i class="far fa-tag"></i>$ {{$maze_rental->price ? : ''}}</a>--}}
{{--                                {!! $maze_rental->description ? : '' !!}--}}
{{--                                <a href="#" class="themeBtn"> Join Now</a>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                @empty--}}
{{--                    <h3>Maze Rentals Data Not Available</h3>--}}
{{--                @endforelse--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}



    <section class="its-amazing">
        <figure class="shape-top">
            <img src="upload/images/shape-top.png" alt="image" class="img-fluid">
        </figure>
        <video class="its-amazing__video" autoplay muted loop playsinline>
            <source src="{{$setting->settingImage('home_top_banner_video') ?? ''}}" type="video/mp4">
        </video>
        <div class="container">
            <div class="its-amazing-cntnt">
                <h2 class="mainHead text-center">It’s <span>Amazeing</span></h2>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since </p>
                <div class="btn-group">
                    <a href="#" class="themeBtn"> View All</a>
                    <a href="#" class="themeBtn bdrbtn"> Watch Now</a>
                </div>
            </div>
        </div>
        <figure class="shape-bottom">
            <img src="upload/images/shape-bottom.png" alt="image" class="img-fluid">
        </figure>
    </section>


    <section class="gallery-section">
        <div class="container-fluid p-0">
            <h2 class="mainHead text-center">{{ $pageData['Gallery']['gallery_section_first_title'] ?? '' }} <span>{{ $pageData['Gallery']['gallery_section_second_title'] ?? '' }}</span></h2>
            <div class="row align-items-center no-gutters">
                @forelse($get_galleries as $gallery)

                    <div class="col-md-3" data-aos="fade-up">
                        <figure>
                            <a href="{{$gallery->galleryImage('galleries_image') ? : ''}}" data-fancybox=""> <img
                                    src="{{$gallery->galleryImage('galleries_image') ? : ''}}" class="img-fluid"
                                    alt=""></a>
                        </figure>
                    </div>
                @empty
                    <h3>Our Gallery Data Not Available</h3>
                @endforelse
            </div>
        </div>
    </section>


    <section class="clientMain">
        <div class="container">
            <h2 class="mainHead text-center" data-aos="fade-up">{{ $pageData['Our Amazing Community']['our_amazing_community_section_first_title'] ?? '' }} <span>{{ $pageData['Our Amazing Community']['our_amazing_community_section_second_title'] ?? '' }}</span></h2>
            <div class="row">
                <div class="col-md-12" data-aos="fade-up">
                    <div class="swiper reviewSlider">
                        <div class="swiper-wrapper">
                            @forelse($get_our_amazing_community as $our_amazing_community)
                            <div class="swiper-slide">
                                <div class="reviewMain">
                                    <div class="reviewBox">
                                        <img src="{{asset('upload/images/quote11.webp')}}" class="img-fluid" alt="">
                                         {!! $our_amazing_community->description ? : '' !!}
                                    </div>
                                    <div class="reviewUser">
                                        <figure>
                                            <img src="{{$our_amazing_community->ourAmazingCommunityImage('our_amazing_community_image') ? : ''}}" class="img-fluid"
                                                 alt="img">

                                        </figure>
                                        <h3>{{$our_amazing_community->heading ? : ''}}<span>{{$our_amazing_community->sub_heading ? : ''}}</span></h3>
                                    </div>
                                </div>
                            </div>

                            @empty
                                <h3>Our Amazing Community Data Not Available</h3>
                            @endforelse

                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>




    <section class="contact-section">
        <div class="container">
            <div class="contact-top" data-aos="fade-up">
                <h2 class="mainHead">{{ $pageData['Contact']['top_banner_title'] ?? '' }}  <span>{{ $pageData['Contact']['heading'] ?? '' }}</span></h2>

                <p>{!!$pageData['Contact']['description'] ?? '' !!}</p>
            </div>

            <div class="col-lg-12 mx-auto">
                <form class="contactForm" action="{{route('contact.submit')}}"method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6" data-aos="fade-up">
                            <div class="form-group">

                                <input type="text" class="form-control" name="first_name" placeholder="Full Name">

                                <small class='text-danger'>@error ('first_name') {{$message}} @enderror</small>
                            </div>
                        </div>
                        <div class="col-md-6" data-aos="fade-up">
                            <div class="form-group">

                                <input type="text" class="form-control" name="last_name" placeholder="Full Name">
                                <small class='text-danger'>@error ('last_name') {{$message}} @enderror</small>

                            </div>
                        </div>
                        <div class="col-md-6" data-aos="fade-up">
                            <div class="form-group">

                                <input type="text" class="form-control" placeholder="Website" name="address">
                                <small class='text-danger'>@error ('address') {{$message}} @enderror</small>

                            </div>
                        </div>
                        <div class="col-md-6" data-aos="fade-up">
                            <div class="form-group">

                                <input type="text" class="form-control" placeholder="Phone" name="phone">
                                <small class='text-danger'>@error ('phone') {{$message}} @enderror</small>

                            </div>
                        </div>

                        <div class="col-md-12" data-aos="fade-up">
                            <div class="form-group">

                                <input type="email" class="form-control" placeholder="Email" name="email">
                                <small class='text-danger'>@error ('email') {{$message}} @enderror</small>

                            </div>
                        </div>


                        <div class="col-md-12 mt-2" data-aos="fade-up">

                            <div class="form-group">
                                <textarea type="text" class="form-control" name="message" placeholder="Message"></textarea>
                                <small class='text-danger'>@error ('message') {{$message}} @enderror</small>

                            </div>
                        </div>


                        <div class="text-center col-md-12">

                            <button class="themeBtn"type="submit">Submit</button>
                        </div>


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

@endsection