<?php
/**
 * Event Modal Content Template
 * Used when viewing event details in modal popup
 */

if (!defined('ABSPATH')) exit;

// Variables available: $event_post, $event_settings, $event_id
$event_id = $event_post->ID;

// Get event data
$event_title = $event_post->post_title;
$event_content = $event_post->post_content;
$event_excerpt = $event_post->post_excerpt;

// Get event settings
$start_date = isset($event_settings['em_start_date']) ? $event_settings['em_start_date'] : '';
$end_date = isset($event_settings['em_end_date']) ? $event_settings['em_end_date'] : '';
$start_time = isset($event_settings['em_start_time']) ? $event_settings['em_start_time'] : '';
$end_time = isset($event_settings['em_end_time']) ? $event_settings['em_end_time'] : '';
$location = isset($event_settings['em_event_location']) ? $event_settings['em_event_location'] : '';
$category = isset($event_settings['em_event_category']) ? $event_settings['em_event_category'] : '';
$organizer = isset($event_settings['em_organizer_name']) ? $event_settings['em_organizer_name'] : '';
$organizer_email = isset($event_settings['em_organizer_email']) ? $event_settings['em_organizer_email'] : '';
$organizer_phone = isset($event_settings['em_organizer_phone']) ? $event_settings['em_organizer_phone'] : '';

// Format dates
$formatted_date = '';
if ($start_date) {
    $start_timestamp = strtotime($start_date);
    if ($end_date && $end_date !== $start_date) {
        $end_timestamp = strtotime($end_date);
        $formatted_date = date_i18n('F j', $start_timestamp) . ' - ' . date_i18n('F j, Y', $end_timestamp);
    } else {
        $formatted_date = date_i18n('F j, Y', $start_timestamp);
    }
}

// Format time
$formatted_time = '';
if ($start_time) {
    $formatted_time = date_i18n('g:i A', strtotime($start_time));
    if ($end_time && $end_time !== $start_time) {
        $formatted_time .= ' - ' . date_i18n('g:i A', strtotime($end_time));
    }
}

// Get featured image
$featured_image = get_the_post_thumbnail_url($event_id, 'large');
?>

<div class="em-modal-event-content">
    <?php if ($featured_image): ?>
    <div class="em-modal-event-image">
        <img src="<?php echo esc_url($featured_image); ?>" alt="<?php echo esc_attr($event_title); ?>">
    </div>
    <?php endif; ?>
    
    <div class="em-modal-event-details">
        <!-- Event Meta Information -->
        <div class="em-modal-event-meta">
            <?php if ($formatted_date): ?>
            <div class="em-modal-meta-item">
                <svg class="em-modal-meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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>
                <div>
                    <strong><?php _e('Date:', 'event-monster'); ?></strong>
                    <span><?php echo esc_html($formatted_date); ?></span>
                    <?php if ($formatted_time): ?>
                        <br><span class="em-modal-time"><?php echo esc_html($formatted_time); ?></span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
            
            <?php if ($location): ?>
            <div class="em-modal-meta-item">
                <svg class="em-modal-meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <div>
                    <strong><?php _e('Location:', 'event-monster'); ?></strong>
                    <span><?php echo esc_html($location); ?></span>
                </div>
            </div>
            <?php endif; ?>
            
            <?php if ($category): ?>
            <div class="em-modal-meta-item">
                <svg class="em-modal-meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                </svg>
                <div>
                    <strong><?php _e('Category:', 'event-monster'); ?></strong>
                    <span><?php echo esc_html($category); ?></span>
                </div>
            </div>
            <?php endif; ?>
            
            <?php if ($organizer): ?>
            <div class="em-modal-meta-item">
                <svg class="em-modal-meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <div>
                    <strong><?php _e('Organizer:', 'event-monster'); ?></strong>
                    <span><?php echo esc_html($organizer); ?></span>
                    <?php if ($organizer_email): ?>
                        <br><a href="mailto:<?php echo esc_attr($organizer_email); ?>" class="em-modal-contact-link"><?php echo esc_html($organizer_email); ?></a>
                    <?php endif; ?>
                    <?php if ($organizer_phone): ?>
                        <br><a href="tel:<?php echo esc_attr($organizer_phone); ?>" class="em-modal-contact-link"><?php echo esc_html($organizer_phone); ?></a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
        
        <!-- Event Description -->
        <?php if ($event_excerpt): ?>
        <div class="em-modal-event-excerpt">
            <h3><?php _e('Event Summary', 'event-monster'); ?></h3>
            <p><?php echo wp_kses_post($event_excerpt); ?></p>
        </div>
        <?php endif; ?>
        
        <?php if ($event_content): ?>
        <div class="em-modal-event-description">
            <h3><?php _e('About This Event', 'event-monster'); ?></h3>
            <div class="em-modal-content-text">
                <?php echo wp_kses_post($event_content); ?>
            </div>
        </div>
        <?php endif; ?>
        
        <!-- Action Buttons -->
        <div class="em-modal-actions">
            <a href="<?php echo esc_url(get_permalink($event_id)); ?>" class="em-modal-btn em-modal-btn-primary" target="_blank">
                <?php _e('View Full Event Page', 'event-monster'); ?>
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                </svg>
            </a>
            
            <?php if (isset($event_settings['em_accept_registration']) && $event_settings['em_accept_registration'] === 'yes'): ?>
            <a href="<?php echo esc_url(get_permalink($event_id)); ?>#registration" class="em-modal-btn em-modal-btn-secondary" target="_blank">
                <?php _e('Register Now', 'event-monster'); ?>
            </a>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
.em-modal-event-content {
    max-width: 100%;
}

.em-modal-event-image {
    margin-bottom: 1.5rem;
}

.em-modal-event-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.em-modal-event-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 0.5rem;
}

.em-modal-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.em-modal-meta-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #6366f1;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.em-modal-meta-item strong {
    color: #374151;
    font-weight: 600;
    margin-right: 0.5rem;
}

.em-modal-time {
    color: #6b7280;
    font-size: 0.875rem;
}

.em-modal-contact-link {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.875rem;
}

.em-modal-contact-link:hover {
    text-decoration: underline;
}

.em-modal-event-excerpt,
.em-modal-event-description {
    margin-bottom: 1.5rem;
}

.em-modal-event-excerpt h3,
.em-modal-event-description h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.em-modal-content-text {
    color: #6b7280;
    line-height: 1.6;
}

.em-modal-content-text p {
    margin-bottom: 1rem;
}

.em-modal-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.em-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.em-modal-btn-primary {
    background-color: #6366f1;
    color: white;
}

.em-modal-btn-primary:hover {
    background-color: #4f46e5;
    color: white;
    text-decoration: none;
}

.em-modal-btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.em-modal-btn-secondary:hover {
    background-color: #e5e7eb;
    color: #374151;
    text-decoration: none;
}

@media (max-width: 640px) {
    .em-modal-actions {
        flex-direction: column;
    }
    
    .em-modal-btn {
        justify-content: center;
    }
}
</style>
