<?php
session_start();
if (empty($_SESSION['is_admin']) && (empty($_SESSION['user_type']) || $_SESSION['user_type'] !== 'admin')) {
    header('Location: index.php');
    exit;
}

require_once __DIR__ . '/helpers/database_helper.php';

$marquee = DatabaseHelper::loadJson('marquee.json', [
    'enabled' => true,
    'text' => '🎉 Welcome to Esa\'s Fashion',
    'speed' => '30s',
    'background_color' => '#F07E2D',
    'text_color' => '#ffffff',
    'font_size' => '18px'
]);

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $marquee['text'] = trim($_POST['text'] ?? '');
    $marquee['speed'] = trim($_POST['speed'] ?? '30s');
    $marquee['background_color'] = trim($_POST['background_color'] ?? '#F07E2D');
    $marquee['text_color'] = trim($_POST['text_color'] ?? '#ffffff');
    $marquee['font_size'] = trim($_POST['font_size'] ?? '18px');
    $marquee['enabled'] = isset($_POST['enabled']) ? true : false;
    
    if (empty($marquee['text'])) {
        $error = 'Marquee text cannot be empty.';
    } else {
        $saveResult = DatabaseHelper::saveJson('marquee.json', $marquee);
        if ($saveResult !== false) {
            $success = 'Marquee settings updated successfully!';
        } else {
            $error = 'Failed to save marquee settings. Check file permissions.';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Manage Marquee - Admin</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="admin-with-sidebar">
<?php include __DIR__ . '/admin_sidebar.php'; ?>
<?php // Admin pages don't include the main site header ?>
<main class="admin-main-content" style="padding: 24px;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
        <h1 style="margin:0;">Manage Marquee Text</h1>
        <a href="admin_dashboard.php" class="btn" style="background:#F07E2D; color:#fff; text-decoration:none; padding:8px 12px; border-radius:6px;">← Back to Dashboard</a>
    </div>

    <?php if (!empty($success)): ?>
    <div style="background:#d4edda; color:#155724; padding:12px; border-radius:6px; margin-bottom:16px; border:1px solid #c3e6cb;">
        <?php echo htmlspecialchars($success); ?>
    </div>
    <?php endif; ?>

    <?php if (!empty($error)): ?>
    <div style="background:#f8d7da; color:#721c24; padding:12px; border-radius:6px; margin-bottom:16px; border:1px solid #f5c6cb;">
        <?php echo htmlspecialchars($error); ?>
    </div>
    <?php endif; ?>

    <div style="background:#fff; padding:24px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08); max-width:700px;">
        
        <!-- Live Preview -->
        <div style="background:#f9f9f9; padding:16px; border-radius:6px; margin-bottom:24px; border:1px solid #e6e6e6;">
            <p style="font-size:12px; color:#666; margin:0 0 12px 0; font-weight:600;">LIVE PREVIEW:</p>
            <?php if (!empty($marquee['enabled'])): ?>
            <div class="marquee-preview" style="background:<?php echo htmlspecialchars($marquee['background_color']); ?>; padding:12px; border-radius:4px; overflow:hidden;">
                <div style="font-size:<?php echo htmlspecialchars($marquee['font_size']); ?>; color:<?php echo htmlspecialchars($marquee['text_color']); ?>; font-weight:600; white-space:nowrap; animation:scroll-left <?php echo htmlspecialchars($marquee['speed']); ?> linear infinite;">
                    <?php echo htmlspecialchars($marquee['text']); ?>
                </div>
            </div>
            <?php else: ?>
            <div style="background:#f0f0f0; padding:12px; border-radius:4px; color:#999; text-align:center;">Marquee is currently disabled</div>
            <?php endif; ?>
        </div>

        <form method="post" style="display:flex; flex-direction:column; gap:16px;">
            
            <div>
                <label style="font-weight:600; display:block; margin-bottom:8px;">
                    <input type="checkbox" name="enabled" <?php echo !empty($marquee['enabled']) ? 'checked' : ''; ?>>
                    Enable Marquee
                </label>
            </div>

            <div>
                <label style="font-weight:600; display:block; margin-bottom:8px;">Marquee Text:</label>
                <textarea name="text" placeholder="Enter marquee text (you can use emojis)" style="width:100%; padding:12px; border:1px solid #e6e6e6; border-radius:6px; font-size:14px; min-height:80px; font-family:inherit; resize:vertical;" required><?php echo htmlspecialchars($marquee['text']); ?></textarea>
                <p style="font-size:12px; color:#666; margin:8px 0 0 0;">💡 Tip: You can add emojis like 🎉 🎁 ⭐ to make it more attractive</p>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <div>
                    <label style="font-weight:600; display:block; margin-bottom:8px;">Text Color:</label>
                    <input type="color" name="text_color" value="<?php echo htmlspecialchars($marquee['text_color']); ?>" style="width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:6px; cursor:pointer; height:40px;">
                </div>
                <div>
                    <label style="font-weight:600; display:block; margin-bottom:8px;">Background Color:</label>
                    <input type="color" name="background_color" value="<?php echo htmlspecialchars($marquee['background_color']); ?>" style="width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:6px; cursor:pointer; height:40px;">
                </div>
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <div>
                    <label style="font-weight:600; display:block; margin-bottom:8px;">Font Size:</label>
                    <input type="text" name="font_size" value="<?php echo htmlspecialchars($marquee['font_size']); ?>" placeholder="e.g., 18px, 1.2rem" style="width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:6px; font-size:14px;">
                    <p style="font-size:12px; color:#666; margin:4px 0 0 0;">Enter size with unit (px, em, rem, etc.)</p>
                </div>
                <div>
                    <label style="font-weight:600; display:block; margin-bottom:8px;">Scroll Speed:</label>
                    <input type="text" name="speed" value="<?php echo htmlspecialchars($marquee['speed']); ?>" placeholder="e.g., 30s, 40s, 50s" style="width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:6px; font-size:14px;">
                    <p style="font-size:12px; color:#666; margin:4px 0 0 0;">Lower value = faster (e.g., 15s), Higher value = slower (e.g., 60s)</p>
                </div>
            </div>

            <div style="display:flex; gap:12px; margin-top:12px;">
                <button class="btn" type="submit" style="flex:1; background:#F07E2D; color:#fff; padding:12px; border:none; border-radius:6px; font-size:16px; cursor:pointer; font-weight:600;">Save Changes</button>
                <a href="admin_dashboard.php" class="btn" style="flex:1; background:#999; color:#fff; padding:12px; border-radius:6px; text-align:center; text-decoration:none; font-weight:600;">Cancel</a>
            </div>
        </form>
    </div>
</main>

<style>
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.marquee-preview div {
    display: inline-block;
    padding-left: 100%;
}
</style>

<?php include __DIR__ . '/footer.php'; ?>
<script>
function toggleAdminSidebar() {
    const sidebar = document.getElementById('adminSidebarContainer');
    const mainContent = document.querySelector('.admin-main-content');
    sidebar.classList.toggle('collapsed');
    mainContent.classList.toggle('with-collapsed-sidebar');
    localStorage.setItem('adminSidebarCollapsed', sidebar.classList.contains('collapsed') ? '1' : '0');
}

document.addEventListener('DOMContentLoaded', function() {
    const isCollapsed = localStorage.getItem('adminSidebarCollapsed') === '1';
    if (isCollapsed) {
        document.getElementById('adminSidebarContainer').classList.add('collapsed');
        document.querySelector('.admin-main-content').classList.add('with-collapsed-sidebar');
    }
});
</script>
</body>
</html>
