<?php
session_start();
require_once 'db.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: signin');
    exit();
}

// Check if user is Admin
if (($_SESSION['user_role'] ?? '') !== 'Admin') {
    header('Location: crmdashboard');
    exit();
}

$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'] ?? 'Admin';

// Handle Role Update via AJAX
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'update_role') {
    header('Content-Type: application/json');
    try {
        $target_id = intval($_POST['target_user_id']);
        $new_role = $_POST['new_role'];
        
        if (!in_array($new_role, ['Admin', 'Designer'])) {
            throw new Exception("Invalid role selection.");
        }

        $stmt = mysqli_prepare($conn, "UPDATE users SET role = ? WHERE id = ?");
        mysqli_stmt_bind_param($stmt, "si", $new_role, $target_id);
        if (!mysqli_stmt_execute($stmt)) {
            throw new Exception("Database update failed.");
        }
        mysqli_stmt_close($stmt);
        echo json_encode(['success' => true]);
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
    }
    exit();
}

// Fetch all users
$users = [];
$stmt = mysqli_prepare($conn, "SELECT id, name, email, role, created_at FROM users WHERE role != 'Admin' OR role IS NULL ORDER BY name ASC");
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
mysqli_stmt_close($stmt);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management - ConstructCRM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #977C49;
            --primary-dark: #7a633a;
            --primary-light: #f8f5ef;
            --secondary-color: #343a40;
            --secondary-light: #f8f9fa;
            --success-color: #28a745;
            --info-color: #17a2b8;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --sidebar-width: 320px;
            --nav-width: 260px;
            --header-height: 70px;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        }

        body { font-family: 'Inter', sans-serif; background-color: #f5f7fa; color: #333; font-size: 14px; line-height: 1.4; overflow-x: hidden; }

        .header { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); z-index: 1000; display: flex; align-items: center; padding: 0 20px; }
        .logo { display: flex; align-items: center; font-weight: 700; font-size: 20px; color: var(--primary-color); text-decoration: none; }
        .header-actions { margin-left: auto; display: flex; align-items: center; }
        .mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--primary-color); margin-right: 15px; cursor: pointer; }

        /* User Dropdown */
        .user-dropdown { position: relative; }
        .user-profile { display: flex; align-items: center; cursor: pointer; padding: 5px 10px; border-radius: var(--border-radius); transition: var(--transition); }
        .user-profile:hover { background-color: #f8f9fa; }
        .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 10px; }
        .user-name { font-weight: 500; margin-right: 5px; }
        .dropdown-arrow { font-size: 12px; color: #666; transition: var(--transition); }
        .user-dropdown.show .dropdown-arrow { transform: rotate(180deg); }
        .user-dropdown-menu { position: absolute; top: 100%; right: 0; background-color: #fff; border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); min-width: 180px; padding: 8px 0; margin-top: 5px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition); z-index: 1001; }
        .user-dropdown.show .user-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-item { display: flex; align-items: center; padding: 10px 20px; color: #555; text-decoration: none; transition: var(--transition); }
        .dropdown-item:hover { background-color: #f8f9fa; color: var(--primary-color); }
        .dropdown-item i { margin-right: 10px; font-size: 16px; }
        .dropdown-divider { height: 1px; background-color: #eee; margin: 8px 0; }

        .main-container { display: flex; min-height: calc(100vh - var(--header-height)); margin-top: var(--header-height); }

        /* Sidebar Navigation */
    .sidebar-nav {
        width: var(--nav-width);
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 999;
        overflow-y: auto;
        transition: var(--transition);
    }

    .nav-section {
        padding: 15px 0;
    }

    .nav-section:last-child {
        padding-bottom: 20px;
    }

    .nav-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #999;
        padding: 0 20px;
        margin-bottom: 10px;
    }

    .nav-list {
        list-style: none;
    }

    .nav-item {
        margin-bottom: 5px;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        color: #555;
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
        position: relative;
    }

    .nav-link i {
        font-size: 18px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }

    .nav-link:hover {
        background-color: rgba(151, 124, 73, 0.05);
        color: var(--primary-color);
    }

    .nav-link.active {
        background-color: rgba(151, 124, 73, 0.1);
        color: var(--primary-color);
    }

    .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--primary-color);
    }
        .content-wrapper { flex: 1; margin-left: var(--nav-width); padding: 30px; transition: var(--transition); }
        .user-card { background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 20px; margin-bottom: 20px; }
        
        .btn-primary { 
            background: var(--gradient-primary); 
            border: none; 
            box-shadow: 0 4px 12px rgba(151, 124, 73, 0.2); 
        }
        .btn-primary:hover { 
            background: linear-gradient(135deg, var(--primary-dark), #5e4d2a); 
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(151, 124, 73, 0.3);
        }
        
        .badge-admin { background-color: #e3f2fd; color: #1976d2; }
        .badge-user { background-color: #f5f5f5; color: #666; }

        .modal-header {
            background: var(--gradient-primary);
            color: white;
            border: none;
        }
        .modal-title { font-weight: 600; }
        .btn-close-white { filter: invert(1); }

        /* Overlay for mobile menu */
        .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 998; }
        .overlay.show { display: block; }

        @media (max-width: 991.98px) {
            .mobile-menu-toggle { display: block; }
            .sidebar-nav { transform: translateX(-100%); width: var(--nav-width); z-index: 1001; }
            .sidebar-nav.show { transform: translateX(0); }
            .content-wrapper { margin-left: 0; padding: 20px; }
            .overlay.show { display: block; }
            .user-name { display: none; }
        }
    </style>
</head>
<body>
    <header class="header">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="bi bi-list"></i>
        </button>
        <a href="crmdashboard" class="logo">
            <img src="./assets/logo.png" alt="ConstructCRM Logo" style="height: 60px; width: 85px;">
        </a>
        <div class="header-actions">
            <div class="user-dropdown" id="userDropdown">
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar"><?php echo strtoupper(substr($user_name, 0, 1)); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($user_name); ?></span>
                    <i class="bi bi-chevron-down dropdown-arrow"></i>
                </div>
                <div class="user-dropdown-menu">
                    <a href="profile" class="dropdown-item">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                    <a href="settings" class="dropdown-item">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="signin?logout=true" class="dropdown-item">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        <div class="overlay" id="overlay"></div>

        <nav class="sidebar-nav">
            <div class="nav-section">
                <div class="nav-title">Main</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="crmdashboard" class="nav-link">
                            <i class="bi bi-speedometer2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link">
                            <i class="bi bi-grid-1x2-fill"></i>
                            <span>Client</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="projectlist" class="nav-link">
                            <i class="bi bi-list-ul"></i>
                            <span>Project List</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designimages" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Design images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="assignmentcalendar" class="nav-link">
                            <i class="bi bi-calendar-event-fill"></i>
                            <span>Assignment Calendar</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="<?= BASE_URL ?>place_order" class="nav-link">
                            <i class="bi bi-cart-check"></i> 
                            <span>Place Order</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="financetracker" class="nav-link">
                            <i class="bi bi-cash-stack"></i>
                            <span>Finance Tracker</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="imagepin" class="nav-link">
                            <i class="bi bi-pin-map-fill"></i>
                            <span>Image Pin & Comment</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designcost" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Designs Cost</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="taskmanager" class="nav-link">
                            <i class="bi bi-check2-square"></i>
                            <span>Task Manager</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="users" class="nav-link active">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Vendor Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="addvendors" class="nav-link">
                            <i class="bi bi-person-plus-fill"></i>
                            <span>Add New Vendor</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="viewvendors" class="nav-link">
                            <i class="bi bi-card-list"></i>
                            <span>View All Vendors</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="content-wrapper">
            <h2 class="mb-4">User Management</h2>
            <div class="user-card p-0 overflow-hidden">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Joined</th>
                                <th class="text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($users as $u): ?>
                            <tr>
                                <td class="ps-4"><strong><?= htmlspecialchars($u['name']) ?></strong></td>
                                <td><?= htmlspecialchars($u['email']) ?></td>
                                <td>
                                    <span class="badge <?= $u['role'] === 'Admin' ? 'badge-admin' : 'badge-user' ?> px-3 py-2 text-dark">
                                        <?= $u['role'] ?>
                                    </span>
                                </td>
                                <td><?= date('M d, Y', strtotime($u['created_at'])) ?></td>
                                <td class="text-end pe-4">
                                    <button class="btn btn-sm btn-outline-secondary me-2 mb-1" onclick='viewUser(<?= json_encode($u) ?>)'>
                                        <i class="bi bi-info-circle"></i> <span class="d-none d-sm-inline">View Info</span>
                                    </button>
                                    <button class="btn btn-sm btn-primary mb-1" onclick='openRoleModal(<?= json_encode($u) ?>)'>
                                        <i class="bi bi-shield-lock"></i> <span class="d-none d-sm-inline">Update Role</span>
                                    </button>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Info Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title">User Information</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4" id="viewBody"></div>
            </div>
        </div>
    </div>

    <!-- Update Role Modal -->
    <div class="modal fade" id="roleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title">Change User Role</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" id="targetUserId">
                    <div class="mb-3">
                        <label class="text-muted small text-uppercase fw-bold">Updating Role for:</label>
                        <div id="targetUserName" class="fw-bold" style="font-size:16px;"></div>
                    </div>
                    <div class="mb-3">
                        
                        <label class="form-label fw-bold">Select Role</label>
                        <select class="form-select" id="newRoleSelect">
                            <option value="Designer">Designer</option>
                            <option value="Admin">Admin</option>
                        </select>
                    </div>
                    <button class="btn btn-primary w-100" id="confirmRoleBtn">Save Changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const viewModal = new bootstrap.Modal(document.getElementById('viewModal'));
        const roleModal = new bootstrap.Modal(document.getElementById('roleModal'));

        // Sidebar and Dropdown Logic
        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
        const sidebarNav = document.querySelector('.sidebar-nav');
        const overlay = document.getElementById('overlay');
        const userDropdown = document.getElementById('userDropdown');
        const userProfile = document.getElementById('userProfile');

        if (mobileMenuToggle) {
            mobileMenuToggle.addEventListener('click', () => {
                sidebarNav.classList.toggle('show');
                overlay.classList.toggle('show');
            });
        }

        if (overlay) {
            overlay.addEventListener('click', () => {
                sidebarNav.classList.remove('show');
                overlay.classList.remove('show');
            });
        }

        if (userProfile) {
            userProfile.addEventListener('click', (e) => {
                e.stopPropagation();
                userDropdown.classList.toggle('show');
            });
        }

        document.addEventListener('click', () => {
            if (userDropdown) userDropdown.classList.remove('show');
        });

        function viewUser(user) {
            document.getElementById('viewBody').innerHTML = `
                <div class="text-center mb-3">
                    <div class="text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 24px; background: var(--gradient-primary); box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
                        ${user.name.charAt(0).toUpperCase()}
                    </div>
                </div>
                <table class="table table-sm">
                    <tr><td class="text-muted">User ID</td><td>#${user.id}</td></tr>
                    <tr><td class="text-muted">Full Name</td><td class="fw-bold">${user.name}</td></tr>
                    <tr><td class="text-muted">Email</td><td>${user.email}</td></tr>
                    <tr><td class="text-muted">Current Role</td><td>${user.role}</td></tr>
                    <tr><td class="text-muted">Created Date</td><td>${user.created_at}</td></tr>
                </table>
            `;
            viewModal.show();
        }

        function openRoleModal(user) {
            document.getElementById('targetUserId').value = user.id;
            document.getElementById('targetUserName').textContent = user.name;
            document.getElementById('newRoleSelect').value = user.role;
            roleModal.show();
        }

        document.getElementById('confirmRoleBtn').addEventListener('click', async () => {
            const userId = document.getElementById('targetUserId').value;
            const role = document.getElementById('newRoleSelect').value;
            
            const formData = new FormData();
            formData.append('action', 'update_role');
            formData.append('target_user_id', userId);
            formData.append('new_role', role);

            try {
                const res = await fetch('users.php', { method: 'POST', body: formData });
                const data = await res.json();
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || 'Update failed');
                }
            } catch (e) {
                alert('An error occurred.');
            }
        });
    </script>
</body>
</html>