@extends('layouts.front-layout')
@section('title', 'Home')
@section('content')
    <div class="preLoader black">
        <img src="{{optional($setting->getMedia('logo')->first())->getUrl()}}" alt="img">
    </div>
    <div class="preLoader white"></div>
    {{--<h1>{{ $pageData['Faqs']['heading'] ?? '' }}</h1>--}}
    <section class="main-slider p-0" id="mainSlider"
             style="background: url('{{($setting->getMedia('home_top_banner_image')->first())->getUrl()}}') center/cover no-repeat;">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @foreach($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="container">
                            <div class="row ">
                                <div class="col-lg-6">
                                    <div class="slideOne">
                                        <h2 data-swiper-parallax="-200">{{ $slider->first_heading ?? ''}}</h2>
                                        <h1 data-swiper-parallax="-200">{{ $slider->second_heading ?? '' }}</h1>
                                        <a href="{{ route('services') }}" class="themeBtn">Explore Our Services</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        </div>
        <!-- <div class="swiper-pagination1"></div> -->
        </div>
        <div class="sociallinkstop">
            <ul>
                <li><a href="{{$setting->facebook ?? ''}}" target="_blank">Facebook</a></li>
                <li><a href="{{$setting->twitter ?? ''}}" target="_blank"">Twitter</a></li>
                <li><a href="{{$setting->instagram ?? ''}}" target="_blank"">Instagram</a></li>
            </ul>
        </div>

        <img src="upload/images/bnrline.png" class="img-fluid pinkbordr" alt="">
    </section>

    <section class="aboutSection">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{optional($aboutUs->getMedia('about_first_image')->first())->getUrl()}}"
                             class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="aboutcntnt">
                        <h2 class="mainHead">{{ $about->heading ?? '' }}</h2>
                        <h4>{{ $about->sub_heading ?? '' }}</h4>
                        <p>{!!  $about->first_description ?? ''  !!}</p>
                        <a href="#" class="themeBtn" data-aos="fade-up">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>




    <section class="homeimprove"
             style="background: url('{{($transform->getMedia('transform_image')->first())->getUrl()}}') no-repeat;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10" data-aos="fade-up">
                    <h2 class="mainHead text-center text-white">{{ $data->heading ?? '' }}</h2>
                    <div class="btngroup text-center mt-5">
                        <a href="#" class="themeBtn">Get Your Free Estimate</a>
                        <a href="{{ $data->transform_back_video ?? '' }}" class="playbtnn" data-fancybox=""><i
                                class="fas fa-play"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="servicesPage">
        <div class="container">

            <h2 class="mainHead text-center mb-5" data-aos="fade-up">{{$pageData['Services']['top_title']}}</h2>
            @isset($services)
                @forelse($services as $service)
                    <div class="mainwrapp">
                        <div class="row align-items-center {{ $loop->odd ? 'flex-row-reverse' : '' }}">
                            <div class="col-md-6" data-aos="fade-up">
                                <div class="mainimgg">
                                    <figure data-aos="{{ $loop->odd ? 'fade-right' : 'fade-left' }}">
                                        <img
                                            src="{{ optional($service->getMedia('services_image')->first())->getUrl() }}"
                                            class="img-fluid" alt="">
                                    </figure>
                                </div>
                            </div>
                            <div class="col-md-6 pl-5 {{ $loop->odd ? 'mr-auto' : '' }}" data-aos="fade-up">
                                <div class="servcntnt">
                                    <h2>{{ $service->title ?? ''}}</h2>
                                    <p>{!!  $service->description  ?? '' !!}</p>
                                    <a href="{{ route('services') }}" class="themeBtn">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <h3 class="text-center">Services Not Found</h3>
                @endforelse
            @else
                <h3 class="text-center">Services Not Found</h3>
            @endisset
        </div>
    </section>


    <section class="whychooseSec"
             style="background: url('{{($whyChooseUs->getMedia('why_choose_us_image')->first())->getUrl()}}') no-repeat;">
        <div class="container">
            <div class="row">
                <div class="col-md-7" data-aos="fade-up">
                    <h2 class="mainHead text-white">{{ $whyChoose->heading ?? '' }}</h2>
                    {!! $whyChoose->description ?? '' !!}
                    <a href="{{route('contact')}}" class="themeBtn" data-aos="fade-up">Contact Us</a>
                </div>
            </div>
        </div>
    </section>



    <section class="gallerySection">
        <div class="container">
            <h2 class="mainHead text-center mb-1" data-aos="fade-up">{{$pageData['Gallery']['top_title']}}</h2>

            {!!$pageData['Gallery']['description']  !!}

{{--            <div class="row align-items-center">--}}
{{--                <div class="row align-items-center">--}}
{{--                    @foreach ($galleries as $index => $gallery)--}}
{{--                        <div class="col-md-6 mb-3" data-aos="fade-up">--}}
{{--                            <figure class="{{ $index == 1 ? 'secondimg' : ($index == 2 ? 'thirdimg' : '') }}">--}}
{{--                                @foreach ($gallery as $image)--}}
{{--                                    <div class="gallerys gallery--md" data-aos="fade-up">--}}
{{--                                        <a href="{{ $image->getUrl() }}" data-fancybox=""><img--}}
{{--                                                src="{{ $image->getUrl() }}" class="img-fluid" alt=""></a>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            </figure>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--                --}}
{{--            </div>--}}

            <div class="row align-items-center">
                @foreach ($get_galleries as $gallery)
            <div class="col-md-6 mb-3">
                <figure>
                    <div class="gallerys gallery--md" data-aos="fade-up">
                        <a href="{{ $gallery->getMedia('galleries_image')->first()->getUrl() }}" data-fancybox=""> <img src="{{ $gallery->getMedia('galleries_image')->first()->getUrl() }}" class="img-fluid"
                                                                          alt="">
                            <h5 >{{$gallery->title ? : ''}}</h5>
                        </a>
                    </div>
                </figure>
            </div>
                @endforeach
            </div>


            <div class="col-md-12 text-center mt-4" data-aos="fade-up">
                <a href="{{ route('gallery') }}" class="themeBtn">View our Gallery</a>

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

    <section class="weProudlySec">
        <div class="container">
            <h2 class="mainHead text-center mb-4" data-aos="fade-up">We Proudly Use Products From</h2>
            <div class="swiper proudlySlider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim.jpeg')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim.png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim (1).png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim (2).png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim (3).png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim (4).png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/imgpsh_fullsize_anim (5).png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure class="proudlyImg">
                            <img src="{{asset('upload/logo/Screenshot from 2024-02-14 22-50-59.png')}}" alt="image" class="img-fluid">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection