<?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 logged in
if (!$auth->isLoggedIn()) {
    redirectTo('login.php');
}

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

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

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    $redirectSection = '';
    
    switch ($action) {
        case 'create_project':
            $projectId = sanitizeInput($_POST['project_id']);
            $clientName = sanitizeInput($_POST['client_name']);
            $projectTitle = sanitizeInput($_POST['project_title']);
            $projectDescription = sanitizeInput($_POST['project_description']);
            
            // Validate required fields
            if (empty($projectId) || empty($clientName) || empty($projectTitle)) {
                $error = "Please fill in all required fields.";
                break;
            }
            
            // Check if project ID exists
            $checkId = $db->query("SELECT id FROM projects WHERE project_id = '" . $db->escape($projectId) . "'");
            if ($checkId && $checkId->num_rows > 0) {
                $error = "Project ID already exists. Please use a different ID.";
                break;
            }
            
            $sql = "INSERT INTO projects (project_id, client_name, title, description, status, created_by) 
                    VALUES ('" . $db->escape($projectId) . "', 
                            '" . $db->escape($clientName) . "',
                            '" . $db->escape($projectTitle) . "',
                            '" . $db->escape($projectDescription) . "',
                            'active',
                            " . (int)$_SESSION['user_id'] . ")";
            
            if ($db->query($sql)) {
                $success = "Project created successfully.";
            } else {
                $error = "Failed to create project: " . $db->getLastError();
            }
            break;
            
        case 'update_project':
            $id = (int)$_POST['id'];
            $projectId = sanitizeInput($_POST['project_id']);
            $clientName = sanitizeInput($_POST['client_name']);
            $projectTitle = sanitizeInput($_POST['project_title']);
            $projectDescription = sanitizeInput($_POST['project_description']);
            
            // Validate required fields
            if (empty($projectId) || empty($clientName) || empty($projectTitle)) {
                $error = "Please fill in all required fields.";
                break;
            }
            
            // Check if project ID exists for other projects
            $checkId = $db->query("SELECT id FROM projects WHERE project_id = '" . $db->escape($projectId) . "' AND id != $id");
            if ($checkId && $checkId->num_rows > 0) {
                $error = "Project ID already exists. Please use a different ID.";
                break;
            }
            
            $sql = "UPDATE projects SET 
                    project_id = '" . $db->escape($projectId) . "',
                    client_name = '" . $db->escape($clientName) . "',
                    title = '" . $db->escape($projectTitle) . "',
                    description = '" . $db->escape($projectDescription) . "'
                    WHERE id = $id";
            
            if ($db->query($sql)) {
                $success = "Project updated successfully.";
            } else {
                $error = "Failed to update project: " . $db->getLastError();
            }
            break;
            
        case 'delete_project':
            $id = (int)$_POST['id'];
            
            // Delete the project
            if ($db->query("DELETE FROM projects WHERE id = $id")) {
                $success = "Project deleted successfully.";
            } else {
                $error = "Failed to delete project: " . $db->getLastError();
            }
            break;
    }
}

// Get all projects with connected surveys
$query = "SELECT p.*, 
          u.full_name as created_by_name,
          DATE_FORMAT(p.created_at, '%b %d, %Y %H:%i') as formatted_date,
          (SELECT COUNT(*) FROM project_surveys WHERE project_id = p.id) as connected_surveys 
          FROM projects p
          JOIN users u ON p.created_by = u.id
          ORDER BY p.created_at DESC";
