@extends('layout.app')
@section('title') Home
@endsection
@section('content')
{{--    <style>--}}
{{--        .themeBtn {--}}
{{--            background: linear-gradient(rgb(237, 237, 237) 0%, rgb(139, 137, 138) 100%);--}}
{{--            font-size: 1.125rem;--}}
{{--            color: rgb(12, 12, 12);--}}
{{--            text-transform: uppercase;--}}
{{--            font-weight: 400;--}}
{{--            display: inline-block;--}}
{{--            padding: 0.7em 1.36em;--}}
{{--            border-radius: 50px;--}}
{{--            line-height: normal;--}}
{{--            text-transform: capitalize;--}}
{{--            font-family: 'Poppins', sans-serif;--}}
{{--        }--}}
{{--        a, button {--}}
{{--            text-decoration: none !important;--}}
{{--            -webkit-transition: all 0.5s ease;--}}
{{--            transition: all 0.5s ease;--}}
{{--            font-family: 'Raleway', sans-serif;--}}
{{--        }--}}
{{--    </style>--}}
    @php
        if (!empty($get_single_instagram_banner_title->content)) {
               $instagramdecodedData = json_decode($get_single_instagram_banner_title->content, true);
           }
            if (!empty($get_single_gallery_banner_title->content)) {
               $gallerydecodedData = json_decode($get_single_gallery_banner_title->content, true);
           }

            if (!empty($get_single_event_banner_title->content)) {
               $eventdecodedData = json_decode($get_single_event_banner_title->content, true);
           }
            if (!empty($get_single_class_banner_title->content)) {
               $classdecodedData = json_decode($get_single_class_banner_title->content, true);
               }
            if (!empty($get_single_reviews_banner_title->content)) {
               $reviewsdecodedData = json_decode($get_single_reviews_banner_title->content, true);
               }
             if (!empty($get_single_home_banner_title->content)) {
               $homedecodedData = json_decode($get_single_home_banner_title->content, true);
               }


    @endphp

    <style>
        header .navbar-brand{
            display: none;
        }
    </style>

    <!-- END: Header -->
    <div class="heroSectionWrapper mb-5">
        <div class="container-fluid px-lg-5">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="hero-main">
                        <img src="{{ asset('images/footerlogo.png') }}" class="mb-4 hero-main__logo" alt="image" style="width: 100%;">

                        <p class="text-light">{{$homedecodedData['banner_description'] ?? ''}}</p>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="heroSection">
                        <div class="main-slider p-0" id="mainSlider">

                            <div class="swiper-container homeSlider">
                                @if($homeSlider)
                                <div class="swiper-wrapper">
                                    @php
                                        $get_decode = json_decode($homeSlider->images);
                                    @endphp
                                    @foreach($get_decode as $index => $all_images)
                                        <div class="swiper-slide">
                                            <div class="slide-inner bg-image" data-background="{{ asset('upload/sliders/'.$all_images) }}"></div>
                                            <div class="slider-overlay">
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-pagination"></div>
                                @else
                                    <h3 class="text-center text-white mt-5">
                                        Images Not Found
                                    </h3>

                                @endif
                            </div>



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


    <section class="ctaSection shadow" style="background:url('{{ $homedecodedData['watch_shows_banner_image'] ? asset('upload/cms_images/' . $homedecodedData['watch_shows_banner_image']) : ''  }}') no-repeat center/cover">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="ctaContent" data-aos="fade-up">
                        <h2 data-aos="fade-up" class="heading-spacing">{{ $homedecodedData['watch_shows_heading'] ?? 'Watch A Show' }}</h2>
                        <a href="{{ route('front.event') }}" class="themeBtn" data-aos="fade-up">Shows</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CTA Section -->
    <section class="ctaSection shadow" style="background:url('{{ $homedecodedData['take_a_class_banner_image'] ? asset('upload/cms_images/' . $homedecodedData['take_a_class_banner_image']) : '' }}') no-repeat top center/cover">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="ctaContent" data-aos="fade-up">
                        <h2 data-aos="fade-up">Take A class</h2>
                        <a href="{{route('front.classes')}}" class="themeBtn" data-aos="fade-up">Classes</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- !@CTA Section -->

    <!-- Customer Section -->
    <section class="customerSection">
        <div class="container">
            <div class="mainHeading mb-4" data-aos="fade-up">
{{--                <span data-aos="fade-up">{{$reviewsdecodedData['top_title'] ?? ''}}</span>--}}
                <h2 data-aos="fade-up">{{$reviewsdecodedData['section_title'] ?? ''}}</h2>
            </div>
            <div class="swiper customerSlider" data-aos="fade-up">

                <div class="swiper-wrapper">
                    @forelse($reviews as $review)
                        <div class="swiper-slide">
                            <div class="customerWrap">
                                <div class="customerBox">
                                    <span>"</span>
                                    <ul>
                                        @for($i = 1; $i <= $review->star_rated; $i++)
                                            <li><i class="fas fa-star"></i></li>
                                        @endfor

                                        @for($j = $review->star_rated + 1; $j <= 5; $j++)
                                            <li><i class="fas fa-star text-muted"></i></li>
                                        @endfor
                                    </ul>
                                    <p>{!! $review->description ?: '' !!}</p>
                                    <img src="{{ asset('images/customerPath.png') }}" class="img-fluid customerPath"
                                         alt="">
                                </div>
                                <div class="customerUser">
                                    <img
                                        src="{{ $review->image ? asset('upload/cms_images/'.$review->image) : asset('admin/dist/img/placeholder.png') }}"
                                        class="img-fluid" alt="">
                                    <h3>{{ $review->user_name ? : '' }}</h3>
                                </div>
                            </div>
                        </div>
                    @empty
                        <h1 class="text-center">Reviews Not Found</h1>
                    @endforelse
                </div>

            </div>
        </div>
    </section>
    <!-- Customer Section -->

    <section class="gallerySection">
        <div class="container-fluid">
            <div class="mainHeading mb-4" data-aos="fade-up">
                <span data-aos="fade-up">{{$gallerydecodedData['top_title'] ?? ''}}</span>
                <h2 data-aos="fade-up">{{$gallerydecodedData['top_title'] ?? ''}}</h2>
            </div>
            <div class="row no-gutters">
                @forelse($galleries as $gallery)
                    <div class="col-lg-4 col-6">
                        <a href="{{$gallery->image ? asset('upload/cms_images/'.$gallery->image ) : asset('admin/dist/img/placeholder.png')}}"
                           data-fancybox="" class="gallery__img w-100">
                            <img
                                src="{{$gallery->image ? asset('upload/cms_images/'.$gallery->image ) : asset('admin/dist/img/placeholder.png')}}"
                                alt="img" class="img-fluid w-100 h-100">
                        </a>
                    </div>
                @empty
                    <h4 class="text-center">Gallery Not Found</h4>
                @endforelse
            </div>
            <a href="{{route('front.gallery')}}" class="themeBtn mx-auto d-block mt-3">View All</a>
        </div>
    </section>


    <!-- Insta Section -->
    <section class="instaSection">
        <div class="container">
            <div class="mainHeading mb-4" data-aos="fade-up">
                <span data-aos="fade-up">{{$instagramdecodedData['top_title']}}</span>
                <h2 data-aos="fade-up">{{$instagramdecodedData['section_title']}}</h2>
            </div>
            <div class="row justify-content-center">

                <a href="{{$setting->instagram ? : ''}}" class="themeBtn mx-auto d-block mt-3">Click Here</a>
{{--                @forelse($instagrams as $instagram)--}}

{{--                    <div class="col-lg-5 col-md-6 col-6" data-aos="fade-up">--}}
{{--                        <div class="instaWrap">--}}
{{--                            <img--}}
{{--                                src="{{$instagram->image ? asset('upload/cms_images/'.$instagram->image ) : asset('admin/dist/img/placeholder.png')}}"--}}
{{--                                alt="img" class="img-fluid">--}}
{{--                            <div class="instaOverlay">--}}
{{--                                <i class="fab fa-instagram"></i>--}}
{{--                                <div class="mainHeading">--}}
{{--                                    <h2>{{$instagram->title ?? ''}}</h2>--}}
{{--                                    <span>{{$instagram->second_title ?? ''}}</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @empty--}}
{{--                    <h4 class="text-center">Instagram Not Found</h4>--}}
{{--                @endforelse--}}
            </div>
        </div>
    </section>
    <!-- Insta Section -->
@endsection