@php
    $individualZones = \App\Models\IndividualZone::all();
@endphp
@if ($individualZones->isNotEmpty())
    <div class="container">
        @foreach ($individualZones as $zone)
            <section class="event-showcase-section"
                style="background-color: {{ $zone->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-{{ $zone->id }}">
                                <div class="swiper-wrapper">
                                    @if (!empty($zone->main_images))
                                        @foreach ($zone->main_images as $image)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('storage/' . $image) }}"
                                                    alt="{{ $zone->main_title }} image">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="event-slider-controls" >
                            <div class="swiper-button-prev swiper-nav-prev-{{ $zone->id }}"></div>
                            <div class="swiper-pagination swiper-pag-{{ $zone->id }}"></div>
                            <div class="swiper-button-next swiper-nav-next-{{ $zone->id }}"></div>
                        </div>
                    </div>

                    <div class="event-details-wrapper" onclick="window.location.href='{{ route('individualZone', $zone->id) }}'">
                        <h2 class="event-title">{{ $zone->main_title }}</h2>
                        <p class="event-description">{{ $zone->main_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-title {
            font-size: 2.4rem;
            margin-bottom: 1.2rem;
        }
        .event-description {
            font-size: 0.95rem;
            line-height: 1.6;
        }
    }

    @media (max-width: 992px) {
        .event-showcase-section {
            padding: 3.5rem 1.5rem;
        }
        .event-showcase-container,
        .layout-light {
            flex-direction: column;
            gap: 2.5rem;
        }
        .event-details-wrapper {
            text-align: center;
            max-width: 80%;
            margin-top: 2rem;
        }
        .event-title {
            font-size: 2.2rem;
            margin-bottom: 1rem;
        }
        .event-description {
            font-size: 0.9rem;
            line-height: 1.6;
        }
        .event-slider-controls {
            margin-top: 1.2rem;
        }
    }

    @media (max-width: 900px) {
        .event-showcase-section {
            padding: 3rem 1.2rem;
        }
        .event-showcase-container {
            gap: 2rem;
        }
        .event-details-wrapper {
            max-width: 85%;
        }
        .event-title {
            font-size: 2rem;
        }
        .event-description {
            font-size: 0.85rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 40px;
            height: 40px;
        }
        .event-slider-controls .swiper-button-prev::after,
        .event-slider-controls .swiper-button-next::after {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 768px) {
        .event-showcase-section {
            padding: 2.5rem 1rem;
        }
        .event-showcase-container {
            display: block;
            gap: 1.8rem;
        }
        .event-details-wrapper {
            max-width: 90%;
            margin-top: 1.5rem;
        }
        .event-title {
            font-size: 1.8rem;
            margin-bottom: 0.8rem;
        }
        .event-description {
            font-size: 0.8rem;
            line-height: 1.5;
        }
        .event-slider-controls {
            margin-top: 1rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 36px;
            height: 36px;
        }
        .event-slider-controls .swiper-button-prev::after,
        .event-slider-controls .swiper-button-next::after {
            font-size: 0.8rem;
        }
        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
        }
        .swiper-pagination-bullet-active {
            width: 24px;
        }
    }

    @media (max-width: 600px) {
        .event-showcase-section {
            padding: 2rem 0.8rem;
        }
        .event-showcase-container {
            gap: 1.5rem;
        }
        .event-details-wrapper {
            max-width: 95%;
            margin-top: 1.2rem;
        }
        .event-title {
            font-size: 1.6rem;
            margin-bottom: 0.6rem;
        }
        .event-description {
            font-size: 0.75rem;
            line-height: 1.4;
        }
        .event-slider-controls {
            margin-top: 0.8rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 32px;
            height: 32px;
        }
        .event-slider-controls .swiper-button-prev::after,
        .event-slider-controls .swiper-button-next::after {
            font-size: 0.75rem;
        }
        .swiper-pagination-bullet {
            width: 7px;
            height: 7px;
        }
        .swiper-pagination-bullet-active {
            width: 20px;
        }
    }

    @media (max-width: 480px) {
        .event-showcase-section {
            padding: 1.5rem 0.6rem;
        }
        .event-showcase-container {
            gap: 1.2rem;
        }
        .event-details-wrapper {
            max-width: 98%;
            margin-top: 1rem;
        }
        .event-title {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
        }
        .event-description {
            font-size: 0.7rem;
            line-height: 1.3;
        }
        .event-slider-controls {
            margin-top: 0.6rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 28px;
            height: 28px;
        }
        .event-slider-controls .swiper-button-prev::after,
        .event-slider-controls .swiper-button-next::after {
            font-size: 0.7rem;
        }
        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
        }
        .swiper-pagination-bullet-active {
            width: 18px;
        }
    }

    @media (max-width: 360px) {
        .event-showcase-section {
            padding: 1.2rem 0.4rem;
        }
        .event-showcase-container {
            gap: 1rem;
        }
        .event-details-wrapper {
            max-width: 100%;
            margin-top: 0.8rem;
        }
        .event-title {
            font-size: 1.2rem;
            margin-bottom: 0.4rem;
        }
        .event-description {
            font-size: 0.65rem;
            line-height: 1.2;
        }
        .event-slider-controls {
            margin-top: 0.5rem;
        }
        .event-slider-controls .swiper-button-prev,
        .event-slider-controls .swiper-button-next {
            width: 24px;
            height: 24px;
        }
        .event-slider-controls .swiper-button-prev::after,
        .event-slider-controls .swiper-button-next::after {
            font-size: 0.65rem;
        }
        .swiper-pagination-bullet {
            width: 5px;
            height: 5px;
        }
        .swiper-pagination-bullet-active {
            width: 15px;
        }
    }
</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>