<?php
/**
 * Event header component (logo/video/icon)
 */
if (!defined('ABSPATH')) exit;

// Get header settings
$logo_upd = $event_settings['logo_upd'] ?? 'image'; // Default to 'image' if not set
$em_upload_image = $event_settings['em_upload_image'] ?? '';
$em_upload_video = $event_settings['em_upload_video'] ?? '';
$em_video_option = $event_settings['em_video_option'] ?? '';
$em_upload_icon = $event_settings['em_upload_icon'] ?? '';

// Get event date/time for live indicator
$em_start_date = $event_settings['em_start_date'] ?? '';
$em_end_date = $event_settings['em_end_date'] ?? '';
$em_start_time = $event_settings['em_start_time'] ?? '';
$em_end_time = $event_settings['em_end_time'] ?? '';

// Check if event is currently live
if (!function_exists('is_event_live_free')) {
    function is_event_live_free($start_date, $end_date, $start_time, $end_time) {
        if (empty($start_date)) return false;

        $now = current_time('timestamp');

        // Create start datetime
        $start_datetime = strtotime($start_date . ' ' . ($start_time ?: '00:00'));

        // Create end datetime
        if (!empty($end_date)) {
            $end_datetime = strtotime($end_date . ' ' . ($end_time ?: '23:59'));
        } else {
            // If no end date, assume event lasts until end of start date
            $end_datetime = strtotime($start_date . ' ' . ($end_time ?: '23:59'));
        }

        return ($now >= $start_datetime && $now <= $end_datetime);
    }
}

$is_live = is_event_live_free($em_start_date, $em_end_date, $em_start_time, $em_end_time);

// Format event date for display
if (!function_exists('format_event_date_free')) {
    function format_event_date_free($start_date, $end_date, $start_time, $end_time) {
        if (empty($start_date)) return '';

        $start_formatted = date_i18n('M j, Y', strtotime($start_date));

        if (!empty($end_date) && $end_date !== $start_date) {
            $end_formatted = date_i18n('M j, Y', strtotime($end_date));
            return $start_formatted . ' - ' . $end_formatted;
        }

        return $start_formatted;
    }
}

$event_date_display = format_event_date_free($em_start_date, $em_end_date, $em_start_time, $em_end_time);
?>

<!-- Banner & Title - New Design -->
<?php
// Check if we're in magazine layout for different styling
$is_magazine = isset($GLOBALS['event_settings']['em_layout_preference']) && $GLOBALS['event_settings']['em_layout_preference'] === 'magazine';

// Get banner image - check multiple sources
$banner_image = '';
$event_title = $event_post->post_title ?? 'Event';
$event_description = $event_post->post_excerpt ?? '';

// Priority: 1. Uploaded image, 2. Featured image, 3. Placeholder
// Show uploaded image if available (regardless of logo_upd value for backward compatibility)
if (!empty($em_upload_image)) {
    $banner_image = $em_upload_image;
} elseif (has_post_thumbnail($event_post->ID)) {
    $banner_image = get_the_post_thumbnail_url($event_post->ID, 'full');
}

// Only use placeholder if no image found
if (empty($banner_image)) {
    $banner_image = EM_FREE_PLUGIN_URL . 'images/placeholder-840x630.png';
}

// Both layouts now show banner image with overlay
$header_class = $is_magazine
    ? 'em-relative em-rounded-2xl em-overflow-hidden em-shadow-lg em-animate-fade-in em-h-64'
    : 'em-relative em-overflow-hidden em-shadow-lg em-animate-fade-in em-h-64 em-rounded-t-2xl';
