<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

// Mock data for roles and users, replace with database data
$roles = [
    ['id' => 1, 'name' => 'Admin', 'description' => 'Full access to all features and settings.'],
    ['id' => 2, 'name' => 'HR Manager', 'description' => 'Can manage candidates, workflows, and view reports.'],
    ['id' => 3, 'name' => 'Team Member', 'description' => 'Limited access to assigned tasks and candidates.']
];

$users = [
    ['id' => 1, 'name' => 'Alexandre Dubois', 'email' => 'alex@finmox.com', 'role' => 'Admin', 'status' => 'Active', 'avatar' => 'https://i.pravatar.cc/40?u=1'],
    ['id' => 2, 'name' => 'Béatrice Martin', 'email' => 'beatrice@finmox.com', 'role' => 'HR Manager', 'status' => 'Active', 'avatar' => 'https://i.pravatar.cc/40?u=2'],
    ['id' => 3, 'name' => 'Charles Leclerc', 'email' => 'charles@finmox.com', 'role' => 'Team Member', 'status' => 'Invited', 'avatar' => 'https://i.pravatar.cc/40?u=3'],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        body {
            background-color: #fafafa;
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-200">
        <?php include '_sidebar.php'; ?>

        <!-- Main content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#fafafa] pb-20 md:pb-0">
                <div class="max-w-7xl mx-auto px-4 md:px-6 py-4 md:py-8">
                    
                    <!-- SettingsHeader -->
                    <div class="md:flex md:items-center md:justify-between">
                        <div class="flex-1 min-w-0">
                            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                                Settings
                            </h2>
                            <p class="mt-1 text-sm text-gray-500">
                                Manage your workspace and team settings.
                            </p>
                        </div>
                        <div class="mt-4 flex md:mt-0 md:ml-4">
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Invite team
                            </button>
                        </div>
                    </div>

                    <div class="mt-6 md:mt-8 space-y-4 md:space-y-6">

                        <!-- PermissionsTable -->
                        <div class="bg-white shadow-sm rounded-lg">
                            <div class="px-4 py-5 sm:px-6">
                                <h3 class="text-lg leading-6 font-medium text-gray-900">Roles & Permissions</h3>
                                <p class="mt-1 text-sm text-gray-500">Define what each role can see and do.</p>
                            </div>
                            <div class="border-t border-gray-200">
                                <ul class="divide-y divide-gray-200">
                                    <?php foreach ($roles as $role): ?>
                                    <li class="p-4 sm:p-6 hover:bg-gray-50">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <p class="font-medium text-gray-900"><?php echo htmlspecialchars($role['name']); ?></p>
                                                <p class="text-sm text-gray-500"><?php echo htmlspecialchars($role['description']); ?></p>
                                            </div>
                                            <a href="edit_role.php?id=<?php echo $role['id']; ?>" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Edit</a>
                                        </div>
                                    </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </div>

                        <!-- WorkspaceSettings -->
                        <div class="bg-white shadow-sm rounded-lg">
                            <div class="px-4 py-5 sm:px-6">
                                <h3 class="text-lg leading-6 font-medium text-gray-900">Workspace</h3>
                                <p class="mt-1 text-sm text-gray-500">Manage your company profile and branding.</p>
                            </div>
                            <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
                                <form class="space-y-6">
                                    <div>
                                        <label for="company-name" class="block text-sm font-medium text-gray-700">Company Name</label>
                                        <input type="text" id="company-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="FinMox">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Company Logo</label>
                                        <div class="mt-2 flex items-center space-x-4">
                                            <img src="assets/pasted-20251120-051320-b2b0cdfa.png" alt="Logo" class="h-10 w-auto">
                                            <input type="file" id="logo-upload" class="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100">
                                        </div>
                                    </div>
                                    <div class="flex justify-end">
                                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                            Save Changes
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- UserManagement -->
                        <div class="bg-white shadow-sm rounded-lg">
                            <div class="px-4 py-5 sm:px-6">
                                <h3 class="text-lg leading-6 font-medium text-gray-900">User Management</h3>
                                <p class="mt-1 text-sm text-gray-500">Invite, remove, and manage your team members.</p>
                            </div>
                            <div class="border-t border-gray-200">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                                            <th scope="col" class="relative px-6 py-3"><span class="sr-only">Edit</span></th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <?php foreach ($users as $user): ?>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10">
                                                        <img class="h-10 w-10 rounded-full" src="<?php echo htmlspecialchars($user['avatar']); ?>" alt="">
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($user['name']); ?></div>
                                                        <div class="text-sm text-gray-500"><?php echo htmlspecialchars($user['email']); ?></div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <?php if ($user['status'] === 'Active'): ?>
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                        Active
                                                    </span>
                                                <?php else: ?>
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                        Invited
                                                    </span>
                                                <?php endif; ?>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo htmlspecialchars($user['role']); ?></td>
                                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
</html>
