<?php
require_once '../config/database.php';
require_once '../includes/functions.php';
$pageTitle = 'Dashboard Notification Settings';

require_once 'admin_protect.php';

$conn = getConnection();

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $notificationText = $_POST['notification_text'] ?? '';
    $linkText = $_POST['link_text'] ?? 'Click here';
    $linkUrl = $_POST['link_url'] ?? 'tasks.php';
    $enabled = isset($_POST['enabled']) ? '1' : '0';
    
    // Update or insert notification text
    $stmt = $conn->prepare("
        INSERT INTO site_settings (setting_key, setting_value) 
        VALUES ('dashboard_notification', ?)
        ON DUPLICATE KEY UPDATE setting_value = ?
    ");
    $stmt->bind_param("ss", $notificationText, $notificationText);
    $stmt->execute();
    
    // Update link text
    $stmt = $conn->prepare("
        INSERT INTO site_settings (setting_key, setting_value) 
        VALUES ('dashboard_notification_link_text', ?)
        ON DUPLICATE KEY UPDATE setting_value = ?
    ");
    $stmt->bind_param("ss", $linkText, $linkText);
    $stmt->execute();
    
    // Update link URL
    $stmt = $conn->prepare("
        INSERT INTO site_settings (setting_key, setting_value) 
        VALUES ('dashboard_notification_link_url', ?)
        ON DUPLICATE KEY UPDATE setting_value = ?
    ");
    $stmt->bind_param("ss", $linkUrl, $linkUrl);
    $stmt->execute();
    
    // Update enabled status
    $stmt = $conn->prepare("
        INSERT INTO site_settings (setting_key, setting_value) 
        VALUES ('dashboard_notification_enabled', ?)
        ON DUPLICATE KEY UPDATE setting_value = ?
    ");
    $stmt->bind_param("ss", $enabled, $enabled);
    $stmt->execute();
    
    setFlash('success', 'Dashboard notification settings updated successfully!');
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// Get current settings
$notificationText = 'Power up your digital journey with {SITE_NAME}\'s 10+ smart tools! Ads, YouTube, trivia, and more — built to help you win online. 🚀📱🎬🔥💪';
$linkText = 'Click here';
$linkUrl = 'tasks.php';
$enabled = '1';

$result = $conn->query("SELECT setting_key, setting_value FROM site_settings WHERE setting_key IN ('dashboard_notification', 'dashboard_notification_link_text', 'dashboard_notification_link_url', 'dashboard_notification_enabled')");
if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        if ($row['setting_key'] === 'dashboard_notification') {
            $notificationText = $row['setting_value'];
        } elseif ($row['setting_key'] === 'dashboard_notification_link_text') {
            $linkText = $row['setting_value'];
        } elseif ($row['setting_key'] === 'dashboard_notification_link_url') {
            $linkUrl = $row['setting_value'];
        } elseif ($row['setting_key'] === 'dashboard_notification_enabled') {
            $enabled = $row['setting_value'];
        }
    }
}
include 'side.php';
?>

<style>
.settings-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    margin-bottom: 30px;
}

.page-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.card-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--theme-color) 0%, #ec4899 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-label-description {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-rgb), 0.1);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-switch input[type="checkbox"] {
    width: 52px;
    height: 28px;
    position: relative;
    appearance: none;
    background: #ef4444;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-switch input[type="checkbox"]:checked {
    background: #10b981;
}

.toggle-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input[type="checkbox"]:checked::before {
    left: 27px;
}

.toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.preview-box {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    color: white;
    font-size: 13px;
    line-height: 1.5;
}

.preview-box strong {
    font-weight: 700;
}

.preview-box a {
    color: white;
    text-decoration: underline;
}

.info-box {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #3b82f6;
}

.info-box i {
    font-size: 20px;
    flex-shrink: 0;
}

.info-box-content {
    flex: 1;
}

.info-box strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--theme-color) 0%, #ec4899 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--theme-rgb), 0.4);
}

.btn-secondary {
    background: var(--darker-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border-color);
}