?>
<header class="<?php echo esc_attr($header_class); ?>">
    <div class="em-absolute em-inset-0">
        <img class="em-w-full em-h-full em-object-cover" src="<?php echo esc_url($banner_image); ?>" alt="<?php echo esc_attr($event_title); ?>">
        <div class="em-absolute em-inset-0 em-bg-gradient-to-t em-from-black/60 em-via-black/20 em-to-transparent"></div>
    </div>
    <?php if ($is_magazine): ?>
        <!-- Magazine layout: Text overlay at bottom -->
        <div class="em-absolute em-bottom-0 em-left-0 em-p-6 md:em-p-8">
            <!-- Live indicator and date -->
            <div class="em-flex em-items-center em-gap-3 em-mb-3">
               

                <?php if ($event_date_display): ?>
                    <div class="em-flex em-items-center em-gap-2  em-text-white em-text-sm em-font-medium em-rounded-full ">
                        <svg class="em-w-4 em-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <span><?php echo esc_html($event_date_display); ?></span>
                    </div>
                <?php endif; ?>
                 <?php if ($is_live): ?>
                    <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-red-600 em-text-white em-text-sm em-font-semibold em-rounded-full">
                        <div class="em-w-2 em-h-2 em-bg-white em-rounded-full em-animate-ping"></div>
                        <span>LIVE</span>
                    </div>
                <?php endif; ?>
            </div>

            <h1 class="em-text-3xl md:em-text-4xl em-font-bold em-text-white em-tracking-tight">
                <?php echo esc_html($event_title); ?>
            </h1>
            <?php if (!empty($event_description)): ?>
                <p class="em-text-base em-text-slate-300 em-mt-1">
                    <?php echo esc_html($event_description); ?>
                </p>
            <?php endif; ?>
        </div>
    <?php else: ?>
        <!-- Default layout: Text overlay at bottom (same as magazine) -->
        <div class="em-absolute em-bottom-0 em-left-0 em-right-0 em-p-6 md:em-p-8 em-text-center">
            <!-- Live indicator and date -->
            <div class="em-flex em-items-center em-justify-center em-gap-3 em-mb-3">
                <?php if ($event_date_display): ?>
                    <div class="em-flex em-items-center em-gap-2 em-text-white em-text-sm em-font-medium em-rounded-full">
                        <svg class="em-w-4 em-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <span><?php echo esc_html($event_date_display); ?></span>
                    </div>
                <?php endif; ?>
                <?php if ($is_live): ?>
                    <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-red-600 em-text-white em-text-sm em-font-semibold em-rounded-full">
                        <div class="em-w-2 em-h-2 em-bg-white em-rounded-full em-animate-ping"></div>
                        <span>LIVE</span>
                    </div>
                <?php endif; ?>
            </div>

            <h1 class="em-text-3xl md:em-text-4xl em-font-bold em-text-white em-tracking-tight">
                <?php echo esc_html($event_title); ?>
            </h1>
            <?php if (!empty($event_description)): ?>
                <p class="em-text-base em-text-slate-300 em-mt-1 em-max-w-2xl em-mx-auto">
                    <?php echo esc_html($event_description); ?>
                </p>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</header>

    <?php if ($logo_upd == "video"): ?>
        <div class="em-relative em-w-full em-h-64 sm:em-h-80 md:em-h-96 em-bg-gray-900 em-rounded-2xl em-overflow-hidden">
            <?php if ($em_video_option == "youtube"): ?>
                <iframe class="em-w-full em-h-full em-border-0"
                        src="https://www.youtube.com/embed/<?php echo esc_attr($em_upload_video); ?>"
                        frameborder="0" allowfullscreen></iframe>
            <?php elseif ($em_video_option == "vimeo"): ?>
                <iframe class="em-w-full em-h-full em-border-0"
                        src="https://player.vimeo.com/video/<?php echo esc_attr($em_upload_video); ?>"
                        frameborder="0" allowfullscreen></iframe>
            <?php endif; ?>
            <div class="em-absolute em-inset-0 em-bg-gradient-to-t em-from-black/60 em-via-black/20 em-to-transparent"></div>
            <div class="em-absolute em-bottom-0 em-left-0 em-p-6 md:em-p-8">
                <!-- Live indicator and date for video layout -->
                <div class="em-flex em-items-center em-gap-3 em-mb-3">
                    <?php if ($is_live): ?>
                        <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-red-600 em-text-white em-text-sm em-font-semibold em-rounded-full em-animate-pulse">
                            <div class="em-w-2 em-h-2 em-bg-white em-rounded-full em-animate-ping"></div>
                            <span>LIVE</span>
                        </div>
                    <?php endif; ?>

                    <?php if ($event_date_display): ?>
                        <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-black/30 em-text-white em-text-sm em-font-medium em-rounded-full em-backdrop-blur-sm">
                            <svg class="em-w-4 em-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <span><?php echo esc_html($event_date_display); ?></span>
                        </div>
                    <?php endif; ?>
                </div>

                <h1 class="em-text-3xl md:em-text-4xl lg:em-text-5xl em-font-extrabold em-text-white em-tracking-tight"><?php echo esc_html($event_title); ?></h1>
                <?php if (!empty($event_description)): ?>
                    <p class="em-mt-1 em-text-lg em-text-gray-200"><?php echo esc_html($event_description); ?></p>
                <?php endif; ?>
            </div>
        </div>
    <?php endif; ?>

    <?php if ($logo_upd == "logo"): ?>
        <div class="em-flex em-items-center em-justify-center em-h-64 sm:em-h-80 md:em-h-96 em-bg-gradient-to-r em-from-primary-500 em-to-primary-600 em-rounded-2xl">
            <i class="fa <?php echo esc_attr($em_upload_icon); ?> em-text-6xl em-text-white em-drop-shadow-lg" aria-hidden="true"></i>
            <div class="em-absolute em-inset-0 em-bg-gradient-to-t em-from-black/60 em-via-black/20 em-to-transparent"></div>
            <div class="em-absolute em-bottom-0 em-left-0 em-p-6 md:em-p-8">
                <!-- Live indicator and date for logo layout -->
                <div class="em-flex em-items-center em-gap-3 em-mb-3">
                    <?php if ($is_live): ?>
                        <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-red-600 em-text-white em-text-sm em-font-semibold em-rounded-full em-animate-pulse">
                            <div class="em-w-2 em-h-2 em-bg-white em-rounded-full em-animate-ping"></div>
                            <span>LIVE</span>
                        </div>
                    <?php endif; ?>

                    <?php if ($event_date_display): ?>
                        <div class="em-flex em-items-center em-gap-2 em-px-3 em-py-1 em-bg-black/30 em-text-white em-text-sm em-font-medium em-rounded-full em-backdrop-blur-sm">
                            <svg class="em-w-4 em-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <span><?php echo esc_html($event_date_display); ?></span>
                        </div>
                    <?php endif; ?>
                </div>

                <h1 class="em-text-3xl md:em-text-4xl lg:em-text-5xl em-font-extrabold em-text-white em-tracking-tight"><?php echo esc_html($event_title); ?></h1>
                <?php if (!empty($event_description)): ?>
                    <p class="em-mt-1 em-text-lg em-text-gray-200"><?php echo esc_html($event_description); ?></p>
                <?php endif; ?>
            </div>
        </div>
    <?php endif; ?>
</div>


