<?php
if (!defined('ABSPATH')) {
    exit;
}

// [PRESERVED DYNAMIC VARIABLES]
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$map_title = sanitize_text_field((string) ($ui_labels['map_title'] ?? __('Map View', 'nexdirectory')));
$map_description = sanitize_text_field((string) ($ui_labels['map_description'] ?? __('Explore events by location with live filters and search-this-area discovery.', 'nexdirectory')));
$map_kicker = sanitize_text_field((string) get_option('eep_event_hero_kicker_text', (string) ($ui_labels['hero_kicker_default'] ?? $this->get_white_label_brand_name())));
if ($map_kicker === '') {
    $map_kicker = $this->get_white_label_brand_name();
}
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$singular_lower = sanitize_text_field((string) ($ui_labels['singular_lower'] ?? strtolower($singular_label)));
$plural_lower = sanitize_text_field((string) ($ui_labels['plural_lower'] ?? strtolower($plural_label)));
$type_label = sanitize_text_field((string) ($ui_labels['taxonomy_type_singular'] ?? __('Event Type', 'nexdirectory')));
$mode_label = sanitize_text_field((string) ($ui_labels['taxonomy_mode_singular'] ?? __('Event Mode', 'nexdirectory')));
$tag_label = sanitize_text_field((string) ($ui_labels['taxonomy_tag_singular'] ?? __('Tag', 'nexdirectory')));
$type_plural = sanitize_text_field((string) ($ui_labels['taxonomy_type_plural'] ?? __('Types', 'nexdirectory')));
$mode_plural = sanitize_text_field((string) ($ui_labels['taxonomy_mode_plural'] ?? __('Modes', 'nexdirectory')));
$tag_plural = sanitize_text_field((string) ($ui_labels['taxonomy_tag_plural'] ?? __('Tags', 'nexdirectory')));
$filter_price_label = sanitize_text_field((string) ($ui_labels['filter_price_label'] ?? __('Price Range', 'nexdirectory')));
$filter_price_all_label = sanitize_text_field((string) ($ui_labels['filter_price_all_label'] ?? __('All Price Ranges', 'nexdirectory')));
$near_me_label = sanitize_text_field((string) ($ui_labels['map_near_me_label'] ?? __('Find Near Me', 'nexdirectory')));
$classification_labels = method_exists($this, 'get_classification_labels') ? (array) $this->get_classification_labels() : [];

$map_page_id = absint((int) get_queried_object_id());
$map_featured_hero = '';
if ($map_page_id > 0 && has_post_thumbnail($map_page_id)) {
    $map_featured_candidate = get_the_post_thumbnail_url($map_page_id, 'full');
    if (is_string($map_featured_candidate) && $map_featured_candidate !== '') {
        $map_featured_hero = esc_url($map_featured_candidate);
    }
}
$map_fallback_hero = esc_url((string) get_option('eep_style_fallback_hero_url', ''));
$map_banner_hero = $map_featured_hero !== '' ? $map_featured_hero : $map_fallback_hero;
$map_banner_has_image = $map_banner_hero !== '';
$hero_img_src = $map_banner_has_image ? $map_banner_hero : 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop';

$layout = sanitize_key((string) $layout);
if ($layout === 'below') {
    $layout = 'below-list';
} elseif ($layout === 'sidebar') {
    $layout = 'three-column';
}
$layout = in_array($layout, ['three-column', 'below-list', 'below-grid', 'below-grid-large', 'grid-no-map', 'grid-no-map-large'], true) ? $layout : 'three-column';
$density = in_array((string) $density, ['comfortable', 'compact'], true) ? (string) $density : 'comfortable';
$show_map = !in_array($layout, ['grid-no-map', 'grid-no-map-large'], true);
$show_results_below_list = $show_list && $layout === 'below-list';
$show_results_below_grid = $show_list && in_array($layout, ['below-grid', 'below-grid-large'], true);
$show_results_column = $show_list && $layout === 'three-column';
$show_results_grid_only = $show_list && in_array($layout, ['grid-no-map', 'grid-no-map-large'], true);
$is_large_grid = in_array($layout, ['below-grid-large', 'grid-no-map-large'], true);
$mobile_filter_mode = sanitize_key((string) ($mobile_filter_mode ?? 'drawer'));
if (!in_array($mobile_filter_mode, ['drawer', 'inline'], true)) {
    $mobile_filter_mode = 'drawer';
}
$mobile_filter_drawer = $mobile_filter_mode === 'drawer';

