<?php
session_start();
require_once 'config/db.php';

// No login required — anyone can book a consultation
$isLoggedIn = isset($_SESSION['user_id']);
$user = ['name' => '', 'email' => '', 'phone' => '', 'address' => ''];

// Pre-fill only if user is logged in
if ($isLoggedIn && isset($connection)) {
    $user_id = $_SESSION['user_id'];
    $stmt = $connection->prepare("SELECT id, name, email, phone FROM users WHERE id = ?");
    if ($stmt) {
        $stmt->bind_param("i", $user_id);
        $stmt->execute();
        $user_result = $stmt->get_result();
        $fetched = $user_result->fetch_assoc();
        if ($fetched) $user = $fetched;
        $stmt->close();
    }
}

$preselected_service = isset($_GET['service']) ? trim((string)$_GET['service']) : '';

$consultation_services = [];
if (isset($connection)) {
    $service_stmt = $connection->prepare("SELECT id, title FROM services WHERE is_active = 1 ORDER BY sort_order ASC, id ASC");
    if ($service_stmt) {
        $service_stmt->execute();
        $service_result = $service_stmt->get_result();
        while ($service_row = $service_result->fetch_assoc()) {
            $consultation_services[] = [
                'id' => (int)($service_row['id'] ?? 0),
                'title' => trim((string)($service_row['title'] ?? ''))
            ];
        }
        $service_stmt->close();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schedule Consultation - Faren Interior Design</title>
    <meta name="description" content="Book a free interior design consultation with Faren. Share your vision and let our experts bring it to life.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <style>
        /* ============================================================
           CONSULTATION PAGE — PREMIUM RESPONSIVE STYLES
           ============================================================ */
        :root {
            --con-accent: #c9953c;
            --con-accent-dark: #a87a2e;
            --con-accent-light: #f5e6cc;
            --con-bg: #f7f4ef;
            --con-card: #ffffff;
            --con-text: #2c2418;
            --con-text-muted: #7a6e60;
            --con-border: #e8ddd0;
            --con-success: #2d8a4e;
            --con-error: #c0392b;
            --con-radius: 16px;
            --con-font: 'DM Sans', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body.consultation-body {
            background: var(--con-bg);
            font-family: var(--con-font);
            min-height: 100vh;
            color: var(--con-text);
        }

        /* ── Page wrapper ── */
        .consultation-page {
            padding: 24px 16px 60px;
            min-height: 100vh;
        }

        /* ── Hero Banner ── */
        .consultation-hero {
            max-width: auto;
            
            text-align: center;
            padding: 10px 0px 10px;
            background: linear-gradient(135deg, #1a1510 0%, #2d231a 60%, #3f3022 100%);
            border-radius: var(--con-radius);
            position: relative;
            overflow: hidden;
        }

        .consultation-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(201, 149, 60, 0.2), transparent 60%),
                        radial-gradient(ellipse at 70% 80%, rgba(201, 149, 60, 0.1), transparent 50%);
            pointer-events: none;
        }

        .consultation-hero__icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--con-accent), var(--con-accent-dark));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #fff;
            margin-bottom: 18px;
            box-shadow: 0 8px 24px rgba(201, 149, 60, 0.35);
            position: relative;
        }

        .consultation-hero__title {
            font-size: clamp(1.6rem, 4vw, 2.2rem);
            font-weight: 700;
            color: #fff;
            margin-bottom: 10px;
            line-height: 1.25;
            position: relative;
        }

        .consultation-hero__subtitle {
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            color: rgba(255, 255, 255, 0.7);
            max-width: 520px;
            margin: 0 auto;
            line-height: 1.6;
            position: relative;
        }

        /* ── Form Card ── */
        .consultation-card {
            max-width: auto;
            background: var(--con-card);
            border-radius: var(--con-radius);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            border: 1px solid var(--con-border);
        }

        .consultation-card__body {
            padding: clamp(20px, 4vw, 40px);
        }

        /* ── Back link ── */
        .consultation-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--con-accent-dark);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 24px;
            padding: 6px 14px;
            border-radius: 8px;
            transition: all 0.25s ease;
            background: rgba(201, 149, 60, 0.06);
        }

        .consultation-back:hover {
            background: rgba(201, 149, 60, 0.14);
            color: var(--con-accent);
            transform: translateX(-2px);
        }

        .consultation-back i {
            font-size: 12px;
        }

        /* ── Section titles ── */
        .consultation-section-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: clamp(1rem, 2.5vw, 1.15rem);
            font-weight: 700;
            color: var(--con-text);
            margin: 32px 0 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--con-accent-light);
        }

        .consultation-section-title:first-of-type {
            margin-top: 0;
        }

        .consultation-section-title i {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--con-accent-light);
            color: var(--con-accent-dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        /* ── Form groups ── */
        .con-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(14px, 2.5vw, 20px);
        }

        .con-form-group {
            margin-bottom: clamp(16px, 2.5vw, 22px);
        }

        .con-form-group label {
            display: block;
            margin-bottom: 7px;
            font-weight: 600;
            font-size: 13.5px;
            color: var(--con-text);
            letter-spacing: 0.01em;
        }

        .con-form-group .required-star {
            color: var(--con-error);
            font-weight: 700;
        }

        .con-form-group input[type="text"],
        .con-form-group input[type="email"],
        .con-form-group input[type="tel"],
        .con-form-group input[type="date"],
        .con-form-group select,
        .con-form-group textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1.5px solid var(--con-border);
            border-radius: 10px;
            font-family: var(--con-font);
            font-size: 14.5px;
            color: var(--con-text);
            background: #fff;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

        .con-form-group input:focus,
        .con-form-group select:focus,
        .con-form-group textarea:focus {
            border-color: var(--con-accent);
            box-shadow: 0 0 0 3px rgba(201, 149, 60, 0.12);
        }

        .con-form-group input::placeholder,
        .con-form-group textarea::placeholder {
            color: #b5a998;
        }

        .con-form-group select {
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%237a6e60" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 40px;
            cursor: pointer;
        }

        .con-form-group textarea {
            resize: vertical;
            min-height: 110px;
            line-height: 1.6;
        }

        /* ── Submit button ── */
        .con-submit-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 14px 28px;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            font-family: var(--con-font);
            color: #fff;
            background: linear-gradient(135deg, var(--con-accent), var(--con-accent-dark));
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 24px;
            box-shadow: 0 6px 20px rgba(201, 149, 60, 0.3);
            letter-spacing: 0.02em;
        }

        .con-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(201, 149, 60, 0.4);
        }

        .con-submit-btn:active {
            transform: translateY(0);
        }

        .con-submit-btn i {
            font-size: 16px;
        }

        .con-submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* ── Alert messages ── */
        .con-alert {
            padding: 14px 18px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            animation: conSlideDown 0.35s ease;
        }

        @keyframes conSlideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .con-alert--success {
            background: #e8f5e9;
            color: #1b5e20;
            border: 1px solid #c8e6c9;
        }

        .con-alert--error {
            background: #fde8e8;
            color: #991b1b;
            border: 1px solid #f5c6c6;
        }

        .con-alert i {
            font-size: 16px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        /* ── Success Modal ── */
        .con-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        .con-modal-overlay.is-active {
            display: flex;
        }

        .con-modal {
            width: min(480px, 100%);
            background: #fff;
            border-radius: var(--con-radius);
            padding: clamp(24px, 5vw, 40px);
            text-align: center;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
            animation: conModalIn 0.4s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes conModalIn {
            from { opacity: 0; transform: scale(0.92) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .con-modal__icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2d8a4e, #27ae60);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 30px;
            margin-bottom: 20px;
            box-shadow: 0 8px 24px rgba(45, 138, 78, 0.3);
        }

        .con-modal__title {
            font-size: clamp(1.3rem, 4vw, 1.7rem);
            font-weight: 700;
            color: var(--con-text);
            margin-bottom: 12px;
        }

        .con-modal__text {
            font-size: 15px;
            color: var(--con-text-muted);
            line-height: 1.65;
            margin-bottom: 10px;
        }

        .con-modal__text strong {
            color: var(--con-text);
        }

        .con-modal__btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: 10px;
            border: none;
            font-size: 14.5px;
            font-weight: 600;
            font-family: var(--con-font);
            color: #fff;
            background: linear-gradient(135deg, var(--con-accent), var(--con-accent-dark));
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 14px;
            box-shadow: 0 4px 14px rgba(201, 149, 60, 0.3);
            text-decoration: none;
        }

        .con-modal__btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(201, 149, 60, 0.4);
            color: #fff;
        }

        /* ── Info note ── */
        .con-info-note {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 14px 16px;
            background: rgba(201, 149, 60, 0.06);
            border: 1px solid rgba(201, 149, 60, 0.15);
            border-radius: 10px;
            margin-bottom: 24px;
            font-size: 13.5px;
            color: var(--con-text-muted);
            line-height: 1.55;
        }

        .con-info-note i {
            color: var(--con-accent);
            font-size: 15px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */

        /* Tablets (768px–1024px) */
        @media (max-width: 1024px) {
            .consultation-page {
                padding: 20px 14px 50px;
            }

            .consultation-hero {
                padding: 40px 20px 36px;
                margin-bottom: 24px;
            }

            .consultation-card__body {
                padding: clamp(18px, 3.5vw, 32px);
            }
        }

        /* Small tablets / large mobile (max 768px) */
        @media (max-width: 768px) {
            .con-form-row {
                grid-template-columns: 1fr;
            }

            .consultation-hero {
                padding: 32px 18px 28px;
                border-radius: 14px;
            }

            .consultation-hero__icon {
                width: 48px;
                height: 48px;
                font-size: 20px;
                margin-bottom: 14px;
            }

            .consultation-card {
                border-radius: 14px;
            }

            .consultation-card__body {
                padding: 18px;
            }

            .consultation-section-title {
                margin: 24px 0 16px;
                font-size: 1rem;
            }

            .consultation-section-title i {
                width: 30px;
                height: 30px;
                font-size: 13px;
            }

            .con-submit-btn {
                padding: 13px 24px;
                font-size: 14.5px;
            }
        }

        /* Mobile (max 480px) */
        @media (max-width: 480px) {
            .consultation-page {
                padding: 12px 10px 40px;
            }

            .consultation-hero {
                padding: 26px 14px 22px;
                border-radius: 12px;
                margin-bottom: 16px;
            }

            .consultation-hero__icon {
                width: 44px;
                height: 44px;
                font-size: 18px;
                border-radius: 12px;
                margin-bottom: 12px;
            }

            .consultation-card {
                border-radius: 12px;
            }

            .consultation-card__body {
                padding: 14px;
            }

            .con-form-group label {
                font-size: 13px;
                margin-bottom: 5px;
            }

            .con-form-group input,
            .con-form-group select,
            .con-form-group textarea {
                padding: 10px 12px;
                font-size: 14px;
                border-radius: 8px;
            }

            .con-form-group textarea {
                min-height: 90px;
            }

            .con-submit-btn {
                padding: 12px 20px;
                font-size: 14px;
                border-radius: 10px;
                margin-top: 16px;
            }

            .con-info-note {
                font-size: 12.5px;
                padding: 12px 14px;
            }

            .con-modal {
                padding: 20px 16px;
                border-radius: 14px;
            }

            .con-modal__icon {
                width: 60px;
                height: 60px;
                font-size: 26px;
            }

            .con-modal__title {
                font-size: 1.2rem;
            }

            .con-modal__text {
                font-size: 14px;
            }

            .consultation-back {
                font-size: 13px;
                padding: 5px 12px;
                margin-bottom: 18px;
            }
        }

        /* Very small mobile (max 360px) */
        @media (max-width: 360px) {
            .consultation-page {
                padding: 8px 6px 32px;
            }

            .consultation-hero {
                padding: 22px 12px 18px;
            }

            .consultation-card__body {
                padding: 12px;
            }

            .con-form-group input,
            .con-form-group select,
            .con-form-group textarea {
                padding: 9px 10px;
                font-size: 13.5px;
            }
        }
    </style>
</head>
<body class="consultation-body">
    <?php include 'header-php.php'; ?>

    <div class="consultation-page">
        <!-- Hero Banner -->
        <div class="consultation-hero">
            <div class="consultation-hero__icon">
                <i class="far fa-calendar-check"></i>
            </div>
            <h1 class="consultation-hero__title">Schedule Your Consultation</h1>
            <p class="consultation-hero__subtitle">Share your vision with us and let our expert designers bring your dream space to life.</p>
        </div>

        <!-- Form Card -->
        <div class="consultation-card">
            <div class="consultation-card__body">

                <a href="index.php" class="consultation-back">
                    <i class="fas fa-arrow-left"></i> Back to Home
                </a>

                <!-- Info note for guests -->
                <?php if (!$isLoggedIn): ?>
                <div class="con-info-note">
                    <i class="fas fa-info-circle"></i>
                    <span>No account needed! Simply fill in your details below to request a consultation. Already have an account? <a href="auth-system/login.php" style="color: var(--con-accent-dark); font-weight:600;">Login</a> to auto-fill your info.</span>
                </div>
                <?php endif; ?>

                <form id="consultationForm" novalidate>
                    <div id="messageAlert"></div>

                    <!-- Personal Information -->
                    <div class="consultation-section-title">
                        <i class="far fa-user"></i> Personal Information
                    </div>

                    <div class="con-form-row">
                        <div class="con-form-group">
                            <label for="first_name">First Name <span class="required-star">*</span></label>
                            <input type="text" id="first_name" name="first_name" required placeholder="Enter your first name"
                                value="<?php echo htmlspecialchars(explode(' ', $user['name'] ?? '')[0]); ?>">
                        </div>
                        <div class="con-form-group">
                            <label for="last_name">Last Name <span class="required-star">*</span></label>
                            <input type="text" id="last_name" name="last_name" required placeholder="Enter your last name"
                                value="<?php echo htmlspecialchars(implode(' ', array_slice(explode(' ', $user['name'] ?? ''), 1))); ?>">
                        </div>
                    </div>

                    <div class="con-form-row">
                        <div class="con-form-group">
                            <label for="email">Email Address <span class="required-star">*</span></label>
                            <input type="email" id="email" name="email" required placeholder="you@example.com"
                                value="<?php echo htmlspecialchars($user['email'] ?? ''); ?>">
                        </div>
                        <div class="con-form-group">
                            <label for="phone">Phone Number <span class="required-star">*</span></label>
                            <input type="tel" id="phone" name="phone" required placeholder="+91 98765 43210"
                                value="<?php echo htmlspecialchars($user['phone'] ?? ''); ?>">
                        </div>
                    </div>

                    <div class="con-form-group">
                        <label for="address">Address <span class="required-star">*</span></label>
                        <textarea id="address" name="address" required placeholder="Your full address"><?php echo htmlspecialchars($user['address'] ?? ''); ?></textarea>
                    </div>

                    <!-- Consultation Details -->
                    <div class="consultation-section-title">
                        <i class="far fa-clipboard-list"></i> Consultation Details
                    </div>

                    <div class="con-form-group">
                        <label for="consultation_type">Type of Consultation <span class="required-star">*</span></label>
                        <select id="consultation_type" name="consultation_type" required>
                            <option value="">Select a consultation type</option>
                            <?php foreach ($consultation_services as $service_option): ?>
                                <?php if ($service_option['title'] !== ''): ?>
                                    <option value="<?php echo htmlspecialchars($service_option['title']); ?>" <?php echo strcasecmp($preselected_service, $service_option['title']) === 0 ? 'selected' : ''; ?>>
                                        <?php echo htmlspecialchars($service_option['title']); ?>
                                    </option>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="con-form-row">
                        <div class="con-form-group">
                            <label for="preferred_date">Preferred Date <span class="required-star">*</span></label>
                            <input type="date" id="preferred_date" name="preferred_date" min="<?php echo date('Y-m-d'); ?>" required>
                        </div>
                        <div class="con-form-group">
                            <label for="preferred_time">Preferred Time <span class="required-star">*</span></label>
                            <select id="preferred_time" name="preferred_time" required>
                                <option value="">Select a time</option>
                                <option value="09:00">9:00 AM</option>
                                <option value="10:00">10:00 AM</option>
                                <option value="11:00">11:00 AM</option>
                                <option value="12:00">12:00 PM</option>
                                <option value="13:00">1:00 PM</option>
                                <option value="14:00">2:00 PM</option>
                                <option value="15:00">3:00 PM</option>
                                <option value="16:00">4:00 PM</option>
                                <option value="17:00">5:00 PM</option>
                            </select>
                        </div>
                    </div>

                    <div class="con-form-group">
                        <label for="project_description">Project Description <span class="required-star">*</span></label>
                        <textarea id="project_description" name="project_description" placeholder="Tell us about your project, style preferences, and any specific requirements..." required></textarea>
                    </div>

                    <div class="con-form-row">
                        <div class="con-form-group">
                            <label for="budget_range">Budget Range <span class="required-star">*</span></label>
                            <select id="budget_range" name="budget_range" required>
                                <option value="">Select budget range</option>
                                <option value="10k-50k">&#8377;10,000 - &#8377;50,000</option>
                                <option value="50k-100k">&#8377;50,000 - &#8377;100,000</option>
                                <option value="100k-200k">&#8377;100,000 - &#8377;200,000</option>
                                <option value="200k-500k">&#8377;200,000 - &#8377;500,000</option>
                                <option value="500k+">&#8377;500,000+</option>
                            </select>
                        </div>
                        <div class="con-form-group">
                            <label for="source">How did you hear about us?</label>
                            <select id="source" name="source">
                                <option value="">Select option</option>
                                <option value="social-media">Social Media</option>
                                <option value="google">Google Search</option>
                                <option value="friend">Friend Referral</option>
                                <option value="website">Our Website</option>
                                <option value="advertisement">Advertisement</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="con-submit-btn" id="submitBtn">
                        <i class="far fa-paper-plane"></i>
                        <span>Submit Consultation Request</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div class="con-modal-overlay" id="successModal">
        <div class="con-modal">
            <div class="con-modal__icon">
                <i class="fas fa-check"></i>
            </div>
            <h3 class="con-modal__title">Request Submitted!</h3>
            <p class="con-modal__text" id="modalPrimaryText">
                Your consultation request has been submitted successfully.
            </p>
            <p class="con-modal__text" id="modalSecondaryText">
                Our team will review your request and get back to you within 24 hours.
            </p>
            <a href="index.php" class="con-modal__btn">
                <i class="fas fa-home"></i> Go to Homepage
            </a>
        </div>
    </div>

    <script>
    (function() {
        'use strict';

        // Load consultation types dynamically
        async function loadConsultationTypes() {
            var sel = document.getElementById('consultation_type');
            if (!sel) return;
            var current = sel.value;
            sel.disabled = true;

            try {
                var resp = await fetch('api/get-active-services.php');
                var data = await resp.json();
                if (!data.success || !Array.isArray(data.services)) { sel.disabled = false; return; }

                sel.innerHTML = '<option value="">Select a consultation type</option>';
                data.services.forEach(function(s) {
                    if (!s || !s.title) return;
                    var opt = document.createElement('option');
                    opt.value = s.title;
                    opt.textContent = s.title;
                    sel.appendChild(opt);
                });
                if (current) sel.value = current;
            } catch (e) {
                console.log('Could not load services:', e);
            } finally {
                sel.disabled = false;
            }
        }

        // Form submission
        var form = document.getElementById('consultationForm');
        if (form) {
            form.addEventListener('submit', async function(e) {
                e.preventDefault();

                var btn = document.getElementById('submitBtn');
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Submitting...</span>';

                var formData = new FormData();
                formData.append('first_name', document.getElementById('first_name').value.trim());
                formData.append('last_name', document.getElementById('last_name').value.trim());
                formData.append('email', document.getElementById('email').value.trim());
                formData.append('phone', document.getElementById('phone').value.trim());
                formData.append('address', document.getElementById('address').value.trim());
                formData.append('consultation_type', document.getElementById('consultation_type').value);
                formData.append('preferred_date', document.getElementById('preferred_date').value);
                formData.append('preferred_time', document.getElementById('preferred_time').value);
                formData.append('project_description', document.getElementById('project_description').value.trim());
                formData.append('budget_range', document.getElementById('budget_range').value);
                formData.append('source', document.getElementById('source').value);

                try {
                    var resp = await fetch('api/submit-consultation.php', {
                        method: 'POST',
                        body: formData
                    });
                    var data = await resp.json();
                    var msgDiv = document.getElementById('messageAlert');

                    if (data.success) {
                        var emailAddr = document.getElementById('email').value.trim();
                        var primary = document.getElementById('modalPrimaryText');
                        var secondary = document.getElementById('modalSecondaryText');

                        if (data.email_sent) {
                            primary.innerHTML = 'We\'ve sent a confirmation email to <strong>' + emailAddr + '</strong>.';
                            secondary.textContent = 'Please check your inbox and spam folder for confirmation details.';
                        } else {
                            primary.innerHTML = 'Your request is submitted. We will send a confirmation to <strong>' + emailAddr + '</strong> shortly.';
                            secondary.textContent = 'Our team will contact you within 24 hours.';
                        }

                        document.getElementById('successModal').classList.add('is-active');
                    } else {
                        msgDiv.innerHTML = '<div class="con-alert con-alert--error"><i class="fas fa-exclamation-circle"></i><span>' + data.message + '</span></div>';
                        btn.disabled = false;
                        btn.innerHTML = '<i class="far fa-paper-plane"></i> <span>Submit Consultation Request</span>';
                    }
                } catch (err) {
                    document.getElementById('messageAlert').innerHTML = '<div class="con-alert con-alert--error"><i class="fas fa-exclamation-circle"></i><span>Error submitting form. Please try again.</span></div>';
                    btn.disabled = false;
                    btn.innerHTML = '<i class="far fa-paper-plane"></i> <span>Submit Consultation Request</span>';
                }
            });
        }

        // Init
        document.addEventListener('DOMContentLoaded', loadConsultationTypes);
    })();
    </script>

    <?php include 'footer-section.html'; ?>
</body>
</html>
