@extends('front.layout.app')
@section('title', 'Home')
@section('content')

    <div class="anloader">
        <video muted autoplay loop preload src="front/images/loader.mp4">
            <source>
        </video>
    </div>

    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse ($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $slider->sliderImage('slider_image') }}">
                            <div class="container">
                                <div class="row justify-content-end">
                                    <div class="col-lg-6">
                                        <div class="slideOne">
                                            <h1 class="mainHeading text-white">{{ $slider->title ?? '' }} </h1>
                                            <p>{{ $slider->description ?? '' }}</p>
                                            <a href="{{ route('front.donation') }}"
                                                class="themeBtn">{{ $slider->btn_text ?? '' }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                @empty
                    <p>no data found</p>
                @endforelse
            </div>
        </div>
    </section>

    <section class="aboutSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="aboutContent">
                        <span>{{ $data->content['about_sto_sec_title'] ?? '' }} About Us</span>
                        <h2 class="mainHeading">{{ $data->content['about_sto_sec_heading'] ?? '' }}</h2>
                        <p data-aos="fade-up">{{ $data->content['about_sto_sec_description1'] ?? '' }} </p>
                        <p data-aos="fade-up">{{ $data->content['about_sto_sec_description2'] ?? '' }}</p>
                        <div data-aos="fade-up">
                            <a href="{{ route('front.about') }}"
                                class="themeBtn">{{ $data->content['about_sto_sec_btn1'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <figure class="aboutImg reveal">
                        <img src="{{ $data->cmsImages('about') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <div class="main">

        <section class="helpSec">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="helpWraps">
                            <figure>
                                <img src="{{ $data->cmsImages('reach') ?? '' }}" class="img-fluid" alt="">
                            </figure>
                            <div class="helpBox">
                                <h2>{{ $data->content['rec_sec_head1'] ?? '' }}<br> {{ $data->content['rec_sec_head2'] }}
                                </h2>
                                <p>{{ $data->content['rec_sec_des1'] ?? '' }}</p>
                                <a href="{{ route('front.donation') }}"
                                    class="themeBtn">{{ $data->content['rec_sec_btn'] ?? '' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="podcastSec">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="mainHeading m-0">{{ $data->content['pod_sec_head1'] ?? '' }}
                            <br>{{ $data->content['pod_sec_head2'] ?? '' }}
                        </h2>
                    </div>
                    <div class="col-md-6">
                        <p class="podcastPara" data-aos="fade-up">{{ $data->content['pod_sec_des'] ?? '' }}</p>
                    </div>
                </div>
                <div class="swiper podcastSlider">
                    <div class="swiper-wrapper">
                        @forelse ($podcasts as $podcast)
                            <div class="swiper-slide">
                                <div class="podcastWrap">
                                    <img src="{{ $podcast->podcastImage('podcast_image') }}" class="img-fluid"
                                        alt="">
                                    <div class="podcastContent">
                                        <h3>{{ $podcast->title }}</h3>
                                        <a href="{{ route('front.podcast') }}" class="themeBtn">Listen Now</a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p>no data found</p>
                        @endforelse
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section>

    </div>

    <section class="videoSec">
        <div class="videoWra">
            <img src="{{ $data->cmsImages('video') }}" class="img-fluid" alt="">
            <div class="videoBtn">
                <label for="checkbox">
                    <div class="play_pause_icon play"></div>
                </label>
                <input type="checkbox" id='checkbox'>
            </div>
        </div>
    </section>

    <div class="main mainTwo">

        <section class="calenderSec">
            <div class="container">
                <h2 class="mainHeading text-center mb-5">{{ $data->content['cal_sec_head'] }} </h2>
                <div class="row justify-content-center">
                    <div class="col-lg-10 col-md-12" data-aos="fade-up">
                        <div id="evoCalendar"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="donateSec">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <div class="donateImages" data-aos="fade-up">
                            <img src="{{ $data->cmsImages('emp1') ?? '' }} " class="img-fluid" alt="">
                            <img src="{{ $data->cmsImages('emp2') ?? '' }}" class="img-fluid" alt="">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="donateContent">
                            <h2 class="mainHeading">{{ $data->content['emb_sec_head1'] ?? '' }} <br>
                                {{ $data->content['emb_sec_head2'] ?? '' }}<br>{{ $data->content['emb_sec_head3'] ?? '' }}
                            </h2>
                            <p data-aos="fade-up">{{ $data->content['emb_sec_des'] ?? '' }}
                            </p>
                            <div data-aos="fade-up">
                                <a href="{{ route('front.donation') }}"
                                    class="themeBtn">{{ $data->content['emb_sec_btn'] ?? '' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <section class="aboutSec merchandiseSec">
        <div class="container">
            <h2 class="mainHeading text-center">{{ $data->content['mer_sec_head'] ?? '' }}</h2>
            <div class="swiper merchandiseSlider" data-aos="fade-up">
                <div class="swiper-wrapper">
                    @forelse ($products as $product)
                        <a href="{{ route('front.product.detail', ['id' => $product->id]) }}">
                            <div class="swiper-slide">
                                <div class="merchandiseWrap">
                                    <figure>
                                        <img src="{{ $product->productImage('product_image') }}" class="img-fluid"
                                            alt="">
                                    </figure>
                                    <div class="merchandiseContent">
                                        <h3>{{ $product->name }}</h3>
                                        <a href="#">{{ $product->price }}$</a>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <p>no data found</p>
                    @endforelse
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>

    <section class="aboutSec newsSec">
        <div class="container">
            <div class="newsHeading">
                <h2 class="mainHeading m-0">{{ $data->content['blog_sec_head'] ?? '' }}</h2>
                <a href="#" class="themeBtn">{{ $data->content['blog_sec_btn'] ?? '' }}</a>
            </div>
            <div class="row">
                @forelse ($blogs as $blog)
                    <div class="col-md-4">
                        <div class="newsWrap" data-aos="fade-up">
                            <figure>
                                <img src="{{ $blog->blogImage('blog_image') }}" class="img-fluid" alt="">
                                <div class="newsDate">
                                    <h4>{{ \Carbon\Carbon::parse('2024-11-01 18:49:42')->format('d') }}
                                        <span>{{ substr(\Carbon\Carbon::parse('2024-11-01 18:49:42')->format('F'), 0, 3) }}</span>
                                    </h4>
                                </div>
                            </figure>
                            <div class="newsContent">
                                <h5>{{ $blog->heading ?? '' }}
                                </h5>
                                <p>{!! implode(' ', array_slice(explode(' ', $blog->description), 0, 30)) !!}...</p>
                                <small></small>
                                <div class="newsUser">
                                    <figure>
                                        <img src="{{ $blog->user->userImage('admin_profile') ?? 'front/images/img1.webp' }}"
                                            class="img-fluid" alt="">
                                        <h6>{{ $blog->user->first_name ?? '' }}
                                            <span>{{ $blog->user->last_name ?? '' }}</span>
                                        </h6>
                                    </figure>
                                    <a href="{{ route('front.blog.detail',$blog->id) }}" class="themeBtn">read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>no data found</p>
                @endforelse
            </div>
        </div>
    </section>



@endsection