@php
    use App\Enums\EventSettingTypesEnum;
    use Illuminate\Support\Carbon;

    // event settings
    $techneEventLogo = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_logo']['value'] ?? null;
    $techneEventAdress = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_address']['value'] ?? null;
    $techneEventStartDate = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_start_date']['value'] ?? null;
    $techneEventEndDate = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_end_date']['value'] ?? null;
    
    $techneEvent2Logo = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_2_logo']['value'] ?? null;
    $techneEvent2Adress = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_2_address']['value'] ?? null;
    $techneEvent2StartDate = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_2_start_date']['value'] ?? null;
    $techneEvent2EndDate = $eventSettings[EventSettingTypesEnum::GENERAL->value]['techne_event_2_end_date']['value'] ?? null;

    $eiwEventLogo = $eventSettings[EventSettingTypesEnum::GENERAL->value]['eiw_event_logo']['value'] ?? null;
    $eiwEventDate = $eventSettings[EventSettingTypesEnum::GENERAL->value]['eiw_event_date']['value'] ?? null;

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

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

    // countdown date
    // $startRaw = $event?->start_date;
    // $endRaw = $event?->end_date;
    
    // Get the earlier start date if both are set, otherwise take the one that is set
    if ($techneEventStartDate && $techneEvent2StartDate) {
        $startRaw = (strtotime($techneEventStartDate) <= strtotime($techneEvent2StartDate)) ? $techneEventStartDate : $techneEvent2StartDate;
    } else {
        $startRaw = $techneEventStartDate ?? $techneEvent2StartDate;
    }
    // Get the later end date if both are set, otherwise take the one that is set
    if ($techneEventEndDate && $techneEvent2EndDate) {
        $endRaw = (strtotime($techneEventEndDate) >= strtotime($techneEvent2EndDate)) ? $techneEventEndDate : $techneEvent2EndDate;
    } else {
        $endRaw = $techneEventEndDate ?? $techneEvent2EndDate;
    }

    $start = $startRaw ? Carbon::parse($startRaw) : null;
    $end = $endRaw ? Carbon::parse($endRaw) : null;

    $countDownDate = $start 
        ? $start->format('M d, Y')
        : ($end ? $end->format('M d, Y') : null);
@endphp

<section class="bg-overlay @if (! empty($eventHeaderSettings['header_background_video']['value'])) video-wrapper min-vh-100 @else hero-main-image wrapper image-wrapper bg-image  @endif" id="heroSection"
    @if (empty($eventHeaderSettings['header_background_video']['value']) && ! empty($eventHeaderSettings['header_background']['value'])) data-image-src="{{ asset('storage/'.$eventHeaderSettings['header_background']['value']) }}" style="background-attachment: none !important;" @endif
