@if ($studentLifeEvents->isNotEmpty())
    <div>
        @foreach ($studentLifeEvents as $event)
            <section class="event-showcase-section"
                style="background-color: {{ $event->background_color ?? ($loop->odd ? '#004675' : '#f8f9fa') }};">
                <div class="event-showcase-container {{ $loop->odd ? 'layout-dark' : 'layout-light' }}">

                    <div class="event-slider-column">
                        <div class="event-slider-container">
                            <div class="swiper event-swiper-{{ $event->id }}">
                                <div class="swiper-wrapper">
                                    @if (!empty($event->event_images))
                                        @foreach ($event->event_images as $image)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('storage/' . $image) }}"
                                                    alt="{{ $event->event_tittle }} image">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="event-slider-controls">
                            <div class="swiper-button-prev swiper-nav-prev-{{ $event->id }}"></div>
                            <div class="swiper-pagination swiper-pag-{{ $event->id }}"></div>
                            <div class="swiper-button-next swiper-nav-next-{{ $event->id }}"></div>
                        </div>
                    </div>

                    <div class="event-details-wrapper">
                        <h2 class="event-title">{{ $event->event_tittle }}</h2>
                        <p class="event-description">{{ $event->event_description }}</p>
                    </div>

                </div>
            </section>
        @endforeach
    </div>
@endif

<style>
    .event-showcase-section {
        padding: 5rem 2rem;
        overflow: hidden;
        transition: background-color 0.3s ease;
    }

    .event-showcase-container {
        display: flex;
        align-items: center;
        gap: 4rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .layout-dark {
        flex-direction: row;
    }

    .layout-light {
        flex-direction: row-reverse;
    }

    .event-slider-column,
    .event-details-wrapper {
        flex: 1;
        min-width: 0;
    }

    .event-slider-container {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }

    .event-slider-container .swiper-slide img {
        width: 100%;
        aspect-ratio: 16/10;
        object-fit: cover;
        display: block;
    }

    .event-slider-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* gap: 1.5rem; */
        margin-top: 1.5rem;
    }

    .event-details-wrapper {
        text-align: left;
    }

    .event-title {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }

    .event-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* --- Dynamic Text & Control Colors --- */
    .layout-dark .event-title {
        color: #F3881B;
    }

    .layout-dark .event-description {
        color: #F8F8F8;
    }

    .layout-dark .swiper-button-prev,
    .layout-dark .swiper-button-next {
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .layout-dark .swiper-pagination .swiper-pagination-bullet {
        background-color: #fff;
        opacity: 0.6;
    }

    .layout-light .event-title {
        color: #004675;
    }

    .layout-light .event-description {
        color: #666666;
    }

    .layout-light .swiper-button-prev,
    .layout-light .swiper-button-next {
        background-color: #004675;
        color: #fff;
    }

    .layout-light .swiper-pagination .swiper-pagination-bullet {
        background-color: #004675;
        opacity: 0.7;
    }

    /* --- End Dynamic Colors --- */

    .event-slider-controls .swiper-button-prev,
    .event-slider-controls .swiper-button-next {
        position: static;
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .event-slider-controls .swiper-button-prev:hover,
    .event-slider-controls .swiper-button-next:hover {
        transform: scale(1.1);
    }

    .event-slider-controls .swiper-button-prev::after,
    .event-slider-controls .swiper-button-next::after {
        font-size: 1rem;
        font-weight: bold;
    }

    .event-slider-controls .swiper-pagination {
        position: static;
        width: auto;
        transform: none;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        transition: all 0.3s ease;
    }

    .swiper-pagination-bullet-active {
        background-color: #FFA500 !important;
        opacity: 1 !important;
        width: 30px;
        border-radius: 5px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        z-index: 2 !important;
    }

        /* Enhanced responsive styles */
        @media (max-width: 1200px) {
        .event-showcase-section {
            padding: 4rem 1.5rem;
        }
        .event-showcase-container {
            gap: 3rem;
            max-width: 1000px;
        }
        .event-slider-container {
            border-radius: 16px;
        }
        .event-title {
            font-size: 2.2rem;
            margin-bottom: 1.2rem;
        }
        .event-description {
            font-size: 0.95rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 38px;
            height: 38px;
        }
    }

    @media (max-width: 992px) {
        .event-showcase-section {
            padding: 3rem 1rem;
        }
        .event-showcase-container,
        .layout-light {
            flex-direction: column;
        }
        .event-showcase-container {
            gap: 2rem;
            max-width: 800px;
        }
        .event-details-wrapper {
            text-align: center;
            max-width: 90%;
            margin-top: 2rem;
        }
        .event-slider-container {
            border-radius: 12px;
        }
        .event-title {
            font-size: 1.7rem;
            margin-bottom: 1rem;
        }
        .event-description {
            font-size: 0.9rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 32px;
            height: 32px;
        }
    }

    @media (max-width: 768px) {
        .event-showcase-section {
            padding: 2rem 0.5rem;
        }
        .event-showcase-container {
            gap: 1.5rem;
            max-width: 98vw;
        }
        .event-details-wrapper {
            max-width: 100%;
            margin-top: 1.5rem;
        }
        .event-slider-container {
            border-radius: 8px;
        }
        .event-title {
            font-size: 1.3rem;
            margin-bottom: 0.8rem;
        }
        .event-description {
            font-size: 0.85rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 28px;
            height: 28px;
        }
    }

    @media (max-width: 600px) {
        .event-showcase-section {
            padding: 1.2rem 0.2rem;
        }
        .event-showcase-container {
            gap: 1rem;
        }
        .event-slider-container {
            border-radius: 6px;
        }
        .event-title {
            font-size: 1.1rem;
            margin-bottom: 0.6rem;
        }
        .event-description {
            font-size: 0.8rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 22px;
            height: 22px;
        }
    }

    @media (max-width: 400px) {
        .event-showcase-section {
            padding: 0.7rem 0.1rem;
        }
        .event-title {
            font-size: 0.95rem;
            margin-bottom: 0.4rem;
        }
        .event-description {
            font-size: 0.7rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 16px;
            height: 16px;
        }
    }

    @media (max-width: 360px) {
        .event-showcase-section {
            padding: 0.4rem 0;
        }
        .event-title {
            font-size: 0.8rem;
            margin-bottom: 0.3rem;
        }
        .event-description {
            font-size: 0.6rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 12px;
            height: 12px;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const eventContainers = document.querySelectorAll('.event-showcase-section');

        eventContainers.forEach(container => {
            const swiperEl = container.querySelector('.swiper');
            if (swiperEl) {
                const eventId = swiperEl.className.match(/event-swiper-(\d+)/)[1];

                new Swiper(swiperEl, {
                    loop: true,
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: container.querySelector(`.swiper-pag-${eventId}`),
                        clickable: true,
                    },
                    navigation: {
                        nextEl: container.querySelector(`.swiper-nav-next-${eventId}`),
                        prevEl: container.querySelector(`.swiper-nav-prev-${eventId}`),
                    },
                });
            }
        });
    });
</script>