<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}

$month_label = isset($month_label) ? (string) $month_label : '';
$weekday_labels = isset($weekday_labels) && is_array($weekday_labels) ? $weekday_labels : [];
$cells = isset($cells) && is_array($cells) ? $cells : [];
$prev_url = isset($prev_url) ? (string) $prev_url : '';
$next_url = isset($next_url) ? (string) $next_url : '';
$events_url = isset($events_url) ? (string) $events_url : $this->get_profile_route_default_url('events');
$submit_url = $this->get_platform_page_url(
    'nexdirectory_page_submit_event_url',
    $this->get_profile_route_slugs('submit'),
    $this->get_profile_route_default_url('submit')
);
$max_inline_per_day = isset($max_inline_per_day) ? max(1, (int) $max_inline_per_day) : 2; // Matching the mockup's preference of 2 events
$calendar_locale = str_replace('_', '-', (string) get_locale());
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$calendar_title = sanitize_text_field((string) ($ui_labels['calendar_title'] ?? __('Events Calendar', 'nexdirectory')));
$calendar_description = sanitize_text_field((string) ($ui_labels['calendar_description'] ?? __('Browse upcoming events in a monthly calendar view.', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());

if ($page_kicker === '') {
    $page_kicker = $this->get_white_label_brand_name();
}

$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$archive_title = sanitize_text_field((string) ($ui_labels['archive_title'] ?? __('View Events', 'nexdirectory')));
$calendar_page_id = absint((int) get_queried_object_id());
$calendar_featured_hero = '';
if ($calendar_page_id > 0 && has_post_thumbnail($calendar_page_id)) {
    $calendar_featured_candidate = get_the_post_thumbnail_url($calendar_page_id, 'full');
    if (is_string($calendar_featured_candidate) && $calendar_featured_candidate !== '') {
        $calendar_featured_hero = esc_url($calendar_featured_candidate);
    }
}
$calendar_fallback_hero = esc_url((string) get_option('nexdirectory_style_fallback_hero_url', ''));
$calendar_banner_hero = $calendar_featured_hero !== '' ? $calendar_featured_hero : $calendar_fallback_hero;
$calendar_banner_has_image = $calendar_banner_hero !== '';
$calendar_hero_img_src = $calendar_banner_has_image
    ? $calendar_banner_hero
    : plugins_url('assets/images/placeholder-hero.svg', NEXDIRECTORY_PLUGIN_FILE);
$site_calendar_feed_url = $this->get_site_calendar_feed_url();
$site_calendar_webcal_url = $this->calendar_url_to_webcal($site_calendar_feed_url);
$private_calendar_feature = function_exists('nexdirectory_is_pro_feature_enabled')
    && nexdirectory_is_pro_feature_enabled('subscribable_calendars');
$personal_calendar_feed_url = $private_calendar_feature && is_user_logged_in()
    ? $this->get_attending_calendar_feed_url((int) get_current_user_id())
    : '';
$personal_calendar_webcal_url = $personal_calendar_feed_url !== ''
    ? $this->calendar_url_to_webcal($personal_calendar_feed_url)
    : '';

// Prepare events data for AlpineJS
$js_events = [];
$fallback_selected_date = wp_date('Y-m-d'); 

foreach ($cells as $cell) {
    if ($cell !== null) {
        if (!empty($cell['is_today']) && !empty($cell['day_key'])) {
            $fallback_selected_date = (string) $cell['day_key'];
        }
        if (!empty($cell['events']) && is_array($cell['events'])) {
            foreach ($cell['events'] as $event) {
                $js_events[] = [
                    'date'  => (string) ($cell['day_key'] ?? ''),
                    'time'  => (string) ($event['time'] ?? ''),
                    'title' => (string) ($event['title'] ?? ''),
                    'city'  => (string) ($event['city'] ?? ''),
                    'type'  => (string) ($event['type'] ?? 'event'), // Fallback to 'event' if type is empty
                    'url'   => (string) ($event['url'] ?? '#')
                ];
            }
        }
    }
}
$js_events_json = wp_json_encode($js_events);
$calendar_labels_json = wp_json_encode([
    'singular' => $singular_label,
    'plural' => $plural_label,
]);

echo wp_kses_post($this->render_notice());
$nexdirectory_breadcrumb_markup = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_platform_breadcrumbs($calendar_title));
echo wp_kses($nexdirectory_breadcrumb_markup, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_breadcrumb_markup));
?>


