<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.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;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.8rem;
        }
        
        .sidebar {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            position: sticky;
            top: 30px;
            height: fit-content;
        }
        
        .user-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .profile-completion {
            background: var(--light-bg);
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .completion-percentage {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--love-red);
            line-height: 1;
        }
        
        .nav-link-custom {
            color: var(--dark-mode);
            padding: 15px 20px;
            border-radius: 15px;
            margin-bottom: 10px;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .nav-link-custom:hover {
            background: rgba(231, 76, 60, 0.1);
            color: var(--love-red);
            transform: translateX(5px);
        }
        
        .nav-link-custom.active {
            background: rgba(231, 76, 60, 0.1);
            color: var(--love-red);
            border-left: 4px solid var(--love-red);
        }
        
        .main-content {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            min-height: 600px;
        }
        
        .section-title {
            border-bottom: 3px solid var(--light-bg);
            padding-bottom: 15px;
            margin-bottom: 30px;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 100px;
            height: 3px;
            background: var(--love-red);
        }
        
        .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);
        }
        
        .heart-icon {
            color: var(--love-red);
        }
        
        .profile-field {
            background: var(--light-bg);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .field-label {
            font-weight: 600;
            color: var(--dark-mode);
            margin-bottom: 8px;
        }
        
        .field-value {
            color: #666;
        }
        
        .edit-icon {
            color: var(--love-red);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .edit-icon:hover {
            transform: scale(1.2);
        }
        
        .interest-tag {
            display: inline-block;
            background: rgba(52, 152, 219, 0.1);
            color: var(--intellectual-blue);
            padding: 8px 16px;
            border-radius: 20px;
            margin: 5px;
            font-size: 0.9rem;
        }
        
        .proposal-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border-left: 4px solid var(--love-red);
            transition: all 0.3s;
        }
        
        .proposal-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .proposal-status {
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .status-open { background: #2ecc71; color: white; }
        .status-pending { background: #f39c12; color: white; }
        .status-closed { background: #95a5a6; color: white; }
        
        .organization-card {
            background: linear-gradient(135deg, #fdfcfb 0%, #f9f7f7 100%);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .organization-card:hover {
            border-color: var(--love-red);
            transform: translateY(-5px);
        }
        
        .org-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--love-red);
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: #666;
        }
        
        .event-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .event-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        
        .match-badge {
            background: linear-gradient(45deg, var(--love-red), var(--romantic-pink));
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--love-red);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .progress {
            height: 10px;
            border-radius: 5px;
        }
        
        .progress-bar {
            background-color: var(--love-red);
            border-radius: 5px;
        }
        
        .form-control-custom {
            border: 2px solid #eee;
            border-radius: 15px;
            padding: 15px;
            transition: all 0.3s;
        }
        
        .form-control-custom:focus {
            border-color: var(--love-red);
            box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25);
        }
        
        .badge-category {
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-right: 8px;
        }
        
        .badge-romantic { background: rgba(253, 121, 168, 0.2); color: var(--romantic-pink); }
        .badge-active { background: rgba(46, 204, 113, 0.2); color: var(--adventure-green); }
        .badge-intellectual { background: rgba(52, 152, 219, 0.2); color: var(--intellectual-blue); }
        .badge-cozy { background: rgba(230, 126, 34, 0.2); color: var(--cozy-orange); }
        
        @media (max-width: 768px) {
            .sidebar {
                margin-bottom: 30px;
            }
            
            .main-content {
                padding: 25px;
            }
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }
        
        .empty-state-icon {
            font-size: 4rem;
            color: #ddd;
            margin-bottom: 20px;
        }
        
        .tab-content {
            padding-top: 20px;
        }
        
        .nav-tabs .nav-link {
            color: var(--dark-mode);
            border: none;
            border-bottom: 3px solid transparent;
            padding: 10px 20px;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--love-red);
            border-bottom: 3px solid var(--love-red);
            background: transparent;
        }
        
        .settings-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .settings-option:hover {
            background: var(--light-bg);
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--love-red);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <!-- Навигация -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-heart heart-icon 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="index.html">Главная</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="dates.html">Найти свидание</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="profile.html">Личный кабинет</a>
                    </li>
                </ul>
                <div class="dropdown ms-3">
                    <button class="btn btn-outline-heart dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b786d4d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" 
                             class="rounded-circle me-2" width="30" height="30">
                        Анна
                        <span class="notification-badge">3</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i>Мой профиль</a></li>
                        <li><a class="dropdown-item" href="#settings"><i class="fas fa-cog me-2"></i>Настройки</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i>Выйти</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- Основной контент -->
    <div class="container py-5">
        <div class="row">
            <!-- Боковая панель -->
            <div class="col-lg-4 mb-4">
                <div class="sidebar">
                    <div class="text-center">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b786d4d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
                             class="user-avatar" alt="Анна">
                        <h4 class="mb-1">Анна, 26</h4>
                        <p class="text-muted mb-3">Москва</p>
                        <div class="match-badge">Профиль на 85%</div>
                    </div>
                    
                    <div class="profile-completion">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Заполненность профиля:</span>
                            <span class="completion-percentage">85%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" style="width: 85%"></div>
                        </div>
                        <p class="small text-muted mt-2 mb-0">Полный профиль привлекает на 60% больше откликов</p>
                    </div>
                    
                    <nav class="nav flex-column">
                        <a class="nav-link-custom active" href="#" onclick="showSection('profile')">
                            <i class="fas fa-user me-3"></i>Мой профиль
                        </a>
                        <a class="nav-link-custom" href="#" onclick="showSection('proposals')">
                            <i class="fas fa-heart me-3"></i>Мои предложения
                            <span class="notification-badge">3</span>
                        </a>
                        <a class="nav-link-custom" href="#" onclick="showSection('organizations')">
                            <i class="fas fa-building me-3"></i>Мои организации
                        </a>
                        <a class="nav-link-custom" href="#" onclick="showSection('events')">
                            <i class="fas fa-calendar-alt me-3"></i>Мероприятия
                        </a>
                        <a class="nav-link-custom" href="#" onclick="showSection('settings')">
                            <i class="fas fa-cog me-3"></i>Настройки
                        </a>
                    </nav>
                    
                    <div class="mt-4">
                        <button class="btn btn-heart w-100" onclick="createNewProposal()">
                            <i class="fas fa-plus me-2"></i>Предложить свидание
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Основной контент -->
            <div class="col-lg-8">
                <div class="main-content">
                    <!-- Профиль -->
                    <div id="profileSection" class="section-content">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-title mb-0">Мой профиль</h2>
                            <button class="btn btn-outline-heart" onclick="editProfile()">
                                <i class="fas fa-edit me-2"></i>Редактировать
                            </button>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="profile-field">
                                    <div class="d-flex justify-content-between">
                                        <div class="field-label">О себе</div>
                                        <i class="fas fa-edit edit-icon" onclick="editField('about')"></i>
                                    </div>
                                    <div class="field-value" id="aboutField">
                                        Люблю искусство, путешествия и хорошее вино. Работаю графическим дизайнером. В поиске интересного собеседника для романтических прогулок по городу.
                                    </div>
                                </div>
                                
                                <div class="profile-field">
                                    <div class="d-flex justify-content-between">
                                        <div class="field-label">Интересы</div>
                                        <i class="fas fa-edit edit-icon" onclick="editField('interests')"></i>
                                    </div>
                                    <div id="interestsField">
                                        <span class="interest-tag">Искусство</span>
                                        <span class="interest-tag">Путешествия</span>
                                        <span class="interest-tag">Вино</span>
                                        <span class="interest-tag">Фотография</span>
                                        <span class="interest-tag">Кино</span>
                                        <span class="interest-tag">Йога</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="profile-field">
                                    <div class="d-flex justify-content-between">
                                        <div class="field-label">Предпочтения в свиданиях</div>
                                        <i class="fas fa-edit edit-icon" onclick="editField('preferences')"></i>
                                    </div>
                                    <div class="field-value" id="preferencesField">
                                        Романтические ужины, прогулки по городу, посещение выставок. Люблю интеллектуальные беседы и открыта для новых впечатлений.
                                    </div>
                                </div>
                                
                                <div class="profile-field">
                                    <div class="d-flex justify-content-between">
                                        <div class="field-label">Контактная информация</div>
                                        <i class="fas fa-edit edit-icon" onclick="editField('contact')"></i>
                                    </div>
                                    <div class="field-value">
                                        <div><i class="fas fa-envelope me-2"></i> anna@example.com</div>
                                        <div class="mt-2"><i class="fas fa-phone me-2"></i> +7 (999) 123-45-67</div>
                                    </div>
                                </div>
                                
                                <div class="profile-field">
                                    <div class="d-flex justify-content-between">
                                        <div class="field-label">Статистика</div>
                                    </div>
                                    <div class="row text-center mt-3">
                                        <div class="col-4">
                                            <div class="stat-number">12</div>
                                            <div class="stat-label">Предложений</div>
                                        </div>
                                        <div class="col-4">
                                            <div class="stat-number">8</div>
                                            <div class="stat-label">Свиданий</div>
                                        </div>
                                        <div class="col-4">
                                            <div class="stat-number">94%</div>
                                            <div class="stat-label">Совпадений</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Мои предложения -->
                    <div id="proposalsSection" class="section-content" style="display: none;">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-title mb-0">Мои предложения свиданий</h2>
                            <button class="btn btn-heart" onclick="createNewProposal()">
                                <i class="fas fa-plus me-2"></i>Новое предложение
                            </button>
                        </div>
                        
                        <ul class="nav nav-tabs" id="proposalsTab">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#active-proposals">Активные (3)</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending-proposals">На рассмотрении (2)</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#completed-proposals">Завершенные</button>
                            </li>
                        </ul>
                        
                        <div class="tab-content" id="proposalsTabContent">
                            <!-- Активные предложения -->
                            <div class="tab-pane fade show active" id="active-proposals">
                                <div class="proposal-card">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h5 class="mb-1">Романтический ужин с видом на город</h5>
                                            <p class="text-muted mb-2">Ресторан "Панорама" | Сегодня, 20:00 | 4,500₽</p>
                                        </div>
                                        <span class="proposal-status status-open">Активно</span>
                                    </div>
                                    <p class="mb-3">"Ищу интересного собеседника для ужина с панорамным видом на город. Люблю искусство и хорошие истории."</p>
                                    
                                    <div class="mb-3">
                                        <h6>Отклики (3):</h6>
                                        <div class="d-flex align-items-center mb-2">
                                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80" 
                                                 class="rounded-circle me-2" width="40" height="40">
                                            <div>
                                                <strong>Алексей, 28</strong>
                                                <span class="match-badge ms-2">87%</span>
                                            </div>
                                            <div class="ms-auto">
                                                <button class="btn btn-heart btn-sm" onclick="acceptProposal(1)">
                                                    <i class="fas fa-check me-1"></i>Принять
                                                </button>
                                                <button class="btn btn-outline-heart btn-sm" onclick="declineProposal(1)">
                                                    <i class="fas fa-times me-1"></i>Отклонить
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between">
                                        <button class="btn btn-outline-heart btn-sm" onclick="editProposal(1)">
                                            <i class="fas fa-edit me-1"></i>Изменить
                                        </button>
                                        <button class="btn btn-outline-heart btn-sm" onclick="cancelProposal(1)">
                                            <i class="fas fa-times me-1"></i>Отменить
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="proposal-card">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h5 class="mb-1">Прогулка по набережной</h5>
                                            <p class="text-muted mb-2">Парк Горького | Завтра, 18:00 | Бесплатно</p>
                                        </div>
                                        <span class="proposal-status status-open">Активно</span>
                                    </div>
                                    <p class="mb-3">"Предлагаю неспешную прогулку по набережной, разговор по душам и возможно мороженое."</p>
                                    
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <span class="badge-category badge-romantic">Романтическое</span>
                                            <span class="badge-category badge-active">Активное</span>
                                        </div>
                                        <button class="btn btn-outline-heart btn-sm" onclick="viewResponses(2)">
                                            <i class="fas fa-users me-1"></i>2 отклика
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Предложения на рассмотрении -->
                            <div class="tab-pane fade" id="pending-proposals">
                                <div class="proposal-card">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h5 class="mb-1">Винный тур по подвалам</h5>
                                            <p class="text-muted mb-2">Винный бар "Подвал" | Суббота, 19:00 | 2,800₽</p>
                                        </div>
                                        <span class="proposal-status status-pending">Жду ответа</span>
                                    </div>
                                    <p class="mb-3">"Откликнулся на ваше предложение. Очень хотел бы присоединиться!"</p>
                                    
                                    <div class="d-flex align-items-center">
                                        <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80" 
                                             class="rounded-circle me-3" width="50" height="50">
                                        <div>
                                            <strong>Дмитрий, 30</strong>
                                            <div class="match-badge">89% совпадение</div>
                                        </div>
                                        <div class="ms-auto">
                                            <button class="btn btn-heart btn-sm" onclick="acceptResponse(3)">
                                                <i class="fas fa-check me-1"></i>Принять
                                            </button>
                                            <button class="btn btn-outline-heart btn-sm" onclick="declineResponse(3)">
                                                <i class="fas fa-times me-1"></i>Отклонить
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Мои организации -->
                    <div id="organizationsSection" class="section-content" style="display: none;">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-title mb-0">Мои организации</h2>
                            <button class="btn btn-heart" onclick="createOrganization()">
                                <i class="fas fa-plus me-2"></i>Создать организацию
                            </button>
                        </div>
                        
                        <p class="text-muted mb-4">Управляйте своими организациями, добавляйте места и мероприятия для свиданий</p>
                        
                        <div class="organization-card">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h5 class="mb-2">Кафе "Уютный уголок"</h5>
                                    <p class="text-muted mb-3">Небольшое кафе с домашней атмосферой, идеальное для первых свиданий</p>
                                    <div>
                                        <span class="badge-category badge-cozy">Уютное</span>
                                        <span class="badge-category badge-romantic">Романтическое</span>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="proposal-status status-open">Активно</div>
                                    <div class="mt-2">
                                        <button class="btn btn-outline-heart btn-sm" onclick="editOrganization(1)">
                                            <i class="fas fa-edit me-1"></i>Редактировать
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="org-stats">
                                <div class="stat-item">
                                    <div class="stat-number">3</div>
                                    <div class="stat-label">Места</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">12</div>
                                    <div class="stat-label">Свидания</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">4.7</div>
                                    <div class="stat-label">Рейтинг</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">156</div>
                                    <div class="stat-label">Просмотры</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="organization-card">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h5 class="mb-2">Квест-комната "Тайна"</h5>
                                    <p class="text-muted mb-3">Интерактивные квесты для пар, которые любят загадки и приключения</p>
                                    <div>
                                        <span class="badge-category badge-active">Активное</span>
                                        <span class="badge-category badge-intellectual">Интеллектуальное</span>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="proposal-status status-open">Активно</div>
                                    <div class="mt-2">
                                        <button class="btn btn-outline-heart btn-sm" onclick="editOrganization(2)">
                                            <i class="fas fa-edit me-1"></i>Редактировать
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="org-stats">
                                <div class="stat-item">
                                    <div class="stat-number">2</div>
                                    <div class="stat-label">Квеста</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">24</div>
                                    <div class="stat-label">Свидания</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">4.9</div>
                                    <div class="stat-label">Рейтинг</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-number">289</div>
                                    <div class="stat-label">Просмотры</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <button class="btn btn-outline-heart" onclick="createOrganization()">
                                <i class="fas fa-plus-circle me-2"></i>Создать новую организацию
                            </button>
                        </div>
                    </div>
                    
                    <!-- Мероприятия -->
                    <div id="eventsSection" class="section-content" style="display: none;">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-title mb-0">Мероприятия организаций</h2>
                            <button class="btn btn-heart" onclick="createEvent()">
                                <i class="fas fa-plus me-2"></i>Создать мероприятие
                            </button>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="event-card">
                                    <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                                         class="event-img" alt="Вечер живого джаза">
                                    <h5>Вечер живого джаза</h5>
                                    <p class="text-muted mb-2">Кафе "Уютный уголок" | 15 марта, 20:00</p>
                                    <p>Романтический вечер под живую джазовую музыку. Ограниченное количество мест.</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="price-tag">1,500₽</span>
                                        <button class="btn btn-heart btn-sm" onclick="viewEvent(1)">
                                            <i class="fas fa-eye me-1"></i>Подробнее
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6 mb-4">
                                <div class="event-card">
                                    <img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                                         class="event-img" alt="Новый квест">
                                    <h5>Запуск нового квеста</h5>
                                    <p class="text-muted mb-2">Квест-комната "Тайна" | 20-31 марта</p>
                                    <p>Эксклюзивный запуск квеста "Побег из библиотеки" для пар.</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="price-tag">2,500₽</span>
                                        <button class="btn btn-heart btn-sm" onclick="viewEvent(2)">
                                            <i class="fas fa-eye me-1"></i>Подробнее
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button class="btn btn-outline-heart" onclick="viewAllEvents()">
                                <i class="fas fa-list me-2"></i>Посмотреть все мероприятия
                            </button>
                        </div>
                    </div>
                    
                    <!-- Настройки -->
                    <div id="settingsSection" class="section-content" style="display: none;">
                        <h2 class="section-title mb-4">Настройки</h2>
                        
                        <div class="settings-option">
                            <div>
                                <h6>Уведомления по email</h6>
                                <p class="text-muted small mb-0">Получать уведомления о новых откликах и сообщениях</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-option">
                            <div>
                                <h6>СМС уведомления</h6>
                                <p class="text-muted small mb-0">Получать напоминания о свиданиях</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-option">
                            <div>
                                <h6>Показывать профиль в поиске</h6>
                                <p class="text-muted small mb-0">Другие пользователи могут находить ваш профиль</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-option">
                            <div>
                                <h6>Автоподтверждение свиданий</h6>
                                <p class="text-muted small mb-0">Автоматически подтверждать свидания от проверенных пользователей</p>
                            </div>
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="mt-5">
                            <h5 class="mb-3">Конфиденциальность</h5>
                            <div class="settings-option">
                                <div>
                                    <h6>Скрыть возраст</h6>
                                    <p class="text-muted small mb-0">Не показывать возраст в профиле</p>
                                </div>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="settings-option">
                                <div>
                                    <h6>Скрыть местоположение</h6>
                                    <p class="text-muted small mb-0">Показывать только город, не точный район</p>
                                </div>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="mt-5">
                            <button class="btn btn-outline-heart me-3">
                                <i class="fas fa-download me-2"></i>Экспорт данных
                            </button>
                            <button class="btn btn-outline-heart">
                                <i class="fas fa-trash me-2"></i>Удалить аккаунт
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальные окна -->
    <div class="modal fade" id="editProfileModal" 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="editProfileForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Имя</label>
                                <input type="text" class="form-control form-control-custom" value="Анна" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Возраст</label>
                                <input type="number" class="form-control form-control-custom" value="26" required>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Город</label>
                            <input type="text" class="form-control form-control-custom" value="Москва" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">О себе</label>
                            <textarea class="form-control form-control-custom" rows="4">Люблю искусство, путешествия и хорошее вино. Работаю графическим дизайнером. В поиске интересного собеседника для романтических прогулок по городу.</textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Интересы (через запятую)</label>
                            <input type="text" class="form-control form-control-custom" value="Искусство, Путешествия, Вино, Фотография, Кино, Йога">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Предпочтения в свиданиях</label>
                            <textarea class="form-control form-control-custom" rows="3">Романтические ужины, прогулки по городу, посещение выставок. Люблю интеллектуальные беседы и открыта для новых впечатлений.</textarea>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-heart">Сохранить изменения</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createOrganizationModal" 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="createOrganizationForm">
                        <div class="mb-3">
                            <label class="form-label">Название организации *</label>
                            <input type="text" class="form-control form-control-custom" required placeholder="Например: Кафе 'Романтика'">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Описание *</label>
                            <textarea class="form-control form-control-custom" rows="3" required placeholder="Опишите вашу организацию..."></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Тип организации</label>
                                <select class="form-select form-control-custom">
                                    <option>Ресторан/Кафе</option>
                                    <option>Квест-комната</option>
                                    <option>Кинотеатр</option>
                                    <option>Музей/Галерея</option>
                                    <option>Спа/Сауна</option>
                                    <option>Другое</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Категории для свиданий</label>
                                <select class="form-select form-control-custom" multiple>
                                    <option>Романтическое</option>
                                    <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 form-control-custom" placeholder="Улица, дом">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Ссылка на фото</label>
                            <input type="url" class="form-control form-control-custom" placeholder="https://...">
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-heart">Создать организацию</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createProposalModal" 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="createProposalForm">
                        <div class="mb-3">
                            <label class="form-label">Заголовок *</label>
                            <input type="text" class="form-control form-control-custom" required placeholder="Например: Романтический ужин с видом на город">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Описание *</label>
                            <textarea class="form-control form-control-custom" rows="3" required placeholder="Опишите, какое свидание вы предлагаете..."></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Место</label>
                                <select class="form-select form-control-custom">
                                    <option>Любое подходящее место</option>
                                    <option>Ресторан "Панорама"</option>
                                    <option>Парк Горького</option>
                                    <option>Кинотеатр "Октябрь"</option>
                                    <option>Другое</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Категория</label>
                                <select class="form-select form-control-custom">
                                    <option>Романтическое</option>
                                    <option>Активное</option>
                                    <option>Интеллектуальное</option>
                                    <option>Уютное</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Дата</label>
                                <input type="date" class="form-control form-control-custom">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Время</label>
                                <input type="time" class="form-control form-control-custom">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Примерный бюджет (на двоих)</label>
                            <input type="number" class="form-control form-control-custom" placeholder="₽">
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-heart">Опубликовать предложение</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Футер -->
    <footer class="bg-dark text-white py-5 mt-5">
        <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>
                
                <div class="col-lg-4 mb-4">
                    <h5>Помощь</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-light text-decoration-none">FAQ</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-4 mb-4">
                    <h5>Контакты</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="fas fa-envelope me-2"></i> support@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>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Модальные окна
        const editProfileModal = new bootstrap.Modal(document.getElementById('editProfileModal'));
        const createOrganizationModal = new bootstrap.Modal(document.getElementById('createOrganizationModal'));
        const createProposalModal = new bootstrap.Modal(document.getElementById('createProposalModal'));
        
        // Текущая активная секция
        let currentSection = 'profile';
        
        // Показать секцию
        function showSection(sectionId) {
            // Скрыть все секции
            document.querySelectorAll('.section-content').forEach(section => {
                section.style.display = 'none';
            });
            
            // Показать выбранную секцию
            document.getElementById(sectionId + 'Section').style.display = 'block';
            
            // Обновить активную ссылку в навигации
            document.querySelectorAll('.nav-link-custom').forEach(link => {
                link.classList.remove('active');
            });
            event.currentTarget.classList.add('active');
            
            currentSection = sectionId;
        }
        
        // Редактирование профиля
        function editProfile() {
            editProfileModal.show();
        }
        
        // Редактирование поля
        function editField(fieldId) {
            let newValue = prompt('Введите новое значение:');
            if (newValue !== null) {
                document.getElementById(fieldId + 'Field').textContent = newValue;
            }
        }
        
        // Создание организации
        function createOrganization() {
            createOrganizationModal.show();
        }
        
        // Редактирование организации
        function editOrganization(id) {
            alert('Редактирование организации #' + id);
        }
        
        // Создание предложения свидания
        function createNewProposal() {
            createProposalModal.show();
        }
        
        // Редактирование предложения
        function editProposal(id) {
            alert('Редактирование предложения #' + id);
        }
        
        // Отмена предложения
        function cancelProposal(id) {
            if (confirm('Вы уверены, что хотите отменить это предложение?')) {
                alert('Предложение отменено.');
            }
        }
        
        // Принятие предложения
        function acceptProposal(id) {
            if (confirm('Принять этого пользователя для свидания?')) {
                alert('Вы приняли предложение! Теперь можете договориться о деталях.');
            }
        }
        
        // Отклонение предложения
        function declineProposal(id) {
            if (confirm('Отклонить это предложение?')) {
                alert('Предложение отклонено.');
            }
        }
        
        // Просмотр ответов
        function viewResponses(id) {
            alert('Просмотр ответов на предложение #' + id);
        }
        
        // Принятие ответа
        function acceptResponse(id) {
            if (confirm('Принять этот ответ?')) {
                alert('Ответ принят! Свидание подтверждено.');
            }
        }
        
        // Отклонение ответа
        function declineResponse(id) {
            if (confirm('Отклонить этот ответ?')) {
                alert('Ответ отклонен.');
            }
        }
        
        // Создание мероприятия
        function createEvent() {
            alert('Создание нового мероприятия');
        }
        
        // Просмотр мероприятия
        function viewEvent(id) {
            alert('Просмотр мероприятия #' + id);
        }
        
        // Просмотр всех мероприятий
        function viewAllEvents() {
            alert('Просмотр всех мероприятий');
        }
        
        // Обработка формы редактирования профиля
        document.getElementById('editProfileForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Изменения сохранены!');
            editProfileModal.hide();
        });
        
        // Обработка формы создания организации
        document.getElementById('createOrganizationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Организация создана! Она появится в вашем кабинете после модерации.');
            createOrganizationModal.hide();
        });
        
        // Обработка формы создания предложения
        document.getElementById('createProposalForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Предложение опубликовано!');
            createProposalModal.hide();
        });
        
        // Инициализация
        document.addEventListener('DOMContentLoaded', function() {
            // Инициализация табов
            const tabTriggers = document.querySelectorAll('#proposalsTab button');
            tabTriggers.forEach(trigger => {
                trigger.addEventListener('click', function() {
                    tabTriggers.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // Плавная прокрутка
            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'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>