@include('htmlpage.frontent.layout.app')
<!-- Most Popular Groups Section Start -->
<section class="section bg-lighter pt--70 pb--70">
    <div class="container">
        <div class="section--title pb--20">
            <div class="title">
                <h2 class="h2">Upcoming Events</h2>
            </div>
        </div>
        <div class="box--items owl-carousel" data-owl-items="4" data-owl-margin="30" data-owl-autoplay="false"
            data-owl-responsive='{"0": {"items": "1"}, "768": {"items": "2"}, "992": {"items": "4"}}'>
            <!-- Box Item Start -->
            @foreach ($listeventupcoming->reverse() as $listupcoming)
                <div class="box--item box--item1  text-center">
                    <a href="#" class="img" data-overlay="0.1">
                        <img src="{{ asset('storage/' . $listupcoming->image_path) }}" alt="">
                    </a>

                    <div class="info">
                        <div class="icon fs--18 text-lightest bg-primary">
                            <i class="{{ $listupcoming->icon }}"></i>
                        </div>

                        <div class="title">
                            <h2 class="h6">
                                <a href="{{ route('event-details', ['url' => $listupcoming->url]) }}">
                                    {{ $listupcoming['event_title'] }}
                                </a>
                            </h2>
                        </div>

                        <div class="meta">
                            <p><i class="fa mr--8 fa fa-calendar"></i>
                                {{ \Carbon\Carbon::parse($listupcoming['event_date'])->format('M d, Y') }}

                            </p>
                            <p><i class="fa mr--8 fa fa-map-marker"></i>{{ $listupcoming['venue'] }}</p>
                        </div>

                        <div class="desc text-darker">
                            <p>{{ implode(' ', array_slice(explode(' ', html_entity_decode(strip_tags($listupcoming['description']))), 0, 10)) }}
                            </p>

                        </div>

                        <div class="action">
                            <a href="{{ route('event-details', ['url' => $listupcoming->url]) }}">
                                Event Details<i class="fa ml--10 fa-caret-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
            <!-- Box Item End -->

        </div>

        <!-- Box Items End -->

        <!-- Box Controls Start -->
        <div class="box--controls text-center">
            <a href="#" class="btn fs--16 btn-default" data-action="prev">
                <i class="fa fa-caret-left"></i>
            </a>

            <a href="#" class="btn fs--16 btn-default" data-action="next">
                <i class="fa fa-caret-right"></i>
            </a>
        </div>
        <!-- Box Controls End -->



</section>
<!-- Most Popular Groups Section End -->
<!-- Past Events -->
<section class="section bg-lighter pt--70 pb--70 background-image-class">
    <div class="container">
        <div class="row pastfilter">
            <div class="col-md-5">
                <div class="section--title pb--20">
                    <div class="title">
                        <h2 class="h2">Past Events</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <form action="{{ route('event') }}" method="GET">
                    <input type="search" class="form-search form-control flex-grow-1" placeholder="Search by keywords"
                        name="keywords" value="{{ request('keywords') }}">
                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                </form>
            </div>
            <div class="col-md-3">
                <form action="{{ route('event') }}" method="GET">
                    <select class="form-selects flex-grow-1 mr-2" id="yearFilter" name="year">
                        <option value="">Select Year</option>
                        @for ($year = date('Y'); $year >= 2009; $year--)
                            <option value="{{ $year }}" {{ request('year') == $year ? 'selected' : '' }}>
                                {{ $year }}
                            </option>
                        @endfor
                    </select>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-filter"
                            aria-hidden="true"></i></button>
                </form>
            </div>
        </div>
        <div class="row">
            <!-- Box Item Start -->
            @forelse ($listeventpast as $listpast)
                <div class="col-md-3">
                    <div class="box--item box--item1 text-center">
                        <a href="#" class="img" data-overlay="0.1">
                            <img src="{{ asset('storage/' . $listpast->image_path) }}" alt="">
                        </a>
                        <div class="info">
                            <div class="title">
                                <h2 class="h6"><a
                                        href="{{ route('event-details', ['url' => $listpast->url]) }}">{{ $listpast->event_title }}"</a>
                                </h2>
                            </div>
                            <div class="meta">
                                <p><i
                                        class="fa mr--8 fa fa-calendar"></i>{{ \Carbon\Carbon::parse($listpast->event_date)->format('M d, Y') }}
                                </p>
                                <p><i class="fa mr--8 fa fa-map-marker"></i>{{ $listpast->venue }}</p>
                            </div>
                            <div class="action">
                                <a href="{{ route('event-details', ['url' => $listpast->url]) }}">Event
                                    Details<i class="fa ml--10 fa-caret-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-md-12">
                    <p>No past events found.</p>
                </div>
            @endforelse
            <!-- Box Item End -->
        </div>
        <!-- Pagination -->
        <div class="pagination-wrapper">
            {{ $listeventpast->links() }}
        </div>
    </div>
</section>

<!-- Past Events -->
<section class="latestevent">
    <div class="container">
        <div class="headertext">Upcoming Event</div>

        <div>
            @if ($latestevent)
                <marquee onmouseover="this.stop();" onmouseout="this.start();" direction="left" behavior="scroll"
                    scrollamount="7">
                    {{ $latestevent['event_title'] }}
                    |&nbsp;&nbsp;&nbsp;
                    To be in {{ $latestevent['venue'] }}​ |&nbsp;&nbsp;&nbsp;
                    On {{ $latestevent['event_date'] }} |&nbsp;&nbsp;&nbsp;
                    <a href="#">View More Details</a>
                </marquee>
            @else
                <!-- Handle case when $listad is null or empty -->
                <p>No advertisements found.</p>
            @endif
        </div>

    </div>
</section>
@include('htmlpage.frontent.layout.footer')