@extends('frontend.layouts.app')

@section('page_title')
IGSS News & Events | Ignite School System Faisalabad
@endsection
@section('description')
Stay updated with IGSS News & Events, including school IGSS activities, announcements, results, and achievements.
@endsection
@section('keywords')
Ignite School System Updates,Ignite School System Faisalabad news,IGSS academic and co-curricular news
@endsection

@section('content')
    <!-- CSS -->
    <style>
        html {
            scroll-behavior: smooth;
        }
        .event-card {
            display: flex;
            flex-wrap: wrap;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
            /*cursor: pointer;*/
        }

        .event-card:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            transform: translateY(-3px);
        }

        .event-card .course-img {
            padding: 0;
        }

        .event-card h4,
        .event-card p,
        .event-card .btn {
            color: inherit; /* Keep text readable inside clickable card */
        }

        .event-card .btn {
            pointer-events: none; /* Prevent button from blocking the link */
        }
        .session-title {
            color: #003366 !important;
            font-weight: bold;
        }
        .text-justify{
            text-align: justify;
        }
    </style>
    <!-- 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);">
                <p 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
                </p>
            </div>
        </div>
    </div>
    <!-- News & Events Section -->
    <section class="py-5" style="background-color: #f8f9fa;">
        <div class="container">
            <h1 class="text-center mb-4 fw-bold" style="color:#dc3545;">
                News & Events | Ignite School System (IGSS)
            </h1>
            <p class="text-justify text-muted mb-3" style="font-size: 1.1rem;">
                Stay updated with the latest news and events at Ignite School System (IGSS). Find updates on school activities, announcements, competitions, workshops, and celebrations.
            </p>
            <p class="text-justify text-muted" style="font-size: 1.1rem;">
                Our News & Events section keeps parents and students informed about important highlights, including annual functions, award ceremonies, sports events, and special programs. Explore how our students learn, grow, and shine at IGSS.
            </p>
        </div>
    </section>
    <!-- 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">--}}
{{--                            <h2 class="session-title">{{ $event['title'] }}</h2>--}}
{{--                            <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--}}

        @if($events->count() > 0)
            <!-- Events Loop -->
            @foreach($events as $index => $event)
                <!-- Clickable Card Wrapper -->
                <div class="event-card d-flex flex-wrap align-items-center mb-5 text-decoration-none" id="{{ $event['slug'] }}">
                    @if($loop->iteration % 2 != 0)
                        <!-- Image Left -->
                        <div class="col-12 col-md-6 course-img position-relative">
                            <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-6" style="padding: 20px;text-align: justify;">
                            <h2 class="session-title">{{ $event['title'] }}</h2>
                            <p class="mt-2 text-dark">{!! $event['description'] !!}</p>
                        </div>
                    @else
                        <!-- Image Right -->
                        <div class="col-12 col-md-6" style="padding: 20px;text-align: justify;">
                            <h2 class="session-title">{{ $event['title'] }}</h2>
                            <p class="mt-2 text-dark">{!! $event['description'] !!}</p>
                        </div>

                        <div class="col-12 col-md-6 course-img position-relative">
                            <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>
                <h2 class="text-muted mt-3">No News or Events Found</h2>
                <p class="text-secondary">Stay tuned — new updates will be posted soon.</p>
            </div>
        @endif

    </div>


@endsection