@media (max-width: 768px) {
    .settings-container {
        padding: 12px;
    }
    
    .settings-card {
        padding: 16px;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}
</style>

<div class="settings-container">
    <div class="page-header">
        <h1 class="page-title">
            <i class="fas fa-bell"></i> Dashboard Notification Settings
        </h1>
        <p class="page-subtitle">Control the notification banner shown to users on their dashboard</p>
    </div>
    
    <div class="info-box">
        <i class="fas fa-info-circle"></i>
        <div class="info-box-content">
            <strong>Dynamic Variables</strong>
            Use <code>{SITE_NAME}</code> in your message and it will be automatically replaced with your site name.
        </div>
    </div>
    
    <form method="POST">
        <div class="settings-card">
            <div class="card-header">
                <div class="card-icon">
                    <i class="fas fa-message"></i>
                </div>
                <h2 class="card-title">Notification Content</h2>
            </div>
            
            <div class="form-group">
                <label class="form-label">
                    Notification Message
                    <span class="form-label-description">The main text shown in the notification banner (supports emojis)</span>
                </label>
                <textarea 
                    name="notification_text" 
                    class="form-control" 
                    placeholder="Enter your notification message here..."
                    required><?php echo htmlspecialchars($notificationText); ?></textarea>
            </div>
            
            <div class="form-group">
                <label class="form-label">
                    Link Text
                    <span class="form-label-description">The clickable text at the end of the notification</span>
                </label>
                <input 
                    type="text" 
                    name="link_text" 
                    class="form-control" 
                    value="<?php echo htmlspecialchars($linkText); ?>" 
                    placeholder="Click here"
                    required>
            </div>
            
            <div class="form-group">
                <label class="form-label">
                    Link URL
                    <span class="form-label-description">Where the link should redirect (relative path from user directory)</span>
                </label>
                <input 
                    type="text" 
                    name="link_url" 
                    class="form-control" 
                    value="<?php echo htmlspecialchars($linkUrl); ?>" 
                    placeholder="tasks.php"
                    required>
            </div>
            
            <div class="form-group">
                <label class="form-label">Enable Notification</label>
                <div class="toggle-switch">
                    <input 
                        type="checkbox" 
                        name="enabled" 
                        id="enabled"
                        <?php echo $enabled === '1' ? 'checked' : ''; ?>>
                    <label for="enabled" class="toggle-label">
                        <?php echo $enabled === '1' ? 'Enabled' : 'Disabled'; ?>
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">Live Preview</label>
                <div class="preview-box" id="preview">
                    <strong><?php echo str_replace('{SITE_NAME}', $siteName, $notificationText); ?></strong><br>
                    <a href="<?php echo htmlspecialchars($linkUrl); ?>"><?php echo htmlspecialchars($linkText); ?></a> to get started!
                </div>
            </div>
        </div>
        
        <div class="btn-group">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Settings
            </button>
            <button type="button" class="btn btn-secondary" onclick="window.location.reload()">
                <i class="fas fa-undo"></i> Reset Changes
            </button>
        </div>
    </form>
</div>

<script>
// Live preview update
const notificationInput = document.querySelector('textarea[name="notification_text"]');
const linkTextInput = document.querySelector('input[name="link_text"]');
const linkUrlInput = document.querySelector('input[name="link_url"]');
const preview = document.getElementById('preview');
const enabledToggle = document.getElementById('enabled');
const toggleLabel = document.querySelector('.toggle-label');

function updatePreview() {
    const message = notificationInput.value.replace('{SITE_NAME}', '<?php echo $siteName; ?>');
    const linkText = linkTextInput.value;
    const linkUrl = linkUrlInput.value;
    
    preview.innerHTML = `<strong>${message}</strong><br><a href="${linkUrl}">${linkText}</a> to get started!`;
}

notificationInput.addEventListener('input', updatePreview);
linkTextInput.addEventListener('input', updatePreview);
linkUrlInput.addEventListener('input', updatePreview);

enabledToggle.addEventListener('change', function() {
    toggleLabel.textContent = this.checked ? 'Enabled' : 'Disabled';
});
</script>

<?php include 'footer.php'; ?>