@php
    use App\Enums\EventSettingTypesEnum;

    $eventAboutSettings = isset($eventSettings) && isset($eventSettings[EventSettingTypesEnum::HOME_PAGE->value])
        ? $eventSettings[EventSettingTypesEnum::HOME_PAGE->value]
        : null;

    $isShowSection = isset($isShow) ? $isShow : false;
@endphp

@pushIf(
    $isShowSection 
    && (
        (empty($eventAboutSettings['about_description']['value']) && empty($eventAboutSettings['about_secure_spot_btn_link']['value']))
        || (empty($eventAboutSettings['about_2_description']['value']) && empty($eventAboutSettings['about_2_secure_spot_btn_link']['value']))
    ),
'styles')
    <style>
        .about-youtube-iframe {
            min-height: 320px;
        }
    </style>
@endpushIf

@pushIf($isShowSection, 'styles')
    <style>
        @media (max-width: 992px) {
            .about-youtube-iframe {
                min-height: 350px;
            }
        }
    </style>
@endpushIf

@if ($isShowSection)

    <section class="bg-light" id="aboutEventSection">
        <div class="container-fluid p-0">
            <div class="row g-0">
                @if (! empty($eventAboutSettings['about_2_description']['value']) || ! empty($eventAboutSettings['about_2_secure_spot_btn_link']['value']))
                    <div class="col-12 @if (! empty($eventAboutSettings['about_2_youtube_link']['value'])) col-lg-6 @endif order-lg-2 bg-event-2-color">
                        <div class="text-white p-8 about-event-content d-flex flex-column justify-content-center align-items-start">
                            @if (! empty($eventAboutSettings['about_2_title']['value']))
                                <div class="col-sm-12">
                                    <h2 class="text-white fs-38 fw-bold mb-3">
                                        {{ $eventAboutSettings['about_2_title']['value'] }}
                                    </h2>
                                </div>
                            @endif

                            @if (! empty($eventAboutSettings['about_2_description']['value']))
                                <div class="mb-2">
                                    {!! html_entity_decode($eventAboutSettings['about_2_description']['value']) !!}
                                </div>
                            @endif

                            @if (! empty($eventAboutSettings['about_2_secure_spot_btn_link']['value']))
                                <div class="mt-4">
                                    <a href="{{ $eventAboutSettings['about_2_secure_spot_btn_link']['value'] }}" class="btn btn-primary rounded-pill text-capitalize fs-18 px-5 py-1">
                                        {{ $eventAboutSettings['about_2_secure_spot_btn_title']['value'] ?? '' }}
                                        {{-- <span class="bg-event-color rounded-circle p-1">
                                            <i class="fa-solid fa-arrow-right"></i>
                                        </span> --}}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @if (! empty($eventAboutSettings['about_2_youtube_link']['value']))
                    <div class="col-12 @if (! empty($eventAboutSettings['about_2_description']['value']) || ! empty($eventAboutSettings['about_2_secure_spot_btn_link']['value'])) col-lg-6 @endif">
                        <div class="about-youtube-iframe h-100">
                            <iframe width="100%" height="100%" src="{{ $eventAboutSettings['about_2_youtube_link']['value'] }}" title="YouTube video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <section class="bg-light" id="aboutEventSecondSection">
        <div class="container-fluid p-0">
            <div class="row g-0">
                @if (! empty($eventAboutSettings['about_description']['value']) || ! empty($eventAboutSettings['about_secure_spot_btn_link']['value']))
                    <div class="col-12 @if (! empty($eventAboutSettings['about_youtube_link']['value'])) col-lg-6 @endif bg-event-color">
                        <div class="text-white p-8 about-event-content d-flex flex-column justify-content-center align-items-start">
                            @if (! empty($eventAboutSettings['about_title']['value']))
                                <div class="col-sm-12">
                                    <h2 class="text-white fs-38 fw-bold mb-3">
                                        {{ $eventAboutSettings['about_title']['value'] }}
                                    </h2>
                                </div>
                            @endif

                            @if (! empty($eventAboutSettings['about_description']['value']))
                                <div class="mb-2">
                                    {!! html_entity_decode($eventAboutSettings['about_description']['value']) !!}
                                </div>
                            @endif

                            @if (! empty($eventAboutSettings['about_secure_spot_btn_link']['value']))
                                <div class="mt-4">
                                    <a href="{{ $eventAboutSettings['about_secure_spot_btn_link']['value'] }}" class="btn btn-primary rounded-pill text-capitalize fs-18 px-5 py-1">
                                        {{ $eventAboutSettings['about_secure_spot_btn_title']['value'] ?? '' }}
                                        {{-- <span class="bg-event-color rounded-circle p-1">
                                            <i class="fa-solid fa-arrow-right"></i>
                                        </span> --}}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @if (! empty($eventAboutSettings['about_youtube_link']['value']))
                    <div class="col-12 @if (! empty($eventAboutSettings['about_description']['value']) || ! empty($eventAboutSettings['about_secure_spot_btn_link']['value'])) col-lg-6 @endif">
                        <div class="about-youtube-iframe h-100">
                            <iframe width="100%" height="100%" src="{{ $eventAboutSettings['about_youtube_link']['value'] }}" title="YouTube video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

@endif