@extends('frontend.layouts.app')

@section('page_title')
    Events & News
@endsection

@section('content')

    <!-- Hero Section -->
    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <h1 class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    News & Events
                </h1>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container-xl container-fluid py-5">

        <form method="GET" action="{{ route('newsEvent') }}" class="d-flex justify-content-center align-items-center mb-5 gap-2">
            <div class="input-group search-box">
                <input type="text" name="search" class="form-control" placeholder="Search"
                       value="{{ request('search') }}">
            </div>
            <div>
                <button class="btn btn-danger" type="submit">Apply Filter</button>
            </div>
        </form>

        @if($events->count() > 0)
            <!-- Events Loop -->
            @foreach($events as $index => $event)
                <div class="row align-items-center mb-5">
                    @if($loop->iteration % 2 != 0)
                        <!-- Image Left -->
                        <div class="col-12 col-md-6 course-img">
                            <div class="event-date">
                                <i class="cil-calendar"></i> {{ date('d M, Y', strtotime($event['date'])) }}
                            </div>
                            <img src="{{ $event['image'] }}" alt="Session"
                                 class="img-fluid rounded"
                                 style="height: 100%; width: 100%; max-height: 500px">
                        </div>

                        <div class="col-12 col-md-5 ms-5">
                            <h4 class="session-title">{{ $event['title'] }}</h4>
                            <p class="mt-2">{!! $event['description'] !!}</p>
                                <a href="{{ route('newsEventDetail', $event['slug']) }}" class="btn btn-danger read-more-btn px-4">
                                    Read More
                                </a>
                        </div>
                    @else
                        <!-- Image Right -->
                        <div class="col-12 col-md-5 ms-5">
                            <h4 class="session-title">{{ $event['title'] }}</h4>
                            <p class="mt-2">{!! $event['description'] !!}</p>
                            <a href="{{ route('newsEventDetail', $event['slug']) }}" class="btn btn-danger read-more-btn px-4">
                                Read More
                            </a>
                        </div>

                        <div class="col-12 col-md-6 course-img">
                            <div class="event-date">
                                <i class="cil-calendar"></i> {{ date('d M, Y', strtotime($event['date'])) }}
                            </div>
                            <img src="{{ $event['image'] }}" alt="Session"
                                 class="img-fluid rounded"
                                 style="height: 100%; width: 100%; max-height: 500px">
                        </div>
                    @endif
                </div>
            @endforeach

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-5">
                {{ $events->links('pagination::bootstrap-5') }}
            </div>
        @else
            <!-- Empty State -->
            <div class="text-center py-5">
                <i class="cui-bell text-secondary" style="font-size: 80px;"></i>
                <h4 class="text-muted mt-3">No News or Events Found</h4>
                <p class="text-secondary">Stay tuned — new updates will be posted soon.</p>
            </div>
        @endif

    </div>


@endsection