<?php
$easychat_demo_login_prefill = defined('EASYCHAT_DEMO_LOGIN_PREFILL') && EASYCHAT_DEMO_LOGIN_PREFILL;
$easychat_login_username_value = $easychat_demo_login_prefill ? 'manager' : '';
$easychat_login_password_value = $easychat_demo_login_prefill ? 'manager' : '';
$easychat_session_storage_available = !isset($session_storage_available) || (bool)$session_storage_available;
$easychat_session_storage_error = isset($session_storage_error) ? (string)$session_storage_error : '';
?>

<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-6 col-lg-4">
            
            <!-- 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 Line -->
                <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-5" data-easychat-session-available="<?php echo $easychat_session_storage_available ? '1' : '0'; ?>" data-session-error="<?php echo htmlspecialchars($easychat_session_storage_error, ENT_QUOTES, 'UTF-8'); ?>">
                    <div class="text-center mb-4">
                        <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 fa-2x" style="color: #a855f7 !important;"></i>
                        </div>
                        <h3 class="fw-bold tracking-tight" style="background: linear-gradient(90deg, #a5b4fc, #e9d5ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">EasyChat</h3>
                        <p class="text-muted small mt-1">Панель управления оператора</p>
                    </div>

                    <?php if (!$easychat_session_storage_available) { ?>
                    <div id="session-storage-alert" class="alert alert-danger mb-3" role="alert">
                        <div class="fw-semibold mb-2"><i class="fa fa-shield me-2"></i>Не удалось безопасно открыть EasyChat</div>
                        <div class="small"><?php echo htmlspecialchars($easychat_session_storage_error, ENT_QUOTES, 'UTF-8'); ?></div>
                    </div>
                    <button type="button" id="btn-return-cms" class="btn btn-primary w-100 py-2 fw-semibold" style="border-radius: 8px; background: linear-gradient(135deg, #6366f1, #a855f7); border: none;">
                        <i class="fa fa-arrow-left me-2"></i>Вернуться назад
                    </button>
                    <p id="session-storage-recovery-hint" class="text-muted small text-center mt-3 mb-0">После возврата снова нажмите EasyChat в меню сайта. Логин и пароль вводить не нужно.</p>
                    <?php } else { ?>

                    <div id="passkey-login-wrap" class="d-none mb-4">
                        <button type="button" id="btn-passkey-login" class="btn btn-outline-light w-100 py-2 fw-semibold" style="border-radius: 8px; border-color: rgba(255,255,255,0.22);">
                            <i class="fa fa-key me-2"></i><span class="easychat-passkey-login-label">Войти через passkey</span>
                        </button>
                        <div id="passkey-login-hint" class="text-muted small text-center mt-2">Подтвердите вход на этом устройстве.</div>
                        <div class="d-flex align-items-center mt-3" aria-hidden="true">
                            <span class="flex-grow-1 border-top border-secondary opacity-25"></span>
                            <span class="px-3 text-muted small">или пароль</span>
                            <span class="flex-grow-1 border-top border-secondary opacity-25"></span>
                        </div>
                    </div>

                    <aside class="alert alert-info d-flex gap-3 align-items-start mb-4" role="note" data-cms-login-hint>
                        <i class="fa fa-shield mt-1" aria-hidden="true"></i>
                        <div>
                            <div class="fw-semibold">Установили EasyChat как модуль сайта?</div>
                            <div class="small mt-1">Откройте EasyChat из меню админки OpenCart, WordPress, Webasyst или Битрикс. Отдельный логин и начальный пароль вводить не нужно.</div>
                        </div>
                    </aside>

                    <!-- Login Form -->
                    <form id="login-form" method="POST" autocomplete="off">
                        <input type="hidden" name="cms_prefill" value="0">
                        <input type="hidden" name="cms_source" value="">
                        <input type="hidden" name="cms_handoff_token" value="">
                        
                        <div class="mb-3">
                            <label class="form-label text-muted small"><i class="fa fa-user me-2"></i> Имя пользователя</label>
                            <input type="text" autocomplete="off" class="form-control bg-dark border-secondary text-white px-3 py-2" name="username" value="<?php echo htmlspecialchars($easychat_login_username_value, ENT_QUOTES, 'UTF-8'); ?>" required placeholder="Введите логин" 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"><i class="fa fa-lock me-2"></i> Пароль</label>
                            <input type="password" autocomplete="off" class="form-control bg-dark border-secondary text-white px-3 py-2" name="password" value="<?php echo htmlspecialchars($easychat_login_password_value, ENT_QUOTES, 'UTF-8'); ?>" required placeholder="Введите пароль" style="border-radius: 8px; border-color: rgba(255,255,255,0.15) !important;">
                        </div>

                        <button type="submit" id="btn-login" class="btn btn-primary w-100 py-2 fw-semibold" style="border-radius: 8px; background: linear-gradient(135deg, #6366f1, #a855f7); border: none;">
                            Войти <i class="fa fa-sign-in-alt ms-2"></i>
                        </button>
                    </form>
                    
                    <!-- Alert Box -->
                    <div id="alert-box" class="alert alert-danger mt-4 p-3 d-none animate__animated animate__fadeIn" style="border-radius: 8px; font-size: 14px;">
                        <i class="fa fa-exclamation-triangle me-2"></i> <span class="alert-text">Ошибка</span>
                    </div>
                    <?php } ?>
                </div>
            </div>
            
        </div>
    </div>
</div>



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