<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
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) $this->get_event_hero_kicker_text());
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')));
$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('nexdirectory_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 : plugins_url('assets/images/placeholder-hero.svg', NEXDIRECTORY_PLUGIN_FILE);

$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);
$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';

$map_type_terms = [];
if (!empty($show_type)) {
    $map_type_term_query = get_terms([
        'taxonomy' => $this::TAX_TYPE,
        'hide_empty' => true,
        'orderby' => 'name',
        'order' => 'ASC',
    ]);
    if (!is_wp_error($map_type_term_query) && is_array($map_type_term_query)) {
        $map_type_terms = array_values(array_filter($map_type_term_query, static function ($term) {
            return $term instanceof WP_Term;
        }));
    }
}

$map_popular_terms = $map_type_terms;
usort($map_popular_terms, static function ($left, $right) {
    $count_compare = (int) ($right->count ?? 0) <=> (int) ($left->count ?? 0);
    if ($count_compare !== 0) {
        return $count_compare;
    }
    return strcasecmp((string) ($left->name ?? ''), (string) ($right->name ?? ''));
});
$map_popular_categories = [];
foreach (array_slice($map_popular_terms, 0, 6) as $map_popular_term) {
    $map_popular_slug = sanitize_key((string) $map_popular_term->slug);
    $map_popular_name = sanitize_text_field((string) $map_popular_term->name);
    if ($map_popular_slug === '' || $map_popular_name === '') {
        continue;
    }
    $map_popular_categories[] = [
        'slug' => $map_popular_slug,
        'name' => $map_popular_name,
    ];
}

$map_recovery_config = [
    'title' => __('Nothing matches in this map area yet', 'nexdirectory'),
    'description' => __('Remove a filter, widen the map, or look near your current location to discover more.', 'nexdirectory'),
    'removeHeading' => __('Try removing a filter', 'nexdirectory'),
    'removeLabel' => __('Remove filter', 'nexdirectory'),
    'alternativesHeading' => __('Try another approach', 'nexdirectory'),
    'widerArea' => __('Search a wider area', 'nexdirectory'),
    'nearMe' => __('Find near me instead', 'nexdirectory'),
    'clearAll' => __('Reset and show all', 'nexdirectory'),
    'popularHeading' => __('Popular categories', 'nexdirectory'),
    'browseLabel' => __('Browse', 'nexdirectory'),
    /* translators: %s: Plural directory content label, such as events or listings. */
    'resultsLabel' => sprintf(__('%s map results', 'nexdirectory'), $plural_label),
    'filterLabels' => [
        's' => __('Search', 'nexdirectory'),
        'type' => $type_label,
        'mode' => $mode_label,
        'tag' => $tag_label,
        'price' => $filter_price_label,
        'official' => __('Classification', 'nexdirectory'),
        'dateFrom' => __('Date', 'nexdirectory'),
        'distanceKm' => __('Radius', 'nexdirectory'),
    ],
    'popularCategories' => $map_popular_categories,
];

// URLs for navigation
$home_url = esc_url(home_url('/'));
$events_nav_url = esc_url($this->get_platform_page_url('nexdirectory_page_events_url', $this->get_profile_route_slugs('events'), $this->get_profile_route_default_url('events')));

// Explicit class for map popup theming.
$popup_classes = 'nexdirectory-map-popup-theme';
?>


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

