<div class="container d-flex justify-content-center align-items-center flex-grow-1 my-5">
    <div class="row w-100 justify-content-center">
        <div class="col-md-11 col-lg-9 col-xl-8">
            <!-- Sleek Glowing Card -->
            <div class="card bg-dark text-white border-0 shadow-lg position-relative overflow-hidden" style="border-radius: 20px; backdrop-filter: blur(16px); background: rgba(30, 30, 40, 0.85) !important;">
                
                <!-- Glowing Accent Lines -->
                <div class="position-absolute w-100" style="height: 4px; background: linear-gradient(90deg, #6366f1, #a855f7); top: 0; left: 0;"></div>
                
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-5">
                        <div class="d-inline-flex align-items-center justify-content-center bg-gradient p-3 rounded-circle mb-3" style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15)); width: 70px; height: 70px; border: 1px solid rgba(168, 85, 247, 0.3);">
                            <i class="fa fa-comments text-info fa-2x" style="color: #a855f7 !important;"></i>
                        </div>
                        <h2 class="fw-bold tracking-tight" style="background: linear-gradient(90deg, #a5b4fc, #e9d5ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Установка EasyChat</h2>
                        <p class="text-muted small mt-1">Изолированный чат-сервер для вашего сайта</p>
                    </div>

                    <!-- Custom Form Container -->
                    <form id="install-form" method="POST" autocomplete="off">
                        
                        <!-- Step 1: Database Credentials -->
                        <div id="step-1">
                            <h5 class="fw-semibold mb-4 text-indigo" style="color: #a5b4fc;"><i class="fa fa-database me-2"></i> 1. Настройка базы данных</h5>
                            
                            <div class="row">
                                <div class="col-md-8 mb-3">
                                    <label class="form-label text-muted small">Хост базы данных</label>
                                    <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="host" value="localhost" required style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label text-muted small">Порт</label>
                                    <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="port" value="3306" required style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-muted small">Имя базы данных</label>
                                <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="database" placeholder="например, easy_chat_db" required style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-muted small">Имя пользователя базы данных</label>
                                <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="user" required style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-muted small">Пароль базы данных</label>
                                <input type="password" class="form-control bg-dark border-secondary text-white px-3 py-2" name="password" style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <div class="mb-4">
                                <label class="form-label text-muted small">Префикс таблиц</label>
                                <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="prefix" value="easychat_" style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <button type="button" id="btn-test-db" class="btn btn-outline-info px-4 py-2" style="border-radius: 8px; border-color: rgba(0, 229, 255, 0.4); color: #00e5ff;">
                                    <i class="fa fa-plug me-2"></i> Проверить связь
                                </button>
                                <button type="button" id="btn-to-step-2" class="btn btn-primary px-4 py-2" style="border-radius: 8px; background: linear-gradient(135deg, #6366f1, #a855f7); border: none;">
                                    Далее <i class="fa fa-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Step 2: Administrator Settings -->
                        <div id="step-2" style="display: none;">
                            <h5 class="fw-semibold mb-4 text-purple" style="color: #e9d5ff;"><i class="fa fa-user-shield me-2"></i> 2. Администратор</h5>

                            <div class="mb-3">
                                <label class="form-label text-muted small">Логин администратора</label>
                                <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" name="admin_login" value="admin" required style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <div class="mb-3">
                                <label class="form-label text-muted small">Пароль администратора</label>
                                <input type="password" class="form-control bg-dark border-secondary text-white px-3 py-2" name="admin_password" required placeholder="Введите надежный пароль" style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                            </div>

                            <div class="install-options mb-4">
                                <div class="install-option-card install-option-card-primary">
                                    <div class="install-option-icon"><i class="fa fa-bolt"></i></div>
                                    <div class="install-option-content">
                                        <div class="install-option-title">30 000 AI-токенов EasyTokens</div>
                                        <div class="install-option-text">Стартовый баланс для ИИ-подсказок и автоответов. После вашего согласия они будут готовы к работе сразу.</div>
                                        <div class="install-option-field">
                                            <label class="form-label text-muted small" for="install-admin-email">Email для подарочных AI-токенов</label>
                                            <input type="email" class="form-control bg-dark border-secondary text-white px-3 py-2" id="install-admin-email" name="admin_email" placeholder="owner@example.ru">
                                        </div>
                                    </div>
                                    <label class="install-switch" for="claim-easytokens-gift">
                                        <input type="hidden" name="claim_easytokens_gift" value="0">
                                        <input type="checkbox" name="claim_easytokens_gift" value="1" id="claim-easytokens-gift" checked>
                                        <span></span>
                                    </label>
                                </div>

                                <div class="install-option-card">
                                    <div class="install-option-icon"><i class="fa fa-mobile"></i></div>
                                    <div class="install-option-content">
                                        <div class="install-option-title">Подключить сервисы EasyChat24 <span class="install-option-badge">рекомендуем</span></div>
                                        <div class="install-option-text">Нужно для фирменного Android-приложения, push-уведомлений операторам и проверки домена.</div>
                                        <div class="install-option-note">Передаются только технические данные: домен, версия EasyChat, тип установки, PHP-версия и ID установки. Переписки, клиенты, заказы, пароли и API-ключи не передаются.</div>
                                        <div class="install-option-field">
                                            <label class="form-label text-muted small" for="install-attribution-code">Код установки со страницы скачивания</label>
                                            <input type="text" class="form-control bg-dark border-secondary text-white px-3 py-2" id="install-attribution-code" name="install_code" placeholder="EC-ABCD-2345" maxlength="12" autocomplete="one-time-code" autocapitalize="characters" spellcheck="false">
                                            <small class="form-text text-muted">Если сохранили код после скачивания, вставьте его сюда. Код необязателен и не влияет на работу EasyChat.</small>
                                        </div>
                                    </div>
                                    <label class="install-switch" for="easychat-services-consent">
                                        <input type="hidden" name="easychat_services_consent" value="0">
                                        <input type="checkbox" name="easychat_services_consent" value="1" id="easychat-services-consent" checked>
                                        <span></span>
                                    </label>
                                </div>

                                <div class="install-option-card">
                                    <div class="install-option-icon"><i class="fa fa-envelope-open"></i></div>
                                    <div class="install-option-content">
                                        <div class="install-option-title">Получать важные новости EasyChat24</div>
                                        <div class="install-option-text">Только релизы, безопасность и полезные возможности. Без спама, с возможностью отписаться.</div>
                                        <div class="install-option-field d-none" id="easychat-news-email-row">
                                            <label class="form-label text-muted small" for="easychat-news-email">Email для новостей и обновлений</label>
                                            <input type="email" class="form-control bg-dark border-secondary text-white px-3 py-2" id="easychat-news-email" name="easychat_news_email" placeholder="owner@example.ru">
                                        </div>
                                    </div>
                                    <label class="install-switch" for="easychat-news-consent">
                                        <input type="hidden" name="easychat_news_consent" value="0">
                                        <input type="checkbox" name="easychat_news_consent" value="1" id="easychat-news-consent">
                                        <span></span>
                                    </label>
                                </div>

                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <button type="button" id="btn-back-to-1" class="btn btn-outline-secondary px-4 py-2 text-white border-secondary" style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                                    <i class="fa fa-arrow-left me-2"></i> Назад
                                </button>
                                <button type="submit" id="btn-submit" class="btn btn-success px-4 py-2" style="border-radius: 8px; background: linear-gradient(135deg, #10b981, #059669); border: none;">
                                    <i class="fa fa-check me-2"></i> Завершить установку
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Progress Notifications -->
                    <div id="alert-box" class="alert mt-4 p-3 d-none animate__animated animate__fadeIn" style="border-radius: 8px; font-size: 14px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>



<?php echo easychat_script_tag('js/views/install.js'); ?>
