<?php
session_start();
include 'db_config.php';

if (!isset($_SESSION['customer_id']) || $_SESSION['role'] !== 'customer') {
    header("Location: customer_login.php");
    exit();
}

$customer_id = $_SESSION['customer_id'];
$success = false;

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $conn->real_escape_string($_POST['title']);
    $category = $conn->real_escape_string($_POST['category']);
    $district = $conn->real_escape_string($_POST['district']);
    $description = $conn->real_escape_string($_POST['description']);
    
    $stmt = $conn->prepare("INSERT INTO customer_jobs (customer_id, title, category, district, description) VALUES (?, ?, ?, ?, ?)");
    $stmt->bind_param("issss", $customer_id, $title, $category, $district, $description);
    if ($stmt->execute()) {
        $success = true;
    }
    $stmt->close();
}

include_once 'categories.php';
include_once 'districts.php';
$categories = get_job_categories();
$districts = get_districts();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post a Request | Work For Sri Lanka</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .glass-panel {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .form-input {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(51, 65, 85, 1);
            color: white;
            transition: all 0.3s ease;
        }
        .form-input:focus {
            background: rgba(15, 23, 42, 0.9);
            border-color: #10b981; /* emerald-500 */
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-200 min-h-screen flex flex-col relative overflow-hidden">
    <!-- Background -->
    <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-emerald-600/10 rounded-full blur-[100px] pointer-events-none z-0"></div>

    <!-- Header -->
    <nav class="bg-slate-900/50 backdrop-blur-md border-b border-slate-800 sticky top-0 z-50">
        <div class="w-full px-4 sm:px-6 lg:px-12">
            <div class="flex justify-between h-20 items-center">
                <div class="flex items-center gap-6">
                    <a href="customer_dashboard.php" class="text-slate-400 hover:text-white flex items-center gap-2 transition">
                        <i data-lucide="arrow-left" class="w-5 h-5"></i> Back to Dashboard
                    </a>
                </div>
                <div class="flex items-center gap-4">
                    <a href="logout.php" class="text-xs px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 transition">Logout</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="flex-1 w-full max-w-3xl mx-auto px-4 py-12 relative z-10">
        <?php if($success): ?>
            <div class="bg-emerald-500/10 border border-emerald-500/20 p-8 rounded-2xl text-center mb-8">
                <div class="w-16 h-16 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4 text-emerald-400">
                    <i data-lucide="check-circle" class="w-8 h-8"></i>
                </div>
                <h2 class="text-2xl font-bold text-white mb-2">Request Posted Successfully!</h2>
                <p class="text-slate-400 mb-6">Workers in the selected district will now be able to see your request and contact you.</p>
                <a href="customer_dashboard.php" class="inline-flex bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-xl font-medium transition">
                    Return to Dashboard
                </a>
            </div>
        <?php else: ?>
            <div class="glass-panel p-8 md:p-10 rounded-3xl shadow-2xl">
                <h1 class="text-3xl font-bold text-white mb-2">Post a Worker Request</h1>
                <p class="text-slate-400 mb-8">Fill out the details below so workers can understand your requirement.</p>

                <form method="post" class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">What do you need done? (Title)</label>
                        <input type="text" name="title" required placeholder="e.g. Need a Plumber to fix a leaking pipe" class="w-full px-4 py-3 rounded-xl form-input outline-none text-base">
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Category</label>
                            <select name="category" required class="w-full px-4 py-3 rounded-xl form-input outline-none text-base appearance-none cursor-pointer">
                                <option value="">Select Category</option>
                                <?php foreach($categories as $cat): ?>
                                    <option value="<?= htmlspecialchars($cat) ?>"><?= htmlspecialchars($cat) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">District / Location</label>
                            <select name="district" required class="w-full px-4 py-3 rounded-xl form-input outline-none text-base appearance-none cursor-pointer">
                                <option value="">Select District</option>
                                <?php foreach(array_keys($districts) as $d): ?>
                                    <option value="<?= htmlspecialchars($d) ?>"><?= htmlspecialchars($d) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Detailed Description</label>
                        <textarea name="description" required rows="5" placeholder="Describe the task, timeline, and any specific requirements..." class="w-full px-4 py-3 rounded-xl form-input outline-none text-base resize-none"></textarea>
                    </div>

                    <div class="pt-4">
                        <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-emerald-600/20 hover:shadow-emerald-600/40 transition transform active:scale-[0.98] flex items-center justify-center gap-2">
                            Post Request <i data-lucide="send" class="w-5 h-5"></i>
                        </button>
                    </div>
                </form>
            </div>
        <?php endif; ?>
    </div>

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