<div id="nexdirectory-map-default-wrapper"
      data-nexdirectory-alpine-root="1"
      data-nexdirectory-map-template="events-map.php"
      data-nexdirectory-map-layout="<?php echo esc_attr($layout); ?>"
      data-nexdirectory-map-density="<?php echo esc_attr($density); ?>"
      data-nexdirectory-mobile-filter-mode="<?php echo esc_attr($mobile_filter_mode); ?>"
      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: '<?php echo $show_map ? 'map' : 'list'; ?>',
          filtersOpen: false,
          drawerMode: <?php echo $mobile_filter_drawer ? 'true' : 'false'; ?>
      }" 
      @resize.window="isMobile = window.innerWidth < 1024; if(!isMobile) filtersOpen = false"
      @nexdirectory-map-filters-close.window="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-nexdirectory-map-layout="1"
          data-nexdirectory-mobile-filter-mode="<?php echo esc_attr($mobile_filter_mode); ?>"
          data-nexdirectory-map-max-events="<?php echo esc_attr((string) $max_events); ?>">
        
        <?php echo wp_kses_post($this->render_notice()); ?>

        <div class="hidden lg:block">
            <?php
            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Breadcrumb markup is sanitized by esc_nexdirectory_plugin_markup() against the plugin-owned allow-list.
            echo esc_nexdirectory_plugin_markup((string) $this->render_platform_breadcrumbs(
                $map_title,
                $plural_label,
                $events_nav_url !== '' ? $events_nav_url : esc_url(home_url('/events/'))
            ));
            ?>

            <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-nexdirectory-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 nexdirectory-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">
                <p class="text-xl font-bold text-gray-900 tracking-tight"><?php echo esc_html($map_title); ?></p>
                <div class="flex items-center gap-3">
                    <div class="bg-gray-100 p-1 rounded-xl flex items-center shadow-inner">
                        <?php if ($show_list) : ?>
                        <button type="button"
                                @click="view = 'list'; setTimeout(() => window.dispatchEvent(new Event('resize')), 50)"
                                aria-label="<?php esc_attr_e('Show results as a list', 'nexdirectory'); ?>"
                                :aria-pressed="view === 'list'"
                                :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">
                            <?php esc_html_e('List', 'nexdirectory'); ?>
                        </button>
                        <?php endif; ?>
                        <?php if ($show_map) : ?>
                        <button type="button"
                                @click="view = 'map'; setTimeout(() => window.dispatchEvent(new Event('resize')), 50)"
                                aria-label="<?php esc_attr_e('Show results on the map', 'nexdirectory'); ?>"
                                :aria-pressed="view === 'map'"
                                :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">
                            <?php esc_html_e('Map', 'nexdirectory'); ?>
                        </button>
                        <?php endif; ?>
                    </div>
                    <?php if ($show_sidebar && $mobile_filter_drawer) : ?>
                    <button type="button" id="nexdirectory-map-filters-open" @click="filtersOpen = true" aria-label="<?php esc_attr_e('Open filters', 'nexdirectory'); ?>" aria-controls="nexdirectory-map-sidebar-panel" :aria-expanded="filtersOpen" 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>
                    </button>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="nexdirectory-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 nexdirectory-form">
            
            <?php if ($show_sidebar) : ?>
            <div x-show="!isMobile || !drawerMode || filtersOpen"
                 data-nexdirectory-map-sidebar-shell="1"
                 <?php echo $mobile_filter_drawer ? 'style="display: none;"' : ''; ?>
                 class="nexdirectory-map-sticky-shell w-full lg:w-[360px] lg:flex-none lg:self-start lg:sticky lg:top-24"
                 :class="isMobile && drawerMode ? 'fixed inset-0 z-[100] flex flex-col justify-end' : ''">
                
                <?php if ($mobile_filter_drawer) : ?>
                <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" 
                     id="nexdirectory-map-sidebar-backdrop"
                     class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm lg:hidden"></div>
                <?php endif; ?>

                <aside x-show="!isMobile || !drawerMode || filtersOpen"
                       id="nexdirectory-map-sidebar-panel"
                       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 nexdirectory-sidebar nexdirectory-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 nexdirectory-map-reset-inline" id="nexdirectory-map-reset-head"><?php esc_html_e('Reset', 'nexdirectory'); ?></button>
                        <?php if ($mobile_filter_drawer) : ?>
                        <button type="button" id="nexdirectory-map-filters-close" x-show="isMobile" @click="filtersOpen = false" aria-label="<?php esc_attr_e('Close filters', 'nexdirectory'); ?>" 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>
                        <?php endif; ?>
                    </div>

                    <div class="p-6 space-y-5 overflow-y-auto lg:overflow-visible pb-24 lg:pb-6 no-scrollbar nexdirectory-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="nexdirectory-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>
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <select id="nexdirectory-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">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <option value=""><?php echo esc_html(sprintf(__('All %s', 'nexdirectory'), $type_plural)); ?></option>
                                <?php foreach ($map_type_terms 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>
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <select id="nexdirectory-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">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <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>
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <select id="nexdirectory-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">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <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>
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <select id="nexdirectory-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>
                            <?php /* translators: %s: Placeholder value. */ ?>
                            <select id="nexdirectory-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">
                                <?php /* translators: %s: Placeholder value. */ ?>
                                <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="nexdirectory-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="nexdirectory-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; ?>

                        <?php
                        $nexdirectory_checkin_controls = NEXDIRECTORY_Escaping::prepare_markup_for_wp_kses((string) $this->render_builder_checkin_filter_controls('map', 'events-map-default'));
                        echo wp_kses($nexdirectory_checkin_controls, NEXDIRECTORY_Escaping::allowed_html($nexdirectory_checkin_controls));
                        ?>
                        
                        <div class="pt-4 space-y-3 border-t border-gray-100 hidden lg:block">
                            <button type="button" id="nexdirectory-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="nexdirectory-map-use-location" class="group 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>
                                    <span data-nexdirectory-map-location-label><?php echo esc_html($near_me_label); ?></span>
                                </button>
                                
                                <?php if ($show_map) : ?>
                                <button type="button" id="nexdirectory-map-search-area" class="group 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>
                    
                    <?php if ($mobile_filter_drawer) : ?>
                    <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="nexdirectory-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>
                    <?php endif; ?>
                </aside>
            </div>
            <?php endif; ?>

            <div class="nexdirectory-map-results-shell flex-1 w-full flex flex-col gap-0 lg:gap-8 min-w-0 h-full relative" >
                
                <p class="sr-only" id="nexdirectory-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 esc_attr($popup_classes); ?>">
                        <?php /* translators: %s: Placeholder value. */ ?>
                        <div id="nexdirectory-events-map" role="region" tabindex="0" aria-label="<?php echo esc_attr(sprintf(__('%s locations map', 'nexdirectory'), $plural_label)); ?>" aria-describedby="nexdirectory-map-help" :style="isMobile ? 'height:100%;width:100%' : 'height:<?php echo esc_attr((string) $map_height); ?>px;width:100%'" :class="isMobile ? 'shadow-inner' : '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="nexdirectory-mobile-slider-container" aria-live="polite">
                    </div>
                </div>

                <?php if ($show_list) : ?>
                <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="nexdirectory-map-results-section w-full relative z-20
                    [&_#nexdirectory-map-list]:grid [&_#nexdirectory-map-list]:grid-cols-1 md:[&_#nexdirectory-map-list]:grid-cols-2 xl:[&_#nexdirectory-map-list]:grid-cols-3 [&_#nexdirectory-map-list]:gap-4 lg:[&_#nexdirectory-map-list]:gap-6
                    
                    [&_#nexdirectory-map-list>article]:flex [&_#nexdirectory-map-list>article]:flex-col [&_#nexdirectory-map-list>article]:h-full [&_#nexdirectory-map-list>article]:bg-white [&_#nexdirectory-map-list>article]:rounded-2xl [&_#nexdirectory-map-list>article]:border [&_#nexdirectory-map-list>article]:border-gray-200 [&_#nexdirectory-map-list>article]:overflow-hidden [&_#nexdirectory-map-list>article]:transition-all [&_#nexdirectory-map-list>article]:duration-300 hover:[&_#nexdirectory-map-list>article]:shadow-lg hover:[&_#nexdirectory-map-list>article]:border-brand-300 [&_#nexdirectory-map-list>article]:group
                    [&_#nexdirectory-map-list>div]:flex [&_#nexdirectory-map-list>div]:flex-col [&_#nexdirectory-map-list>div]:h-full [&_#nexdirectory-map-list>div]:bg-white [&_#nexdirectory-map-list>div]:rounded-2xl [&_#nexdirectory-map-list>div]:border [&_#nexdirectory-map-list>div]:border-gray-200 [&_#nexdirectory-map-list>div]:overflow-hidden [&_#nexdirectory-map-list>div]:transition-all [&_#nexdirectory-map-list>div]:duration-300 hover:[&_#nexdirectory-map-list>div]:shadow-lg hover:[&_#nexdirectory-map-list>div]:border-brand-300 [&_#nexdirectory-map-list>div]:group
                    
                    [&_.nexdirectory-card-img-wrap]:relative [&_.nexdirectory-card-img-wrap]:h-48 [&_.nexdirectory-card-img-wrap]:overflow-hidden [&_.nexdirectory-card-img-wrap]:bg-gray-100
                    [&_img.nexdirectory-card-img]:w-full [&_img.nexdirectory-card-img]:h-full [&_img.nexdirectory-card-img]:object-cover [&_img.nexdirectory-card-img]:transition-transform [&_img.nexdirectory-card-img]:duration-700
                    
                    [&_.nexdirectory-card-body]:flex [&_.nexdirectory-card-body]:flex-col [&_.nexdirectory-card-body]:grow [&_.nexdirectory-card-body]:p-6
                    [&_.nexdirectory-event-content]:flex [&_.nexdirectory-event-content]:flex-col [&_.nexdirectory-event-content]:grow [&_.nexdirectory-event-content]:p-6
                    
                    [&_.nexdirectory-card-body_h3]:font-bold [&_.nexdirectory-card-body_h3]:text-gray-900 [&_.nexdirectory-card-body_h3]:text-lg [&_.nexdirectory-card-body_h3]:leading-tight [&_.nexdirectory-card-body_h3]:mb-3 [&_.nexdirectory-card-body_h3]:line-clamp-2 [&_.nexdirectory-card-body_h3]:transition-colors
                    [&_.nexdirectory-card-body_p]:text-sm [&_.nexdirectory-card-body_p]:text-gray-500 [&_.nexdirectory-card-body_p]:mb-2 [&_.nexdirectory-card-body_p]:flex [&_.nexdirectory-card-body_p]:items-center
                    
                    [&_.nexdirectory-card-footer]:mt-auto [&_.nexdirectory-card-footer]:w-full [&_.nexdirectory-card-footer]:pt-5 [&_.nexdirectory-button-wrap]:mt-auto [&_.nexdirectory-button-wrap]:w-full [&_.nexdirectory-button-wrap]:pt-5
                    
                    [&_a.nexdirectory-btn]:inline-flex [&_a.nexdirectory-btn]:items-center [&_a.nexdirectory-btn]:justify-center [&_a.nexdirectory-btn]:py-2.5 [&_a.nexdirectory-btn]:px-4 [&_a.nexdirectory-btn]:bg-gray-50 hover:[&_a.nexdirectory-btn]:bg-brand-50 [&_a.nexdirectory-btn]:border [&_a.nexdirectory-btn]:border-gray-200 hover:[&_a.nexdirectory-btn]:border-brand-200 [&_a.nexdirectory-btn]:text-gray-800 hover:[&_a.nexdirectory-btn]:text-brand-700 [&_a.nexdirectory-btn]:font-medium [&_a.nexdirectory-btn]:rounded-xl [&_a.nexdirectory-btn]:transition-colors [&_a.nexdirectory-btn]:text-sm [&_a.nexdirectory-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 id="nexdirectory-map-results-count"
	                                  data-singular="<?php echo esc_attr($singular_label); ?>"
	                                  data-plural="<?php echo esc_attr($plural_label); ?>"
	                                  aria-live="polite">
	                                <?php /* translators: %s: Plural directory content label, such as events or listings. */ ?>
	                                <?php echo esc_html(sprintf(__('0 %s found', 'nexdirectory'), $plural_lower)); ?>
	                            </span>
                        </h2>
                        
                        <div>
                            <select id="nexdirectory-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="nexdirectory-map-list"
                             class="w-full"
                             data-nexdirectory-recovery="<?php echo esc_attr((string) wp_json_encode($map_recovery_config)); ?>"
                             aria-label="<?php echo esc_attr((string) $map_recovery_config['resultsLabel']); ?>"
                             aria-live="polite"
                             tabindex="-1"></div>
                    </div>

                </section>
                <?php endif; ?>

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

</div>
