jweb/ac1/src/pages/settings.php

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: ../../index.php');
    exit;
}

// Include database connection
include_once '../../db.php';
$database = new Database();
$db = $database->getConnection();

// Get user data from session
$username = $_SESSION['username'];
$email = $_SESSION['email'];
$tier = $_SESSION['tier'];
$package = $_SESSION['package'];
$balance = $_SESSION['balance'];
$total_deposits = $_SESSION['total_deposits'];
$total_withdrawals = $_SESSION['total_withdrawals'];
$rewards = $_SESSION['rewards'];
$earnings = $total_deposits - $total_withdrawals;

// Get user settings from database
function getUserSettings($db, $user_id) {
    $query = "SELECT * FROM user_settings WHERE user_id = ?";
    $stmt = $db->prepare($query);
    $stmt->execute([$user_id]);
    return $stmt->fetch(PDO::FETCH_ASSOC) ?: [];
}

$user_settings = getUserSettings($db, $_SESSION['user_id']);

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user_id = $_SESSION['user_id'];
    
    try {
        // Update general settings
        if (isset($_POST['update_settings'])) {
            $dark_mode = isset($_POST['dark_mode']) ? 1 : 0;
            $language = $_POST['language'] ?? 'en';
            $currency = $_POST['currency'] ?? 'KES';
            $auto_logout = isset($_POST['auto_logout']) ? 1 : 0;

            $query = "INSERT INTO user_settings (user_id, dark_mode, language, currency, auto_logout) 
                      VALUES (?, ?, ?, ?, ?)
                      ON DUPLICATE KEY UPDATE 
                      dark_mode = VALUES(dark_mode), 
                      language = VALUES(language), 
                      currency = VALUES(currency), 
                      auto_logout = VALUES(auto_logout)";
            
            $stmt = $db->prepare($query);
            if ($stmt->execute([$user_id, $dark_mode, $language, $currency, $auto_logout])) {
                $_SESSION['success'] = "Settings updated successfully!";
            }
        }

        // Handle password change
        if (isset($_POST['change_password'])) {
            $current_password = $_POST['current_password'];
            $new_password = $_POST['new_password'];
            $confirm_password = $_POST['confirm_password'];

            if ($new_password !== $confirm_password) {
                $_SESSION['error'] = "New passwords do not match!";
            } else {
                // Verify current password
                $query = "SELECT password_hash FROM users WHERE id = ?";
                $stmt = $db->prepare($query);
                $stmt->execute([$user_id]);
                $user = $stmt->fetch(PDO::FETCH_ASSOC);

                if ($user && password_verify($current_password, $user['password_hash'])) {
                    $new_password_hash = password_hash($new_password, PASSWORD_BCRYPT);
                    
                    $query = "UPDATE users SET password_hash = ? WHERE id = ?";
                    $stmt = $db->prepare($query);
                    if ($stmt->execute([$new_password_hash, $user_id])) {
                        $_SESSION['success'] = "Password updated successfully!";
                    }
                } else {
                    $_SESSION['error'] = "Current password is incorrect!";
                }
            }
        }

        // Handle account deletion
        if (isset($_POST['delete_account'])) {
            $confirm_password = $_POST['confirm_password'];
            
            // Verify password
            $query = "SELECT password_hash FROM users WHERE id = ?";
            $stmt = $db->prepare($query);
            $stmt->execute([$user_id]);
            $user = $stmt->fetch(PDO::FETCH_ASSOC);

            if ($user && password_verify($confirm_password, $user['password_hash'])) {
                // Soft delete the account
                $query = "UPDATE users SET is_active = 0 WHERE id = ?";
                $stmt = $db->prepare($query);
                if ($stmt->execute([$user_id])) {
                    session_destroy();
                    header('Location: ../../index.php?account_deleted=1');
                    exit;
                }
            } else {
                $_SESSION['error'] = "Password is incorrect!";
            }
        }

    } catch(PDOException $exception) {
        $_SESSION['error'] = "Error: " . $exception->getMessage();
    }
    
    // Refresh settings after update
    $user_settings = getUserSettings($db, $_SESSION['user_id']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings | Japanese Motors</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        :root {
            --bg: #7b848d;
            --card: #7a2f3b;
            --card-2: #6f2630;
            --accent: #efdf2d;
            --muted: rgba(255,255,255,0.6);
            --glass: rgba(255,255,255,0.04);
            font-family: 'Poppins', system-ui, Arial;
        }
        
        body {
            background: var(--bg);
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            height: 100vh;
            background: #0d1321;
            color: #fff;
            position: fixed;
            top: 0;
            left: -250px;
            transition: all 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
        }
        
        .sidebar.active {
            left: 0;
        }
        
        #content {
            margin-left: 0;
            transition: all 0.3s ease;
        }
        
        .sidebar.active ~ #content {
            margin-left: 250px;
        }
        
        header {
            background: #222;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 900;
            transition: all 0.3s ease;
        }
        
        .sidebar.active ~ #content header {
            margin-left: 250px;
        }
        
        .menu-toggle {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .logo-section {
            padding: 15px;
            border-bottom: 1px solid #1c2230;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .brand {
            font-size: 1.2rem;
            font-weight: 700;
            color: #ff9800;
        }
        
        .subtitle {
            font-size: 0.75rem;
            color: #aaa;
        }
        
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .menu li a {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: white;
            text-decoration: none;
            transition: background 0.3s;
        }
        
        .menu li a:hover {
            background: #1c2230;
        }
        
        .menu li a i {
            margin-right: 12px;
        }
        
        .user-footer {
            padding: 15px;
            background: #222;
            display: flex;
            align-items: center;
            gap: 10px;
            position: sticky;
            bottom: 0;
        }
        
        .avatar {
            width: 35px;
            height: 35px;
            background: #444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
        }
        
        .card {
            background: var(--card);
            border-radius: 12px;
            padding: 26px;
            color: white;
            box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset;
        }
        
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--accent);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .btn {
            display: inline-block;
            padding: 14px 24px;
            border-radius: 10px;
            background: var(--accent);
            color: #111;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background: var(--accent);
            color: #111;
        }
        
        .btn-danger {
            background: #dc2626;
            color: white;
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
        }
        
        .btn-danger:hover {
            background: #b91c1c;
        }
        
        .tab {
            padding: 10px 20px;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            border-bottom: 2px solid var(--accent);
            color: var(--accent);
        }
        
        .tab:hover {
            color: var(--accent);
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        
        .alert-success {
            background: #10b981;
            color: white;
        }
        
        .alert-error {
            background: #ef4444;
            color: white;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background: var(--card);
            margin: 15% auto;
            padding: 20px;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
        }
        
        @media (max-width: 768px) {
            .tabs {
                flex-direction: column;
            }
            
            .setting-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
        <div class="logo-section">
            <i data-feather="zap" class="text-yellow-400"></i>
            <div>
                <h2 class="brand">JMOTORS</h2>
                <p class="subtitle">Marketing Platform</p>
            </div>
        </div>

        <ul class="menu">
            <li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li>
            <li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li>
            <li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li>
            <li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li>
            <li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li>
            <li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li>
            <li><a href="packages.php"><i data-feather="package"></i> Packages</a></li>
            <li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li>
            <li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li>
            <li><a href="agent-approval.php"><i data-feather="user-check"></i> Agent Approval</a></li>
            <li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li>
            <li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li>
            <li><a href="team.php"><i data-feather="users"></i> Team</a></li>
        </ul>

        <ul class="menu bottom">
            <li><a href="profile.php"><i data-feather="user"></i> Profile</a></li>
            <li><a href="settings.php" class="active-page"><i data-feather="settings"></i> Settings</a></li>
            <li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li>
            <li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li>
        </ul>

        <div class="user-footer">
            <div class="avatar"><?php echo substr($username, 0, 2); ?></div>
            <div>
                <h4><?php echo htmlspecialchars($username); ?></h4>
                <p><?php echo htmlspecialchars($tier); ?> - Marketer</p>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <div id="content">
        <header class="bg-gray-800 text-white p-4">
            <div class="flex items-center">
                <button class="menu-toggle" id="menu-toggle">
                    <i data-feather="menu"></i>
                </button>
                <div class="ml-4 font-bold text-xl">Jmotors</div>
            </div>
            <nav class="flex items-center space-x-6">
                <a href="transfer.php" class="hover:text-yellow-300">Transfer</a>
                <a href="loan.php" class="hover:text-yellow-300">Loans</a>
                <a href="daily-product.php" class="hover:text-yellow-300">New Product</a>
                <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold"><?php echo substr($username, 0, 2); ?></div>
            </nav>
        </header>

        <main class="p-4">
            <div class="max-w-3xl mx-auto">
                <!-- Success/Error Messages -->
                <?php if (isset($_SESSION['success'])): ?>
                    <div class="alert alert-success">
                        <?php echo $_SESSION['success']; unset($_SESSION['success']); ?>
                    </div>
                <?php endif; ?>
                
                <?php if (isset($_SESSION['error'])): ?>
                    <div class="alert alert-error">
                        <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
                    </div>
                <?php endif; ?>

                <div class="flex items-center gap-4 mb-6">
                    <i data-feather="settings" class="text-yellow-400 text-2xl"></i>
                    <h1 class="text-2xl font-bold">Settings</h1>
                </div>
                
                <div class="flex tabs border-b border-gray-700 mb-6">
                    <div class="tab active" data-tab="general">General</div>
                    <div class="tab" data-tab="security">Security</div>
                    <div class="tab" data-tab="notifications">Notifications</div>
                </div>
                
                <!-- General Settings Tab -->
                <div id="general-tab" class="tab-content">
                    <form method="POST" action="">
                        <div class="card">
                            <h3 class="text-lg font-bold mb-6">General Settings</h3>
                            
                            <div class="setting-item">
                                <div>
                                    <h4>Dark Mode</h4>
                                    <p class="text-sm text-gray-300">Switch between light and dark theme</p>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="dark_mode" <?php echo ($user_settings['dark_mode'] ?? 1) ? 'checked' : ''; ?>>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div>
                                    <h4>Language</h4>
                                    <p class="text-sm text-gray-300">Select your preferred language</p>
                                </div>
                                <select name="language" class="bg-gray-800 px-3 py-2 rounded text-white">
                                    <option value="en" <?php echo ($user_settings['language'] ?? 'en') === 'en' ? 'selected' : ''; ?>>English</option>
                                    <option value="sw" <?php echo ($user_settings['language'] ?? 'en') === 'sw' ? 'selected' : ''; ?>>Swahili</option>
                                    <option value="fr" <?php echo ($user_settings['language'] ?? 'en') === 'fr' ? 'selected' : ''; ?>>French</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div>
                                    <h4>Currency</h4>
                                    <p class="text-sm text-gray-300">Default currency for transactions</p>
                                </div>
                                <select name="currency" class="bg-gray-800 px-3 py-2 rounded text-white">
                                    <option value="KES" <?php echo ($user_settings['currency'] ?? 'KES') === 'KES' ? 'selected' : ''; ?>>KES - Kenyan Shilling</option>
                                    <option value="USD" <?php echo ($user_settings['currency'] ?? 'KES') === 'USD' ? 'selected' : ''; ?>>USD - US Dollar</option>
                                    <option value="NGN" <?php echo ($user_settings['currency'] ?? 'KES') === 'NGN' ? 'selected' : ''; ?>>NGN - Nigerian Naira</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div>
                                    <h4>Auto Logout</h4>
                                    <p class="text-sm text-gray-300">Automatically logout after inactivity</p>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="auto_logout" <?php echo ($user_settings['auto_logout'] ?? 1) ? 'checked' : ''; ?>>
                                    <span class="slider"></span>
                                </label>
                            </div>

                            <button type="submit" name="update_settings" class="btn mt-4">Save Settings</button>
                        </div>
                    </form>
                </div>

                <!-- Security Settings Tab -->
                <div id="security-tab" class="tab-content" style="display: none;">
                    <div class="card">
                        <h3 class="text-lg font-bold mb-6">Security Settings</h3>
                        
                        <div class="setting-item">
                            <div>
                                <h4>Two-Factor Authentication</h4>
                                <p class="text-sm text-gray-300">Add an extra layer of security</p>
                            </div>
                            <button class="btn-outline px-4 py-2 rounded">Enable</button>
                        </div>
                        
                        <div class="setting-item">
                            <div>
                                <h4>Change Password</h4>
                                <p class="text-sm text-gray-300">Update your account password</p>
                            </div>
                            <button onclick="openPasswordModal()" class="btn-outline px-4 py-2 rounded">Change</button>
                        </div>
                        
                        <div class="setting-item">
                            <div>
                                <h4>Login History</h4>
                                <p class="text-sm text-gray-300">View recent account activity</p>
                            </div>
                            <button class="btn-outline px-4 py-2 rounded">View</button>
                        </div>
                    </div>
                </div>

                <!-- Notifications Settings Tab -->
                <div id="notifications-tab" class="tab-content" style="display: none;">
                    <div class="card">
                        <h3 class="text-lg font-bold mb-6">Notification Settings</h3>
                        
                        <div class="setting-item">
                            <div>
                                <h4>Email Notifications</h4>
                                <p class="text-sm text-gray-300">Receive notifications via email</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div>
                                <h4>Push Notifications</h4>
                                <p class="text-sm text-gray-300">Receive browser notifications</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div>
                                <h4>SMS Notifications</h4>
                                <p class="text-sm text-gray-300">Receive SMS alerts</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Danger Zone -->
                <div class="card mt-6">
                    <h3 class="text-lg font-bold mb-4 text-red-400">Danger Zone</h3>
                    <div class="setting-item">
                        <div>
                            <h4>Delete Account</h4>
                            <p class="text-sm text-gray-300">Permanently delete your account</p>
                        </div>
                        <button onclick="openDeleteModal()" class="btn-danger px-4 py-2 rounded">Delete Account</button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Password Change Modal -->
    <div id="passwordModal" class="modal">
        <div class="modal-content">
            <h3 class="text-lg font-bold mb-4">Change Password</h3>
            <form method="POST" action="">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Current Password</label>
                        <input type="password" name="current_password" class="w-full bg-gray-800 px-3 py-2 rounded text-white" required>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2">New Password</label>
                        <input type="password" name="new_password" class="w-full bg-gray-800 px-3 py-2 rounded text-white" required>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2">Confirm New Password</label>
                        <input type="password" name="confirm_password" class="w-full bg-gray-800 px-3 py-2 rounded text-white" required>
                    </div>
                    
                    <div class="flex gap-2 mt-4">
                        <button type="button" onclick="closePasswordModal()" class="btn-outline flex-1">Cancel</button>
                        <button type="submit" name="change_password" class="btn flex-1">Change Password</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Account Modal -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <h3 class="text-lg font-bold mb-4 text-red-400">Delete Account</h3>
            <p class="text-sm text-gray-300 mb-4">This action cannot be undone. Please enter your password to confirm.</p>
            <form method="POST" action="">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Confirm Password</label>
                        <input type="password" name="confirm_password" class="w-full bg-gray-800 px-3 py-2 rounded text-white" required>
                    </div>
                    
                    <div class="flex gap-2 mt-4">
                        <button type="button" onclick="closeDeleteModal()" class="btn-outline flex-1">Cancel</button>
                        <button type="submit" name="delete_account" class="btn-danger flex-1">Delete Account</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        feather.replace();
        
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('menu-toggle');
            const sidebar = document.getElementById('sidebar');
            const content = document.getElementById('content');
            
            toggleBtn.addEventListener('click', function() {
                sidebar.classList.toggle('active');
                content.classList.toggle('active');
            });
            
            // Tab switching
            const tabs = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    
                    // Update active tab
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // Show corresponding content
                    tabContents.forEach(content => {
                        content.style.display = 'none';
                    });
                    document.getElementById(tabName + '-tab').style.display = 'block';
                });
            });
        });

        // Modal functions
        function openPasswordModal() {
            document.getElementById('passwordModal').style.display = 'block';
        }

        function closePasswordModal() {
            document.getElementById('passwordModal').style.display = 'none';
        }

        function openDeleteModal() {
            document.getElementById('deleteModal').style.display = 'block';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }

        // Close modals when clicking outside
        window.onclick = function(event) {
            const passwordModal = document.getElementById('passwordModal');
            const deleteModal = document.getElementById('deleteModal');
            
            if (event.target === passwordModal) {
                closePasswordModal();
            }
            if (event.target === deleteModal) {
                closeDeleteModal();
            }
        }
    </script>
</body>
</html>