// URLs for navigation
$home_url = esc_url(home_url('/'));
$events_nav_url = esc_url($this->get_platform_page_url('eep_page_events_url', $this->get_profile_route_slugs('events'), $this->get_profile_route_default_url('events')));
$workspace_nav_url = esc_url($this->get_platform_page_url('eep_page_my_events_url', $this->get_profile_route_slugs('my_items'), $this->get_profile_route_default_url('my_items')));
$submit_nav_url = esc_url($this->get_platform_page_url('eep_page_submit_event_url', $this->get_profile_route_slugs('submit'), $this->get_profile_route_default_url('submit')));
$account_nav_url = esc_url($this->get_platform_page_url('eep_page_account_url', $this->get_profile_route_slugs('account'), $this->get_profile_route_default_url('account')));
$logout_nav_url = esc_url(wp_logout_url($events_nav_url !== '' ? $events_nav_url : $home_url));

// Explicit class for map popup theming (styles are declared below in <style>)
$popup_classes = 'eep-map-popup-theme';
?>


<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: {
                    sans: ['Inter', 'sans-serif'],
                },
                colors: {
                    brand: {
                        50: 'color-mix(in srgb, var(--eep-primary) 8%, #ffffff)',
                        100: 'color-mix(in srgb, var(--eep-primary) 14%, #ffffff)',
                        200: 'color-mix(in srgb, var(--eep-primary) 24%, #ffffff)',
                        300: 'color-mix(in srgb, var(--eep-primary) 36%, #ffffff)',
                        500: 'var(--eep-primary)',
                        600: 'var(--eep-primary-hover)',
                        700: 'color-mix(in srgb, var(--eep-primary-hover) 80%, #000000)',
                        800: 'color-mix(in srgb, var(--eep-primary-hover) 64%, #000000)',
                        900: 'color-mix(in srgb, var(--eep-primary-hover) 48%, #000000)',
                    }
                }
            }
        }
    }
