<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Настройка приложения</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12 text-center mb-4">
                <h1>Настройка приложения</h1>
                <p>Выполните первоначальную настройку приложения</p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="setupTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="database-tab" data-bs-toggle="tab" data-bs-target="#database-content" type="button" role="tab" aria-controls="database-content" aria-selected="true">
                                    <i class="bi bi-database"></i> База данных
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin-content" type="button" role="tab" aria-controls="admin-content" aria-selected="false" disabled>
                                    <i class="bi bi-person-fill-lock"></i> Администратор
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="app-tab" data-bs-toggle="tab" data-bs-target="#app-content" type="button" role="tab" aria-controls="app-content" aria-selected="false" disabled>
                                    <i class="bi bi-gear"></i> Параметры приложения
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="setupTabContent">
                            <!-- Настройка базы данных -->
                            <div class="tab-pane fade show active" id="database-content" role="tabpanel" aria-labelledby="database-tab">
                                <form id="database-form">
                                    <div class="mb-3">
                                        <label for="db-driver" class="form-label">Тип базы данных</label>
                                        <select class="form-select" id="db-driver" name="driver" required>
                                            <option value="mysql">MySQL</option>
                                            <option value="postgresql">PostgreSQL</option>
                                            <option value="sqlite">SQLite</option>
                                        </select>
                                    </div>
                                    
                                    <div class="row mb-3 server-settings">
                                        <div class="col-md-8">
                                            <label for="db-host" class="form-label">Хост</label>
                                            <input type="text" class="form-control" id="db-host" name="host" value="localhost" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="db-port" class="form-label">Порт</label>
                                            <input type="number" class="form-control" id="db-port" name="port" value="3306" required>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="db-database" class="form-label">Название базы данных</label>
                                        <input type="text" class="form-control" id="db-database" name="database" required>
                                    </div>
                                    
                                    <div class="row mb-3 server-settings">
                                        <div class="col-md-6">
                                            <label for="db-username" class="form-label">Имя пользователя</label>
                                            <input type="text" class="form-control" id="db-username" name="username" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="db-password" class="form-label">Пароль</label>
                                            <input type="password" class="form-control" id="db-password" name="password">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3 server-settings">
                                        <label for="db-charset" class="form-label">Кодировка</label>
                                        <input type="text" class="form-control" id="db-charset" name="charset" value="utf8mb4">
                                    </div>
                                    
                                    <div class="alert alert-secondary mb-3 server-settings">
                                        <strong>Учётная запись root (для создания БД)</strong><br>
                                        <small class="text-muted">Если база или пользователь ещё не созданы, укажите учётные данные с правами создания БД (например, root). Пароль root на сервер не сохраняется в открытом виде.</small>
                                    </div>
                                    <div class="row mb-3 server-settings">
                                        <div class="col-md-6">
                                            <label for="db-root-username" class="form-label">Логин root</label>
                                            <input type="text" class="form-control" id="db-root-username" name="root_username" placeholder="root" autocomplete="off">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="db-root-password" class="form-label">Пароль root</label>
                                            <input type="password" class="form-control" id="db-root-password" name="root_password" placeholder="••••••••" autocomplete="new-password">
                                        </div>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between">
                                        <button type="button" class="btn btn-primary" id="test-db-connection">
                                            <i class="bi bi-link"></i> Проверить соединение
                                        </button>
                                        <button type="submit" class="btn btn-success">
                                            <i class="bi bi-save"></i> Сохранить настройки БД
                                        </button>
                                    </div>
                                </form>
                                
                                <div class="mt-3 connection-result" style="display: none;">
                                    <div class="alert" role="alert"></div>
                                </div>
                            </div>
                            
                            <!-- Создание администратора -->
                            <div class="tab-pane fade" id="admin-content" role="tabpanel" aria-labelledby="admin-tab">
                                <div class="alert alert-info mb-3">
                                    <i class="bi bi-info-circle"></i> Создайте учетную запись главного администратора для доступа к административной панели.
                                </div>
                                
                                <form id="admin-form">
                                    <div class="mb-3">
                                        <label for="admin-username" class="form-label">Имя пользователя</label>
                                        <input type="text" class="form-control" id="admin-username" name="username" required>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="admin-password" class="form-label">Пароль</label>
                                        <input type="password" class="form-control" id="admin-password" name="password" required>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="admin-password-confirm" class="form-label">Подтверждение пароля</label>
                                        <input type="password" class="form-control" id="admin-password-confirm" name="password_confirm" required>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="admin-email" class="form-label">Email</label>
                                        <input type="email" class="form-control" id="admin-email" name="email" required>
                                    </div>
                                    
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-success">
                                            <i class="bi bi-person-plus"></i> Создать администратора
                                        </button>
                                    </div>
                                </form>
                                
                                <div class="mt-3 admin-result" style="display: none;">
                                    <div class="alert" role="alert"></div>
                                </div>
                            </div>
                            
                            <!-- Настройки приложения -->
                            <div class="tab-pane fade" id="app-content" role="tabpanel" aria-labelledby="app-tab">
                                <form id="app-form">
                                    <div class="mb-3">
                                        <label for="app-name" class="form-label">Название приложения</label>
                                        <input type="text" class="form-control" id="app-name" name="app.name" value="ModularApp">
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="web-host" class="form-label">Хост веб-сервера</label>
                                            <input type="text" class="form-control" id="web-host" name="web.host" value="0.0.0.0">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="web-port" class="form-label">Порт веб-сервера</label>
                                            <input type="number" class="form-control" id="web-port" name="web.port" value="5000">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="log-level" class="form-label">Уровень логирования</label>
                                        <select class="form-select" id="log-level" name="logging.level">
                                            <option value="DEBUG">DEBUG</option>
                                            <option value="INFO" selected>INFO</option>
                                            <option value="WARNING">WARNING</option>
                                            <option value="ERROR">ERROR</option>
                                            <option value="CRITICAL">CRITICAL</option>
                                        </select>
                                    </div>
                                    
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn btn-success">
                                            <i class="bi bi-save"></i> Сохранить настройки приложения
                                        </button>
                                    </div>
                                </form>
                                
                                <div class="mt-3 settings-result" style="display: none;">
                                    <div class="alert" role="alert"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Кнопка завершения настройки -->
                <div class="d-flex justify-content-center mt-4 mb-5">
                    <button type="button" class="btn btn-lg btn-primary" id="complete-setup" disabled title="Завершите все шаги мастера настройки">
                        <i class="bi bi-check-circle"></i> Завершить настройку
                    </button>
                </div>
                
                <!-- Индикатор состояния настройки -->
                <div class="setup-status mb-5">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="bi bi-database status-icon" id="db-status-icon"></i>
                                    <h5>База данных</h5>
                                    <span class="badge" id="db-status-badge">Не настроено</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="bi bi-person-fill-lock status-icon" id="admin-status-icon"></i>
                                    <h5>Администратор</h5>
                                    <span class="badge" id="admin-status-badge">Не создан</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body text-center">
                                    <i class="bi bi-gear status-icon" id="app-status-icon"></i>
                                    <h5>Приложение</h5>
                                    <span class="badge" id="app-status-badge">Не настроено</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальные окна мастера настройки -->
    <div class="modal fade" id="setup-modal" tabindex="-1" aria-labelledby="setup-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="setup-modal-title">Настройка приложения</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body" id="setup-modal-body"></div>
                <div class="modal-footer" id="setup-modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="setup-modal-cancel">Отмена</button>
                    <button type="button" class="btn btn-primary" id="setup-modal-confirm">Продолжить</button>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/setup.js') }}"></script>
</body>
</html> 