<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DatePlanner - Идеальные места для свиданий</title>
    <link href="/css/style.css" rel="stylesheet">
    <link href="/js/fw/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/js/fw/bootstrap-icons-1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <script src="/js/fw/jquery/dist/jquery.js"></script>
    <script src="/js/fw/apexcharts/loader.js"></script>
    <script src="/js/fw/apexcharts/apex.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        :root {
            --love-red: #e74c3c;
            --romantic-pink: #fd79a8;
            --cozy-orange: #e67e22;
            --intellectual-blue: #3498db;
            --adventure-green: #2ecc71;
            --mystery-purple: #9b59b6;
            --dark-mode: #2d3436;
            --light-bg: #f9f7f7;
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
        }

        .love-gradient {
            background: linear-gradient(135deg, var(--love-red) 0%, var(--romantic-pink) 100%);
            color: white;
        }

        .hero-section {
            padding: 160px 0 100px;
            position: relative;
            overflow: hidden;
        }

        .heart-animation {
            position: absolute;
            font-size: 30px;
            color: rgba(255, 255, 255, 0.3);
            animation: float 6s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-100px) rotate(180deg); }
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .filter-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin-bottom: 30px;
        }

        .filter-btn {
            border: 2px solid transparent;
            padding: 10px 20px;
            border-radius: 50px;
            margin: 5px;
            transition: all 0.3s;
            font-weight: 500;
            cursor: pointer;
        }

        .filter-btn:hover, .filter-btn.active {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .filter-btn.active {
            border-color: var(--love-red);
            color: var(--love-red);
            background: rgba(231, 76, 60, 0.1);
        }

        .category-romantic { border-color: var(--romantic-pink); color: var(--romantic-pink); }
        .category-active { border-color: var(--adventure-green); color: var(--adventure-green); }
        .category-intellectual { border-color: var(--intellectual-blue); color: var(--intellectual-blue); }
        .category-horror { border-color: #2c3e50; color: #2c3e50; }
        .category-cozy { border-color: var(--cozy-orange); color: var(--cozy-orange); }
        .category-mystery { border-color: var(--mystery-purple); color: var(--mystery-purple); }
        .category-luxury { border-color: #f1c40f; color: #f1c40f; }
        .category-budget { border-color: #27ae60; color: #27ae60; }

        .place-card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 30px;
            height: 100%;
        }

        .place-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .place-img {
            height: 200px;
            object-fit: cover;
            width: 100%;
        }

        .place-category {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .romantic-badge { background: var(--romantic-pink); color: white; }
        .active-badge { background: var(--adventure-green); color: white; }
        .intellectual-badge { background: var(--intellectual-blue); color: white; }
        .horror-badge { background: #2c3e50; color: white; }
        .cozy-badge { background: var(--cozy-orange); color: white; }
        .mystery-badge { background: var(--mystery-purple); color: white; }

        .rating {
            color: #f1c40f;
            font-size: 0.9rem;
        }

        .price-tag {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--love-red);
        }

        #map {
            height: 600px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .map-container {
            position: relative;
        }

        .map-legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .legend-color {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .btn-heart {
            background: var(--love-red);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-heart:hover {
            background: #c0392b;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
            color: white;
        }

        .btn-outline-heart {
            border: 2px solid var(--love-red);
            color: var(--love-red);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-outline-heart:hover {
            background: var(--love-red);
            color: white;
            transform: translateY(-3px);
        }

        .admin-panel {
            background: var(--light-bg);
            border-radius: 20px;
            padding: 40px;
            margin-top: 40px;
        }

        .admin-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            border-top: 4px solid var(--intellectual-blue);
        }

        .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--love-red);
            line-height: 1;
        }

        .detail-modal-img {
            height: 300px;
            object-fit: cover;
            width: 100%;
            border-radius: 15px;
        }

        .feature-list li {
            margin-bottom: 10px;
            padding-left: 25px;
            position: relative;
        }

        .feature-list li:before {
            content: "❤️";
            position: absolute;
            left: 0;
            top: 2px;
        }

        .timeline-container {
            position: relative;
            padding-left: 30px;
        }

        .timeline-container:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--love-red);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-left: 20px;
        }

        .timeline-item:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 5px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--love-red);
            border: 3px solid white;
            box-shadow: 0 0 0 3px var(--love-red);
        }

        footer {
            background: var(--dark-mode);
            color: white;
            padding: 60px 0 30px;
            margin-top: 80px;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            transition: all 0.3s;
        }

        .social-icon:hover {
            background: var(--love-red);
            transform: translateY(-3px);
        }

        .heart-icon {
            color: #E74C3CFF;
        }

        .date-idea {
            background: linear-gradient(135deg, #fdfcfb 0%, #f9f7f7 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 20px 0;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-section {
                padding: 120px 0 60px;
            }

            #map {
                height: 400px;
            }
        }

        .place-marker {
            width: 40px;
            height: 40px;
            background: var(--love-red);
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            position: relative;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .place-marker:after {
            content: '';
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 10px;
            transform: rotate(45deg);
        }

        .marker-romantic { background: var(--romantic-pink); }
        .marker-active { background: var(--adventure-green); }
        .marker-intellectual { background: var(--intellectual-blue); }
        .marker-horror { background: #2c3e50; }
        .marker-cozy { background: var(--cozy-orange); }

        .heart-counter {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255,255,255,0.9);
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .heart-counter i {
            color: var(--love-red);
            margin-right: 5px;
        }
    </style>
</head>
<body>
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa-solid fa-heart me-2"></i>DatePlanner
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#places">Места</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#map-section">Карта</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#ideas">Идеи</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#admin">Для организаций</a>
                </li>
            </ul>
            <button class="btn btn-heart ms-3" onclick="showLoginModal()">
                <i class="fas fa-plus me-2"></i>Добавить место
            </button>
        </div>
    </div>
</nav>

<!-- Герой секция -->
<section class="love-gradient hero-section">
    <div class="heart-animation" style="top:10%;left:5%">❤️</div>
    <div class="heart-animation" style="top:30%;right:10%">❤️</div>
    <div class="heart-animation" style="bottom:20%;left:15%">❤️</div>
    <div class="heart-animation" style="bottom:40%;right:20%">❤️</div>

    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="hero-title mb-4">Найдите идеальное место для свидания</h1>
                <p class="lead mb-4">Более 500 проверенных локаций: от романтических ужинов до экстремальных приключений. Подберите свидание по настроению, бюджету и интересам.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="#places" class="btn btn-heart">
                        <i class="fas fa-search me-2"></i>Найти место
                    </a>
                    <a href="#map-section" class="btn btn-outline-light">
                        <i class="fas fa-map-marked-alt me-2"></i>Посмотреть на карте
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <img src="https://images.unsplash.com/photo-1518568814500-bf0f8d125f46?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                     class="img-fluid rounded-3 shadow-lg"
                     alt="Свидание в парке">
            </div>
        </div>
    </div>
</section>

<!-- Фильтры -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="filter-card">
            <h3 class="mb-4">Какое свидание вы ищете?</h3>
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-3">Тип свидания</h5>
                    <div class="d-flex flex-wrap mb-4">
                        <div class="filter-btn category-romantic active" onclick="toggleFilter('romantic')">
                            <i class="fas fa-heart me-2"></i>Романтическое
                        </div>
                        <div class="filter-btn category-active" onclick="toggleFilter('active')">
                            <i class="fas fa-hiking me-2"></i>Активное
                        </div>
                        <div class="filter-btn category-intellectual" onclick="toggleFilter('intellectual')">
                            <i class="fas fa-brain me-2"></i>Интеллектуальное
                        </div>
                        <div class="filter-btn category-horror" onclick="toggleFilter('horror')">
                            <i class="fas fa-ghost me-2"></i>Хоррор
                        </div>
                        <div class="filter-btn category-cozy" onclick="toggleFilter('cozy')">
                            <i class="fas fa-mug-hot me-2"></i>Уютное
                        </div>
                        <div class="filter-btn category-mystery" onclick="toggleFilter('mystery')">
                            <i class="fas fa-search me-2"></i>Тайна
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 class="mb-3">Бюджет</h5>
                    <div class="d-flex flex-wrap mb-4">
                        <div class="filter-btn category-budget" onclick="toggleFilter('budget')">
                            <i class="fas fa-wallet me-2"></i>Эконом (до 2,000₽)
                        </div>
                        <div class="filter-btn category-luxury" onclick="toggleFilter('luxury')">
                            <i class="fas fa-gem me-2"></i>Премиум (от 5,000₽)
                        </div>
                    </div>

                    <h5 class="mb-3">Время</h5>
                    <div class="d-flex flex-wrap">
                        <div class="filter-btn" onclick="toggleFilter('day')">
                            <i class="fas fa-sun me-2"></i>День
                        </div>
                        <div class="filter-btn" onclick="toggleFilter('evening')">
                            <i class="fas fa-moon me-2"></i>Вечер
                        </div>
                        <div class="filter-btn" onclick="toggleFilter('night')">
                            <i class="fas fa-star me-2"></i>Ночь
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Карта мест -->
<section id="map-section" class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="fw-bold mb-3">Локации на карте</h2>
                <p class="text-muted">Выбирайте места рядом с вами или планируйте маршрут</p>
            </div>
        </div>

        <div class="map-container">
            <div id="map"></div>
            <div class="map-legend">
                <h6 class="mb-3">Легенда карты</h6>
                <div class="legend-item">
                    <div class="legend-color" style="background: var(--romantic-pink);"></div>
                    <span>Романтическое</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: var(--adventure-green);"></div>
                    <span>Активное</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: var(--intellectual-blue);"></div>
                    <span>Интеллектуальное</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #2c3e50;"></div>
                    <span>Хоррор/Тайна</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: var(--cozy-orange);"></div>
                    <span>Уютное</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Места для свиданий -->
<section id="places" class="py-5 bg-light">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="fw-bold mb-3">Популярные места для свиданий</h2>
                <p class="text-muted">Проверенные локации с отзывами реальных пар</p>
            </div>
        </div>

        <div class="row" id="placesContainer">
            <!-- Места будут загружены через JavaScript -->
        </div>
    </div>
</section>

<!-- Идеи для свиданий -->
<section id="ideas" class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="fw-bold mb-3">Готовые идеи для свиданий</h2>
                <p class="text-muted">Проверенные маршруты и сценарии для идеального свидания</p>
            </div>
        </div>

        <div class="date-idea">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <img src="https://images.unsplash.com/photo-1519677100203-5f5a1be3d2b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                         class="img-fluid rounded-3"
                         alt="Романтический вечер">
                </div>
                <div class="col-md-8">
                    <h4>Романтический вечер в центре города</h4>
                    <div class="mb-3">
                        <span class="badge romantic-badge me-2">Романтическое</span>
                        <span class="badge bg-secondary me-2">Вечернее</span>
                        <span class="badge bg-success me-2">~ 5,000₽</span>
                        <span class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                4.7
                            </span>
                    </div>
                    <p>Идеальный маршрут для первого свидания или годовщины. Начинаем с прогулки по набережной, затем ужин в ресторане с панорамным видом, завершаем вечер в лаундж-баре с живой музыкой.</p>
                    <div class="timeline-container mt-4">
                        <div class="timeline-item">
                            <strong>19:00</strong> - Прогулка по набережной
                        </div>
                        <div class="timeline-item">
                            <strong>20:30</strong> - Ужин в ресторане "Панорама"
                        </div>
                        <div class="timeline-item">
                            <strong>22:30</strong> - Лаундж-бар "Джаз & Вино"
                        </div>
                    </div>
                    <button class="btn btn-heart mt-3" onclick="viewDateIdea(1)">
                        <i class="fas fa-calendar-alt me-2"></i>Запланировать это свидание
                    </button>
                </div>
            </div>
        </div>

        <div class="date-idea">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                         class="img-fluid rounded-3"
                         alt="Активное приключение">
                </div>
                <div class="col-md-8">
                    <h4>Активное приключение на природе</h4>
                    <div class="mb-3">
                        <span class="badge active-badge me-2">Активное</span>
                        <span class="badge bg-secondary me-2">Дневное</span>
                        <span class="badge bg-success me-2">~ 3,000₽</span>
                        <span class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                5.0
                            </span>
                    </div>
                    <p>Для пар, которые любят адреналин и природу. Катание на квадроциклах по лесным трассам, пикник у озера, вечер у костра с гитарой. Незабываемые эмоции гарантированы!</p>
                    <button class="btn btn-heart mt-3" onclick="viewDateIdea(2)">
                        <i class="fas fa-bolt me-2"></i>Выбрать приключение
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Админка для организаций -->
<section id="admin" class="py-5 bg-light">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="fw-bold mb-3">Для организаций и заведений</h2>
                <p class="text-muted">Добавьте ваше заведение в каталог мест для свиданий</p>
            </div>
        </div>

        <div class="admin-panel">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="admin-card text-center">
                        <div class="mb-3">
                            <i class="fas fa-building fa-3x heart-icon"></i>
                        </div>
                        <h4>Добавить заведение</h4>
                        <p class="text-muted">Разместите информацию о вашем ресторане, парке или развлечении</p>
                        <button class="btn btn-heart w-100" onclick="showAddPlaceModal()">
                            <i class="fas fa-plus-circle me-2"></i>Добавить
                        </button>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="admin-card text-center">
                        <div class="mb-3">
                            <i class="fas fa-calendar-plus fa-3x heart-icon"></i>
                        </div>
                        <h4>Создать событие</h4>
                        <p class="text-muted">Организуйте специальное мероприятие для свиданий</p>
                        <button class="btn btn-heart w-100" onclick="showCreateEventModal()">
                            <i class="fas fa-edit me-2"></i>Создать
                        </button>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="admin-card text-center">
                        <div class="mb-3">
                            <i class="fas fa-chart-line fa-3x heart-icon"></i>
                        </div>
                        <h4>Аналитика</h4>
                        <p class="text-muted">Отслеживайте популярность и статистику посещений</p>
                        <button class="btn btn-heart w-100" onclick="showAnalytics()">
                            <i class="fas fa-chart-bar me-2"></i>Смотреть
                        </button>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Мои заведения</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Название</th>
                                        <th>Тип</th>
                                        <th>Просмотры</th>
                                        <th>Рейтинг</th>
                                        <th>Статус</th>
                                        <th>Действия</th>
                                    </tr>
                                    </thead>
                                    <tbody id="myPlacesTable">
                                    <!-- Данные загружаются через JS -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Статистика</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 col-6 mb-3">
                                    <div class="text-center p-3 border rounded">
                                        <div class="stats-number" id="totalViews">1,245</div>
                                        <p class="text-muted mb-0">Всего просмотров</p>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 mb-3">
                                    <div class="text-center p-3 border rounded">
                                        <div class="stats-number" id="avgRating">4.7</div>
                                        <p class="text-muted mb-0">Средний рейтинг</p>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 mb-3">
                                    <div class="text-center p-3 border rounded">
                                        <div class="stats-number" id="totalPlaces">8</div>
                                        <p class="text-muted mb-0">Мои заведения</p>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6 mb-3">
                                    <div class="text-center p-3 border rounded">
                                        <div class="stats-number" id="newBookings">12</div>
                                        <p class="text-muted mb-0">Новых броней</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Футер -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4">
                <h3><i class="fas fa-heart heart-icon me-2"></i>DatePlanner</h3>
                <p class="mt-3">Находите идеальные места для свиданий, создавайте незабываемые моменты и делитесь впечатлениями.</p>
                <div class="mt-4">
                    <a href="#" class="social-icon"><i class="fab fa-vk"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-telegram"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 mb-4">
                <h5>Категории</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-light text-decoration-none">Романтические</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Активные</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Интеллектуальные</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Хоррор/Тайна</a></li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-4 mb-4">
                <h5>Для партнеров</h5>
                <ul class="list-unstyled">
                    <li><a href="#admin" class="text-light text-decoration-none">Добавить заведение</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Реклама на сайте</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Партнерская программа</a></li>
                    <li><a href="#" class="text-light text-decoration-none">Контакты</a></li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-4 mb-4">
                <h5>Контакты</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="fas fa-phone me-2"></i> 8 (800) 555-14-88</li>
                    <li class="mb-2"><i class="fas fa-envelope me-2"></i> hello@dateplanner.ru</li>
                    <li><i class="fas fa-map-marker-alt me-2"></i> Москва, ул. Романтическая, 7</li>
                </ul>
            </div>
        </div>

        <hr class="my-4">

        <div class="row">
            <div class="col-md-6">
                <p>© 2024 DatePlanner. Все права защищены.</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="#" class="text-light text-decoration-none me-3">Политика конфиденциальности</a>
                <a href="#" class="text-light text-decoration-none">Условия использования</a>
            </div>
        </div>
    </div>
</footer>

<!-- Модальные окна -->
<div class="modal fade" id="placeDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="placeModalTitle">Название места</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <img id="placeModalImage" src="" class="detail-modal-img mb-3" alt="">
                        <div class="heart-counter">
                            <i class="fas fa-heart"></i> <span id="placeLikes">0</span> пар добавили в избранное
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <span id="placeCategoryBadge" class="badge me-2">Категория</span>
                            <span class="rating" id="placeRating">★★★★★ 5.0</span>
                        </div>
                        <p id="placeDescription" class="mb-4"></p>

                        <h6>Особенности:</h6>
                        <ul class="feature-list" id="placeFeatures">
                            <!-- Особенности загружаются через JS -->
                        </ul>

                        <div class="mt-4">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Цена за двоих:</span>
                                <span class="price-tag" id="placePrice">0₽</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Рекомендуемое время:</span>
                                <span id="placeTime">Вечер</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Продолжительность:</span>
                                <span id="placeDuration">2-3 часа</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <h6>Как добраться:</h6>
                        <p id="placeAddress" class="text-muted"></p>
                        <div class="d-grid gap-2">
                            <button class="btn btn-heart" onclick="bookThisPlace()">
                                <i class="fas fa-calendar-check me-2"></i>Забронировать это свидание
                            </button>
                            <button class="btn btn-outline-heart" onclick="addToFavorites()">
                                <i class="fas fa-heart me-2"></i>Добавить в избранное
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addPlaceModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Добавить новое место</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addPlaceForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Название места *</label>
                            <input type="text" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Категория *</label>
                            <select class="form-select" required>
                                <option value="">Выберите категорию</option>
                                <option value="romantic">Романтическое</option>
                                <option value="active">Активное</option>
                                <option value="intellectual">Интеллектуальное</option>
                                <option value="horror">Хоррор/Тайна</option>
                                <option value="cozy">Уютное</option>
                                <option value="mystery">Тайна/Квест</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Описание *</label>
                        <textarea class="form-control" rows="3" required placeholder="Опишите, почему это место идеально для свидания..."></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Адрес *</label>
                            <input type="text" class="form-control" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Цена за двоих (₽) *</label>
                            <input type="number" class="form-control" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Рекомендуемое время</label>
                            <select class="form-select">
                                <option>День</option>
                                <option>Вечер</option>
                                <option>Ночь</option>
                                <option>Любое</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Особенности (через запятую)</label>
                        <input type="text" class="form-control" placeholder="Живая музыка, панорамный вид, парковка...">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Ссылка на фото</label>
                        <input type="url" class="form-control" placeholder="https://...">
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-heart">
                            <i class="fas fa-paper-plane me-2"></i>Отправить на модерацию
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Вход / Регистрация</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="loginForm">
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Пароль</label>
                        <input type="password" class="form-control" required>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-heart">Войти</button>
                        <button type="button" class="btn btn-outline-secondary" onclick="showRegistrationForm()">
                            Создать аккаунт организации
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    // Инициализация модальных окон
    const placeDetailsModal = new bootstrap.Modal(document.getElementById('placeDetailsModal'));
    const addPlaceModal = new bootstrap.Modal(document.getElementById('addPlaceModal'));
    const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));

    // Инициализация карты
    let map;
    let markers = [];

    // Данные мест
    let places = [
        {
            id: 1,
            name: "Ресторан 'Панорама'",
            category: "romantic",
            categoryName: "Романтическое",
            description: "Ресторан на 25-м этаже с панорамным видом на город. Идеальное место для романтического ужина при свечах.",
            price: 4500,
            rating: 4.8,
            likes: 128,
            image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Панорамный вид", "Живая музыка", "Винотека", "Шеф-повар из Италии", "Терраса"],
            address: "Москва, ул. Тверская, 15",
            time: "Вечер",
            duration: "2-3 часа",
            lat: 55.7558,
            lng: 37.6173
        },
        {
            id: 2,
            name: "Квест 'Побег из тюрьмы'",
            category: "horror",
            categoryName: "Хоррор/Тайна",
            description: "Экстремальный квест в полной темноте. Проверьте свои нервы и способность работать в команде.",
            price: 3200,
            rating: 4.9,
            likes: 89,
            image: "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Актерское сопровождение", "Эффекты 4D", "60 минут экшена", "Фотосессия", "Призы"],
            address: "Москва, пр. Мира, 42",
            time: "Любое",
            duration: "1.5 часа",
            lat: 55.7810,
            lng: 37.6380
        },
        {
            id: 3,
            name: "Винный тур по подвалам",
            category: "intellectual",
            categoryName: "Интеллектуальное",
            description: "Экскурсия по историческим винным погребам с дегустацией 10 видов вин и сырной тарелкой.",
            price: 2800,
            rating: 4.7,
            likes: 67,
            image: "https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Дегустация 10 вин", "Сырная тарелка", "Историк-сомелье", "Сувенирный бокал", "Парковка"],
            address: "Москва, ул. Арбат, 25",
            time: "День/Вечер",
            duration: "2 часа",
            lat: 55.7490,
            lng: 37.5910
        },
        {
            id: 4,
            name: "Парк 'Сказка' ночью",
            category: "mystery",
            categoryName: "Тайна",
            description: "Ночная прогулка по закрытому парку с фонариками, историями о призраках и романтическими беседками.",
            price: 1500,
            rating: 4.5,
            likes: 142,
            image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Экскурсовод", "Теплые пледы", "Горячий шоколад", "Фотосессия", "Беседки у озера"],
            address: "Москва, парк Сокольники",
            time: "Ночь",
            duration: "2 часа",
            lat: 55.7950,
            lng: 37.6750
        },
        {
            id: 5,
            name: "Кулинарный мастер-класс",
            category: "cozy",
            categoryName: "Уютное",
            description: "Приготовьте ужин из 3 блюд вместе с шеф-поваром в уютной атмосфере частной кухни.",
            price: 3800,
            rating: 4.9,
            likes: 94,
            image: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Все ингредиенты включены", "Рецепты на дом", "Бутылка вина", "Фартуки в подарок", "Фотосессия"],
            address: "Москва, ул. Поварская, 10",
            time: "День/Вечер",
            duration: "3 часа",
            lat: 55.7570,
            lng: 37.6000
        },
        {
            id: 6,
            name: "Катание на лошадях в лесу",
            category: "active",
            categoryName: "Активное",
            description: "Романтическая прогулка верхом по сосновому лесу с пикником у озера и фотосессией.",
            price: 5200,
            rating: 4.8,
            likes: 113,
            image: "https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            features: ["Инструктор", "Пикник у озера", "Фотосессия", "Трансфер", "Страховка"],
            address: "Московская область, Истринский район",
            time: "День",
            duration: "4 часа",
            lat: 55.8500,
            lng: 37.2500
        }
    ];

    let activeFilters = new Set(['romantic']);
    let myPlaces = [
        { id: 101, name: "Кафе 'У озера'", type: "Кафе", views: 345, rating: 4.5, status: "Одобрено" },
        { id: 102, name: "Кино под звездами", type: "Кинотеатр", views: 567, rating: 4.8, status: "Одобрено" },
        { id: 103, name: "Мастер-класс по танго", type: "Танцы", views: 234, rating: 4.7, status: "На модерации" }
    ];

    // Инициализация карты
    function initMap() {
        map = L.map('map').setView([55.7558, 37.6173], 11);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Добавляем маркеры
        updateMapMarkers();
    }

    // Обновление маркеров на карте
    function updateMapMarkers() {
        // Удаляем старые маркеры
        markers.forEach(marker => map.removeLayer(marker));
        markers = [];

        // Фильтруем места по активным фильтрам
        const filteredPlaces = places.filter(place =>
            activeFilters.size === 0 || activeFilters.has(place.category)
        );

        // Добавляем новые маркеры
        filteredPlaces.forEach(place => {
            const markerColor = getMarkerColor(place.category);

            const marker = L.marker([place.lat, place.lng], {
                icon: L.divIcon({
                    className: 'custom-marker',
                    html: `<div class="place-marker marker-${place.category}" title="${place.name}"></div>`,
                    iconSize: [40, 40],
                    iconAnchor: [20, 40]
                })
            }).addTo(map);

            marker.bindPopup(`
                    <div class="map-popup">
                        <h6>${place.name}</h6>
                        <p><small>${place.description.substring(0, 100)}...</small></p>
                        <div class="d-flex justify-content-between">
                            <span class="badge ${place.category}-badge">${place.categoryName}</span>
                            <span class="price-tag">${place.price}₽</span>
                        </div>
                        <button class="btn btn-sm btn-heart w-100 mt-2" onclick="viewPlaceDetails(${place.id})">
                            Подробнее
                        </button>
                    </div>
                `);

            markers.push(marker);
        });
    }

    // Получение цвета маркера по категории
    function getMarkerColor(category) {
        const colors = {
            'romantic': 'var(--romantic-pink)',
            'active': 'var(--adventure-green)',
            'intellectual': 'var(--intellectual-blue)',
            'horror': '#2c3e50',
            'cozy': 'var(--cozy-orange)',
            'mystery': 'var(--mystery-purple)'
        };
        return colors[category] || 'var(--love-red)';
    }

    // Переключение фильтров
    function toggleFilter(filter) {
        const btn = event.target.closest('.filter-btn');

        if (activeFilters.has(filter)) {
            activeFilters.delete(filter);
            btn.classList.remove('active');
        } else {
            activeFilters.add(filter);
            btn.classList.add('active');
        }

        updatePlacesDisplay();
        updateMapMarkers();
    }

    // Обновление отображения мест
    function updatePlacesDisplay() {
        const container = document.getElementById('placesContainer');
        const filteredPlaces = places.filter(place =>
            activeFilters.size === 0 || activeFilters.has(place.category)
        );

        container.innerHTML = filteredPlaces.map(place => `
                <div class="col-md-4">
                    <div class="card place-card">
                        <div class="position-relative">
                            <img src="${place.image}" class="place-img" alt="${place.name}">
                            <div class="place-category ${place.category}-badge">${place.categoryName}</div>
                            <div class="heart-counter">
                                <i class="fas fa-heart"></i> ${place.likes}
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">${place.name}</h5>
                            <p class="card-text text-muted">${place.description.substring(0, 100)}...</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="rating">
                                        ${'★'.repeat(Math.floor(place.rating))}${place.rating % 1 ? '½' : ''}
                                        <small class="text-muted ms-1">${place.rating}</small>
                                    </span>
                                    <div class="price-tag mt-1">${place.price}₽</div>
                                </div>
                                <button class="btn btn-heart btn-sm" onclick="viewPlaceDetails(${place.id})">
                                    <i class="fas fa-info-circle me-1"></i>Подробнее
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
    }

    // Просмотр деталей места
    function viewPlaceDetails(id) {
        const place = places.find(p => p.id === id);
        if (!place) return;

        document.getElementById('placeModalTitle').textContent = place.name;
        document.getElementById('placeModalImage').src = place.image;
        document.getElementById('placeModalImage').alt = place.name;
        document.getElementById('placeLikes').textContent = place.likes;
        document.getElementById('placeCategoryBadge').className = `badge ${place.category}-badge me-2`;
        document.getElementById('placeCategoryBadge').textContent = place.categoryName;
        document.getElementById('placeRating').innerHTML = `${'★'.repeat(Math.floor(place.rating))}${place.rating % 1 ? '½' : ''} ${place.rating}`;
        document.getElementById('placeDescription').textContent = place.description;
        document.getElementById('placePrice').textContent = `${place.price}₽`;
        document.getElementById('placeTime').textContent = place.time;
        document.getElementById('placeDuration').textContent = place.duration;
        document.getElementById('placeAddress').textContent = place.address;

        const featuresList = document.getElementById('placeFeatures');
        featuresList.innerHTML = place.features.map(feature =>
            `<li>${feature}</li>`
        ).join('');

        placeDetailsModal.show();
    }

    // Просмотр идеи для свидания
    function viewDateIdea(id) {
        alert(`Вы выбрали идею для свидания #${id}! Мы отправим вам подробный план на email.`);
    }

    // Бронирование места
    function bookThisPlace() {
        const placeName = document.getElementById('placeModalTitle').textContent;
        alert(`Вы забронировали свидание в "${placeName}"! Подтверждение отправлено на email.`);
        placeDetailsModal.hide();
    }

    // Добавление в избранное
    function addToFavorites() {
        const placeName = document.getElementById('placeModalTitle').textContent;
        alert(`"${placeName}" добавлено в ваше избранное!`);
    }

    // Показать модальное окно добавления места
    function showAddPlaceModal() {
        addPlaceModal.show();
    }

    // Показать модальное окно создания события
    function showCreateEventModal() {
        alert('Форма создания события открыта!');
    }

    // Показать аналитику
    function showAnalytics() {
        alert('Открыта страница аналитики!');
    }

    // Показать форму регистрации
    function showRegistrationForm() {
        alert('Открыта форма регистрации для организаций!');
    }

    // Обновление таблицы моих мест
    function updateMyPlacesTable() {
        const table = document.getElementById('myPlacesTable');
        table.innerHTML = myPlaces.map(place => `
                <tr>
                    <td>${place.name}</td>
                    <td><span class="badge bg-light text-dark">${place.type}</span></td>
                    <td>${place.views}</td>
                    <td>
                        <span class="rating">
                            ${'★'.repeat(Math.floor(place.rating))}${place.rating % 1 ? '½' : ''}
                            ${place.rating}
                        </span>
                    </td>
                    <td>
                        <span class="badge ${place.status === 'Одобрено' ? 'bg-success' : 'bg-warning'}">
                            ${place.status}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-secondary me-1" title="Редактировать">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" title="Статистика">
                            <i class="fas fa-chart-bar"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
    }

    // Обновление статистики
    function updateStats() {
        // Здесь можно добавить реальные расчеты
        document.getElementById('totalViews').textContent = myPlaces.reduce((sum, place) => sum + place.views, 0);
        document.getElementById('avgRating').textContent =
            (myPlaces.reduce((sum, place) => sum + place.rating, 0) / myPlaces.length).toFixed(1);
        document.getElementById('totalPlaces').textContent = myPlaces.length;
        document.getElementById('newBookings').textContent = Math.floor(Math.random() * 20) + 5;
    }

    // Инициализация
    document.addEventListener('DOMContentLoaded', function() {
        initMap();
        updatePlacesDisplay();
        updateMyPlacesTable();
        updateStats();

        // Обработка формы добавления места
        document.getElementById('addPlaceForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Заявка отправлена на модерацию! Мы свяжемся с вами в течение 24 часов.');
            addPlaceModal.hide();
            this.reset();
        });

        // Обработка формы входа
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Вход выполнен успешно!');
            loginModal.hide();
        });

        // Плавная прокрутка
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Анимация при прокрутке
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                nav.classList.add('shadow');
            } else {
                nav.classList.remove('shadow');
            }
        });
    });
</script>
<script src="/js/fw/core/dist/umd/popper.min.js"></script>
<script src="/js/fw/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/js/global/toast.controller.js"></script>
<script src="/js/global/tooltip.controller.js"></script>
<script src="/js/global/popover.controller.js"></script>
</body>
</html>