<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}
require_once 'db/config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Candidates - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-200">
        <?php include '_sidebar.php'; ?>

        <!-- Main content -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#fafafa]">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 py-8">
                <h1 class="text-3xl font-bold text-gray-900 mb-8">Candidates</h1>
                <div class="flex space-x-8">
                    <!-- Sidebar -->
                    <aside class="w-1/4 bg-white border-r border-gray-200 p-6 rounded-lg">
                        <div class="space-y-6">
                            <!-- Candidate Photo -->
                            <div class="flex flex-col items-center">
                                <img class="w-24 h-24 rounded-full mb-4" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop" alt="Sarah Kim">
                                <h2 class="text-xl font-semibold text-center">Sarah Kim</h2>
                                <p class="text-gray-500 text-center">Senior Full Stack Engineer</p>
                            </div>

                            <!-- Status Dropdown -->
                            <div>
                                <label class="block text-gray-600 mb-2 text-sm">Status</label>
                                <select class="w-full border border-gray-300 rounded-md p-2 text-sm">
                                    <option value="screening" selected>Screening</option>
                                    <option value="applied">Applied</option>
                                    <option value="interview">Interview</option>
                                    <option value="offer">Offer</option>
                                    <option value="hired">Hired</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>

                            <!-- Tags -->
                            <div>
                                <label class="block text-gray-600 mb-2 text-sm">Tags</label>
                                <div class="flex flex-wrap gap-2">
                                    <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs font-medium">Remote</span>
                                    <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs font-medium">Senior</span>
                                    <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs font-medium">Engineering</span>
                                </div>
                            </div>

                            <!-- Contact Info -->
                            <div class="space-y-3 pt-4 border-t border-gray-200">
                                <div class="flex items-center gap-3 text-gray-600">
                                    <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" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                                    <span class="text-sm">sarah.kim@example.com</span>
                                </div>
                                <div class="flex items-center gap-3 text-gray-600">
                                    <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" class="feather feather-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                                    <span class="text-sm">+1 234 567 890</span>
                                </div>
                                <div class="flex items-center gap-3 text-gray-600">
                                    <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" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                    <span class="text-sm">San Francisco, CA</span>
                                </div>
                                <div class="flex items-center gap-3 text-gray-600">
                                    <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" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                                    <a href="#" class="text-sm text-blue-600 hover:underline">LinkedIn</a>
                                </div>
                                <div class="flex items-center gap-3 text-gray-600">
                                    <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" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                    <a href="#" class="text-sm text-blue-600 hover:underline">GitHub</a>
                                </div>
                            </div>
                        </div>
                    </aside>
                    <!-- Main content area -->
                    <div class="w-3/4">
                        <!-- Header -->
                        <div class="mb-4 md:mb-8">
                            <h1 class="text-gray-900 mb-1 md:mb-2 text-2xl font-bold">Candidate Profile</h1>
                            <p class="text-sm md:text-base text-gray-600"> Detailed view of candidate information and progress </p>
                        </div>

                        <!-- Candidate Overview -->
                        <div class="mb-4 md:mb-8">
                            <button class="flex items-center justify-between w-full mb-3 md:mb-0 md:pointer-events-none">
                                <h2 class="text-gray-900 hidden md:block text-xl font-bold">Candidate Overview</h2>
                                <h2 class="text-gray-900 md:hidden text-xl font-bold">Overview</h2>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 transition-transform md:hidden"><polyline points="6 9 12 15 18 9"></polyline></svg>
                            </button>
                            <div class="bg-white border border-gray-200 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-sm mt-3 md:mt-0">
                                <div class="flex flex-col md:flex-row items-start gap-4 md:gap-6 mb-4 md:mb-6">
                                    <div class="w-16 h-16 md:w-24 md:h-24 bg-gradient-to-br from-[#3A66FF] to-[#5B7FFF] rounded-xl md:rounded-2xl flex items-center justify-center flex-shrink-0">
                                        <span class="text-white text-2xl md:text-4xl">SK</span>
                                    </div>
                                    <div class="flex-grow">
                                        <h3 class="text-xl font-semibold text-gray-900">Sarah Kim</h3>
                                        <p class="text-gray-500">Senior Full Stack Engineer</p>
                                        <div class="flex items-center gap-4 mt-4">
                                            <span class="text-gray-600 flex items-center gap-2">
                                                <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" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                                San Francisco, CA
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-700">
                                    This section is based on an incomplete code snippet. More details would appear here if the full code was available.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
