<?php
include "includes/header.php";
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel de Configuração | Sistema Automático</title>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --dark-bg: #0f172a;
            --card-bg: rgba(255, 255, 255, 0.08);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --neon-blue: #00d4ff;
            --neon-purple: #9d4edd;
            --text-light: #f8fafc;
            --text-muted: #94a3b8;
            --success-green: #00ff88;
            --error-red: #ff4757;
        }

        body {
            background: var(--dark-bg);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: var(--text-light);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(103, 126, 234, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.1) 0%, transparent 50%);
            z-index: -1;
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .title {
            font-size: 3.5rem;
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
            letter-spacing: -0.5px;
            position: relative;
            display: inline-block;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--primary-gradient);
            border-radius: 2px;
        }

        .subtitle {
            color: var(--text-muted);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .settings-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .settings-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .card-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-light);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .card-title i {
            color: var(--neon-blue);
            font-size: 1.5rem;
        }

        /* Alert Success com fade out */
        .alert-success {
            background: rgba(0, 255, 136, 0.1);
            border: 1px solid rgba(0, 255, 136, 0.3);
            color: var(--success-green);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            animation: slideIn 0.6s ease-out;
            display: flex;
            align-items: center;
            justify-content: space-between;
            opacity: 1;
            transition: opacity 0.5s ease-out;
        }

        .alert-success.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .alert-success .alert-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success .alert-icon {
            font-size: 1.2rem;
        }

        .alert-success .alert-close {
            background: none;
            border: none;
            color: var(--success-green);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.3s;
        }

        .alert-success .alert-close:hover {
            background: rgba(0, 255, 136, 0.2);
        }

        /* Switch Moderno */
        .switch-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 2rem;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 70px;
            height: 36px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 28px;
            width: 28px;
            left: 4px;
            bottom: 4px;
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
        }

        input:checked + .slider {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        input:checked + .slider:before {
            transform: translateX(34px);
            background: linear-gradient(135deg, #00ff88, #00d4ff);
            box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
        }

        .switch-label {
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--text-light);
        }

        .switch-status {
            margin-left: auto;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .status-active {
            color: var(--success-green);
            background: rgba(0, 255, 136, 0.1);
            border-color: rgba(0, 255, 136, 0.3);
        }

        .status-inactive {
            color: var(--error-red);
            background: rgba(255, 71, 87, 0.1);
            border-color: rgba(255, 71, 87, 0.3);
        }

        /* Formulário */
        .server-form {
            animation: slideIn 0.6s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-group {
            margin-bottom: 1.8rem;
        }

        .form-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-light);
            margin-bottom: 0.8rem;
        }

        .form-label i {
            color: var(--neon-blue);
            font-size: 1.1rem;
        }

        .form-input {
            width: 100%;
            padding: 1rem 1.2rem;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-light);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--neon-blue);
            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
            background: rgba(0, 0, 0, 0.4);
        }

        .form-input::placeholder {
            color: var(--text-muted);
        }

        /* Botão Futurista */
        .btn-futuristic {
            position: relative;
            padding: 1rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            border: none;
            border-radius: 12px;
            color: white;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 
                0 10px 30px rgba(0, 212, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .btn-futuristic:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 15px 40px rgba(0, 212, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            background: linear-gradient(135deg, var(--success-green), var(--neon-blue));
        }

        .btn-futuristic:active {
            transform: translateY(-1px);
        }

        .btn-futuristic::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

        .btn-futuristic:hover::before {
            left: 100%;
        }

        /* Stats Container com 4 cards */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 3rem;
        }

        @media (max-width: 1200px) {
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
        }

        .stat-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.3);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-light);
            margin-bottom: 0.5rem;
            word-break: break-all;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stat-label {
            color: var(--text-muted);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .stat-subtext {
            color: var(--text-muted);
            font-size: 0.8rem;
            opacity: 0.8;
            margin-top: 0.5rem;
        }

        /* Card do Chatbot (igual aos outros) */
        .chatbot-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .chatbot-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.3);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .chatbot-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #9d4edd, #00d4ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .chatbot-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-light);
            margin-bottom: 0.5rem;
        }

        .chatbot-subtitle {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .chatbot-details {
            width: 100%;
            margin-top: 1rem;
        }

        .chatbot-item {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 0.8rem;
            margin-bottom: 0.8rem;
            text-align: left;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .chatbot-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .chatbot-label i {
            font-size: 0.8rem;
        }

        .chatbot-value {
            font-size: 0.9rem;
            color: var(--text-light);
            word-break: break-all;
            font-weight: 500;
        }

        .chatbot-empty {
            color: var(--text-muted);
            font-style: italic;
            padding: 1rem;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .main-container {
                padding: 1rem;
            }
            
            .title {
                font-size: 2.5rem;
            }
            
            .settings-card {
                padding: 1.5rem;
            }
            
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .switch-container {
                flex-wrap: wrap;
            }
            
            .switch-status {
                margin-left: 0;
                margin-top: 10px;
                width: 100%;
                text-align: center;
            }
        }

        /* Particles Background */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--neon-blue);
            border-radius: 50%;
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* Animação de fade out */
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>
    
    <div class="main-container">
        <div class="header">
            <h1 class="title">🤖 Painel do Chatbot</h1>
            <p class="subtitle">Configure e monitore o sistema de teste automático com integração em tempo real</p>
        </div>

        <?php
        $showAlert = false;
        if (isset($_POST["btn-save"])) {
            file_put_contents("trial_mode", isset($_POST["trial"]) ? $_POST["trial"] : "");
            if (isset($_POST["app_dns"])) {
                file_put_contents("app_dns", $_POST["app_dns"]);
                file_put_contents("app_url", $_POST["app_url"]);
                $showAlert = true;
            }
        }

        $app_dns = file_get_contents("app_dns");
        $app_url = file_get_contents("app_url");
        $mode = file_get_contents("trial_mode");
        $checked = $mode == "trial" ? "checked" : "";
        $status = $mode == "trial" ? "ATIVO" : "INATIVO";
        $statusClass = $mode == "trial" ? "status-active" : "status-inactive";
        ?>

        <!-- Alert de Sucesso -->
        <?php if ($showAlert): ?>
        <div class="alert-success" id="successAlert">
            <div class="alert-content">
                <i class="fas fa-check-circle alert-icon"></i>
                <span>✅ Configurações salvas com sucesso! O sistema foi atualizado.</span>
            </div>
            <button class="alert-close" onclick="hideAlert()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <?php endif; ?>

        <div class="settings-card">
            <h2 class="card-title">
                <i class="fas fa-cogs"></i>
                Configurações do Sistema
            </h2>
            
            <form method="POST" id="configForm">
                <div class="switch-container">
                    <label class="switch">
                        <input type="checkbox" name="trial" value="trial" id="trial_check" <?php echo $checked; ?>>
                        <span class="slider"></span>
                    </label>
                    <span class="switch-label">Modo Teste Automático</span>
                    <span class="switch-status <?php echo $statusClass; ?>" id="statusDisplay">
                        <i class="fas fa-circle" style="font-size: 0.7rem; margin-right: 5px;"></i>
                        <?php echo $status; ?>
                    </span>
                </div>

                <div id="serverConfig" class="server-form" style="<?php echo $mode == "trial" ? 'display: block;' : 'display: none;' ?>">
                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-network-wired"></i>
                            Servidor DNS
                        </label>
                        <input type="text" 
                               class="form-input" 
                               id="app_dns" 
                               name="app_dns" 
                               placeholder="Ex: http://cdn.seupainel.xyz:80" 
                               value="<?php echo htmlspecialchars($app_dns); ?>">
                        <small style="color: var(--text-muted); margin-top: 5px; display: block;">
                            <i class="fas fa-info-circle"></i> Endereço do servidor para conexão
                        </small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-comment-dots"></i>
                            Webhook do Chatbot
                        </label>
                        <input type="text" 
                               class="form-input" 
                               id="app_url" 
                               name="app_url" 
                               placeholder="Ex: https://painel.seupainel.xyz/chatbot/?id=1511" 
                               value="<?php echo htmlspecialchars($app_url); ?>">
                        <small style="color: var(--text-muted); margin-top: 5px; display: block;">
                            <i class="fas fa-info-circle"></i> Endpoint para comunicação com o chatbot
                        </small>
                    </div>
                </div>

                <center>
                    <button type="submit" name="btn-save" class="btn-futuristic">
                        <i class="fas fa-sync-alt" style="margin-right: 10px;"></i>
                        Atualizar Configurações
                    </button>
                </center>
            </form>
        </div>

        <!-- Cards Grid com 4 cards - Agora incluindo o Chatbot -->
        <div class="stats-container">
            <!-- Card 1: Status do Sistema -->
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-power-off"></i>
                </div>
                <div class="stat-value" id="systemStatus"><?php echo $mode == "trial" ? "ONLINE" : "OFFLINE"; ?></div>
                <div class="stat-label">Status do Sistema</div>
                <div class="stat-subtext">Teste Automático</div>
            </div>
            
            <!-- Card 2: DNS Configurado -->
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-database"></i>
                </div>
                <div class="stat-value" id="dnsStatus"><?php echo !empty($app_dns) ? "✓" : "✗"; ?></div>
                <div class="stat-label">DNS Configurado</div>
                <div class="stat-subtext" id="dnsText"><?php echo !empty($app_dns) ? "Servidor ativo" : "Não configurado"; ?></div>
            </div>
            
            <!-- Card 3: Chatbot Ativo -->
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-comments"></i>
                </div>
                <div class="stat-value" id="chatbotStatus"><?php echo !empty($app_url) ? "✓" : "✗"; ?></div>
                <div class="stat-label">Chatbot Ativo</div>
                <div class="stat-subtext" id="chatbotText"><?php echo !empty($app_url) ? "Webhook configurado" : "Não configurado"; ?></div>
            </div>
            
            <!-- Card 4: Preview do Chatbot (IGUAL aos outros 3) -->
            <div class="stat-card">
                <div class="chatbot-card" id="chatbotPreviewCard">
                    <div class="chatbot-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="chatbot-title">Preview</div>
                    <div class="chatbot-subtitle">Configuração Atual</div>
                    
                    <div class="chatbot-details" id="chatbotDetails">
                        <?php if ($mode == "trial" && (!empty($app_dns) || !empty($app_url))): ?>
                            <?php if (!empty($app_dns)): ?>
                            <div class="chatbot-item">
                                <div class="chatbot-label">
                                    <i class="fas fa-server"></i>
                                    DNS:
                                </div>
                                <div class="chatbot-value" id="previewDns"><?php echo htmlspecialchars($app_dns); ?></div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if (!empty($app_url)): ?>
                            <div class="chatbot-item">
                                <div class="chatbot-label">
                                    <i class="fas fa-comment-dots"></i>
                                    Webhook:
                                </div>
                                <div class="chatbot-value" id="previewWebhook"><?php echo htmlspecialchars($app_url); ?></div>
                            </div>
                            <?php endif; ?>
                        <?php else: ?>
                            <div class="chatbot-empty">
                                <i class="fas fa-info-circle"></i>
                                <p>Ative o modo teste</p>
                                <small>e configure os dados</small>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Auto-hide alert após 3 segundos
        function setupAlertAutoHide() {
            const alert = document.getElementById('successAlert');
            if (alert) {
                setTimeout(() => {
                    alert.classList.add('hidden');
                    setTimeout(() => {
                        if (alert.parentNode) {
                            alert.remove();
                        }
                    }, 500);
                }, 3000);
            }
        }

        // Manual hide alert
        function hideAlert() {
            const alert = document.getElementById('successAlert');
            if (alert) {
                alert.classList.add('hidden');
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                }, 500);
            }
        }

        // Toggle server configuration based on switch
        const trialCheckbox = document.getElementById('trial_check');
        if (trialCheckbox) {
            trialCheckbox.addEventListener('change', function() {
                const serverConfig = document.getElementById('serverConfig');
                const statusDisplay = document.getElementById('statusDisplay');
                const systemStatus = document.getElementById('systemStatus');
                
                if (this.checked) {
                    serverConfig.style.display = 'block';
                    statusDisplay.textContent = ' ATIVO';
                    statusDisplay.className = 'switch-status status-active';
                    systemStatus.textContent = 'ONLINE';
                    updateAllCards();
                } else {
                    serverConfig.style.display = 'none';
                    statusDisplay.textContent = ' INATIVO';
                    statusDisplay.className = 'switch-status status-inactive';
                    systemStatus.textContent = 'OFFLINE';
                    updateAllCards();
                }
            });
        }

        // Update all cards
        function updateAllCards() {
            updateStats();
            updatePreviewCard();
        }

        // Update stats cards
        function updateStats() {
            const trialChecked = document.getElementById('trial_check').checked;
            const dnsValue = document.getElementById('app_dns').value.trim();
            const urlValue = document.getElementById('app_url').value.trim();
            
            // Update DNS card
            const dnsStatus = document.getElementById('dnsStatus');
            const dnsText = document.getElementById('dnsText');
            dnsStatus.textContent = trialChecked && dnsValue ? "✓" : "✗";
            dnsText.textContent = trialChecked && dnsValue ? "Servidor ativo" : "Não configurado";
            
            // Update Chatbot card
            const chatbotStatus = document.getElementById('chatbotStatus');
            const chatbotText = document.getElementById('chatbotText');
            chatbotStatus.textContent = trialChecked && urlValue ? "✓" : "✗";
            chatbotText.textContent = trialChecked && urlValue ? "Webhook configurado" : "Não configurado";
        }

        // Update preview card
        function updatePreviewCard() {
            const previewCard = document.getElementById('chatbotDetails');
            const dnsValue = document.getElementById('app_dns').value.trim();
            const urlValue = document.getElementById('app_url').value.trim();
            const isTrial = document.getElementById('trial_check').checked;
            
            let html = '';
            
            if (isTrial && (dnsValue || urlValue)) {
                if (dnsValue) {
                    html += `
                        <div class="chatbot-item">
                            <div class="chatbot-label">
                                <i class="fas fa-server"></i>
                                DNS:
                            </div>
                            <div class="chatbot-value">${dnsValue}</div>
                        </div>
                    `;
                }
                
                if (urlValue) {
                    html += `
                        <div class="chatbot-item">
                            <div class="chatbot-label">
                                <i class="fas fa-comment-dots"></i>
                                Webhook:
                            </div>
                            <div class="chatbot-value">${urlValue}</div>
                        </div>
                    `;
                }
                
                // Update preview values
                const previewDns = document.getElementById('previewDns');
                const previewWebhook = document.getElementById('previewWebhook');
                if (previewDns) previewDns.textContent = dnsValue;
                if (previewWebhook) previewWebhook.textContent = urlValue;
            } else {
                html = `
                    <div class="chatbot-empty">
                        <i class="fas fa-info-circle"></i>
                        <p>Ative o modo teste</p>
                        <small>e configure os dados</small>
                    </div>
                `;
            }
            
            previewCard.innerHTML = html;
        }

        // Update preview on input change
        const dnsInput = document.getElementById('app_dns');
        const urlInput = document.getElementById('app_url');
        
        if (dnsInput) dnsInput.addEventListener('input', updateAllCards);
        if (urlInput) urlInput.addEventListener('input', updateAllCards);

        // Create floating particles
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.animationDelay = `${Math.random() * 20}s`;
                particle.style.animationDuration = `${15 + Math.random() * 10}s`;
                particle.style.opacity = Math.random() * 0.5 + 0.1;
                particlesContainer.appendChild(particle);
            }
        }

        // Initialize
        window.addEventListener('load', function() {
            createParticles();
            setupAlertAutoHide();
            updateAllCards();
        });

        // Form validation
        const configForm = document.getElementById('configForm');
        if (configForm) {
            configForm.addEventListener('submit', function(e) {
                const trialChecked = document.getElementById('trial_check').checked;
                const dnsInput = document.getElementById('app_dns');
                const urlInput = document.getElementById('app_url');
                
                if (trialChecked) {
                    if (!dnsInput.value.trim() || !urlInput.value.trim()) {
                        e.preventDefault();
                        
                        // Create error alert
                        let errorAlert = document.createElement('div');
                        errorAlert.className = 'alert-success';
                        errorAlert.style.background = 'rgba(255, 71, 87, 0.1)';
                        errorAlert.style.borderColor = 'rgba(255, 71, 87, 0.3)';
                        errorAlert.style.color = '#ff4757';
                        errorAlert.innerHTML = `
                            <div class="alert-content">
                                <i class="fas fa-exclamation-circle alert-icon"></i>
                                <span>❌ Preencha todos os campos.</span>
                            </div>
                            <button class="alert-close" onclick="this.parentElement.remove()">
                                <i class="fas fa-times"></i>
                            </button>
                        `;
                        
                        // Insert after success alert or at top
                        const successAlert = document.getElementById('successAlert');
                        if (successAlert) {
                            successAlert.parentNode.insertBefore(errorAlert, successAlert.nextSibling);
                        } else {
                            const header = document.querySelector('.header');
                            header.parentNode.insertBefore(errorAlert, header.nextSibling);
                        }
                        
                        // Auto remove error alert
                        setTimeout(() => {
                            if (errorAlert.parentNode) {
                                errorAlert.remove();
                            }
                        }, 5000);
                        
                        if (!dnsInput.value.trim()) dnsInput.focus();
                        else if (!urlInput.value.trim()) urlInput.focus();
                    }
                }
            });
        }
    </script>

    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>

<?php
include "includes/footer.php";
?>