<?php
require_once __DIR__ . '/api/lib.php';

$message = '';
$error = '';

if ($_POST) {
    $email = trim($_POST['email'] ?? '');
    $first_name = trim($_POST['first_name'] ?? '');
    $last_name = trim($_POST['last_name'] ?? '');
    $display_name = trim($_POST['display_name'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $bio = trim($_POST['bio'] ?? '');
    $expertise = $_POST['expertise'] ?? [];
    $hourly_rate = floatval($_POST['hourly_rate'] ?? 0);
    $years_experience = intval($_POST['years_experience'] ?? 0);
    $certifications = trim($_POST['certifications'] ?? '');
    
    if ($email && $first_name && $last_name && $display_name) {
        try {
            $db = hw_db();
            
            // Handle image upload
            $profile_image_url = null;
            if (isset($_FILES['profile_image']) && $_FILES['profile_image']['error'] === UPLOAD_ERR_OK) {
                $upload_dir = __DIR__ . '/uploads/coach-applications/';
                if (!is_dir($upload_dir)) {
                    mkdir($upload_dir, 0755, true);
                }
                
                $file_extension = strtolower(pathinfo($_FILES['profile_image']['name'], PATHINFO_EXTENSION));
                $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];
                
                if (in_array($file_extension, $allowed_extensions)) {
                    $filename = uniqid() . '.' . $file_extension;
                    $filepath = $upload_dir . $filename;
                    
                    if (move_uploaded_file($_FILES['profile_image']['tmp_name'], $filepath)) {
                        $profile_image_url = '/atasteofafricanmarketplace/uploads/coach-applications/' . $filename;
                    }
                }
            }
            
            $stmt = $db->prepare("INSERT INTO coach_applications (email, first_name, last_name, display_name, phone, bio, expertise, hourly_rate, years_experience, certifications, profile_image_url, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'pending')");
            $stmt->execute([$email, $first_name, $last_name, $display_name, $phone, $bio, json_encode($expertise), $hourly_rate, $years_experience, $certifications, $profile_image_url]);
            
            $message = "Application submitted successfully! We'll review your application and get back to you soon.";
        } catch (Exception $e) {
            $error = "Error submitting application: " . $e->getMessage();
        }
    } else {
        $error = "Please fill in all required fields.";
    }
}

$expertise_options = ['Herbal Medicine', 'Nutrition', 'Wellness Coaching', 'Stress Management', 'Holistic Health', 'Aromatherapy', 'Mindfulness', 'Yoga', 'Meditation', 'Life Coaching', 'Health Coaching', 'Alternative Medicine'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Become a Coach | A Taste of Africa Marketplace</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-emerald-50 to-teal-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <!-- Header -->
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold text-emerald-800 mb-4">Join Our Wellness Team</h1>
                <p class="text-lg text-gray-600">Share your expertise and help others on their wellness journey</p>
                <div class="mt-4">
                    <a href="/atasteofafricanmarketplace/index.php" class="text-emerald-600 hover:text-emerald-700">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Website
                    </a>
                </div>
            </div>

            <?php if ($message): ?>
                <div class="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-lg mb-6 text-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <?= htmlspecialchars($message) ?>
                </div>
            <?php endif; ?>

            <?php if ($error): ?>
                <div class="bg-red-100 border border-red-400 text-red-700 px-6 py-4 rounded-lg mb-6">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <?= htmlspecialchars($error) ?>
                </div>
            <?php endif; ?>

            <!-- Application Form -->
            <div class="bg-white rounded-xl shadow-lg p-8">
                <form method="POST" enctype="multipart/form-data" class="space-y-6">
                    <!-- Personal Information -->
                    <div class="border-b border-gray-200 pb-6">
                        <h2 class="text-2xl font-semibold text-gray-800 mb-4">Personal Information</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">First Name *</label>
                                <input type="text" name="first_name" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Last Name *</label>
                                <input type="text" name="last_name" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Display Name *</label>
                                <input type="text" name="display_name" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                       placeholder="How you'd like to be known to clients">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                                <input type="email" name="email" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
                                <input type="tel" name="phone" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Profile Picture</label>
                                <input type="file" name="profile_image" accept="image/*" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                        </div>
                    </div>

                    <!-- Professional Information -->
                    <div class="border-b border-gray-200 pb-6">
                        <h2 class="text-2xl font-semibold text-gray-800 mb-4">Professional Background</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Years of Experience</label>
                                <input type="number" name="years_experience" min="0" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Desired Hourly Rate ($)</label>
                                <input type="number" name="hourly_rate" step="0.01" min="0" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Areas of Expertise (select all that apply)</label>
                            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                                <?php foreach ($expertise_options as $option): ?>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="expertise[]" value="<?= htmlspecialchars($option) ?>" 
                                               class="mr-3 text-emerald-600 focus:ring-emerald-500">
                                        <span class="text-sm"><?= htmlspecialchars($option) ?></span>
                                    </label>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Certifications & Qualifications</label>
                            <textarea name="certifications" rows="4" 
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                      placeholder="List your relevant certifications, degrees, and qualifications..."></textarea>
                        </div>
                    </div>

                    <!-- Bio -->
                    <div>
                        <h2 class="text-2xl font-semibold text-gray-800 mb-4">About You</h2>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Professional Bio</label>
                            <textarea name="bio" rows="6" 
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                      placeholder="Tell us about your background, approach to wellness, and what makes you unique as a coach..."></textarea>
                        </div>
                    </div>

                    <!-- Submit -->
                    <div class="text-center pt-6">
                        <button type="submit" 
                                class="bg-emerald-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-emerald-700 transition duration-200 shadow-lg">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Submit Application
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>