463 lines
24 KiB
PHP
463 lines
24 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
$profile = null;
|
|
$profile_id = $_GET['id'] ?? null;
|
|
|
|
if ($profile_id) {
|
|
try {
|
|
$pdo = db();
|
|
// Updated to fetch the diagram text as well
|
|
$stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
|
|
$stmt->execute([$profile_id]);
|
|
$profile = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
} catch (PDOException $e) {
|
|
error_log($e->getMessage());
|
|
}
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My GTM Profile</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Lora:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.php">GTM Maximizer</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
|
|
<li class="nav-item"><a class="nav-link active" aria-current="page" href="profile.php">Profile</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tools</a>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li><a class="dropdown-item" href="#">Design</a></li>
|
|
<li><a class="dropdown-item" href="#">Diagram</a></li>
|
|
<li><a class="dropdown-item" href="#">Integrations</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container my-5 pt-5">
|
|
<h1 class="mb-4">My GTM Profile</h1>
|
|
<?php if ($profile): ?>
|
|
<div class="row mb-4">
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">AI-Generated Role Recommendations</h5>
|
|
<p class="card-text">Get AI-powered suggestions for marketing and sales roles to execute your GTM strategy.</p>
|
|
<div id="roles-container" class="mt-3">
|
|
<?php if (!empty($profile['roles_text'])): ?>
|
|
<?php echo $profile['roles_text']; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
<button id="generate-roles-btn" class="btn btn-primary <?php if (!empty($profile['roles_text'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Roles</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">AI-Recommended Tools & Integrations</h5>
|
|
<p class="card-text">Discover top industry solutions and integrations to efficiently execute your GTM strategy.</p>
|
|
<div id="tools-container" class="mt-3">
|
|
<?php if (!empty($profile['tools_text'])): ?>
|
|
<?php echo $profile['tools_text']; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
<button id="generate-tools-btn" class="btn btn-primary <?php if (!empty($profile['tools_text'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Tools</button> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="card-title mb-0">AI-Generated KPI Dashboard</h5>
|
|
<div>
|
|
<button id="edit-kpi-btn" class="btn btn-secondary btn-sm" style="display: none;">Edit KPIs</button>
|
|
<button id="generate-kpi-btn" class="btn btn-primary <?php if (!empty($profile['kpi_data'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate KPI Dashboard</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-text">Set and refine KPIs, and track them with an auto-generated dashboard.</p>
|
|
<div id="kpi-container" class="mt-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="card-title mb-0">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
|
|
<button id="generate-diagram-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate GTM Process Flow Diagram</button>
|
|
</div>
|
|
|
|
<!-- Diagram and Editor Section -->
|
|
<div id="diagram-container" class="mb-4"></div>
|
|
<div id="diagram-editor-container" class="mb-4" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Diagram Editor</h5>
|
|
<div id="save-status" class="mb-2"></div>
|
|
<textarea id="diagram-editor" class="form-control" rows="10"></textarea>
|
|
<button id="save-diagram-btn" class="btn btn-success mt-2">Save Diagram</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
|
|
<hr>
|
|
<h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
|
|
<p class="card-text"><strong>Ideal Customer Profile (ICP):</strong> <?php echo htmlspecialchars($profile['icp']); ?></p>
|
|
<p class="card-text"><strong>Market Size:</strong> <?php echo htmlspecialchars($profile['market_size']); ?></p>
|
|
<p class="card-text"><strong>Existing Sales Motions:</strong> <?php echo htmlspecialchars($profile['sales_motions']); ?></p>
|
|
<hr>
|
|
<h6 class="card-subtitle mb-2 text-muted">Team & Roles</h6>
|
|
<p class="card-text"><strong>Organization Size:</strong> <?php echo htmlspecialchars($profile['org_size']); ?></p>
|
|
<p class="card-text"><strong>Marketing and Sales Roles:</strong> <?php echo htmlspecialchars($profile['roles']); ?></p>
|
|
<hr>
|
|
<h6 class="card-subtitle mb-2 text-muted">Goals</h6>
|
|
<p class="card-text"><strong>Growth Goals:</strong> <?php echo htmlspecialchars($profile['goals']); ?></p>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="alert alert-warning" role="alert">
|
|
No GTM profile found. Please <a href="list_profiles.php">select one</a> or <a href="start.php">create a new one</a>.
|
|
</div>
|
|
<?php endif; ?>
|
|
</main>
|
|
|
|
<footer class="text-center py-4">
|
|
<p>© <?php echo date("Y"); ?> GTM Maximizer. All Rights Reserved.</p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
<script>mermaid.initialize({ startOnLoad: false });</script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const profileId = "<?php echo $profile_id; ?>";
|
|
const generateBtn = document.getElementById('generate-diagram-btn');
|
|
const diagramContainer = document.getElementById('diagram-container');
|
|
const editorContainer = document.getElementById('diagram-editor-container');
|
|
const editor = document.getElementById('diagram-editor');
|
|
const saveBtn = document.getElementById('save-diagram-btn');
|
|
const saveStatus = document.getElementById('save-status');
|
|
|
|
const generateRolesBtn = document.getElementById('generate-roles-btn');
|
|
const rolesContainer = document.getElementById('roles-container');
|
|
const generateToolsBtn = document.getElementById('generate-tools-btn');
|
|
const toolsContainer = document.getElementById('tools-container');
|
|
const generateKpiBtn = document.getElementById('generate-kpi-btn');
|
|
const kpiContainer = document.getElementById('kpi-container');
|
|
|
|
if (generateRolesBtn) {
|
|
generateRolesBtn.addEventListener('click', function () {
|
|
rolesContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating roles...</p></div>';
|
|
generateRolesBtn.disabled = true;
|
|
|
|
fetch(`generate_roles.php?id=${profileId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
rolesContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
} else {
|
|
rolesContainer.innerHTML = data.recommendations;
|
|
generateRolesBtn.classList.add('d-none');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error generating roles:', error);
|
|
rolesContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating roles.</div>';
|
|
})
|
|
.finally(() => {
|
|
generateRolesBtn.disabled = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
if (generateToolsBtn) {
|
|
generateToolsBtn.addEventListener('click', function () {
|
|
toolsContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating tools...</p></div>';
|
|
generateToolsBtn.disabled = true;
|
|
|
|
fetch(`generate_tools.php?id=${profileId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
toolsContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
} else {
|
|
toolsContainer.innerHTML = data.recommendations;
|
|
generateToolsBtn.classList.add('d-none');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error generating tools:', error);
|
|
toolsContainerinnerHTML = '<div class="alert alert-danger">An error occurred while generating tools.</div>';
|
|
})
|
|
.finally(() => {
|
|
generateToolsBtn.disabled = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
// Function to render the diagram
|
|
const renderDiagram = (mermaidCode) => {
|
|
if (!mermaidCode) {
|
|
diagramContainer.innerHTML = '';
|
|
return;
|
|
}
|
|
try {
|
|
diagramContainer.innerHTML = `
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">GTM Process Flow Diagram</h5>
|
|
<div class="mermaid text-center">${mermaidCode}</div>
|
|
</div>
|
|
</div>`;
|
|
mermaid.run();
|
|
editor.value = mermaidCode;
|
|
editorContainer.style.display = 'block';
|
|
} catch (e) {
|
|
diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
|
|
console.error("Mermaid render error:", e);
|
|
}
|
|
};
|
|
|
|
const renderKpiDashboard = (kpiData) => {
|
|
if (!kpiData) return;
|
|
|
|
let kpiHtml = '<form id="kpi-form"><div class="row">';
|
|
kpiData.kpis.forEach((kpi, index) => {
|
|
kpiHtml += `
|
|
<div class="col-md-4">
|
|
<div class="card mb-3">
|
|
<div class="card-body">
|
|
<h6 class="card-title">${kpi.name}</h6>
|
|
<div class="mb-2">
|
|
<label class="form-label">Current</label>
|
|
<input type="text" class="form-control" name="kpi_${index}_current" value="${kpi.current}" readonly>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Target</label>
|
|
<input type="text" class="form-control" name="kpi_${index}_target" value="${kpi.target}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
kpiHtml += '</div></form>';
|
|
|
|
kpiHtml += '<div class="row"><div class="col-12"><canvas id="kpi-chart"></canvas></div></div>';
|
|
kpiContainer.innerHTML = kpiHtml;
|
|
|
|
const ctx = document.getElementById('kpi-chart').getContext('2d');
|
|
if(window.kpiChart instanceof Chart) {
|
|
window.kpiChart.destroy();
|
|
}
|
|
window.kpiChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: kpiData.chartData,
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('edit-kpi-btn').style.display = 'inline-block';
|
|
};
|
|
|
|
const existingKpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;
|
|
if (existingKpiData) {
|
|
renderKpiDashboard(existingKpiData);
|
|
}
|
|
|
|
if (generateKpiBtn) {
|
|
generateKpiBtn.addEventListener('click', function() {
|
|
kpiContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating KPI Dashboard...</p></div>';
|
|
this.disabled = true;
|
|
|
|
fetch(`generate_kpis.php?id=${profileId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
kpiContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
} else {
|
|
renderKpiDashboard(data.kpi_data);
|
|
this.classList.add('d-none');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error generating KPIs:', error);
|
|
kpiContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating the KPI dashboard.</div>';
|
|
})
|
|
.finally(() => {
|
|
if(generateKpiBtn) generateKpiBtn.disabled = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
const editKpiBtn = document.getElementById('edit-kpi-btn');
|
|
if (editKpiBtn) {
|
|
editKpiBtn.addEventListener('click', function() {
|
|
const kpiForm = document.getElementById('kpi-form');
|
|
const inputs = kpiForm.getElementsByTagName('input');
|
|
const isEditing = this.textContent === 'Save KPIs';
|
|
|
|
if (isEditing) {
|
|
// Save logic
|
|
const formData = new FormData(kpiForm);
|
|
const kpis = [];
|
|
const kpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;
|
|
|
|
kpiData.kpis.forEach((kpi, index) => {
|
|
kpis.push({
|
|
name: kpi.name,
|
|
current: formData.get(`kpi_${index}_current`),
|
|
target: formData.get(`kpi_${index}_target`)
|
|
});
|
|
});
|
|
|
|
const updatedKpiData = { kpis: kpis };
|
|
|
|
fetch('save_kpis.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `id=${profileId}&kpi_data=${JSON.stringify(updatedKpiData)}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Re-render with new data
|
|
renderKpiDashboard(data.updated_kpi_data);
|
|
// Toggle back to edit mode
|
|
this.textContent = 'Edit KPIs';
|
|
for (let input of inputs) {
|
|
input.setAttribute('readonly', true);
|
|
}
|
|
} else {
|
|
alert('Error saving KPIs: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error saving KPIs:', error);
|
|
alert('An unexpected error occurred while saving KPIs.');
|
|
});
|
|
|
|
} else {
|
|
// Edit logic
|
|
this.textContent = 'Save KPIs';
|
|
for (let input of inputs) {
|
|
input.removeAttribute('readonly');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
// Load existing diagram on page load
|
|
const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
|
|
if (existingDiagram) {
|
|
renderDiagram(existingDiagram);
|
|
}
|
|
|
|
// Generate button click handler
|
|
if (generateBtn) {
|
|
generateBtn.addEventListener('click', function () {
|
|
diagramContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating diagram...</p></div>';
|
|
generateBtn.disabled = true;
|
|
editorContainer.style.display = 'none';
|
|
|
|
fetch(`generate_diagram.php?id=${profileId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
diagramContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
} else {
|
|
renderDiagram(data.diagram);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error generating diagram:', error);
|
|
diagramContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating the diagram.</div>';
|
|
})
|
|
.finally(() => {
|
|
generateBtn.disabled = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
// Live update diagram from editor
|
|
let debounceTimer;
|
|
editor.addEventListener('input', () => {
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(() => {
|
|
renderDiagram(editor.value);
|
|
}, 500); // 500ms debounce
|
|
});
|
|
|
|
// Save button click handler
|
|
if (saveBtn) {
|
|
saveBtn.addEventListener('click', function () {
|
|
const diagramText = editor.value;
|
|
saveStatus.innerHTML = '<span class="text-info">Saving...</span>';
|
|
saveBtn.disabled = true;
|
|
|
|
fetch('save_diagram.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
profile_id: profileId,
|
|
diagram_text: diagramText
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
saveStatus.innerHTML = '<span class="text-success">Saved successfully!</span>';
|
|
} else {
|
|
saveStatus.innerHTML = `<span class="text-danger">Error: ${data.error || 'Could not save.'}</span>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error saving diagram:', error);
|
|
saveStatus.innerHTML = '<span class="text-danger">An unexpected error occurred.</span>';
|
|
})
|
|
.finally(() => {
|
|
saveBtn.disabled = false;
|
|
setTimeout(() => { saveStatus.innerHTML = ''; }, 3000);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|