@extends('frontend.layouts.app')

@section('page_title')
IGSS Co-Curricular Activities | Ignite School System
@endsection
@section('description')
Explore IGSS Co-Curricular Activities including sports, competitions, debates, and creative programs. IGSS Faisalabad builds skills and confidence.
@endsection
@section('keywords')
IGSS Co-Curricular Activities,IGSS sports and competitions,Student engagement at IGSS
@endsection

@section('content')

    <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">
                    Co-Curricular Activity
                </h1>
            </div>
        </div>
    </div>

    <!-- Activities -->
    <section class="py-5">
        <div class="container">

            @if($events->count() > 0)
                @foreach($events as $index => $event)
                    <div class="row align-items-center mb-5 activity-card"
                         data-aos="fade-up"
                         data-aos-delay="{{ 100 * ($loop->iteration) }}">

                        {{-- Image Left / Right alternate --}}
                        @if($loop->iteration % 2 != 0)
                            <!-- Image Left -->
                            <div class="col-md-6">
                                <img src="{{ $event['cover_image'] }}" alt="Activity Image"
                                     class="img-fluid rounded activity-img w-100 h-100"
                                     data-aos="zoom-in" data-aos-delay="200">
                            </div>
                            <div class="col-md-6 ps-md-5 mt-3 mt-md-0 text-md-start text-center"
                                 data-aos="fade-left" data-aos-delay="300">
                                <img src="{{ $event['icon'] }}" alt="Icon" class="activity-icon">
                                <h5 class="activity-title">{{ $event['title'] }}</h5>
                                {!! $event['description'] !!}
                            </div>
                        @else
                            <!-- Image Right -->
                            <div class="col-md-6 order-md-2">
                                <img src="{{ $event['cover_image'] }}" alt="Activity Image"
                                     class="img-fluid rounded activity-img w-100 h-100"
                                     data-aos="zoom-in" data-aos-delay="200">
                            </div>
                            <div class="col-md-6 pe-md-5 mt-3 mt-md-0 order-md-1 text-md-start text-center"
                                 data-aos="fade-right" data-aos-delay="300">
                                <img src="{{ $event['icon'] }}" alt="Icon" class="activity-icon">
                                <h5 class="activity-title">{{ $event['title'] }}</h5>
                                {!! $event['description'] !!}
                            </div>
                        @endif

                    </div>
                @endforeach

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $events->links('pagination::bootstrap-5') }}
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
                    <i class="cui-ban text-secondary" style="font-size: 80px;"></i>
                    <h4 class="text-muted mt-3">No Activities Found</h4>
                    <p class="text-secondary">Please check back later for upcoming events and activities.</p>
                </div>
            @endif

        </div>
    </section>


@endsection