>

    @if (! empty($eventHeaderSettings['header_background_video']['value']))
        <video poster="{{ asset('storage/'.$eventHeaderSettings['header_background']['value']) }}" src="{{ asset('storage/'.$eventHeaderSettings['header_background_video']['value']) }}" autoplay loop playsinline muted></video>
    @endif
    
    <div class="w-100 @if (! empty($eventHeaderSettings['header_background_video']['value'])) video-content @endif">
        <div class="container text-white py-10">
            <div class="d-flex align-items-start gap-3 mb-4 @if (! empty($techneEvent2Logo)) justify-content-end @else justify-content-between @endif">
                @if (empty($techneEvent2Logo))
                    <div class="text-start d-flex flex-column flex-md-row gap-2">
                        <div class="d-inline-block lead fs-28 lh-md mb-0">{{ $event->techneEventFormatedDateRange }}</div>
                        {{-- <span class="text-event-color px-1">>></span> --}}
                        @if (! empty($techneEventAdress))
                            <div class="d-inline-block lead fs-28 lh-md mb-0">{!! html_entity_decode($techneEventAdress) !!}</div>
                        @endif
                    </div>
                @endif
                        
                @if (! empty($eventHeaderSettings['header_shape_1']['value']))
                    <div class="flex-end">
                        <img src="{{ asset('storage/' . $eventHeaderSettings['header_shape_1']['value']) }}" srcset="{{ asset('storage/' . $eventHeaderSettings['header_shape_1']['value']) }} 2x" alt="{{ config('settings.meta_title') }}" width="50px" class="img-fluid">
                    </div>
                @endif
            </div>

            <div class="row align-items-start justify-content-between gx-2 gy-7">
                @if (! empty($techneEvent2Logo))
                    <div class="col-6 col-lg-4 text-start">
                        <div class="d-flex flex-column flex-lg-row align-items-start gap-5 w-100 @if (! empty($techneEvent2Logo)) border-end @endif">
                            <img src="{{ asset('storage/'.$techneEvent2Logo) }}" srcset="{{ asset('storage/'.$techneEvent2Logo) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid techne-logo">

                            <div class="d-flex flex-column gap-2">
                                <div class="d-inline-block lead event-date">{{ $event->techneEvent2FormatedDateRange }}</div>

                                @if (! empty($techneEvent2Adress))
                                    <div class="d-inline-block lead event-locations">{!! html_entity_decode($techneEvent2Adress) !!}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                @if (! empty($techneEventLogo))
                    <div class="col-6 col-lg-4 text-start">
                        <div class="d-flex flex-column flex-lg-row align-items-start gap-5 w-100">
                            <img src="{{ asset('storage/'.$techneEventLogo) }}" srcset="{{ asset('storage/'.$techneEventLogo) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid techne-logo">

                            @if (! empty($techneEvent2Logo))
                                <div class="d-flex flex-column gap-2">
                                    <div class="d-inline-block lead event-date">{{ $event->techneEventFormatedDateRange }}</div>

                                    @if (! empty($techneEventAdress))
                                        <div class="d-inline-block lead event-locations">{!! html_entity_decode($techneEventAdress) !!}</div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @if (! empty($eiwEventLogo))
                    <div class="col-9 mx-auto col-lg-3 text-end">
                        <a href="https://egyptinnovationweek.com/" target="_blank" class="d-inline-block">
                            <img src="{{ asset('storage/'.$eiwEventLogo) }}" srcset="{{ asset('storage/'.$eiwEventLogo) }} 2x" alt="{{ $event?->name }}" class="img-fluid">
                        </a>

                        <div class="text-event-color text-center fs-24 fw-bold">{{ $eiwEventDate }}</div>
                    </div>
                @endif
            </div>

            @if (isset($eventHeaderSettings['header_title']))
                <div class="post-header my-12">
                    <h1 class="display-1 mb-4 text-white text-center">{{ $eventHeaderSettings['header_title']['value'] ?? '' }}</h1>
                </div>
            @endif

            <div class="row gy-4">
                <div class="col-12 col-md-6 align-self-end text-center text-md-start">
                    @if (! empty($eventHeaderSettings['header_buy_ticket_btn_link']['value']))
                        <a href="{{ $eventHeaderSettings['header_buy_ticket_btn_link']['value'] }}" class="btn btn-primary bg-event-color border-event-color rounded-pill shadow-none text-capitalize px-8 py-1">
                            {{ $eventHeaderSettings['header_buy_ticket_btn_title']['value'] ?? '' }}
                        </a>
                    @endif

                    @if (isset($eventSocialMediaSettings))
                        <nav class="nav social social-white justify-content-center justify-content-md-start gap-3 mt-4">
                            @if(! empty($eventSocialMediaSettings['facebook']['value']))
                                <a href="{{ $eventSocialMediaSettings['facebook']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-facebook-f fs-28"></i>
                                </a>
                            @endif

                            @if(! empty($eventSocialMediaSettings['twitter']['value']))
                                <a href="{{ $eventSocialMediaSettings['twitter']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-twitter fs-28"></i>
                                </a>
                            @endif

                            @if(! empty($eventSocialMediaSettings['linkedin']['value']))
                                <a href="{{ $eventSocialMediaSettings['linkedin']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-linkedin fs-28"></i>
                                </a>
                            @endif

                            @if(! empty($eventSocialMediaSettings['instagram']['value']))
                                <a href="{{ $eventSocialMediaSettings['instagram']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-instagram fs-28"></i>
                                </a>
                            @endif

                            @if(! empty($eventSocialMediaSettings['youtube']['value']))
                                <a href="{{ $eventSocialMediaSettings['youtube']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-youtube fs-28"></i>
                                </a>
                            @endif

                            @if(! empty($eventSocialMediaSettings['tiktok']['value']))
                                <a href="{{ $eventSocialMediaSettings['tiktok']['value'] ?? '#' }}" target="_blank">
                                    <i class="uil uil-tiktok fs-28"></i>
                                </a>
                            @endif
                        </nav>
                    @endif
                </div>

                <div class="col-12 col-md-6 align-self-end">
                    <div id="countdown" class="d-flex align-items-center justify-content-center justify-content-md-end gap-4 mb-4">
                        <!-- The countdown boxes will be dynamically generated here -->
                    </div>

                    <div class="d-flex align-items-center justify-content-center justify-content-md-end gap-4">
                        @if (! empty($eventHeaderSettings['header_shape_2']['value']))
                            <div class="d-flex flex-column align-items-center justify-content-center">
                                <img src="{{ asset('storage/' . $eventHeaderSettings['header_shape_2']['value']) }}" srcset="{{ asset('storage/' . $eventHeaderSettings['header_shape_2']['value']) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid mx-auto" style="width: 78px; height: 78px;">
                            </div>
                        @endif
                        
                        @if (! empty($eventHeaderSettings['header_shape_3']['value']))
                            <div class="d-flex flex-column align-items-center justify-content-center">
                                <img src="{{ asset('storage/' . $eventHeaderSettings['header_shape_3']['value']) }}" srcset="{{ asset('storage/' . $eventHeaderSettings['header_shape_3']['value']) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid mx-auto" style="width: 78px; height: 78px;">
                            </div>
                        @endif
                        
                        @if (! empty($eventHeaderSettings['header_shape_4']['value']))
                            <div class="d-flex flex-column align-items-center justify-content-center">
                                <img src="{{ asset('storage/' . $eventHeaderSettings['header_shape_4']['value']) }}" srcset="{{ asset('storage/' . $eventHeaderSettings['header_shape_4']['value']) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid mx-auto" style="width: 78px; height: 78px;">
                            </div>
                        @endif
                        
                        @if (! empty($eventHeaderSettings['header_shape_5']['value']))
                            <div class="d-flex flex-column align-items-center justify-content-center">
                                <img src="{{ asset('storage/' . $eventHeaderSettings['header_shape_5']['value']) }}" srcset="{{ asset('storage/' . $eventHeaderSettings['header_shape_5']['value']) }} 2x" alt="{{ config('settings.meta_title') }}" class="img-fluid mx-auto" style="width: 78px; height: 78px;">
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@pushIf($countDownDate, 'scripts')

    <script>
        // Inline JavaScript for Countdown Timer with Boxed Layout
        const countdown = () => {
            const countDate = new Date("{{ $countDownDate }} 23:59:59").getTime();
            const now = new Date().getTime();
            const gap = countDate - now;

            if (gap < 0) {
                document.getElementById('countdown').innerHTML = '';
                return; // Stop further updates
            }

            const second = 1000;
            const minute = second * 60;
            const hour = minute * 60;
            const day = hour * 24;

            const textDay = Math.floor(gap / day);
            const textHour = Math.floor((gap % day) / hour);
            const textMinute = Math.floor((gap % hour) / minute);
            const textSecond = Math.floor((gap % minute) / second);

            document.getElementById('countdown').innerHTML = `
                <div class="d-flex flex-column align-items-center justify-content-center rounded fs-22 fw-bold countdown-one">
                    <span>${textDay}</span>
                    <small class="fs-14">{{ __('labels.Day') }}</small>
                </div>
                <div class="d-flex flex-column align-items-center justify-content-center rounded fs-22 fw-bold countdown-one">
                    <span>${textHour}</span>
                    <small class="fs-14">{{ __('labels.Hour') }}</small>
                </div>
                <div class="d-flex flex-column align-items-center justify-content-center rounded fs-22 fw-bold countdown-one">
                    <span>${textMinute}</span>
                    <small class="fs-14">{{ __('labels.Minute') }}</small>
                </div>
                <div class="d-flex flex-column align-items-center justify-content-center rounded fs-22 fw-bold countdown-one">
                    <span>${textSecond}</span>
                    <small class="fs-14">{{ __('labels.Second') }}</small>
                </div>`;

            // if (gap < 0) {
            //     document.getElementById('countdown').innerHTML = "We have launched!";
            // }
        };

        setInterval(countdown, 1000);
    </script>
    
@endPushIf