<?php
/**
 * Event Monster Calendar Template
 * Displays events in FullCalendar format
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}
?>

<div class="em-calendar-container" id="<?php echo esc_attr($calendar_id); ?>">
    <!-- Calendar Header -->
    <header class="em-calendar-header em-mb-6">
        <h2 class="em-text-3xl em-font-bold em-text-slate-900 em-mb-2">
            <?php _e('Event Calendar', 'event-monster'); ?>
        </h2>
        <p class="em-text-slate-600">
            <?php _e('Browse events by date and view details in our interactive calendar.', 'event-monster'); ?>
        </p>
    </header>

    <?php if ($atts['show_filters'] === 'yes'): ?>
    <!-- Calendar Filters -->
    <div class="em-calendar-filters em-bg-white em-rounded-xl em-shadow-sm em-border em-border-slate-200 em-p-6 em-mb-6">
        <div class="em-flex em-flex-wrap em-gap-4 em-items-center">
            <div class="em-filter-group">
                <label for="em-calendar-category-<?php echo esc_attr($calendar_id); ?>" 
                       class="em-block em-text-sm em-font-medium em-text-slate-700 em-mb-1">
                    <?php _e('Category', 'event-monster'); ?>
                </label>
                <select id="em-calendar-category-<?php echo esc_attr($calendar_id); ?>" 
                        class="em-filter-select">
                    <option value=""><?php _e('All Categories', 'event-monster'); ?></option>
                    <?php
                    // Get categories
                    $categories = get_terms(array(
                        'taxonomy' => 'awplife-event-categories',
                        'hide_empty' => true,
                    ));
                    
                    if (!is_wp_error($categories) && !empty($categories)) {
                        foreach ($categories as $term) {
                            $selected = ($atts['category'] === $term->name) ? 'selected' : '';
                            echo '<option value="' . esc_attr($term->name) . '" ' . $selected . '>' . esc_html($term->name) . '</option>';
                        }
                    }
                    ?>
                </select>
            </div>

            <div class="em-filter-group">
                <label class="em-block em-text-sm em-font-medium em-text-slate-700 em-mb-1">
                    <?php _e('View', 'event-monster'); ?>
                </label>
                <select id="em-calendar-view-<?php echo esc_attr($calendar_id); ?>" 
                        class="em-filter-select">
                    <option value="dayGridMonth" <?php selected($atts['view'], 'dayGridMonth'); ?>>
                        <?php _e('Month', 'event-monster'); ?>
                    </option>
                    <option value="timeGridWeek" <?php selected($atts['view'], 'timeGridWeek'); ?>>
                        <?php _e('Week', 'event-monster'); ?>
                    </option>
                    <option value="timeGridDay" <?php selected($atts['view'], 'timeGridDay'); ?>>
                        <?php _e('Day', 'event-monster'); ?>
                    </option>
                    <option value="listMonth" <?php selected($atts['view'], 'listMonth'); ?>>
                        <?php _e('List', 'event-monster'); ?>
                    </option>
                </select>
            </div>

            <div class="em-filter-group em-mt-auto">
                <button type="button" 
                        id="em-calendar-today-<?php echo esc_attr($calendar_id); ?>"
                        class="em-btn em-btn-secondary">
                    <?php _e('Today', 'event-monster'); ?>
                </button>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- Calendar Container -->
    <div class="em-calendar-wrapper em-bg-white em-rounded-xl em-shadow-sm em-border em-border-slate-200 em-p-6 em-relative">
        <div id="<?php echo esc_attr($calendar_id); ?>-fullcalendar"
             class="em-fullcalendar"
             data-calendar-id="<?php echo esc_attr($calendar_id); ?>"
             data-initial-view="<?php echo esc_attr($atts['view']); ?>"
             data-height="<?php echo esc_attr($atts['height']); ?>"
             data-category="<?php echo esc_attr($atts['category']); ?>"
             data-view-mode="<?php echo esc_attr($atts['view_mode'] ?? 'modal'); ?>">
        </div>

        <!-- Loading Indicator -->
        <div id="em-calendar-loading-<?php echo esc_attr($calendar_id); ?>"
             class="em-calendar-loading em-hidden"
             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); z-index: 10; border-radius: 0.75rem; display: none;">
            <div class="em-flex em-items-center em-justify-center em-h-full">
                <div class="em-spinner em-mr-3"></div>
                <span class="em-text-slate-600"><?php _e('Loading events...', 'event-monster'); ?></span>
            </div>
        </div>
    </div>
</div>

<!-- Calendar Styles -->
<style>
/* FullCalendar Custom Styling */
.em-fullcalendar {
    font-family: var(--em-font-family);
}

.em-fullcalendar .fc-toolbar {
    margin-bottom: 1.5rem;
}

.em-fullcalendar .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--em-slate-900);
}

.em-fullcalendar .fc-button {
    background-color: var(--em-primary-600);
    border-color: var(--em-primary-600);
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: var(--em-transition-colors);
}

.em-fullcalendar .fc-button:hover {
    background-color: var(--em-primary-700);
    border-color: var(--em-primary-700);
}

.em-fullcalendar .fc-button:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.em-fullcalendar .fc-button-active {
    background-color: var(--em-primary-700);
    border-color: var(--em-primary-700);
}

.em-fullcalendar .fc-event {
    border-radius: 0.375rem;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--em-transition-all);
}

.em-fullcalendar .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--em-shadow-md);
}

.em-fullcalendar .fc-daygrid-event {
    margin-bottom: 2px;
}

.em-fullcalendar .fc-day-today {
    background-color: var(--em-primary-50) !important;
}

.em-fullcalendar .fc-day-past {
    opacity: 0.6;
}

/* Calendar loading state */
.em-calendar-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    border-radius: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .em-fullcalendar .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .em-fullcalendar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    
    .em-fullcalendar .fc-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize calendar when FullCalendar is loaded
    if (typeof FullCalendar !== 'undefined') {
        initializeEventCalendar('<?php echo esc_js($calendar_id); ?>');
    } else {
        // Wait for FullCalendar to load
        const checkFullCalendar = setInterval(function() {
            if (typeof FullCalendar !== 'undefined') {
                clearInterval(checkFullCalendar);
                initializeEventCalendar('<?php echo esc_js($calendar_id); ?>');
            }
        }, 100);
    }
});
</script>
