@extends('front.include.app')
@section('content')
  {{-- @dd($compContent) --}}

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <section class="inner-banner p-0">
        <img src="{{ $data->getFirstMediaUrl('event_banner_img') ?? ''}}" alt="image" class="img-fluid">
        <div class="container">
            <div class="inner-banner__content">
                <h1>
                    <a href="javascript:history.back()" class="back-arrow">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    {{$content['main_heading'] ?? ''}}
                </h1>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><span>//</span></li>
                    <li><a href="">{{$content['main_heading'] ?? ''}}</a></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="blog-main">
        <div class="container">
            <div class="training__title text-center mb-5">
                <h5 class="subhead">our blog</h5>
                <h2 class="mainhead">Popular Articles</h2>
            </div>
            <div class="row">
                @php
                    // Divide events into chunks of 4
                    $eventChunks = $events->chunk(4);
                @endphp
    
                @foreach($eventChunks as $chunk)
                    <div class="col-lg-4">
                        <div class="blog__item--group my-3">
                            @foreach($chunk as $event)
                                <div class="blog__item">
                                    <figure class="blog__item--img">
                                        @if ($event->getFirstMediaUrl('event_image'))
                                            <img src="{{ $event->getFirstMediaUrl('event_image') ?? ''}}" alt="event Image" class="img-fluid">
                                        @else
                                            No Image
                                        @endif
                                    </figure>
                                    <div class="blog__item--content">
                                        <ul class="blog__card--info">
                                            <li><i class="far fa-clock"></i> <span>{{ $event->created_at->format('F j, Y') }}</span></li>
                                        </ul>
                                        <h5>{{ $event->name }}</h5>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    

    <x-motivation-section :compData="$compData" :compContent="$compContent"/>

    <x-ideal-section :compData="$compData" :compContent="$compContent"/>

    <x-testimonial-section :testimonials="$testimonials"/>

@endsection