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

// --- Data based on the new text provided ---

$employee = [
    'name' => 'Emily Davis',
    'initials' => 'ED',
    'title' => 'Product Designer',
    'team' => 'Design Team',
    'start_date' => 'Dec 15, 2024',
    'manager' => 'Sarah Johnson',
    'day' => 3,
    'total_days' => 30,
    'avatar_url' => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop'
];

$tasks = [
    'in_progress' => [
        ['title' => 'I-9 Form', 'description' => 'Verify employment eligibility documentation', 'due' => 'Dec 10, 2024', 'assignee' => 'Emily Davis'],
        ['title' => 'Set Up Email Account', 'description' => 'Configure company email and Slack access', 'due' => 'Dec 11, 2024', 'assignee' => 'IT Team'],
        ['title' => 'Equipment Setup', 'description' => 'Receive and configure laptop and peripherals', 'due' => 'Dec 12, 2024', 'assignee' => 'IT Team'],
    ],
    'upcoming' => [
        ['title' => 'Benefits Enrollment', 'description' => 'Review and select health insurance options', 'due' => 'Dec 20, 2024'],
        ['title' => 'Department Orientation', 'description' => 'Meet with design team and review processes', 'due' => 'Dec 22, 2024'],
        ['title' => 'Security Training', 'description' => 'Complete online security awareness course', 'due' => 'Dec 27, 2024'],
    ],
    'completed' => [
        ['title' => 'Sign Offer Letter', 'description' => 'Completed by Emily Davis on Dec 5, 2024'],
        ['title' => 'Background Check', 'description' => 'Completed by HR Team on Dec 6, 2024'],
        ['title' => 'Upload Profile Photo', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
        ['title' => 'Emergency Contact Info', 'description' => 'Completed by Emily Davis on Dec 7, 2024'],
    ]
];

// Numbers from the user's text for summary
$completed_count_from_text = 12;
$total_tasks_from_text = 20;
$progressPercent = ($completed_count_from_text / $total_tasks_from_text) * 100;

function getStatusChip($status) {
    switch ($status) {
        case 'In Progress':
            return '<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">In Progress</span>';
        case 'Upcoming':
            return '<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Upcoming</span>';
        case 'Completed':
            return '<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Completed</span>';
        default:
            return '<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full"></span>';
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onboarding Tasks - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-200">
        <?php include '_sidebar.php'; ?>

        <main class="flex-1 flex flex-col overflow-hidden">
            <div class="flex-1 overflow-y-auto bg-[#fafafa] p-8">
                
                <div class="max-w-7xl mx-auto">
                    <div class="mb-8">
                        <h1 class="text-3xl font-bold text-gray-900">Onboarding Tasks</h1>
                        <p class="text-gray-600 mt-1">Manage and track employee onboarding progress</p>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        
                        <!-- Main Content: Task Lists -->
                        <div class="lg:col-span-2 space-y-8">

                            <!-- In Progress -->
                            <div>
                                <h2 class="text-xl font-semibold mb-4">In Progress <span class="text-base font-normal text-gray-500">(<?= count($tasks['in_progress']) ?>)</span></h2>
                                <div class="space-y-4">
                                    <?php foreach ($tasks['in_progress'] as $task): ?>
                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
                                        <div>
                                            <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
                                            <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
                                            <p class="text-sm text-gray-500 mt-2">Due: <?= htmlspecialchars($task['due']) ?></p>
                                        </div>
                                        <div class="text-right">
                                            <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Complete</span>
                                            <p class="text-sm font-medium text-gray-600 mt-2"><?= htmlspecialchars($task['assignee']) ?></p>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- Upcoming -->
                            <div>
                                <h2 class="text-xl font-semibold mb-4">Upcoming <span class="text-base font-normal text-gray-500">(<?= count($tasks['upcoming']) ?>)</span></h2>
                                <div class="space-y-4">
                                     <?php foreach ($tasks['upcoming'] as $task): ?>
                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex items-start justify-between">
                                        <div>
                                            <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
                                            <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
                                        </div>
                                        <div class="text-right">
                                             <span class="text-sm text-gray-500">Scheduled: <?= htmlspecialchars($task['due']) ?></span>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- Completed -->
                             <div>
                                <h2 class="text-xl font-semibold mb-4">Completed <span class="text-base font-normal text-gray-500">(<?= count($tasks['completed']) ?>)</span></h2>
                                <div class="space-y-4">
                                     <?php foreach ($tasks['completed'] as $task): ?>
                                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                        <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($task['title']) ?></h3>
                                        <p class="text-sm text-gray-500 mt-1"><?= htmlspecialchars($task['description']) ?></p>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Sidebar: Employee Overview -->
                        <div class="space-y-6">
                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                                <h3 class="text-lg font-semibold mb-4">Employee Overview</h3>
                                <div class="flex items-center gap-4">
                                    <div class="w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center text-2xl font-bold">
                                        <?= htmlspecialchars($employee['initials']) ?>
                                    </div>
                                    <div>
                                        <p class="font-bold text-lg"><?= htmlspecialchars($employee['name']) ?></p>
                                        <p class="text-gray-600"><?= htmlspecialchars($employee['title']) ?> &bull; <?= htmlspecialchars($employee['team']) ?></p>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-gray-200 text-sm space-y-2">
                                    <p><span class="font-semibold">Start Date:</span> <?= htmlspecialchars($employee['start_date']) ?></p>
                                    <p><span class="font-semibold">Manager:</span> <?= htmlspecialchars($employee['manager']) ?></p>
                                    <p class="text-gray-500 mt-1">Day <?= htmlspecialchars($employee['day']) ?> of <?= htmlspecialchars($employee['total_days']) ?></p>
                                </div>
                            </div>

                            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                                <h3 class="text-lg font-semibold mb-4">Overall Progress</h3>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700"><?= $completed_count_from_text ?> of <?= $total_tasks_from_text ?> tasks</span>
                                    <span class="text-sm font-medium text-gray-700"><?= number_format($progressPercent, 0) ?>%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: <?= $progressPercent ?>%"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </main>
    </div>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>
