settings.php

<?php
require_once __DIR__ . '/../bootstrap.php';
requireAuth();

$pageTitle = 'Settings';

// ---------------------------
// System information
// ---------------------------

$systemInfo = [];
try {
    global $pdo;
    $stmt = $pdo->query("SELECT * FROM system_info");
    while ($row = $stmt->fetch()) {
        $systemInfo[$row['key']] = $row['value'];
    }
} catch (Throwable $e) {
    // ignore
}

include __DIR__ . '/../partials/header.php';
?>

<div class="content-header">
    <div>
        <h1 class="content-title">⚙️ Settings</h1>
        <p class="content-subtitle">Account preferences and system info</p>
    </div>
</div>

<!-- Account & Theme -->
<div class="grid grid-2" style="margin-bottom: 20px;">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">👤 Account</h3>
        </div>
        <div class="card-body">
            <div class="stack">
                <a href="<?= e(app_url('account')) ?>" class="btn btn-secondary btn-block btn-left"><span>👤</span><span>My Account</span></a>
                <a href="<?= e(app_url('password-change')) ?>" class="btn btn-secondary btn-block btn-left"><span>🔒</span><span>Change Password</span></a>
                <a href="<?= e(app_url('logout')) ?>?confirm=1" class="btn btn-secondary btn-block btn-left" onclick="return confirm('Are you sure you want to log out?');"><span>🚪</span><span>Logout</span></a>
            </div>
            <div class="mt-md">
                <p class="small text-muted" style="margin:0;">
                    Tip: Company settings, database settings, and release notes are in <strong>Admin → Maintenance (company/database) and Admin → Dashboard (release notes)</strong>.
                </p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">⚡ Theme</h3>
        </div>
        <div class="card-body">
            <div class="form-group" style="margin-bottom: 10px;">
                <label for="themeSelect">Appearance</label>
                <select id="themeSelect" class="input">
                    <option value="dark">🌙 Dark Mode (Default)</option>
                    <option value="light">☀️ Light Mode</option>
                </select>
            </div>
            <div class="small text-muted">
                Your theme preference is saved and will persist across sessions.
            </div>
        </div>
    </div>
</div>

<!-- System Info -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">💻 System Information</h3>
    </div>
    <div class="card-body">
        <table class="table-compact" style="width:100%; margin-bottom: 15px;">
            <tr>
                <th style="width:200px;">Version</th>
                <td><?= htmlspecialchars($systemInfo['version'] ?? (APP_VERSION ?? 'N/A')) ?></td>
            </tr>
            <tr>
                <th>Application</th>
                <td><?= htmlspecialchars($systemInfo['app_name'] ?? 'WorkersPanel') ?></td>
            </tr>
            <tr>
                <th>Company</th>
                <td><?= htmlspecialchars($systemInfo['company_name'] ?? '—') ?></td>
            </tr>
            <tr>
                <th>Installed</th>
                <td><?= isset($systemInfo['installed_at']) ? date('M d, Y', strtotime($systemInfo['installed_at'])) : 'N/A' ?></td>
            </tr>
        </table>

        <?php if (isAdminRole()): ?>
            <a href="<?= e(app_url('admin/maintenance')) ?>" class="btn btn-secondary btn-block btn-left"><span>🔧</span><span>Open Maintenance</span></a>
        <?php endif; ?>
    </div>
</div>

<script>
// Theme Toggle Functionality
(function() {
    const themeSelect = document.getElementById('themeSelect');
    if (!themeSelect) return;
    const savedTheme = localStorage.getItem('theme') || 'dark';
    themeSelect.value = savedTheme;
    applyTheme(savedTheme);

    themeSelect.addEventListener('change', function() {
        const theme = this.value;
        applyTheme(theme);
        localStorage.setItem('theme', theme);
    });

    function applyTheme(theme) {
        if (theme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
        } else {
            document.documentElement.removeAttribute('data-theme');
        }
    }
})();
</script>

<?php include __DIR__ . '/../partials/footer.php'; ?>