38921-vm/onboarding.php

<?php
require_once __DIR__ . '/header.php';

$customer_id = $_GET['id'] ?? null;

if (!$customer_id) {
    echo "<div class='container' style='text-align: center; margin-top: 5rem;'><h3 style='color: var(--danger);'>Customer Not Found</h3><a href='customers.php' class='btn btn-outline'>Back to Customer List</a></div>";
    require_once __DIR__ . '/footer.php';
    exit;
}

// Fetch customer
$customer = null;
try {
    $stmt = db()->prepare("SELECT * FROM customers WHERE id = ?");
    $stmt->execute([$customer_id]);
    $customer = $stmt->fetch();
} catch (PDOException $e) {}

if (!$customer) {
    echo "<div class='container' style='text-align: center; margin-top: 5rem;'><h3 style='color: var(--danger);'>Customer Not Found</h3><a href='customers.php' class='btn btn-outline'>Back to Customer List</a></div>";
    require_once __DIR__ . '/footer.php';
    exit;
}

// Fetch tasks
$tasks = [];
try {
    $stmt = db()->prepare("SELECT * FROM onboarding_tasks WHERE customer_id = ? ORDER BY id ASC");
    $stmt->execute([$customer_id]);
    $tasks = $stmt->fetchAll();
} catch (PDOException $e) {}

// Calculate progress
$total_tasks = count($tasks);
$completed_tasks = count(array_filter($tasks, function($t) { return $t['is_completed']; }));
$progress = $total_tasks > 0 ? round(($completed_tasks / $total_tasks) * 100) : 0;
?>

<div class="container" style="max-width: 800px;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem;">
        <div>
            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Onboarding Checklist: <?php echo htmlspecialchars($customer['name']); ?></h2>
            <p style="color: var(--text-muted); font-size: 0.875rem;">Manage and track setup tasks for this customer.</p>
        </div>
        <a href="customers.php" class="btn btn-outline">
            <i class="bi bi-arrow-left" style="margin-right: 0.5rem;"></i> Back to List
        </a>
    </div>

    <div class="stats-grid">
        <div class="stat-card" style="grid-column: span 1 / -1;">
            <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem;">
                <div class="stat-label">Overall Onboarding Progress</div>
                <div class="stat-value" style="font-size: 1.25rem;"><?php echo (int)$progress; ?>%</div>
            </div>
            <div style="width: 100%; height: 12px; background: #e2e8f0; border-radius: 6px; overflow: hidden;">
                <div id="progress-bar" style="width: <?php echo (int)$progress; ?>%; height: 100%; background: var(--success); transition: width 0.3s ease;"></div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-title">Tasks & Milestones</div>
        <div id="tasks-list">
            <?php foreach ($tasks as $task): ?>
            <div class="checklist-item <?php echo $task['is_completed'] ? 'completed' : ''; ?>" data-id="<?php echo $task['id']; ?>">
                <input type="checkbox" class="task-checkbox" <?php echo $task['is_completed'] ? 'checked' : ''; ?> data-task-id="<?php echo $task['id']; ?>">
                <span style="flex: 1; font-weight: 500;"><?php echo htmlspecialchars($task['task_name']); ?></span>
                <?php if ($task['is_completed']): ?>
                    <span style="font-size: 0.75rem; color: var(--text-muted);"><?php echo date('M d, Y', strtotime($task['updated_at'])); ?></span>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <div style="display: flex; gap: 1rem; margin-top: 2rem;">
        <?php if ($progress === 100 && $customer['status'] === 'onboarding'): ?>
            <button id="mark-active" class="btn btn-primary" style="flex: 1;" data-id="<?php echo $customer['id']; ?>">
                <i class="bi bi-person-check" style="margin-right: 0.75rem;"></i> Complete Onboarding & Mark Active
            </button>
        <?php endif; ?>
        <button class="btn btn-outline" style="flex: 1;" onclick="window.print()">
            <i class="bi bi-printer" style="margin-right: 0.75rem;"></i> Print Summary
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.task-checkbox');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.querySelector('.stat-value');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const taskId = this.dataset.taskId;
            const completed = this.checked ? 1 : 0;
            const item = this.closest('.checklist-item');

            if (completed) {
                item.classList.add('completed');
            } else {
                item.classList.remove('completed');
            }

            // Update database via AJAX
            fetch('api/update_task.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `id=${taskId}&completed=${completed}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update progress bar
                    const total = checkboxes.length;
                    const completedCount = document.querySelectorAll('.task-checkbox:checked').length;
                    const newProgress = Math.round((completedCount / total) * 100);
                    progressBar.style.width = `${newProgress}%`;
                    progressText.textContent = `${newProgress}%`;

                    // Show toast if 100%
                    if (newProgress === 100) {
                        alert('Onboarding checklist complete! You can now mark this customer as Active.');
                        location.reload(); // To show the "Mark Active" button
                    }
                } else {
                    alert('Error updating task: ' + data.message);
                }
            });
        });
    });

    const markActiveBtn = document.getElementById('mark-active');
    if (markActiveBtn) {
        markActiveBtn.addEventListener('click', function() {
            const customerId = this.dataset.id;
            fetch('api/update_customer_status.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `id=${customerId}&status=active`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Customer is now active!');
                    window.location.href = 'customers.php';
                } else {
                    alert('Error: ' + data.message);
                }
            });
        });
    }
});
</script>

<?php require_once __DIR__ . '/footer.php'; ?>