</script>
<style>
    #eep-map-default-wrapper #eep-map-apply,
    #eep-map-default-wrapper #eep-map-filters-apply,
    #eep-map-default-wrapper #eep-map-apply:hover,
    #eep-map-default-wrapper #eep-map-filters-apply:hover,
    #eep-map-default-wrapper #eep-map-apply:focus,
    #eep-map-default-wrapper #eep-map-filters-apply:focus {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    #eep-map-default-wrapper #eep-map-apply *,
    #eep-map-default-wrapper #eep-map-filters-apply * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    #eep-map-default-wrapper .eep-map-sidebar label {
        font-size: 11px !important;
    }
    #eep-map-default-wrapper .eep-map-sidebar :is(input[type="text"], input[type="date"], select, button) {
        font-size: 13px !important;
    }
    #eep-map-default-wrapper #eep-map-apply,
    #eep-map-default-wrapper #eep-map-filters-apply {
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
    #eep-map-default-wrapper #eep-map-use-location,
    #eep-map-default-wrapper #eep-map-search-area {
        font-size: 11px !important;
        font-weight: 600 !important;
    }
    #eep-map-default-wrapper #eep-map-sort {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    @media (min-width: 1024px) {
        #eep-map-default-wrapper [data-eep-map-sidebar-shell="1"] {
            align-self: flex-start;
        }
        #eep-map-default-wrapper .eep-map-content-row {
            overflow: visible !important;
        }
        #eep-map-default-wrapper .eep-map-sidebar {
            position: static !important;
            top: auto !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
        #eep-map-default-wrapper .eep-map-sidebar-scroll {
            min-height: auto;
            max-height: none !important;
            overflow: visible !important;
        }
    }
    .eep-map-popup-theme .leaflet-popup-content-wrapper {
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18) !important;
    }
    .leaflet-popup.eep-map-popup-frame .leaflet-popup-content-wrapper {
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18) !important;
    }
    .eep-map-popup-theme .leaflet-popup-content {
        margin: 0 !important;
        width: min(360px, calc(100vw - 36px)) !important;
        min-width: 260px;
        font-family: Inter, sans-serif;
    }
    .leaflet-popup.eep-map-popup-frame .leaflet-popup-content {
        margin: 0 !important;
        width: min(360px, calc(100vw - 36px)) !important;
        min-width: 260px;
        font-family: Inter, sans-serif;
    }
    .eep-map-popup-theme .leaflet-popup-tip {
        background: #fff;
    }
    .eep-map-popup-theme .leaflet-popup-close-button {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #334155;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
        border: 1px solid rgba(203, 213, 225, 0.8);
        line-height: 26px;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
    }
    .eep-map-popup-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #fff;
    }
    .eep-map-popup-image-link {
        display: block;
        width: 100%;
        margin: 0 !important;
        line-height: 0;
        text-decoration: none;
        background: #e2e8f0;
    }
    .eep-map-popup-image {
        display: block;
        width: 100%;
        height: 170px;
        object-fit: cover;
        margin: 0 !important;
    }
    .eep-map-popup-body {
        padding: 14px 16px 16px !important;
    }
    .eep-map-popup-title {
        margin: 0;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
        color: #0f172a;
    }
    .eep-map-popup-title a {
        color: inherit;
        text-decoration: none;
    }
    .eep-map-popup-title a:hover {
        color: var(--eep-primary-hover);
    }
    .eep-map-popup-meta {
        margin: 10px 0 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }
    .eep-map-popup-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .eep-map-popup-meta-chip {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        font-size: 12px;
        color: #64748b;
    }
    .eep-map-popup-cta {
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        border-radius: 10px;
        border: 1px solid var(--eep-primary);
        background: var(--eep-primary);
        color: var(--eep-on-primary, #fff);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 0 14px;
        transition: background-color .18s ease, border-color .18s ease;
    }
    .eep-map-popup-cta,
    .eep-map-popup-cta:visited,
    .eep-map-popup-cta:active {
        color: #fff !important;
    }
    .eep-map-popup-cta:hover {
        border-color: var(--eep-primary-hover);
        background: var(--eep-primary-hover);
        color: var(--eep-on-primary, #fff) !important;
    }
</style>

<div id="eep-map-default-wrapper" data-eep-alpine-root="1" data-eep-map-template="events-map.php" class="bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 overflow-x-hidden" 
      x-data="{ 
          isMobile: window.innerWidth < 1024,
          view: 'map', 
          filtersOpen: false 
      }" 
      @resize.window="isMobile = window.innerWidth < 1024; if(!isMobile) filtersOpen = false">

    <main class="max-w-7xl mx-auto px-0 lg:px-4 sm:px-6 lg:px-8 py-0 lg:py-8 flex flex-col h-[calc(100vh-64px)] lg:h-auto lg:block relative" data-eep-map-max-events="<?php echo esc_attr((string) $max_events); ?>">
        
        <?php echo $this->render_notice(); ?>

        <div class="hidden lg:block">
            <?php
            echo $this->render_platform_breadcrumbs(
                $map_title,
                $plural_label,
                $events_nav_url !== '' ? $events_nav_url : home_url('/events/')
            ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
            ?>

            <div class="relative rounded-2xl overflow-hidden mb-8 shadow-sm group">
                <img src="<?php echo esc_url($hero_img_src); ?>" alt="<?php echo esc_attr($map_title); ?>" class="w-full h-[300px] lg:h-[400px] object-cover transition-transform duration-700 group-hover:scale-105" <?php echo $map_banner_has_image ? ' data-eep-hero-parallax="1"' : ''; ?>>
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900/95 via-gray-900/70 to-gray-900/20"></div>
                <div class="absolute bottom-0 left-0 right-0 p-8 lg:p-12">
                    <div class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-brand-100 text-xs font-semibold uppercase tracking-wider mb-4 backdrop-blur-sm border border-brand-500/30 eep-page-kicker">
                        <?php echo esc_html($map_kicker); ?>
                    </div>
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight tracking-tight">
                        <?php echo esc_html($map_title); ?>
                    </h1>
                    <p class="text-gray-200 text-lg max-w-2xl mb-8 leading-relaxed">
                        <?php echo esc_html($map_description); ?>
                    </p>
                </div>
            </div>
        </div>

        <div class="lg:hidden flex-none bg-white border-b border-gray-200 px-4 py-3 z-40 shadow-sm relative">
            <div class="flex items-center justify-between">
                <h1 class="text-xl font-bold text-gray-900 tracking-tight"><?php echo esc_html($map_title); ?></h1>
                <div class="flex items-center gap-3">
                    <div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner">
                        <button @click="view = 'list'; setTimeout(() => window.dispatchEvent(new Event('resize')), 50)" 
                                :class="view === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" 
                                class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-all">
                            List
                        </button>
                        <button @click="view = 'map'; setTimeout(() => window.dispatchEvent(new Event('resize')), 50)" 
                                :class="view === 'map' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'" 
                                class="px-4 py-1.5 rounded-lg text-sm font-semibold transition-all">
                            Map
                        </button>
                    </div>
                    <button @click="filtersOpen = true" class="p-2 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-xl text-gray-700 transition-colors relative">
                        <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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                        <span class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span><span class="relative inline-flex rounded-full h-3 w-3 bg-brand-500"></span></span>
                    </button>
                </div>
            </div>
        </div>

        <div class="eep-map-content-row flex flex-col lg:flex-row gap-0 lg:gap-8 items-start w-full flex-1 relative min-h-0 overflow-hidden lg:overflow-visible eep-form">
            
            <?php if ($show_sidebar) : ?>
            <div x-show="!isMobile || filtersOpen"
                 data-eep-map-sidebar-shell="1"
                 style="display: none;"
                 class="eep-map-sticky-shell w-full lg:w-[360px] lg:flex-none lg:self-start lg:sticky lg:top-24"
                 :class="isMobile ? 'fixed inset-0 z-[100] flex flex-col justify-end' : ''">
                
                <div x-show="isMobile && filtersOpen" 
                     x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                     x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                     @click="filtersOpen = false" 
                     class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm lg:hidden"></div>

                <aside x-show="!isMobile || filtersOpen"
                       x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
                       x-transition:leave="transition transform ease-in duration-200" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full"
                       class="relative bg-white w-full lg:w-auto rounded-t-3xl lg:rounded-2xl shadow-2xl lg:shadow-sm border-t lg:border border-gray-100 flex flex-col max-h-[90vh] lg:h-auto lg:max-h-none overflow-hidden lg:overflow-visible eep-sidebar eep-map-sidebar">
                    
                    <div class="border-b border-gray-100 px-6 py-5 bg-gray-50/50 flex items-center justify-between rounded-t-3xl lg:rounded-t-2xl">
                        <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                            <?php esc_html_e('Filters', 'nexdirectory'); ?>
                        </h2>
                        <button type="button" x-show="!isMobile" class="text-xs font-semibold text-gray-400 hover:text-brand-500 transition-colors uppercase tracking-wider eep-map-reset-inline" id="eep-map-reset-head"><?php esc_html_e('Reset', 'nexdirectory'); ?></button>
                        <button type="button" x-show="isMobile" @click="filtersOpen = false" class="p-2 bg-gray-200 hover:bg-gray-300 rounded-full text-gray-600 transition-colors">
                            <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-6 space-y-5 overflow-y-auto lg:overflow-visible pb-24 lg:pb-6 no-scrollbar eep-map-sidebar-scroll">
                        <?php if ($show_search) : ?>
                        <div>
                            <div class="relative group">
                                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none transition-colors group-focus-within:text-brand-500">
                                    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                </div>
                                <input id="eep-map-search" type="text" aria-label="<?php esc_attr_e('Search by location or title', 'nexdirectory'); ?>" placeholder="<?php esc_attr_e('Keywords...', 'nexdirectory'); ?>" class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all placeholder-gray-400 text-gray-800">
                            </div>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_type) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($type_label); ?></label>
                            <select id="eep-map-type" aria-label="<?php echo esc_attr(sprintf(__('Filter by %s', 'nexdirectory'), $type_label)); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $type_plural)); ?></option>
                                <?php foreach (get_terms(['taxonomy' => $this::TAX_TYPE, 'hide_empty' => true]) as $term) : ?>
                                    <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_mode) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($mode_label); ?></label>
                            <select id="eep-map-mode" aria-label="<?php echo esc_attr(sprintf(__('Filter by %s', 'nexdirectory'), $mode_label)); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $mode_plural)); ?></option>
                                <?php foreach (get_terms(['taxonomy' => $this::TAX_MODE, 'hide_empty' => true]) as $term) : ?>
                                    <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_tag) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($tag_label); ?></label>
                            <select id="eep-map-tag" aria-label="<?php echo esc_attr(sprintf(__('Filter by %s', 'nexdirectory'), $tag_label)); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $tag_plural)); ?></option>
                                <?php foreach (get_terms(['taxonomy' => $this::TAX_TAG, 'hide_empty' => true]) as $term) : ?>
                                    <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_price) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php echo esc_html($filter_price_label); ?></label>
                            <select id="eep-map-price" aria-label="<?php echo esc_attr(sprintf(__('Filter by %s', 'nexdirectory'), $filter_price_label)); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php echo esc_html($filter_price_all_label); ?></option>
                                <?php foreach (get_terms(['taxonomy' => $this::TAX_PRICE, 'hide_empty' => true]) as $term) : ?>
                                    <option value="<?php echo esc_attr((string) $term->slug); ?>"><?php echo esc_html($term->name); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_official) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Classification', 'nexdirectory'); ?></label>
                            <select id="eep-map-official" aria-label="<?php echo esc_attr(sprintf(__('Filter official %s', 'nexdirectory'), $plural_lower)); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $plural_label)); ?></option>
                                <option value="1"><?php echo esc_html((string) ($classification_labels['official'] ?? __('Official', 'nexdirectory'))); ?></option>
                                <option value="0"><?php echo esc_html((string) ($classification_labels['unofficial'] ?? __('Unofficial', 'nexdirectory'))); ?></option>
                            </select>
                        </div>
                        <?php endif; ?>

                        <?php if ($show_date) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Date', 'nexdirectory'); ?></label>
                            <input id="eep-map-date" type="date" aria-label="<?php esc_attr_e('Filter by date', 'nexdirectory'); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all">
                        </div>
                        <?php endif; ?>

                        <?php if ($show_distance) : ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-2"><?php esc_html_e('Radius', 'nexdirectory'); ?></label>
                            <select id="eep-map-distance" aria-label="<?php esc_attr_e('Filter by distance', 'nexdirectory'); ?>" class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 appearance-none focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all cursor-pointer">
                                <option value=""><?php esc_html_e('Any Distance', 'nexdirectory'); ?></option>
                                <option value="10"><?php esc_html_e('Within 10 km', 'nexdirectory'); ?></option>
                                <option value="25"><?php esc_html_e('Within 25 km', 'nexdirectory'); ?></option>
                                <option value="50"><?php esc_html_e('Within 50 km', 'nexdirectory'); ?></option>
                                <option value="100"><?php esc_html_e('Within 100 km', 'nexdirectory'); ?></option>
                            </select>
                        </div>
                        <?php endif; ?>
                        
                        <div class="pt-4 space-y-3 border-t border-gray-100 hidden lg:block">
                            <button type="button" id="eep-map-apply" class="w-full py-3 bg-brand-500 hover:bg-brand-600 text-white font-medium rounded-xl shadow-sm transition-colors flex justify-center items-center gap-2">
                                <?php esc_html_e('Apply Filters', 'nexdirectory'); ?>
                            </button>
                            
                            <div class="grid grid-cols-2 gap-3">
                                <button type="button" id="eep-map-use-location" class="flex items-center justify-center gap-1.5 py-2 px-2.5 bg-gray-50 border border-gray-200 text-gray-700 font-semibold rounded-xl text-xs hover:bg-gray-100 transition-colors leading-none">
                                    <svg class="w-3.5 h-3.5 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                    <?php echo esc_html($near_me_label); ?>
                                </button>
                                
                                <?php if ($show_map) : ?>
                                <button type="button" id="eep-map-search-area" class="flex items-center justify-center gap-1.5 py-2 px-2.5 bg-gray-50 border border-gray-200 text-gray-700 font-semibold rounded-xl text-xs hover:bg-gray-100 transition-colors leading-none">
                                    <svg class="w-3.5 h-3.5 text-gray-400 group-hover:text-brand-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                    <?php esc_html_e('This Area', 'nexdirectory'); ?>
                                </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div x-show="isMobile" class="p-4 border-t border-gray-100 bg-white absolute bottom-0 left-0 right-0 z-10 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]">
                        <button type="button" @click="filtersOpen = false" id="eep-map-filters-apply" class="w-full py-3.5 bg-brand-500 active:bg-brand-600 text-white font-semibold rounded-xl shadow-md transition-colors text-lg tracking-wide">
                            <?php esc_html_e('Apply & View Results', 'nexdirectory'); ?>
                        </button>
                    </div>
                </aside>
            </div>
            <?php endif; ?>

            <div class="flex-1 w-full flex flex-col gap-0 lg:gap-8 min-w-0 h-full relative" >
                
                <p class="sr-only" id="eep-map-help"><?php esc_html_e('Map keyboard controls: arrow keys pan, plus/minus zoom, Home resets view. In list-only mode, filters still update results dynamically.', 'nexdirectory'); ?></p>
                
                <?php if ($show_map) : ?>
                <section x-show="!isMobile || view === 'map'" 
                         :class="isMobile ? 'absolute inset-0 z-10' : 'bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col'" 
                         class="w-full h-full">
                    <div x-show="!isMobile" class="border-b border-gray-100 px-6 py-5 bg-gray-50/50">
                        <h2 class="text-xl font-bold text-gray-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path></svg>
                            <?php esc_html_e('Interactive Map', 'nexdirectory'); ?>
                        </h2>
                    </div>
                    <div :class="isMobile ? 'h-full w-full' : 'p-2 bg-gray-50 flex-1'" class="relative z-10 <?php echo $popup_classes; ?>">
                        <div id="eep-events-map" role="region" tabindex="0" aria-label="<?php echo esc_attr(sprintf(__('%s locations map', 'nexdirectory'), $plural_label)); ?>" aria-describedby="eep-map-help" :class="isMobile ? 'h-full w-full shadow-inner' : 'h-[450px] w-full rounded-xl border border-gray-200'" class="z-0"></div>
                    </div>
                </section>
                <?php endif; ?>

                <div x-show="isMobile && view === 'map'"
                     x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-y-12 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
                     x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-end="translate-y-12 opacity-0"
                     style="display: none;"
                     class="absolute bottom-6 left-0 right-0 z-20 pointer-events-none">
                     
                    <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 px-4 pb-2 no-scrollbar pointer-events-auto" id="eep-mobile-slider-container" aria-live="polite">
                    </div>
                </div>

                <section x-show="!isMobile || view === 'list'" 
                         :class="isMobile ? 'h-full overflow-y-auto bg-gray-50 pb-6' : 'bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col'" 
                         class="w-full relative z-20
                    [&_#eep-map-list]:grid [&_#eep-map-list]:grid-cols-1 md:[&_#eep-map-list]:grid-cols-2 xl:[&_#eep-map-list]:grid-cols-3 [&_#eep-map-list]:gap-4 lg:[&_#eep-map-list]:gap-6
                    
                    [&_#eep-map-list>article]:flex [&_#eep-map-list>article]:flex-col [&_#eep-map-list>article]:h-full [&_#eep-map-list>article]:bg-white [&_#eep-map-list>article]:rounded-2xl [&_#eep-map-list>article]:border [&_#eep-map-list>article]:border-gray-200 [&_#eep-map-list>article]:overflow-hidden [&_#eep-map-list>article]:transition-all [&_#eep-map-list>article]:duration-300 hover:[&_#eep-map-list>article]:shadow-lg hover:[&_#eep-map-list>article]:border-brand-300 [&_#eep-map-list>article]:group
                    [&_#eep-map-list>div]:flex [&_#eep-map-list>div]:flex-col [&_#eep-map-list>div]:h-full [&_#eep-map-list>div]:bg-white [&_#eep-map-list>div]:rounded-2xl [&_#eep-map-list>div]:border [&_#eep-map-list>div]:border-gray-200 [&_#eep-map-list>div]:overflow-hidden [&_#eep-map-list>div]:transition-all [&_#eep-map-list>div]:duration-300 hover:[&_#eep-map-list>div]:shadow-lg hover:[&_#eep-map-list>div]:border-brand-300 [&_#eep-map-list>div]:group
                    
                    [&_.eep-card-img-wrap]:relative [&_.eep-card-img-wrap]:h-48 [&_.eep-card-img-wrap]:overflow-hidden [&_.eep-card-img-wrap]:bg-gray-100
                    [&_img.eep-card-img]:w-full [&_img.eep-card-img]:h-full [&_img.eep-card-img]:object-cover [&_img.eep-card-img]:transition-transform [&_img.eep-card-img]:duration-700 hover:[&_#eep-map-list>article]_img.eep-card-img:scale-105 hover:[&_#eep-map-list>div]_img.eep-card-img:scale-105
                    
                    [&_.eep-card-body]:flex [&_.eep-card-body]:flex-col [&_.eep-card-body]:grow [&_.eep-card-body]:p-6
                    [&_.eep-event-content]:flex [&_.eep-event-content]:flex-col [&_.eep-event-content]:grow [&_.eep-event-content]:p-6
                    
                    [&_.eep-card-body_h3]:font-bold [&_.eep-card-body_h3]:text-gray-900 [&_.eep-card-body_h3]:text-lg [&_.eep-card-body_h3]:leading-tight [&_.eep-card-body_h3]:mb-3 [&_.eep-card-body_h3]:line-clamp-2 [&_.eep-card-body_h3]:transition-colors hover:[&_#eep-map-list>article]_.eep-card-body_h3:text-brand-600 hover:[&_#eep-map-list>div]_.eep-card-body_h3:text-brand-600
                    [&_.eep-card-body_p]:text-sm [&_.eep-card-body_p]:text-gray-500 [&_.eep-card-body_p]:mb-2 [&_.eep-card-body_p]:flex [&_.eep-card-body_p]:items-center
                    
                    [&_.eep-card-footer]:mt-auto [&_.eep-card-footer]:w-full [&_.eep-card-footer]:pt-5 [&_.eep-button-wrap]:mt-auto [&_.eep-button-wrap]:w-full [&_.eep-button-wrap]:pt-5
                    
                    [&_a.eep-btn]:inline-flex [&_a.eep-btn]:items-center [&_a.eep-btn]:justify-center [&_a.eep-btn]:py-2.5 [&_a.eep-btn]:px-4 [&_a.eep-btn]:bg-gray-50 hover:[&_a.eep-btn]:bg-brand-50 [&_a.eep-btn]:border [&_a.eep-btn]:border-gray-200 hover:[&_a.eep-btn]:border-brand-200 [&_a.eep-btn]:text-gray-800 hover:[&_a.eep-btn]:text-brand-700 [&_a.eep-btn]:font-medium [&_a.eep-btn]:rounded-xl [&_a.eep-btn]:transition-colors [&_a.eep-btn]:text-sm [&_a.eep-btn]:w-full
                ">
                    
                    <div class="border-b border-gray-100 px-4 lg:px-6 py-4 lg:py-5 bg-white lg:bg-gray-50/50 flex flex-col sm:flex-row sm:items-center justify-between gap-4 sticky top-0 z-30 shadow-sm lg:shadow-none">
                        <h2 class="text-lg lg:text-xl font-bold text-gray-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                            <span><span id="eep-map-results-count"></span> <?php esc_html_e('Results Found', 'nexdirectory'); ?></span>
                        </h2>
                        
                        <div>
                            <select id="eep-map-sort" aria-label="<?php esc_attr_e('Sort Results', 'nexdirectory'); ?>" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500/20 cursor-pointer shadow-sm w-full sm:w-auto">
                                <option value="nearest"><?php esc_html_e('Sort by: Nearest First', 'nexdirectory'); ?></option>
                                <option value="date_desc"><?php esc_html_e('Sort by: Date (Newest)', 'nexdirectory'); ?></option>
                                <option value="title_asc"><?php esc_html_e('Sort by: Name (A-Z)', 'nexdirectory'); ?></option>
                            </select>
                        </div>
                    </div>

                    <div class="p-4 lg:p-6 bg-gray-50/30 flex-1">
                        <div id="eep-map-list" class="w-full" aria-live="polite"></div>
                    </div>

                </section>

            </div>
        </div>
    </main>

</div>
