@extends('ved.layout.layout')
@section('content')
    <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">Events</h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="">Resources</a></li>
                                <li> Events</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shape__icon__2">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__1"
                src="{{ asset('ved/assets/img/herobanner/herobanner__1.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__2"
                src="{{ asset('ved/assets/img/herobanner/herobanner__2.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__3"
                src="{{ asset('ved/assets/img/herobanner/herobanner__3.png') }}" alt="photo">
            <img loading="lazy" class=" shape__icon__img shape__icon__img__4"
                src="{{ asset('ved/assets/img/herobanner/herobanner__5.png') }}" alt="photo">
        </div>
    </div>


    <!-- Recent Events -->
    <div class="row" id="upcoming-events">
        <div class="section__title text-center aos-init aos-animate" data-aos="fade-up"
            style="margin-left: -200px; margin-top: 50px;">
            <div class="section__title__button">
                <div class="default__small__button">
                    VED
                </div>
            </div>
            <div class="section__title__heading">
                <h2>Upcoming Events</h2>
            </div>
        </div>
    </div>
    @php
        $upcommingEvents = $events->filter(function($event){
            return \Carbon\Carbon::parse($event->startdate)->isFuture();
        });

        $pastEvents = $events->filter(function($event){
            return \Carbon\Carbon::parse($event->startdate)->isPast();
        });
    @endphp

    <div class="blogarea__2 sp_top_100 sp_bottom_100">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                    @if($upcommingEvents->count() > 0)
                    @foreach ($upcommingEvents as $item)
                            <div class="blog__content__wraper__2" data-aos="fade-up">
                                <div class="blogarae__img__2">
                                    <img loading="lazy" src="{{ asset($item->image) }}" alt="blog">
              
                                </div>
                                <div class="blogarea__text__wraper__2">
                                    <div class="blogarea__heading__2">
                                        <h3><a
                                                href="{{ route('eventdetail', ['id' => $item->event_id]) }}">{!! $item->title !!}</a>
                                        </h3>
                                        <!-- <li>
                                            <i class="icofont-check"></i> Date:
                                            {{ date('Y-M-d', strtotime($item->startdate)) }}
                                        </li> -->
                                    </div>

                                    <div class="blogarea__paragraph">
                                        <p>{!! $item->text !!}</p>
                                    </div>
                                    <div class="blogarea__button__2">
                                        <a href="{{ route('eventdetail', ['id' => $item->event_id]) }}">READ MORE
                                            <i class="icofont-double-right"></i>
                                        </a>

                                    </div>
                                </div>

                            </div>
                    @endforeach
                    @else
                            <h4>There is no any upcoming Events, but stay tuned for upcoming events</h4>
                    @endif
                </div>
                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">

                    <div class="blogsidebar__content__wraper__2" data-aos="fade-up">

                        <h4 class="sidebar__title">Recent events</h4>
                        <ul class="recent__list">
                            @foreach ($events->take(5) as $item)
                                <li>
                                    <div class="recent__img">
                                        <a href="{{route('eventdetail',['id'=>$item->event_id])}}">
                                            <img loading="lazy" src="{{ $item->image }}" alt="{!! $item->title !!}">
                                            <div class="recent__number">
                                            </div>
                                        </a>
                                    </div>

                                    <div class="recent__text">

                                        <div class="recent__date">
                                        </div>

                                        <h6><a href="{{route('eventdetail',['id'=>$item->event_id])}}">{!! $item->title !!} </a></h6>

                                    </div>
                                </li>
                            @endforeach
                        </ul>

                    </div>

                    <div class="blogsidebar__content__wraper__2" data-aos="fade-up">

                        <h4 class="sidebar__title">Photo Gallery</h4>
                        <div class="photo__gallery__img">
                            @foreach ($gallery->limitedChildren as $item)
                                <div class="single__gallery__img">
                                    <img loading="lazy" src="{{ $item->cover_photo }}" alt="{{ $item->title }}">
                                    <div class="gallery__icon">
                                        <a class="popup__img" href="#"> <i class="icofont-eye-alt"></i></a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

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

            <!-- past Events -->
            <div class="row" id="past-events">
                <div class="section__title text-center aos-init aos-animate" data-aos="fade-up"
                    style="margin-left: -200px; margin-top: 50px;">
                    <div class="section__title__button">
                        <div class="default__small__button">
                            VED
                        </div>
                    </div>
                    <div class="section__title__heading">
                        <h2>Past events</h2>
                    </div>
                </div>
            </div>

            <div class="blogarea__2 sp_top_100 sp_bottom_100">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                            @if($pastEvents->count() > 0)
                            @foreach ($events as $item)
                                    <div class="blog__content__wraper__2" data-aos="fade-up">
                                        <div class="blogarae__img__2">
                                            <img loading="lazy" src="{{ $item->image }}" alt="blog">

                                        </div>
                                        <div class="blogarea__text__wraper__2">
                                            <div class="blogarea__heading__2">
                                                <h3><a
                                                        href="{{ route('eventdetail', ['id' => $item->event_id]) }}">{!! $item->title !!}</a>
                                                </h3>
                                            </div>

                                            <div class="blogarea__paragraph">
                                                <!-- <li>
                                                    <i class="icofont-check"></i> Date:
                                                    {{ date('Y-M-d', strtotime($item->startdate)) }}
                                                </li> -->
                                                <li>

                                                    {!! $item->text !!}
                                                </li>
                                            </div>
                                            <div class="blogarea__button__2">
                                                <a href="{{ route('eventdetail', ['id' => $item->event_id]) }}">READ MORE
                                                    <i class="icofont-double-right"></i>
                                                </a>

                                            </div>
                                        </div>

                                    </div>
                            @endforeach
                            @else
                                    <h4>There is no any past Events</h4>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection