<?php
/**
 * 地图模块 - 支持多种地图源
 * 默认使用 OpenStreetMap（免费无需API Key）
 * 可切换到高德地图
 */
$pageTitle = '地图导航';
require_once 'header.php';

// Leaflet CSS - 必须在 header.php 之后加载
echo '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />';

// 高德地图API Key配置
$amapKey = '0a0805f61c0b35cea567cd652ed6824f';

// 预设地点（婚礼相关热门地点）
$presetLocations = [
    ['name' => '阳泉北火车站', 'address' => '山西省阳泉市郊区', 'lat' => 37.956, 'lng' => 113.583, 'type' => 'station'],
    ['name' => '阳泉火车站', 'address' => '山西省阳泉市城区德胜东街', 'lat' => 37.857, 'lng' => 113.583, 'type' => 'station'],
    ['name' => '阳泉汽车客运总站', 'address' => '山西省阳泉市城区南大街', 'lat' => 37.847, 'lng' => 113.571, 'type' => 'station'],
    ['name' => '阳泉沃尔玛', 'address' => '山西省阳泉市城区桃北中路', 'lat' => 37.861, 'lng' => 113.569, 'type' => 'shopping'],
    ['name' => '阳泉万达广场', 'address' => '山西省阳泉市城区', 'lat' => 37.855, 'lng' => 113.580, 'type' => 'shopping'],
];
?>

<main class="site-main">
    <!-- 页面Banner -->
    <section class="page-banner map-banner">
        <div class="container">
            <h1><i class="fas fa-map-marked-alt"></i> 地图导航</h1>
            <p>查找婚礼场地、酒店、交通站点，一键导航直达目的地</p>
        </div>
    </section>

    <!-- 地图主区域 -->
    <section class="map-section">
        <div class="container-fluid">
            <div class="map-wrapper">
                <!-- 左侧控制面板 -->
                <div class="map-sidebar">
                    <!-- 地图源切换 -->
                    <div class="map-control-card">
                        <h3><i class="fas fa-layer-group"></i> 地图源</h3>
                        <div class="map-source-switch">
                            <label class="map-source-option">
                                <input type="radio" name="mapSource" value="amap" checked>
                                <span class="map-source-label">
                                    <span class="source-name">高德地图</span>
                                    <span class="source-tag">国内优化</span>
                                </span>
                            </label>
                            <label class="map-source-option">
                                <input type="radio" name="mapSource" value="geoq">
                                <span class="map-source-label">
                                    <span class="source-name">GeoQ地图</span>
                                    <span class="source-tag free">免费</span>
                                </span>
                            </label>
                            <label class="map-source-option">
                                <input type="radio" name="mapSource" value="esri">
                                <span class="map-source-label">
                                    <span class="source-name">Esri地图</span>
                                    <span class="source-tag free">免费</span>
                                </span>
                            </label>
                            <label class="map-source-option">
                                <input type="radio" name="mapSource" value="osm">
                                <span class="map-source-label">
                                    <span class="source-name">OpenStreetMap</span>
                                    <span class="source-tag free">免费</span>
                                </span>
                            </label>
                            <label class="map-source-option">
                                <input type="radio" name="mapSource" value="amapSatellite">
                                <span class="map-source-label">
                                    <span class="source-name">高德卫星</span>
                                    <span class="source-tag">卫星图</span>
                                </span>
                            </label>
                        </div>
                    </div>

                    <!-- 搜索框 -->
                    <div class="map-control-card">
                        <h3><i class="fas fa-search"></i> 搜索地点</h3>
                        <div class="search-input-group">
                            <input type="text" id="mapSearchInput" placeholder="输入地点名称或地址...">
                            <button id="mapSearchBtn" class="btn-search">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <div id="searchResults" class="search-results"></div>
                    </div>

                    <!-- 当前位置 -->
                    <div class="map-control-card">
                        <h3><i class="fas fa-location-arrow"></i> 我的位置</h3>
                        <button id="locateBtn" class="btn-locate">
                            <i class="fas fa-crosshairs"></i> 定位当前位置
                        </button>
                        <div id="currentLocation" class="current-location-info"></div>
                    </div>

                    <!-- 预设地点 -->
                    <div class="map-control-card">
                        <h3><i class="fas fa-star"></i> 热门地点</h3>
                        <div class="preset-locations">
                            <?php foreach ($presetLocations as $loc): ?>
                            <div class="preset-item" data-lat="<?php echo $loc['lat']; ?>" data-lng="<?php echo $loc['lng']; ?>" data-name="<?php echo htmlspecialchars($loc['name']); ?>">
                                <i class="fas fa-map-marker-alt"></i>
                                <div class="preset-info">
                                    <span class="preset-name"><?php echo htmlspecialchars($loc['name']); ?></span>
                                    <span class="preset-address"><?php echo htmlspecialchars($loc['address']); ?></span>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <!-- 标记点列表 -->
                    <div class="map-control-card">
                        <h3><i class="fas fa-bookmark"></i> 我的标记</h3>
                        <div id="markerList" class="marker-list">
                            <p class="empty-tip">点击地图添加标记点</p>
                        </div>
                        <button id="clearMarkersBtn" class="btn-clear" style="display:none;">
                            <i class="fas fa-trash"></i> 清除所有标记
                        </button>
                    </div>
                </div>

                <!-- 地图容器 -->
                <div class="map-container">
                    <div id="map"></div>
                    
                    <!-- 地图工具栏 -->
                    <div class="map-toolbar">
                        <button id="zoomInBtn" class="toolbar-btn" title="放大">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button id="zoomOutBtn" class="toolbar-btn" title="缩小">
                            <i class="fas fa-minus"></i>
                        </button>
                        <button id="resetViewBtn" class="toolbar-btn" title="重置视图">
                            <i class="fas fa-home"></i>
                        </button>
                        <button id="fullscreenBtn" class="toolbar-btn" title="全屏">
                            <i class="fas fa-expand"></i>
                        </button>
                    </div>

                    <!-- 地图信息 -->
                    <div class="map-info">
                        <span id="mapCenter">中心: --</span>
                        <span id="mapZoom">缩放: --</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 地点详情弹窗 -->
    <div id="locationModal" class="modal">
        <div class="modal-content">
            <span class="modal-close">&times;</span>
            <h2 id="modalTitle">地点详情</h2>
            <div class="modal-body">
                <div class="detail-row">
                    <label><i class="fas fa-map-marker-alt"></i> 名称</label>
                    <span id="modalName">-</span>
                </div>
                <div class="detail-row">
                    <label><i class="fas fa-map"></i> 地址</label>
                    <span id="modalAddress">-</span>
                </div>
                <div class="detail-row">
                    <label><i class="fas fa-globe"></i> 坐标</label>
                    <span id="modalCoords">-</span>
                </div>
                <div class="modal-actions">
                    <button id="navigateBtn" class="btn-navigate">
                        <i class="fas fa-directions"></i> 开始导航
                    </button>
                    <button id="saveMarkerBtn" class="btn-save">
                        <i class="fas fa-bookmark"></i> 保存标记
                    </button>
                    <button id="shareLocationBtn" class="btn-share">
                        <i class="fas fa-share-alt"></i> 分享位置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航选择弹窗 -->
    <div id="navigateModal" class="modal">
        <div class="modal-content modal-sm">
            <span class="modal-close">&times;</span>
            <h2>选择导航方式</h2>
            <div class="navigate-options">
                <a id="navAmap" href="#" target="_blank" class="navigate-option">
                    <i class="fas fa-map"></i>
                    <span>高德地图</span>
                </a>
                <a id="navBaidu" href="#" target="_blank" class="navigate-option">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>百度地图</span>
                </a>
                <a id="navTencent" href="#" target="_blank" class="navigate-option">
                    <i class="fas fa-location-arrow"></i>
                    <span>腾讯地图</span>
                </a>
                <a id="navApple" href="#" target="_blank" class="navigate-option">
                    <i class="fas fa-apple-alt"></i>
                    <span>苹果地图</span>
                </a>
            </div>
        </div>
    </div>
</main>

<style>
/* ========== 地图页面样式 ========== */
/* 地图页面隐藏 footer 和面包屑，获得更大空间 */
.site-footer, .breadcrumb { display: none !important; }