$projects = $db->query($query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects | <?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);
    --synthetic-color: #00BCD4;  /* ADD THIS LINE */
    --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);
        }

        /* Navigation Styles */
        .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 {
            color: var(--primary-color);
            background: var(--primary-light);
        }

        .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 Styles */
        .main-content {
            margin-top: 4.5rem;
            padding: 2rem 1rem;
            flex: 1;
        }

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

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

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

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

        .btn-secondary {
            background: var(--gray-200);
            color: var(--gray-700);
        }

        .btn-danger {
            background: #EF4444;
            color: var(--white);
        }

        .project-form {
            background: var(--white);
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
            display: none;
        }

        .form-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 1rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--gray-700);
        }

        .form-group input, 
        .form-group textarea {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid var(--gray-300);
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1rem;
        }

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

        .btn-cancel:hover {
            background: var(--gray-300);
        }

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

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

        .projects-table {
            width: 100%;
            background: var(--white);
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

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

        .projects-table th,
        .projects-table td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--gray-200);
        }

        .projects-table th {
            background: var(--gray-50);
            font-weight: 500;
            color: var(--gray-600);
            font-size: 0.875rem;
        }

        .projects-table tr:last-child td {
            border-bottom: none;
        }

        .table-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 0.25rem;
            background: var(--gray-100);
            color: var(--gray-600);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            background: var(--gray-200);
        }

        .action-btn-connect {
            background: #EBF5FF;
            color: #3B82F6;
        }

        .action-btn-connect:hover {
            background: #DBEAFE;
        }

        .action-btn-edit {
            background: #ECFDF5;
            color: #059669;
        }

        .action-btn-edit:hover {
            background: #D1FAE5;
        }

        .action-btn-delete {
            background: #FEF2F2;
            color: #DC2626;
        }

        .action-btn-delete:hover {
            background: #FEE2E2;
        }

        .manage-btn {
            background: var(--primary-color);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

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

        .alert {
            padding: 1rem;
            border-radius: 0.375rem;
            margin-bottom: 1rem;
        }

        .alert-success {
            background-color: #ECFDF5;
            color: #065F46;
            border: 1px solid #D1FAE5;
        }

        .alert-error {
            background-color: #FEF2F2;
            color: #B91C1C;
            border: 1px solid #FEE2E2;
        }

        .description-cell {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

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

        /* Modal Styles */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none; /* Start hidden */
            align-items: center;
            justify-content: center;
            z-index: 1050;
        }

        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .modal-header {
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--gray-200);
        }

        .modal-header h3 {
            margin: 0;
            color: var(--gray-800);
        }

        .close-modal {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray-500);
            cursor: pointer;
            line-height: 1;
        }

        .modal-body {
            padding: 1rem;
            overflow-y: auto;
            flex-grow: 1;
        }

        .modal-tabs {
            display: flex;
            border-bottom: 1px solid var(--gray-200);
            margin-bottom: 1rem;
        }

        .modal-tab {
            padding: 0.5rem 1rem;
            cursor: pointer;
            color: var(--gray-600);
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }

        .modal-tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }

        .modal-tab-content {
            display: none;
        }

        .modal-tab-content.active {
            display: block;
        }

        .modal-footer {
            padding: 1rem;
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: flex-end;
        }

        /* Survey List Styles */
        .survey-list {
            margin-top: 1rem;
        }

        .survey-item {
            padding: 1rem;
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            margin-bottom: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }

        .survey-item:hover {
            border-color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .connected-survey-item {
            background-color: var(--gray-50);
        }

        .survey-details {
            flex-grow: 1;
        }

        .survey-details h4 {
            margin: 0 0 0.5rem 0;
            color: var(--gray-800);
        }

        .survey-status {
            margin: 0 0 0.25rem 0;
            font-size: 0.875rem;
            color: var(--gray-600);
        }

        .survey-meta {
            margin: 0;
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-draft { background: var(--gray-100); color: var(--gray-700); }
        .status-active { background: #D1FAE5; color: #065F46; }
        .status-paused { background: #FEF3C7; color: #92400E; }
        .status-completed { background: #E0E7FF; color: #3730A3; }
        .status-archived { background: #F3F4F6; color: #6B7280; }

        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid var(--gray-200);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            margin: 2rem auto;
            animation: spin 1s linear infinite;
        }

        .error-message, .no-data {
            text-align: center;
            padding: 2rem;
            color: var(--gray-600);
        }

        .error-message {
            color: #DC2626;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Connected survey count badge */
        .survey-count {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            border-radius: 9999px;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 0.5rem;
        }

        /* Survey item badge in the project list */
        .connected-surveys-badge {
            display: inline-flex;
            align-items: center;
            background: var(--primary-light);
            color: var(--primary-color);
            border-radius: 9999px;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            gap: 0.25rem;
        }

        /* Responsive Design */
        @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 {
                flex-direction: column;
                width: 100%;
                gap: 0.5rem;
            }

            .logout-btn {
                width: 100%;
                text-align: center;
            }

            .main-content {
                margin-top: 8rem;
            }

            .page-header {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }
            /* OptimAIze specific styles - ADD THIS ENTIRE BLOCK */
.nav-link.optimaize {
    color: var(--gray-600);
}

.nav-link.optimaize:hover {
    color: var(--synthetic-color);
}

.nav-link.optimaize.active {
    color: var(--synthetic-color);
    border-bottom-color: var(--synthetic-color);
}

.nav-link.optimaize .ai-highlight {
    color: var(--synthetic-color);
    font-weight: 700;
}
        }
    </style>
</head>
<body>
    <!-- For projects.php - Replace the existing navigation section -->
<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>
                <?php if ($auth->isAdmin()): ?>
                    <a href="users.php" class="nav-link">Users</a>
                    <a href="base.php" class="nav-link">Base</a>
                    <a href="optimaize.php" class="nav-link optimaize">Optim<span class="ai-highlight">AI</span>ze</a>
                <?php endif; ?>
                <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 active">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">
            <div class="page-header">
                <h1 class="page-title">Projects</h1>
                <button id="createProjectBtn" class="btn btn-primary">Create Project</button>
            </div>

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

            <?php if ($success): ?>
                <div class="alert alert-success"><?php echo $success; ?></div>
            <?php endif; ?>
            
            <?php if (isset($_SESSION['success_message'])): ?>
                <div class="alert alert-success"><?php echo $_SESSION['success_message']; ?></div>
                <?php unset($_SESSION['success_message']); ?>
            <?php endif; ?>
            
            <?php if (isset($_SESSION['error_message'])): ?>
                <div class="alert alert-error"><?php echo $_SESSION['error_message']; ?></div>
                <?php unset($_SESSION['error_message']); ?>
            <?php endif; ?>

            <div id="projectForm" class="project-form">
                <h2 class="form-title">Create New Project</h2>
                <form id="projectFormContent" method="POST" action="">
                    <input type="hidden" name="action" value="create_project">
                    <input type="hidden" name="id" value="">

                    <div class="form-grid">
                        <div class="form-group">
                            <label for="project_id">Project ID</label>
                            <input type="text" id="project_id" name="project_id" required>
                        </div>
                        <div class="form-group">
                            <label for="client_name">Client Name</label>
                            <input type="text" id="client_name" name="client_name" required>
                        </div>
                        <div class="form-group">
                            <label for="project_title">Project Title</label>
                            <input type="text" id="project_title" name="project_title" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="project_description">Project Description</label>
                        <textarea id="project_description" name="project_description"></textarea>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-cancel" onclick="toggleProjectForm(false)">Cancel</button>
                        <button type="submit" class="btn btn-submit">Save Project</button>
                    </div>
                </form>
            </div>

            <div class="projects-table">
                <table>
                    <thead>
                        <tr>
                            <th>Project ID</th>
                            <th>Client</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Connected Surveys</th>
                            <th>Created By</th>
                            <th>Created Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if ($projects && $projects->num_rows > 0): ?>
                            <?php while ($project = $projects->fetch_assoc()): ?>
                                <tr>
                                    <td><?php echo htmlspecialchars($project['project_id']); ?></td>
                                    <td><?php echo htmlspecialchars($project['client_name']); ?></td>
                                    <td><?php echo htmlspecialchars($project['title']); ?></td>
                                    <td class="description-cell" title="<?php echo htmlspecialchars($project['description']); ?>"><?php echo htmlspecialchars($project['description']); ?></td>
                                    <td>
                                        <?php 
                                        // Get the connected survey title
                                        $connected_survey = '';
                                        if ($project['connected_surveys'] > 0) {
                                            $survey_query = $db->query("
                                                SELECT s.title 
                                                FROM project_surveys ps
                                                JOIN surveys s ON ps.survey_id = s.id
                                                WHERE ps.project_id = " . $project['id'] . "
                                                LIMIT 1
                                            ");
                                            if ($survey_query && $survey_query->num_rows > 0) {
                                                $connected_survey = $survey_query->fetch_assoc()['title'];
                                            }
                                        }
                                        
                                        if (!empty($connected_survey)): ?>
                                            <span class="connected-surveys-badge">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
                                                <?php echo htmlspecialchars($connected_survey); ?>
                                            </span>
                                        <?php else: ?>
                                            <span>None</span>
                                        <?php endif; ?>
                                    </td>
                                    <td><?php echo htmlspecialchars($project['created_by_name']); ?></td>
                                    <td><?php echo htmlspecialchars($project['formatted_date']); ?></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="action-btn action-btn-connect" title="Manage Surveys" onclick="manageProjectSurveys(<?php echo $project['id']; ?>, '<?php echo addslashes($project['title']); ?>')">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                                                </svg>
                                            </button>
                                            <button class="action-btn action-btn-edit" title="Edit Project" onclick="editProject(<?php echo $project['id']; ?>, '<?php echo addslashes($project['project_id']); ?>', '<?php echo addslashes($project['client_name']); ?>', '<?php echo addslashes($project['title']); ?>', '<?php echo addslashes($project['description']); ?>')">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                                </svg>
                                            </button>
                                            <button class="action-btn action-btn-delete" title="Delete Project" onclick="deleteProject(<?php echo $project['id']; ?>, '<?php echo addslashes($project['title']); ?>')">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <polyline points="3 6 5 6 21 6"></polyline>
                                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                    <line x1="10" y1="11" x2="10" y2="17"></line>
                                                    <line x1="14" y1="11" x2="14" y2="17"></line>
                                                </svg>
                                            </button>
                                            <button class="manage-btn" onclick="manageProject(<?php echo $project['id']; ?>)">
                                                Manage
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            <?php endwhile; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="8" style="text-align: center; padding: 2rem;">No projects found. Click "Create Project" to add a new project.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

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

    <!-- Project Surveys Modal -->
    <div id="projectSurveysModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="projectSurveysModalTitle">Project Surveys</h3>
                <span class="close-modal" onclick="closeProjectSurveysModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="modal-tabs">
                    <div class="modal-tab active" data-tab="connected" onclick="switchTab('connected')">Connected Surveys</div>
                    <div class="modal-tab" data-tab="available" onclick="switchTab('available')">Available Surveys</div>
                </div>
                <div id="connectedSurveysTab" class="modal-tab-content active">
                    <div id="connectedSurveysList" class="survey-list">
                        <!-- Connected surveys will be loaded here -->
                        <div class="loading-spinner"></div>
                    </div>
                </div>
                <div id="availableSurveysTab" class="modal-tab-content">
                    <div id="availableSurveysList" class="survey-list">
                        <!-- Available surveys will be loaded here -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeProjectSurveysModal()">Close</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set up event listeners
            document.getElementById('createProjectBtn').addEventListener('click', function() {
                toggleProjectForm(true);
            });
            
            // Add click event listener to modal background for closing
            document.getElementById('projectSurveysModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeProjectSurveysModal();
                }
            });
            
            // Auto-dismiss alerts after 3 seconds
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.style.opacity = '0';
                    setTimeout(() => {
                        alert.style.display = 'none';
                    }, 300);
                }, 3000);
            });
        });

        // Define all your functions in global scope
        function manageProjectSurveys(projectId, projectTitle) {
            // Set the modal title
            document.getElementById('projectSurveysModalTitle').textContent = `Surveys for ${projectTitle}`;
            
            // Store the project ID in a data attribute on the modal
            const modal = document.getElementById('projectSurveysModal');
            modal.setAttribute('data-project-id', projectId);
            
            // Show the modal
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden'; // Prevent scrolling
            
            // Reset active tab
            switchTab('connected');
            
            // Load connected surveys first
            fetchConnectedSurveys(projectId);
        }

        function closeProjectSurveysModal() {
            document.getElementById('projectSurveysModal').style.display = 'none';
            document.body.style.overflow = ''; // Restore scrolling
        }

        function switchTab(tabName) {
            // Update tab buttons
            document.querySelectorAll('.modal-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`.modal-tab[data-tab="${tabName}"]`).classList.add('active');
            
            // Update tab content
            document.querySelectorAll('.modal-tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            if (tabName === 'connected') {
                document.getElementById('connectedSurveysTab').classList.add('active');
                // Reload connected surveys when switching to this tab
                const projectId = document.getElementById('projectSurveysModal').getAttribute('data-project-id');
                fetchConnectedSurveys(projectId);
            } else {
                document.getElementById('availableSurveysTab').classList.add('active');
                // Load available surveys when switching to this tab
                const projectId = document.getElementById('projectSurveysModal').getAttribute('data-project-id');
                fetchAvailableSurveys(projectId);
            }
        }

        function fetchConnectedSurveys(projectId) {
            const container = document.getElementById('connectedSurveysList');
            container.innerHTML = '<div class="loading-spinner"></div>';
            
            fetch(`get_connected_surveys.php?project_id=${projectId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayConnectedSurveys(data.surveys);
                    } else {
                        throw new Error(data.message || 'Failed to load connected surveys');
                    }
                })
                .catch(error => {
                    container.innerHTML = 
                        `<div class="error-message">Error: ${error.message}</div>`;
                });
        }

        function fetchAvailableSurveys(projectId) {
            const container = document.getElementById('availableSurveysList');
            container.innerHTML = '<div class="loading-spinner"></div>';
            
            fetch(`get_available_surveys.php?project_id=${projectId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayAvailableSurveys(data.surveys);
                    } else {
                        throw new Error(data.message || 'Failed to load available surveys');
                    }
                })
                .catch(error => {
                    container.innerHTML = 
                        `<div class="error-message">Error: ${error.message}</div>`;
                });
        }

        function displayConnectedSurveys(surveys) {
            const container = document.getElementById('connectedSurveysList');
            
            if (surveys.length === 0) {
                container.innerHTML = '<div class="no-data">No connected surveys found.</div>';
                return;
            }
            
            let html = '';
            surveys.forEach(survey => {
                html += `
                    <div class="survey-item connected-survey-item">
                        <div class="survey-details">
                            <h4>${escapeHtml(survey.title)}</h4>
                            <p class="survey-status">Status: <span class="status-badge status-${survey.status.toLowerCase()}">${capitalizeFirst(survey.status)}</span></p>
                            <p class="survey-meta">Questions: ${survey.questions_count || 0} | Responses: ${survey.responses_count || 0} / ${survey.tokens_count || 0}</p>
                        </div>
                        <button class="btn btn-danger" onclick="disconnectSurvey(${survey.connection_id})">Disconnect</button>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        function displayAvailableSurveys(surveys) {
            const container = document.getElementById('availableSurveysList');
            
            if (surveys.length === 0) {
                container.innerHTML = '<div class="no-data">No available surveys found. Please create a survey first.</div>';
                return;
            }
            
            let html = '';
            surveys.forEach(survey => {
                html += `
                    <div class="survey-item">
                        <div class="survey-details">
                            <h4>${escapeHtml(survey.title)}</h4>
                            <p class="survey-status">Status: <span class="status-badge status-${survey.status.toLowerCase()}">${capitalizeFirst(survey.status)}</span></p>
                            <p class="survey-meta">Questions: ${survey.questions_count || 0} | Responses: ${survey.responses_count || 0} / ${survey.tokens_count || 0}</p>
                        </div>
                        <button class="btn btn-primary" onclick="connectSurvey(${survey.id})">Connect</button>
                    </div>
                `;
            });
            
            container.innerHTML = html;
        }

        function connectSurvey(surveyId) {
            const projectId = document.getElementById('projectSurveysModal').getAttribute('data-project-id');
            
            // Show success message first
            alert('Survey connected successfully!');
            
            // Use a form submission instead of fetch to avoid the network error
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = 'connect_survey.php';
            
            const surveyInput = document.createElement('input');
            surveyInput.type = 'hidden';
            surveyInput.name = 'survey_id';
            surveyInput.value = surveyId;
            
            const projectInput = document.createElement('input');
            projectInput.type = 'hidden';
            projectInput.name = 'project_id';
            projectInput.value = projectId;
            
            // Add a redirect parameter
            const redirectInput = document.createElement('input');
            redirectInput.type = 'hidden';
            redirectInput.name = 'redirect';
            redirectInput.value = 'projects.php';
            
            form.appendChild(surveyInput);
            form.appendChild(projectInput);
            form.appendChild(redirectInput);
            
            document.body.appendChild(form);
            form.submit();
        }

        function disconnectSurvey(connectionId) {
            if (confirm('Are you sure you want to disconnect this survey?')) {
                // Show success message first
                alert('Survey disconnected successfully!');
                
                // Use a form submission instead of fetch to avoid the network error
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = 'disconnect_survey.php';
                
                const connectionInput = document.createElement('input');
                connectionInput.type = 'hidden';
                connectionInput.name = 'connection_id';
                connectionInput.value = connectionId;
                
                // Add a redirect parameter
                const redirectInput = document.createElement('input');
                redirectInput.type = 'hidden';
                redirectInput.name = 'redirect';
                redirectInput.value = 'projects.php';
                
                form.appendChild(connectionInput);
                form.appendChild(redirectInput);
                
                document.body.appendChild(form);
                form.submit();
            }
        }

        function toggleProjectForm(show) {
            const form = document.getElementById('projectForm');
            const formContent = document.getElementById('projectFormContent');
            
            if (show) {
                form.style.display = 'block';
                
                // Reset form
                formContent.reset();
                formContent.querySelector('input[name="action"]').value = 'create_project';
                formContent.querySelector('input[name="id"]').value = '';
                document.querySelector('.form-title').textContent = 'Create New Project';
                
                // Focus on first field
                document.getElementById('project_id').focus();
            } else {
                form.style.display = 'none';
            }
        }

        function editProject(id, projectId, clientName, title, description) {
            const form = document.getElementById('projectForm');
            const formContent = document.getElementById('projectFormContent');
            
            // Set form values
            formContent.querySelector('input[name="action"]').value = 'update_project';
            formContent.querySelector('input[name="id"]').value = id;
            document.getElementById('project_id').value = projectId;
            document.getElementById('client_name').value = clientName;
            document.getElementById('project_title').value = title;
            document.getElementById('project_description').value = description;
            
            // Update form title
            document.querySelector('.form-title').textContent = 'Edit Project';
            
            // Show form
            form.style.display = 'block';
            
            // Scroll to form
            form.scrollIntoView({ behavior: 'smooth' });
        }

        function deleteProject(id, title) {
            if (confirm(`Are you sure you want to delete the project "${title}"? This action cannot be undone.`)) {
                // Create a form to submit the delete request
                const form = document.createElement('form');
                form.method = 'POST';
                form.style.display = 'none';
                
                const actionInput = document.createElement('input');
                actionInput.type = 'hidden';
                actionInput.name = 'action';
                actionInput.value = 'delete_project';
                form.appendChild(actionInput);
                
                const idInput = document.createElement('input');
                idInput.type = 'hidden';
                idInput.name = 'id';
                idInput.value = id;
                form.appendChild(idInput);
                
                document.body.appendChild(form);
                form.submit();
            }
        }

        function manageProject(projectId) {
            window.location.href = 'manage_project.php?id=' + projectId;
        }

        // Helper functions
        function escapeHtml(str) {
            if (!str) return '';
            return str
                .toString()
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function capitalizeFirst(str) {
            return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
        }
    </script>
</body>
</html>