<?php $this->enqueue_local_style_asset('templates-frontend-events-calendar-php-style-1', 'assets/generated/templates-frontend-events-calendar-php-style-1.css'); ?>

<div class="nexdirectory-calendar-page bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 min-h-screen pb-24 md:pb-12"
     x-data="calendarApp(<?php echo esc_attr($js_events_json ?: '[]'); ?>, '<?php echo esc_js($fallback_selected_date); ?>', '<?php echo esc_js($calendar_locale); ?>', <?php echo esc_attr($calendar_labels_json ?: '{}'); ?>)">

    <div class="bg-white/90 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40 transition-all shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-brand-500 text-white flex items-center justify-center shadow-sm">
                        <svg class="w-6 h-6" 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>
                    </div>
                    <div>
                        <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-0.5"><?php echo esc_html($page_kicker); ?></p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900 leading-none"><?php echo esc_html($calendar_title); ?></p>
                    </div>
                </div>
                
                <div class="hidden md:flex items-center gap-4">
                    <a href="<?php echo esc_url($events_url); ?>" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 active:scale-95 text-gray-700 text-sm font-semibold rounded-lg transition-all duration-200">
                        <?php echo esc_html($archive_title); ?>
	                    </a>
	                    <a href="<?php echo esc_url($submit_url); ?>" class="px-4 py-2 bg-brand-600 hover:bg-brand-700 active:scale-95 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 flex items-center gap-2">
	                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
	                        <?php /* translators: %s: Singular directory content label, such as event or listing. */ ?>
	                        <?php echo esc_html(sprintf(__('Add %s', 'nexdirectory'), $singular_label)); ?>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <main class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8 mt-6 sm:mt-8">
        <div class="relative sm:rounded-2xl overflow-hidden mb-6 sm:mb-8 shadow-sm group bg-gray-900 flex flex-col justify-end min-h-[34vh] sm:min-h-[300px]">
            <img src="<?php echo esc_url($calendar_hero_img_src); ?>" alt="<?php echo esc_attr($calendar_title); ?>" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 sm:group-hover:scale-105 opacity-80 sm:opacity-100" <?php echo $calendar_banner_has_image ? ' data-nexdirectory-hero-parallax="1"' : ''; ?>>

            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-900/70 to-transparent"></div>

            <div class="relative z-10 p-6 sm:p-8 lg:p-12 w-full mt-auto">
                <div class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider mb-3 sm:mb-4 backdrop-blur-sm border border-brand-500/30">
                    <?php echo esc_html($page_kicker); ?>
                </div>
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-md">
                    <?php echo esc_html($calendar_title); ?>
                </h1>
                <?php if ($calendar_description !== '') : ?>
                    <p class="text-gray-300 text-base sm:text-lg max-w-2xl leading-relaxed">
                        <?php echo esc_html($calendar_description); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <section class="mx-4 sm:mx-0 mb-6 sm:mb-8 rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden" aria-labelledby="nexdirectory-calendar-subscribe-title">
            <div class="p-5 sm:p-6 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                <div class="flex items-start gap-4">
                    <div class="w-11 h-11 rounded-xl bg-brand-50 text-brand-700 flex items-center justify-center shrink-0">
                        <svg class="w-6 h-6" 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 012-2h14a2 2 0 012 2v12a2 2 0 01-2 2z"></path></svg>
                    </div>
                    <div>
                        <h2 id="nexdirectory-calendar-subscribe-title" class="text-lg font-bold text-gray-900"><?php esc_html_e('Keep this calendar in sync', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-gray-500 mt-1 max-w-2xl"><?php esc_html_e('Subscribe once in Apple Calendar, Outlook, Google Calendar, or another calendar app. New and updated public listings flow into the same feed automatically.', 'nexdirectory'); ?></p>
                    </div>
                </div>
                <details class="relative shrink-0 group">
                    <summary class="list-none cursor-pointer inline-flex w-full sm:w-auto items-center justify-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-white text-sm font-semibold hover:bg-black active:scale-95 transition-all shadow-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                        <?php esc_html_e('Subscribe', 'nexdirectory'); ?>
                    </summary>
                    <div class="mt-3 sm:absolute sm:right-0 sm:z-30 sm:w-[360px] rounded-2xl border border-gray-200 bg-white p-4 shadow-xl">
                        <div class="space-y-3">
                            <div class="rounded-xl border border-gray-100 bg-gray-50 p-4">
                                <p class="font-bold text-sm text-gray-900"><?php esc_html_e('All public listings', 'nexdirectory'); ?></p>
                                <p class="text-xs text-gray-500 mt-1 mb-3"><?php esc_html_e('The complete public calendar for this site.', 'nexdirectory'); ?></p>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                    <?php if ($site_calendar_webcal_url !== '') : ?>
                                        <a href="<?php echo esc_url($site_calendar_webcal_url, ['webcal']); ?>" class="inline-flex justify-center px-3 py-2 rounded-lg bg-brand-600 text-white text-xs font-bold hover:bg-brand-700"><?php esc_html_e('Open calendar app', 'nexdirectory'); ?></a>
                                    <?php endif; ?>
                                    <a href="<?php echo esc_url($site_calendar_feed_url); ?>" class="inline-flex justify-center px-3 py-2 rounded-lg border border-gray-200 bg-white text-gray-700 text-xs font-bold hover:bg-gray-50"><?php esc_html_e('Download .ics', 'nexdirectory'); ?></a>
                                </div>
                            </div>
                            <?php if ($private_calendar_feature && is_user_logged_in()) : ?>
                                <div class="rounded-xl border border-brand-100 bg-brand-50 p-4">
                                    <p class="font-bold text-sm text-gray-900"><?php esc_html_e('My confirmed RSVPs', 'nexdirectory'); ?></p>
                                    <p class="text-xs text-gray-600 mt-1 mb-3"><?php esc_html_e('Private to you. Cancelled RSVPs disappear from the live feed.', 'nexdirectory'); ?></p>
                                    <?php if ($personal_calendar_feed_url !== '') : ?>
                                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                            <?php if ($personal_calendar_webcal_url !== '') : ?>
                                                <a href="<?php echo esc_url($personal_calendar_webcal_url, ['webcal']); ?>" class="inline-flex justify-center px-3 py-2 rounded-lg bg-gray-900 text-white text-xs font-bold hover:bg-black"><?php esc_html_e('Open calendar app', 'nexdirectory'); ?></a>
                                            <?php endif; ?>
                                            <a href="<?php echo esc_url($personal_calendar_feed_url); ?>" class="inline-flex justify-center px-3 py-2 rounded-lg border border-brand-200 bg-white text-brand-700 text-xs font-bold hover:bg-brand-100"><?php esc_html_e('Private feed', 'nexdirectory'); ?></a>
                                        </div>
                                    <?php else : ?>
                                        <p class="text-xs text-gray-600"><?php esc_html_e('Your private feed is revoked. Create a new link from Account → Profile.', 'nexdirectory'); ?></p>
                                    <?php endif; ?>
                                </div>
                            <?php elseif ($private_calendar_feature) : ?>
                                <div class="rounded-xl border border-gray-100 p-4">
                                    <p class="font-bold text-sm text-gray-900"><?php esc_html_e('Want only your RSVPs?', 'nexdirectory'); ?></p>
                                    <p class="text-xs text-gray-500 mt-1"><?php esc_html_e('Sign in, then use the private “My attending” calendar in your account.', 'nexdirectory'); ?></p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </details>
            </div>
        </section>
        
        <div class="bg-white sm:rounded-2xl shadow-sm border-y sm:border border-gray-100 overflow-hidden flex flex-col">
            
            <div class="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <div class="flex items-center gap-4">
                    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 w-auto"><?php echo esc_html($month_label); ?></h2>
                </div>
                
                <div class="flex items-center gap-2 sm:gap-4">
                    <div class="flex items-center bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
                        <a href="<?php echo esc_url($prev_url); ?>" class="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none" aria-label="<?php esc_attr_e('Previous month', 'nexdirectory'); ?>">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                        </a>
                        <div class="w-px h-5 bg-gray-200"></div>
                        <a href="<?php echo esc_url($next_url); ?>" class="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none" aria-label="<?php esc_attr_e('Next month', 'nexdirectory'); ?>">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="grid grid-cols-7 border-b border-gray-100 bg-gray-50">
                    <?php foreach ($weekday_labels as $weekday) : ?>
                        <div class="px-2 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            <?php echo esc_html((string) $weekday); ?>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="grid grid-cols-7 bg-gray-100 gap-[1px]">
                    <?php foreach ($cells as $cell) : ?>
                        <?php if ($cell === null) : ?>
                            <div class="bg-white min-h-[60px] sm:min-h-[120px] p-2 transition-colors md:hover:bg-gray-50/50 opacity-40" aria-hidden="true"></div>
                        <?php else : ?>
                            <?php
                                $day_num = $cell['day'] ?? '';
                                $day_key = $cell['day_key'] ?? '';
                                $is_today = !empty($cell['is_today']);
                                $cell_events = !empty($cell['events']) ? array_values((array) $cell['events']) : [];
                                $visible_events = array_slice($cell_events, 0, $max_inline_per_day);
                                $overflow_count = max(0, count($cell_events) - count($visible_events));
                            ?>
                            <div class="nexdirectory-calendar-cell relative bg-white min-h-[60px] sm:min-h-[140px] p-1 sm:p-2 transition-colors border-t-2 <?php echo $is_today ? 'border-brand-500 md:bg-brand-50/20' : 'border-transparent md:hover:bg-gray-50'; ?>"
                                 :class="{ 'bg-brand-50 md:bg-white': selectedDate === '<?php echo esc_js($day_key); ?>' && !<?php echo $is_today ? 'true' : 'false'; ?> }">
                                
	                                <div class="flex flex-col h-full">
	                                    <div class="flex items-center justify-between mb-1 sm:mb-2 px-1">
	                                        <button type="button"
	                                              @click="selectDate('<?php echo esc_js($day_key); ?>')"
	                                              <?php /* translators: 1: Plural directory content label. 2: Calendar date key. */ ?>
	                                              aria-label="<?php echo esc_attr(sprintf(__('View %1$s on %2$s', 'nexdirectory'), $plural_label, $day_key)); ?>"
                                              :aria-pressed="selectedDate === '<?php echo esc_js($day_key); ?>'"
                                              class="text-sm font-semibold flex items-center justify-center w-7 h-7 rounded-full <?php echo $is_today ? 'bg-brand-500 text-white shadow-sm' : ''; ?>"
                                              :class="{
                                                  'text-brand-600 bg-brand-100': selectedDate === '<?php echo esc_js($day_key); ?>' && !<?php echo $is_today ? 'true' : 'false'; ?>,
                                                  'text-gray-700': !<?php echo $is_today ? 'true' : 'false'; ?> && selectedDate !== '<?php echo esc_js($day_key); ?>'
                                              }">
                                            <?php echo esc_html((string) $day_num); ?>
                                        </button>
                                    </div>

                                    <div class="hidden md:flex flex-col gap-1 overflow-y-auto scrollbar-hide flex-1">
                                        <?php foreach ($visible_events as $event) : ?>
                                            <a href="<?php echo esc_url($event['url'] ?? '#'); ?>"
                                                 class="block px-2 py-1 text-xs rounded-md border truncate transition-colors"
                                                 :class="getEventColorClass('<?php echo esc_js($event['type'] ?? 'event'); ?>')">
                                                <span class="font-bold opacity-75 mr-1"><?php echo esc_html((string) ($event['time'] ?? '')); ?></span>
                                                <span class="font-medium"><?php echo esc_html((string) ($event['title'] ?? '')); ?></span>
                                            </a>
                                        <?php endforeach; ?>
                                        
                                        <?php if ($overflow_count > 0) : ?>
                                            <button type="button" @click.stop="openDayModal('<?php echo esc_js($day_key); ?>')" class="text-[11px] font-semibold text-gray-500 hover:text-brand-600 text-left px-1 mt-1 transition-colors">
                                                +<?php echo esc_html((string) $overflow_count); ?> more
                                            </button>
                                        <?php endif; ?>
                                    </div>

                                    <div class="md:hidden flex flex-wrap gap-1 justify-center mt-auto pb-1">
                                        <?php foreach (array_slice($cell_events, 0, 3) as $event) : ?>
                                            <div class="w-1.5 h-1.5 rounded-full" :class="getEventDotColor('<?php echo esc_js($event['type'] ?? 'event'); ?>')"></div>
                                        <?php endforeach; ?>
                                        <?php if (count($cell_events) > 3) : ?>
                                            <div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <div class="md:hidden mt-6 px-4 space-y-4 pb-8">
            <h3 class="text-lg font-bold text-gray-900 border-b border-gray-200 pb-2" x-text="formatFullDate(selectedDate)"></h3>
            
            <template x-if="getEventsForDate(selectedDate).length === 0">
                <div class="text-center py-8 bg-white rounded-2xl border border-gray-100 shadow-sm">
                    <div class="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-3 text-gray-400">
                        <svg class="w-6 h-6" 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>
                    </div>
                    <p class="text-sm font-medium text-gray-500">No events scheduled.</p>
                </div>
            </template>

            <div class="space-y-3">
                <template x-for="(event, i) in getEventsForDate(selectedDate)" :key="i">
                    <a :href="event.url" class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex gap-4 items-start active:scale-95 transition-transform">
                        <div class="flex-shrink-0 text-center w-16">
                            <span class="block text-xs font-bold text-brand-600 mb-0.5" x-text="event.time.split(' ')[0]"></span>
                            <span class="block text-[10px] font-semibold text-gray-400 uppercase" x-text="event.time.split(' ')[1] || ''"></span>
                        </div>
                        <div class="border-l-2 pl-4 w-full" :class="getEventBorderColorClass(event.type)">
                            <h4 class="text-base font-bold text-gray-900 mb-1" x-text="event.title"></h4>
                            <div class="flex items-center gap-2 text-xs text-gray-500">
                                <template x-if="event.city">
                                    <span class="flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                        <span x-text="event.city"></span>
                                    </span>
                                </template>
                                <span class="px-2 py-0.5 rounded uppercase text-[9px] font-bold" :class="getEventColorClass(event.type)" x-text="event.type"></span>
                            </div>
                        </div>
                    </a>
                </template>
            </div>
        </div>
    </main>

    <div x-show="isModalOpen"
         x-cloak
         @keydown.escape.window="closeModal()"
         @keydown.tab="trapModalFocus($event)"
         class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
         aria-labelledby="nexdirectory-calendar-modal-title"
         role="dialog"
         aria-modal="true">
        <div x-show="isModalOpen" x-transition.opacity class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" @click="closeModal()"></div>
        
        <div x-show="isModalOpen" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 scale-95 translate-y-4" 
             x-transition:enter-end="opacity-100 scale-100 translate-y-0" 
             x-transition:leave="transition ease-in duration-200" 
             x-transition:leave-start="opacity-100 scale-100 translate-y-0" 
             x-transition:leave-end="opacity-0 scale-95 translate-y-4" 
             x-ref="modalDialog"
             class="nexdirectory-calendar-day-modal relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
            
            <div class="flex items-center justify-between p-5 border-b border-gray-100 bg-gray-50/50">
                <div>
                    <h3 class="text-lg font-bold text-gray-900" id="nexdirectory-calendar-modal-title" x-text="formatFullDate(modalDate)"></h3>
                    <p class="text-xs text-brand-600 font-semibold" x-text="eventCountLabel(modalDate)"></p>
                </div>
                <button type="button" x-ref="modalClose" @click="closeModal()" class="text-gray-400 hover:text-gray-900 transition-colors p-2 rounded-lg hover:bg-gray-100 focus:outline-none" aria-label="<?php esc_attr_e('Close day details', 'nexdirectory'); ?>">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <div class="p-5 overflow-y-auto space-y-3">
                <template x-for="(event, i) in getEventsForDate(modalDate)" :key="i">
                    <a :href="event.url" class="block p-4 rounded-xl border transition-colors hover:shadow-md group" :class="getEventModalHoverClass(event.type)">
                        <div class="flex items-start justify-between mb-1">
                            <h4 class="nexdirectory-calendar-modal-event-title text-gray-900 group-hover:text-brand-700 transition-colors" x-text="event.title"></h4>
                            <span class="nexdirectory-calendar-modal-time text-xs font-bold px-2 py-1 rounded bg-gray-100 text-gray-600 ml-2 whitespace-nowrap" x-text="event.time"></span>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-500 mt-2">
                            <span class="nexdirectory-calendar-modal-city flex items-center gap-1" x-show="event.city">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                <span x-text="event.city"></span>
                            </span>
                            <span class="nexdirectory-calendar-modal-tag px-2 py-0.5 rounded uppercase text-[10px] font-bold border" :class="getEventColorClass(event.type)" x-text="event.type"></span>
                        </div>
                    </a>
                </template>
            </div>
        </div>
    </div>
</div>

<?php $this->enqueue_local_script_asset('templates-frontend-events-calendar-php-script-2', 'assets/generated/templates-frontend-events-calendar-php-script-2.js'); ?>