.map-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.map-banner h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.map-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.map-section {
    padding: 0;
    background: #f5f7fa;
}

.map-wrapper {
    display: flex;
    height: calc(100vh - 80px);
    min-height: 500px;
}

/* 左侧控制面板 */
.map-sidebar {
    width: 320px;
    background: white;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
    flex-shrink: 0;
}

.map-control-card {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.map-control-card h3 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-control-card h3 i {
    color: #667eea;
}

/* 地图源切换 */
.map-source-switch {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-source-option {
    cursor: pointer;
}

.map-source-option input {
    display: none;
}

.map-source-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    transition: all 0.3s;
}

.map-source-option input:checked + .map-source-label {
    border-color: #667eea;
    background: #f0f3ff;
}

.source-tag {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #e0e0e0;
    color: #666;
}

.source-tag.free {
    background: #e8f5e9;
    color: #2e7d32;
}

/* 搜索框 */
.search-input-group {
    display: flex;
    gap: 10px;
}

.search-input-group input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.search-input-group input:focus {
    outline: none;
    border-color: #667eea;
}

.btn-search {
    padding: 12px 18px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-search:hover {
    background: #5a6fd6;
}

.search-results {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: #f5f5f5;
}

.search-result-item .name {
    font-weight: 500;
    color: #333;
}

.search-result-item .address {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
}

/* 定位按钮 */
.btn-locate {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-locate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.current-location-info {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
}

/* 预设地点 */
.preset-locations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-item:hover {
    background: #e8f0fe;
    transform: translateX(5px);
}

.preset-item i {
    color: #667eea;
    font-size: 18px;
}

.preset-info {
    display: flex;
    flex-direction: column;
}

.preset-name {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.preset-address {
    font-size: 12px;
    color: #888;
}

/* 标记列表 */
.marker-list {
    max-height: 200px;
    overflow-y: auto;
}

.marker-list .empty-tip {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.marker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
}

.marker-item .marker-name {
    font-size: 14px;
    color: #333;
}

.marker-item .delete-marker {
    color: #dc3545;
    cursor: pointer;
    padding: 5px;
}

.btn-clear {
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
}

.btn-clear:hover {
    background: #dc3545;
    color: white;
}

/* 地图容器 */
.map-container {
    flex: 1;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

/* 地图工具栏 */
.map-toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.toolbar-btn {
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: #667eea;
    color: white;
}

/* 地图信息 */
.map-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    background: rgba(255,255,255,0.9);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 15px;
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

.modal-content.modal-sm {
    max-width: 400px;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #333;
}

.modal-content h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.3rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.detail-row label {
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-row label i {
    color: #667eea;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.modal-actions button {
    flex: 1;
    min-width: 120px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-navigate {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-navigate:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-save {
    background: #28a745;
    color: white;
}

.btn-save:hover {
    background: #218838;
}

.btn-share {
    background: #17a2b8;
    color: white;
}

.btn-share:hover {
    background: #138496;
}

/* 导航选项 */
.navigate-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.navigate-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.navigate-option:hover {
    background: #e8f0fe;
    transform: translateY(-3px);
}

.navigate-option i {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 8px;
}

.navigate-option span {
    font-size: 14px;
}

/* 响应式 */
@media (max-width: 768px) {
    .map-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .map-sidebar {
        width: 100%;
        order: 2;
        max-height: 300px;
    }
    
    .map-container {
        height: 400px;
        order: 1;
    }
    
    .modal-content {
        padding: 20px;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions button {
        width: 100%;
    }
}

/* Leaflet自定义样式 */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
}

.leaflet-popup-content {
    margin: 15px;
}

.map-popup {
    text-align: center;
}

.map-popup h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.map-popup p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 13px;
}

.map-popup .popup-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
}
</style>

<!-- Leaflet JS -->
<script>
// 高德地图API Key配置 - 必须在 map.js 加载之前定义
const AMAP_KEY = '<?php echo $amapKey; ?>';
</script>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- 地图模块JS -->
<script src="js/map.js"></script>

<script>
// 初始化地图
document.addEventListener('DOMContentLoaded', function() {
    initMap();
});
</script>

<?php require_once 'footer.php'; ?>