@extends('website.layout.main')
@section('content')
    <!-- Main Sllider Start -->
    @if (count($banners))

        <section class="main-slider">
            <div class="swiper-container banner-slider">
                <div class="swiper-wrapper">
                    @foreach ($banners as $slider)
                        <div class="swiper-slide">
                            <div class="image-layer" style="background-image: url({{ asset('storage/' . $slider->photo) }});">
                            </div>
                            <div class="image-layer__left-gradient"></div>
                            <div class="container">
                                <div class="main-slider-content">
                                    <div class="main-slider-content__inner">
                                        <div class="sub-title">
                                            <h4>{{ $slider->title }}</h4>
                                        </div>
                                        <div class="big-title">
                                            <h2>
                                                {!! nl2br(e($slider->description ?? '')) !!}
                                            </h2>
                                        </div>
                                        <div class="btn-box">
                                            <a href="{{route('contact-us')}}" class="thm-btn">
                                                Contact Us
                                                <span>
                                                    <i class="icon-arrow-right"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <ul class="banner-slider-nav-four">
                <li class="banner-slider-control-four banner-slider-button-prev" tabindex="0" aria-label="Previous slide">
                    <span><i class="icon-arrow-right-two" aria-hidden="true"></i></span>
                </li>
                <li class="banner-slider-control-four banner-slider-button-next" tabindex="0" aria-label="Next slide">
                    <span><i class="icon-arrow-right-two" aria-hidden="true"></i></span>
                </li>
            </ul>

        </section>
    @else
        <section class="main-slider">
            <div class="swiper-container banner-slider">
                <div class="swiper-wrapper">

                    <!--Start Single Swiper Slide-->
                    <div class="swiper-slide">
                        <div class="image-layer" style="background-image: url(assets/images/slider/slider-v1-img-1.jpg);">
                        </div>
                        <div class="image-layer__left-gradient"></div>
                        <div class="container">
                            <div class="main-slider-content">
                                <div class="main-slider-content__inner">
                                    <div class="sub-title">
                                        <h4>We help companies</h4>
                                    </div>
                                    <div class="big-title">
                                        <h2>
                                            Together, we can<br> make the world<br> better
                                        </h2>
                                    </div>
                                    <div class="btn-box">
                                        <a href="{{route('contact-us')}}" class="thm-btn">
                                            Contact Us
                                            <span>
                                                <i class="icon-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Swiper Slide-->

                    <!--Start Single Swiper Slide-->
                    <div class="swiper-slide">
                        <div class="image-layer" style="background-image: url(assets/images/slider/slider-v1-img-2.jpg);">
                        </div>
                        <div class="image-layer__left-gradient"></div>
                        <div class="container">
                            <div class="main-slider-content">
                                <div class="main-slider-content__inner">
                                    <div class="sub-title">
                                        <h4>We help companies</h4>
                                    </div>
                                    <div class="big-title">
                                        <h2>
                                            Give a little<br> change you <br>a lot
                                        </h2>
                                    </div>
                                    <div class="btn-box">
                                        <a href="{{route('contact-us')}}" class="thm-btn">
                                            Contact Us
                                            <span>
                                                <i class="icon-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Swiper Slide-->

                    <!--Start Single Swiper Slide-->
                    <div class="swiper-slide">
                        <div class="image-layer" style="background-image: url(assets/images/slider/slider-v1-img-3.jpg);">
                        </div>
                        <div class="image-layer__left-gradient"></div>
                        <div class="container">
                            <div class="main-slider-content">
                                <div class="main-slider-content__inner">
                                    <div class="sub-title">
                                        <h4>We help companies</h4>
                                    </div>
                                    <div class="big-title">
                                        <h2>
                                            Every gift counts<br> your Every life<br> matters
                                        </h2>
                                    </div>
                                    <div class="btn-box">
                                        <a href="{{route('contact-us')}}" class="thm-btn">
                                            Contact Us
                                            <span>
                                                <i class="icon-arrow-right"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Swiper Slide-->

                </div>
            </div>

            <ul class="banner-slider-nav-four">
                <li class="banner-slider-control-four banner-slider-button-prev" tabindex="0" aria-label="Previous slide">
                    <span><i class="icon-arrow-right-two" aria-hidden="true"></i></span>
                </li>
                <li class="banner-slider-control-four banner-slider-button-next" tabindex="0" aria-label="Next slide">
                    <span><i class="icon-arrow-right-two" aria-hidden="true"></i></span>
                </li>
            </ul>

        </section>
        @endif
    <!--Main Sllider Start -->


    <!--Start Welcome one-->
    <section class="welcome-one" id="welcome">
        <div class="container">
            <div class="welcome-one__inner">
                <div class="row">
                    <div class="col-12">
                        <div class="welcome-one__content">
                            @if($homePage->hero_title || $homePage->hero_subtitle)
                            <div class="section-title text-left sec-title-animation animation-style2">
                                @if($homePage->hero_subtitle)
                                <div class="section-title__tagline-box">
                                    <span class="section-title__tagline">{{ $homePage->hero_subtitle }}</span>
                                </div>
                                @endif
                                @if($homePage->hero_title)
                                <h2 class="section-title__title title-animation">{{ $homePage->hero_title }}</h2>
                                @endif
                            </div>
                            @endif
                            @if($homePage->legal_recognition_text)
                            <div class="text" style="margin-bottom: 15px;">
                                <p style="font-size: 14px; font-style: italic;">{!! nl2br(e($homePage->legal_recognition_text ?? '')) !!}</p>
                            </div>
                            @endif
                            @if($homePage->intro_text)
                            <div class="text">
                                <p>{!! nl2br(e($homePage->intro_text ?? '')) !!}</p>
                            </div>
                            @endif

                            <ul class="list-item row clearfix">
                                {{-- <li class="col-xl-6 col-lg-12 col-md-6">
                                    <div class="icon">
                                        <i class="icon-help"></i>
                                    </div>
                                    <div class="title">
                                        <h4>1200</h4>
                                        <h3>Volunteers</h3>
                                    </div>
                                </li>
                                <li class="col-xl-6 col-lg-12 col-md-6">
                                    <div class="icon">
                                        <i class="icon-support"></i>
                                    </div>
                                    <div class="title">
                                        <h4>2200</h4>
                                        <h3>Trusted Funds
                                        </h3>
                                    </div>
                                </li> --}}
                            </ul>

                            <div class="btn-box">
                                <a href="{{route('projects')}}" class="thm-btn">{{ __('messages.ourprojects') }}
                                    <span>
                                        <i class="icon-arrow-right"></i>
                                    </span>
                                </a>
                            </div>

                        </div>
                    </div>

                    {{-- Introduction image removed from frontend --}}
                    {{-- <div class="donation-form-one">
                            <div class="inner-title">
                                <h3>Easy Donation</h3>
                            </div>
                            <form id="donation-form-one" name="donation_form-one" class="default-form2" action="#"
                                method="post">
                                <div class="form-group">
                                    <div class="input-box">
                                        <input type="text" name="form_name" id="formName" placeholder="Name...."
                                            required="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-box">
                                        <input type="email" name="form_email" id="formEmail" placeholder="Email...."
                                            required="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="select-box clearfix">
                                        <select class="wide">
                                            <option data-display="Select Sauses">Select Sauses</option>
                                            <option value="Charity For Food">Charity For Food</option>
                                            <option value="Charity For Education">Charity For Education</option>
                                            <option value="Charity For Water">Charity For Water</option>
                                            <option value="Charity For Natural Disaster">Charity For Natural
                                                Disaster</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="dallor1">Amount</label>
                                    <ul>
                                        <li>
                                            <input type="radio" id="dallor1" name="dallor" checked="checked">
                                            <label for="dallor1">
                                                <i></i>
                                                <span>$10</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor2" name="dallor">
                                            <label for="dallor2">
                                                <i></i>
                                                <span>$20</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor3" name="dallor">
                                            <label for="dallor3">
                                                <i></i>
                                                <span>$30</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor4" name="dallor">
                                            <label for="dallor4">
                                                <i></i>
                                                <span>$40</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor5" name="dallor">
                                            <label for="dallor5">
                                                <i></i>
                                                <span>$50</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor6" name="dallor">
                                            <label for="dallor6">
                                                <i></i>
                                                <span>$100</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="dallor7" name="dallor">
                                            <label for="dallor7">
                                                <i></i>
                                                <span>$500</span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>

                                <div class="form-group">
                                    <div class="input-box">
                                        <input type="text" name="form_amount" id="formAmount"
                                            placeholder="Custom Amount...." required="">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="donation1">Payment Method</label>
                                    <ul>
                                        <li>
                                            <input type="radio" id="donation1" name="donation" checked="checked">
                                            <label for="donation1">
                                                <i></i>
                                                <span>Test Donation</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="donation2" name="donation">
                                            <label for="donation2">
                                                <i></i>
                                                <span>Offline Donation</span>
                                            </label>
                                        </li>
                                        <li>
                                            <input type="radio" id="donation3" name="donation">
                                            <label for="donation3">
                                                <i></i>
                                                <span>Credit Card</span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                                <div class="btn-box">
                                    <button type="submit" class="thm-btn">
                                        Donate Now
                                        <span><i class="icon-arrow-right"></i></span>
                                    </button>
                                </div>

                            </form>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Welcome one-->

    <!--About One (Vision / Mission / Values) Start -->
    <section class="about-One about-One--home">
        <div class="container">
            <div class="row">
                <div class="col-xl-6">
                    <div class="about-One__left wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                        <div class="about-One__img-box">
                            <div class="about-One__img">
                                <img src="{{ $aboutData['section_images']['about_one_img_1'] ?? 'https://placehold.co/370x380' }}" alt="">
                            </div>
                            <div class="about-One__img-2">
                                <img src="{{ $aboutData['section_images']['about_one_img_2'] ?? 'https://placehold.co/370x380' }}" alt="">
                            </div>
                            <div class="about-One__provide-box wow zoomIn animated" data-wow-delay="500ms" data-wow-duration="2500ms">
                                <div class="about-One__provide-icon">
                                    <span class="icon-pet-care"></span>
                                </div>
                                <div class="about-One__provide-content">
                                    <div class="about-One__provide-count count-box">
                                        <h3 class="count-text" data-stop="10" data-speed="1500">00</h3>
                                        <span>+</span>
                                    </div>
                                    <p class="about-One__provide-count-text">{{ __('messages.servicewe') }}</p>
                                </div>
                            </div>
                            <div class="about-One__shape-1"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="about-One__right wow fadeInRight" data-wow-delay="300ms">
                        <div class="section-title text-left sec-title-animation animation-style2">
                            <div class="section-title__tagline-box">
                                <span class="section-title__tagline">{{ __('messages.aboutus') }}</span>
                            </div>
                            <h2 class="section-title__title title-animation">{{ __('messages.unitefor') }}
                                <br> {{ __('messages.changeworld') }}
                            </h2>
                        </div>
                        <div class="about-One__vission-mission">
                            <div class="about-One__tab-box tabs-box">
                                <ul class="tab-buttons clearfix list-unstyled">
                                    <li data-tab="#home-vission" class="tab-btn active-btn"><span>{{ __('messages.ourvision') }}</span></li>
                                    <li data-tab="#home-mission" class="tab-btn"><span>{{ __('messages.ourmission') }}</span></li>
                                    <li data-tab="#home-goal" class="tab-btn"><span>{{ __('messages.ourvalues') }}</span></li>
                                </ul>
                                <div class="tabs-content">
                                    <div class="tab active-tab" id="home-vission">
                                        <div class="tabs-content__inner">
                                            {!! nl2br(e($aboutData['about_intro']['vision'] ?? '')) !!}
                                        </div>
                                    </div>
                                    <div class="tab" id="home-mission">
                                        <div class="tabs-content__inner">
                                            {!! nl2br(e($aboutData['about_intro']['mission'] ?? '')) !!}
                                        </div>
                                    </div>
                                    <div class="tab" id="home-goal">
                                        <div class="tabs-content__inner">
                                            {!! nl2br(e($aboutData['about_intro']['value'] ?? '')) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--About One End -->

    @php
        $keyAreas = is_array($homePage->key_areas) ? $homePage->key_areas : [];
    @endphp
    @if(!empty($keyAreas))
    <!--Key Areas Start -->
    <section class="blog-one">
        <div class="container">
            <div class="section-title text-center sec-title-animation animation-style1">
                <div class="section-title__tagline-box">
                    <span class="section-title__tagline">Areas of intervention</span>
                </div>
                <h2 class="section-title__title title-animation">Key areas of intervention</h2>
            </div>
            <div class="row">
                @foreach($keyAreas as $key => $area)
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInLeft animated" data-wow-delay="{{100 + ($key * 100)}}ms">
                    <div class="counter-one__single counter-one__single-1">
                        <div class="counter-one__single-shape-1">
                            <img src="assets/images/shapes/counter-one-single-shape-1.png" alt="">
                        </div>
                        <div class="counter-one__count-box-2">
                            <p class="counter-one__text-2">{{ $area }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--Key Areas End -->
    @endif

    @if($featuredProjects->isNotEmpty())
    <!--Featured Projects Start -->
    <section class="events-page events-page--home">
        <div class="container">
            <div class="country-one__top-title-box sec-title-animation animation-style1">
                <h1 class="country-one__top-title title-animation">{{ __('messages.featured') }} <span>{{ __('messages.projects') }}</span></h1>
            </div>
            <div class="row">
                @foreach($featuredProjects as $project)
                <div class="col-xl-4 col-lg-4 wow fadeInLeft" data-wow-delay="100ms">
                    <div class="event-one__single">
                        <div class="event-one__img-box">
                            <div class="event-one__img">
                                <img src="@if ($project->featured_image) {{ asset('storage/' . $project->featured_image) }} @elseif ($project->cover_photo) {{ asset('storage/' . $project->cover_photo) }} @else {{ asset('assets/images/placeholder.webp') }} @endif" alt="{{ $project->title }}">
                            </div>
                            @if($project->partner)
                            <div class="event-one__date">
                                <p><span class="icon-handshake"></span>{{ $project->partner }}</p>
                            </div>
                            @endif
                        </div>
                        <div class="event-one__content">
                            <h4 class="event-one__title"><a href="{{ route('projects.details', $project->slug) }}">{{ $project->title }}</a></h4>
                            @if($project->introduction)
                            <p class="event-one__text">{!! Str::limit($project->introduction, 80) !!}</p>
                            @endif
                            @if($project->phase)
                            <p class="event-one__location"><span class="icon-pin"></span>{{ $project->phase }}</p>
                            @endif
                            <div class="event-one__btn-box">
                                <a href="{{ route('projects.details', $project->slug) }}" class="event-one__btn thm-btn">{{ __('messages.learnmore') }} <span><i class="icon-arrow-right"></i></span></a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--Featured Projects End -->
    @endif

    <!--Donate One Start -->
   {{-- <section class="donate-one pdt">
         <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                    <div class="donate-one__single">
                        <div class="donate-one__single-bg"
                            style="background-image: url(assets/images/backgrounds/donate-one-single-bg.jpg);">
                        </div>
                        <h3 class="donate-one__title"><a href="#">{{__('messages.helpthem')}}</a>
                        </h3>
                        <p class="donate-one__text"> {{__('messages.believefirst')}} 
                            <br> {{__('messages.needto')}}
                            <br> {{__('messages.withouthope')}}
                        </p>
                        {{-- <div class="donate-one__btn-box">
                            <a href="{{route('home')}}#donate" class="donate-one__btn thm-btn">Donate Now<span><i
                                        class="icon-arrow-right"></i></span></a>
                        </div> --}
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 wow slideInRight" data-wow-delay="100ms" data-wow-duration="2500ms">
                    <div class="donate-one__single donate-one__single-2">
                        <div class="donate-one__single-bg"
                            style="background-image: url(assets/images/backgrounds/donate-one-single-bg-two.jpg);">
                        </div>
                        <h3 class="donate-one__title"><a href="{{route('home')}}"> {{__('messages.serveasvol')}} </a></h3>
                                <p class="donate-one__text"> {{__('messages.makingtheworld')}} <br>  {{__('messages.showthatyou')}}
                                </p>
                        <div class="donate-one__btn-box">
                            <a href="{{route('volunteer')}}" class="donate-one__btn thm-btn"> {{__('messages.joinnow')}} <span><i
                                        class="icon-arrow-right"></i></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </section>--}}
    <!--Donate One End -->

    


    <!--Country One Start -->
    <section class="country-one">
        <div class="container">
            <div class="country-one__top-title-box sec-title-animation animation-style1">
                <h1 class="country-one__top-title title-animation"> {{__('messages.our')}}  <span> {{__('messages.partners')}} </span></h1>
            </div>
            <div class="row">
                <!--Country One Single Start width: 80px; height: 80px; -->
                @forelse ($partners as $partner)
                <div class="col-xl-5 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                    <div class="country-one__single">
                        <div class="country-one__img" style=" overflow: hidden;">
                            <img src="@if ($partner->photo ==null) {{ asset('assets/images/null.png')}} @else {{ asset('storage/' . $partner->photo) }}@endif" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <h4 class="country-one__title"><a href="#">{{$partner->name}}</a></h4>
                    </div>
                </div>
                <!--Country One Single End-->
                @empty
                <div class="col-xl-3"></div>
                @endforelse
            </div>
        </div>
    </section>
    <!--Country One End -->

    <!--Stat Project Style1-->
    {{-- <section class="project-style1">
        <div class="container">
            <div class="project-style1__inner">
                <div class="project-style1__carousel owl-theme owl-carousel">
                    @foreach ($album as $image)
                        <!--Start Single Project Style1-->
                        <div class="item">
                            <div class="single-project-style1">
                                <div class="img-box">
                                    <div class="gallery">
                                        @foreach (json_decode($image->photos) as $key => $photo)
                                            <a class="lightbox-image" data-fancybox="gallery"
                                                href="{{ asset('storage/' . $photo) }}">
                                                <img src="{{ asset('storage/' . $photo) }}" alt="Image">
                                                <div class="overlay-icon">
                                                    <i class="fa fa fa-expand"></i>
                                                </div>
                                                {{-- @if (isset(json_decode($image->captions)[$key]))
                                                    <div class="caption">
                                                        {{ json_decode($image->captions)[$key] }}
                                                    </div>
                                                @endif 
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--End Single Project Style1-->
                    @endforeach
                </div>
            </div>
        </div>
    </section> --}}
    <!--End Project Style1-->


    <!--CTA One Start -->
     {{-- <section class="cta-one">
        <div class="cta-one__bg" style="background-image: url(assets/images/backgrounds/cta-one-bg.jpg);"></div>
        <div class="container">
            <div class="cta-one__inner">
                <div class="cta-one__title-box sec-title-animation animation-style1">
                    <h2 class="cta-one__title title-animation"> {{__('messages.lastingchange')}} <br> {{__('messages.communities')}}
                    </h2>
                </div>
                <div class="cta-one__btn-box">
                    {{-- <a href="{{route('home')}}#donate" class="cta-one__btn-1 thm-btn">Donate Now<span><i
                                class="icon-arrow-right"></i></span></a> --}
                    <a href="{{route('volunteer')}}" class="cta-one__btn-2 thm-btn">{{__('messages.becomevolunteer')}}<span><i
                                class="icon-arrow-right"></i></span></a>
                </div>
            </div>
        </div>
    </section>  --}}
    <!--CTA One End -->
@endsection