<?php
require_once 'includes/config.php';
require_once 'includes/functions.php';
require_once 'includes/auth.php';
require_once 'includes/db.php';

$auth = new Auth();

// Check if user is admin
if (!$auth->isAdmin()) {
    redirectTo('dashboard.php');
}

$currentUser = $auth->getCurrentUser();
$db = Database::getInstance();

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

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    
    switch ($action) {
        case 'create':
            $fullName = sanitizeInput($_POST['full_name']);
            $email = sanitizeInput($_POST['email']);
            $phone = sanitizeInput($_POST['phone']);
            $whatsapp = sanitizeInput($_POST['whatsapp']);
            $password = $_POST['password'];
            $confirmPassword = $_POST['confirm_password'];
            $role = sanitizeInput($_POST['role']);

            // Validate password match
            if ($password !== $confirmPassword) {
                $error = "Passwords do not match";
                break;
            }

            // Validate email
            if (!validateEmail($email)) {
                $error = "Invalid email format";
                break;
            }

            // Check if email exists
            $checkEmail = $db->query("SELECT id FROM users WHERE email = '" . $db->escape($email) . "'");
            if ($checkEmail->num_rows > 0) {
                $error = "Email already exists";
                break;
            }

            $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
            $sql = "INSERT INTO users (full_name, email, phone, whatsapp, password, role) 
                    VALUES ('" . $db->escape($fullName) . "', '" . $db->escape($email) . "', 
                            '" . $db->escape($phone) . "', '" . $db->escape($whatsapp) . "', 
                            '" . $db->escape($hashedPassword) . "', '" . $db->escape($role) . "')";
            
            if ($db->query($sql)) {
                $success = "User created successfully";
            } else {
                $error = "Failed to create user";
            }
            break;

        case 'delete':
            $userId = (int)$_POST['user_id'];
            
            // Prevent deleting self
            if ($userId === (int)$_SESSION['user_id']) {
                $error = "Cannot delete your own account";
                break;
            }

            if ($db->query("DELETE FROM users WHERE id = $userId")) {
                $success = "User deleted successfully";
            } else {
                $error = "Failed to delete user";
            }
            break;
            
        case 'update':
            $userId = (int)$_POST['user_id'];
            $fullName = sanitizeInput($_POST['full_name']);
            $email = sanitizeInput($_POST['email']);
            $phone = sanitizeInput($_POST['phone']);
            $whatsapp = sanitizeInput($_POST['whatsapp']);
            $role = sanitizeInput($_POST['role']);

            // Check if email exists for other users
            $checkEmail = $db->query("SELECT id FROM users WHERE email = '" . $db->escape($email) . "' AND id != $userId");
            if ($checkEmail->num_rows > 0) {
                $error = "Email already exists";
                break;
            }

            $sql = "UPDATE users SET 
                    full_name = '" . $db->escape($fullName) . "',
                    email = '" . $db->escape($email) . "',
                    phone = '" . $db->escape($phone) . "',
                    whatsapp = '" . $db->escape($whatsapp) . "',
                    role = '" . $db->escape($role) . "'
                    WHERE id = $userId";
            
            if ($db->query($sql)) {
                $success = "User updated successfully";
            } else {
                $error = "Failed to update user";
            }
            break;
    }
}

