@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
@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::faq([
            [
                'question' => 'What is co-curricular activities?',
                'answer' => 'Co-curricular activities are school programs that run alongside classroom learning. They help students develop practical skills, creativity, confidence, and teamwork while supporting academic growth.'
            ],
            [
                'question' => 'What is the meaning of co-curricular activities?',
                'answer' => 'The meaning of co-curricular activities is learning experiences that complement the school curriculum. They allow students to apply classroom knowledge in real-life situations and grow personally and socially.'
            ],
            [
                'question' => 'What are co-curricular activities in school?',
                'answer' => 'In school, co-curricular activities are programs that enhance classroom learning. Examples include robotics, interactive board sessions, sports, arts, and debates. These activities help students build practical skills, confidence, and teamwork.'
            ],
            [
                'question' => 'Why are co-curricular activities important?',
                'answer' => 'They are important because they help students learn new skills, explore their interests, and grow academically and personally. Co-curricular activities also promote creativity, teamwork, and overall development.'
            ],
            [
                'question' => 'How do co-curricular activities help students?',
                'answer' => 'Co-curricular activities help students improve communication, leadership, and critical thinking skills. They also boost confidence, encourage teamwork, reduce stress, and support better academic performance.'
            ],
        ])
    ) !!}
@endpush

@section('content')
    <style>
        .accordion-button {
            background-color: #dc3545;
            color: #fff;
        }

        .accordion-button:not(.collapsed) {
            background-color: #002f6c;
            color: #fff;
        }

        .accordion-button:focus {
            box-shadow: none;
        }
    </style>
    <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">
                    Co-Curricular Activity
                </p>
            </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">
                                <h3 class="activity-title">{{ $event['title'] }}</h3>
                                {!! $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">
                                <h3 class="activity-title">{{ $event['title'] }}</h3>
                                {!! $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>
                    <h3 class="text-muted mt-3">No Activities Found</h3>
                    <p class="text-secondary">Please check back later for upcoming events and activities.</p>
                </div>
            @endif

        </div>
    </section>
    <!-- Co-Curricular Activities FAQs - Accordion -->
    <!-- FAQS -->
    <section class="py-5" style="background-color: #f8f9fa;">
        <div class="container">
            <h1 class="text-center mb-5 fw-bold" style="color:#002f6c;" data-aos="zoom-in" data-aos-delay="100">
                <img src="{{ asset('assets/img/Asset_28.png') }}" alt="" style="height:90px;" data-aos="zoom-in"
                     data-aos-delay="200">
                <br>
                Your Questions About IGSS, Answered Simply
            </h1>
            <!-- Section Heading -->

            <!-- Accordion -->
            <div class="accordion" id="igssFaq">

                <!-- FAQ 1 -->
                <div class="accordion-item border-0 mb-3 shadow-sm">
                    <h2 class="accordion-header" id="faq1">
                        <button class="accordion-button collapsed fw-semibold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse1">
                            What is co-curricular activities?
                        </button>
                    </h2>
                    <div id="collapse1" class="accordion-collapse collapse"
                         data-bs-parent="#igssFaq">
                        <div class="accordion-body text-muted">
                            Co-curricular activities are school programs that run alongside classroom learning. They help students develop practical skills, creativity, confidence, and teamwork while supporting academic growth.
                        </div>
                    </div>
                </div>

                <!-- FAQ 2 -->
                <div class="accordion-item border-0 mb-3 shadow-sm">
                    <h2 class="accordion-header" id="faq2">
                        <button class="accordion-button collapsed fw-semibold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse2">
                            What is the meaning of co-curricular activities?
                        </button>
                    </h2>
                    <div id="collapse2" class="accordion-collapse collapse"
                         data-bs-parent="#igssFaq">
                        <div class="accordion-body text-muted">
                            The meaning of co-curricular activities is learning experiences that complement the school curriculum. They allow students to apply classroom knowledge in real-life situations and grow personally and socially.
                        </div>
                    </div>
                </div>

                <!-- FAQ 3 -->
                <div class="accordion-item border-0 mb-3 shadow-sm">
                    <h2 class="accordion-header" id="faq3">
                        <button class="accordion-button collapsed fw-semibold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse3">
                            What are co-curricular activities in school?
                        </button>
                    </h2>
                    <div id="collapse3" class="accordion-collapse collapse"
                         data-bs-parent="#igssFaq">
                        <div class="accordion-body text-muted">
                            In school, co-curricular activities are programs that enhance classroom learning. Examples include robotics, interactive board sessions, sports, arts, and debates. These activities help students build practical skills, confidence, and teamwork.
                        </div>
                    </div>
                </div>

                <!-- FAQ 4 -->
                <div class="accordion-item border-0 mb-3 shadow-sm">
                    <h2 class="accordion-header" id="faq4">
                        <button class="accordion-button collapsed fw-semibold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse4">
                            Why are co-curricular activities important?
                        </button>
                    </h2>
                    <div id="collapse4" class="accordion-collapse collapse"
                         data-bs-parent="#igssFaq">
                        <div class="accordion-body text-muted">
                            They are important because they help students learn new skills, explore their interests, and grow academically and personally. Co-curricular activities also promote creativity, teamwork, and overall development.
                        </div>
                    </div>
                </div>

                <!-- FAQ 5 -->
                <div class="accordion-item border-0 mb-3 shadow-sm">
                    <h2 class="accordion-header" id="faq5">
                        <button class="accordion-button collapsed fw-semibold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse5">
                            How do co-curricular activities help students?
                        </button>
                    </h2>
                    <div id="collapse5" class="accordion-collapse collapse"
                         data-bs-parent="#igssFaq">
                        <div class="accordion-body text-muted">
                            Co-curricular activities help students improve communication, leadership, and critical thinking skills. They also boost confidence, encourage teamwork, reduce stress, and support better academic performance.
                        </div>
                    </div>
                </div>

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

@endsection
@push('footer-scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
@endpush