// Get all users
$users = $db->query("SELECT *, DATE_FORMAT(created_at, '%b %d, %Y') as created_date FROM users ORDER BY created_at DESC");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users | <?php echo APP_NAME; ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
   <style>
        :root {
            --primary-color: #f58220;
            --primary-light: rgba(245, 130, 32, 0.1);
            --white: #ffffff;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: var(--gray-50);
        }

        .navbar {
            background: var(--white);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .navbar-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .logo {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .nav-link {
            color: var(--gray-600);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-color);
            background: var(--primary-light);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-name {
            color: var(--gray-700);
            font-weight: 500;
        }

        .logout-btn {
            padding: 0.5rem 1rem;
            color: var(--white);
            background: var(--primary-color);
            border-radius: 0.375rem;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .logout-btn:hover {
            opacity: 0.9;
        }

        .main-content {
            margin-top: 4.5rem;
            padding: 2rem 1rem;
            flex: 1;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
        }

        .toggle-form-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .inline-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .form-control {
            flex: 1;
            min-width: 150px;
            padding: 8px 12px;
            border: 1px solid var(--gray-200);
            border-radius: 4px;
            font-size: 14px;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

        select.form-control {
            min-width: 120px;
            background: white;
        }

        .add-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            min-width: 80px;
        }

        .add-btn:hover {
            opacity: 0.9;
        }

        .users-table {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            text-align: left;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-200);
        }

        th {
            background: var(--gray-50);
            color: var(--gray-600);
            font-weight: 500;
            white-space: nowrap;
            font-size: 0.875rem;
        }

        td {
            vertical-align: middle;
            color: var(--gray-600);
            font-size: 0.8125rem;
        }

        .role-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .role-badge.admin {
            background: #e3f2fd;
            color: #1976d2;
        }

        .role-badge.pm {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-edit, .btn-delete, .btn-update, .btn-cancel {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }

        .btn-edit {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .btn-update {
            background: var(--primary-color);
            color: white;
        }

        .btn-cancel {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .btn-delete {
            background: #fecaca;
            color: #dc2626;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 16px;
            font-size: 14px;
        }

        .alert-success {
            background: #ecfdf5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }

        .alert-danger {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .footer {
            background: var(--white);
            padding: 1.5rem;
            text-align: center;
            color: var(--gray-600);
            border-top: 1px solid var(--gray-200);
        }

        @media (max-width: 768px) {
            .navbar-container {
                flex-direction: column;
                gap: 1rem;
            }

            .navbar-left {
                flex-direction: column;
                width: 100%;
            }

            .nav-links {
                flex-direction: column;
                width: 100%;
            }

            .nav-link {
                width: 100%;
                text-align: center;
            }

            .user-menu {
                width: 100%;
                flex-direction: column;
                gap: 0.5rem;
            }

            .form-row {
                flex-direction: column;
            }

            .form-row .form-control {
                width: 100%;
            }

            .add-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container">
            <div class="navbar-left">
                <a href="dashboard.php" class="logo"><?php echo APP_NAME; ?></a>
                <div class="nav-links">
                    <a href="dashboard.php" class="nav-link">Dashboard</a>
                    <a href="users.php" class="nav-link active">Users</a>
                    <a href="base.php" class="nav-link">Base</a>
                    <a href="panel.php" class="nav-link">Panel</a>
                    <a href="surveys.php" class="nav-link">Surveys</a>
                    <a href="projects.php" class="nav-link">Projects</a>
                </div>
            </div>
            <div class="user-menu">
                <span class="user-name"><?php echo htmlspecialchars($currentUser['full_name']); ?></span>
                <a href="logout.php" class="logout-btn">Logout</a>
            </div>
        </div>
    </nav>

    <main class="main-content">
        <div class="container">
            <button onclick="toggleAddForm()" class="toggle-form-btn">Add New User</button>
            
            <?php if ($error): ?>
                <div class="alert alert-danger"><?php echo $error; ?></div>
            <?php endif; ?>

            <?php if ($success): ?>
                <div class="alert alert-success"><?php echo $success; ?></div>
            <?php endif; ?>

            <form id="addUserForm" method="POST" onsubmit="return validateForm(this)" class="inline-form" style="display: none;">
                <input type="hidden" name="action" value="create">
                <div class="form-row">
                    <input type="text" name="full_name" class="form-control" placeholder="Full Name" required>
                    <input type="email" name="email" class="form-control" placeholder="Email" required>
                    <input type="password" name="password" class="form-control" placeholder="Password" required minlength="8">
                    <input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" required>
                    <input type="tel" name="phone" class="form-control" placeholder="Phone" required pattern="[0-9]{10}">
                    <input type="tel" name="whatsapp" class="form-control" placeholder="WhatsApp" required pattern="[0-9]{10}">
                    <select name="role" class="form-control" required>
                        <option value="">Select Role</option>
                        <option value="admin">Admin</option>
                        <option value="pm">Project Manager</option>
                    </select>
                    <button type="submit" class="add-btn">Add</button>
                </div>
            </form>

            <div class="users-table">
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>WhatsApp</th>
                            <th>Role</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php while ($user = $users->fetch_assoc()): ?>
                            <tr id="user-<?php echo $user['id']; ?>">
                                <td data-label="Name"><?php echo htmlspecialchars($user['full_name']); ?></td>
                                <td data-label="Email"><?php echo htmlspecialchars($user['email']); ?></td>
                                <td data-label="Phone"><?php echo htmlspecialchars($user['phone']); ?></td>
                                <td data-label="WhatsApp"><?php echo htmlspecialchars($user['whatsapp']); ?></td>
                                <td data-label="Role">
                                    <span class="role-badge <?php echo strtolower($user['role']); ?>">
                                        <?php echo $user['role'] === 'pm' ? 'Project Manager' : 'Admin'; ?>
                                    </span>
                                </td>
                                <td data-label="Created"><?php echo $user['created_date']; ?></td>
                                <td>
                                    <?php if ($user['id'] !== $_SESSION['user_id']): ?>
                                        <div class="action-buttons">
                                            <button class="btn-edit" onclick="editUser(<?php echo $user['id']; ?>)">Edit</button>
                                            <button class="btn-delete" onclick="deleteUser(<?php echo $user['id']; ?>, '<?php echo htmlspecialchars($user['full_name']); ?>')">Delete</button>
                                        </div>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <footer class="footer">
        <?php echo APP_NAME; ?> - All Rights Reserved
    </footer>

    <script>
        // Toggle add user form
        function toggleAddForm() {
            const form = document.getElementById('addUserForm');
            if (form.style.display === 'none') {
                form.style.display = 'block';
                form.reset(); // Reset form when showing
            } else {
                form.style.display = 'none';
            }
        }

       // Edit user inline
function editUser(userId) {
    const row = document.getElementById('user-' + userId);
    const cells = row.getElementsByTagName('td');
    
    // Store original content using data attributes for safety
    row.setAttribute('data-original', row.innerHTML);
    
    // Get current values
    const name = cells[0].textContent.trim();
    const email = cells[1].textContent.trim();
    const phone = cells[2].textContent.trim();
    const whatsapp = cells[3].textContent.trim();
    const role = cells[4].querySelector('.role-badge').textContent.trim() === 'Project Manager' ? 'pm' : 'admin';
    const created = cells[5].textContent.trim();

    // Replace cells with input fields
    cells[0].innerHTML = `<input type="text" class="form-control" value="${name}" name="full_name">`;
    cells[1].innerHTML = `<input type="email" class="form-control" value="${email}" name="email">`;
    cells[2].innerHTML = `<input type="tel" class="form-control" value="${phone}" name="phone">`;
    cells[3].innerHTML = `<input type="tel" class="form-control" value="${whatsapp}" name="whatsapp">`;
    cells[4].innerHTML = `
        <select class="form-control" name="role">
            <option value="admin" ${role === 'admin' ? 'selected' : ''}>Admin</option>
            <option value="pm" ${role === 'pm' ? 'selected' : ''}>Project Manager</option>
        </select>
    `;
    cells[5].textContent = created;
    cells[6].innerHTML = `
        <div class="action-buttons">
            <button class="btn-update" onclick="updateUser(${userId})">Update</button>
            <button class="btn-cancel" onclick="cancelEdit(${userId})">Cancel</button>
        </div>
    `;
}

        // Update user
        function updateUser(userId) {
            const row = document.getElementById('user-' + userId);
            const formData = new FormData();
            
            formData.append('action', 'update');
            formData.append('user_id', userId);
            formData.append('full_name', row.querySelector('[name="full_name"]').value);
            formData.append('email', row.querySelector('[name="email"]').value);
            formData.append('phone', row.querySelector('[name="phone"]').value);
            formData.append('whatsapp', row.querySelector('[name="whatsapp"]').value);
            formData.append('role', row.querySelector('[name="role"]').value);

            // Create and submit form
            const form = document.createElement('form');
            form.method = 'POST';
            for (const [key, value] of formData.entries()) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = value;
                form.appendChild(input);
            }
            document.body.appendChild(form);
            form.submit();
        }

        // Cancel edit
function cancelEdit(userId) {
    const row = document.getElementById('user-' + userId);
    const originalContent = row.getAttribute('data-original');
    row.innerHTML = originalContent;
}

        // Delete user
        function deleteUser(userId, name) {
            if (confirm(`Are you sure you want to delete user: ${name}?`)) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.innerHTML = `
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="user_id" value="${userId}">
                `;
                document.body.appendChild(form);
                form.submit();
            }
        }

        // Form validation
        function validateForm(form) {
            const password = form.querySelector('input[name="password"]');
            const confirmPassword = form.querySelector('input[name="confirm_password"]');
            
            if (password && confirmPassword && password.value !== confirmPassword.value) {
                alert('Passwords do not match');
                return false;
            }

            if (password && password.value.length < 8) {
                alert('Password must be at least 8 characters long');
                return false;
            }

            const phone = form.querySelector('input[name="phone"]');
            const whatsapp = form.querySelector('input[name="whatsapp"]');
            
            if (!phone.value.match(/^[0-9]{10}$/) || !whatsapp.value.match(/^[0-9]{10}$/)) {
                alert('Please enter valid 10-digit phone numbers');
                return false;
            }

            return true;
        }

        // Phone to WhatsApp auto-copy
        document.querySelector('input[name="phone"]').addEventListener('input', function() {
            const whatsappInput = document.querySelector('input[name="whatsapp"]');
            if (!whatsappInput.value) {
                whatsappInput.value = this.value;
            }
        });

        // Auto-dismiss alerts
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 300);
                }, 3000);
            });
        });
    </script>
</body>
</html>