<?php
session_start();
include("connect.php");

// Select the database
mysqli_select_db($connect, 'vss_travel') or die('Database selection failed: ' . mysqli_error($connect));

// Process form submission
$success_message = '';
$error_message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // Get form data
    $submission_type = mysqli_real_escape_string($connect, $_POST['submission_type'] ?? 'vehicle');
    $owner_name = mysqli_real_escape_string($connect, $_POST['owner_name'] ?? '');
    $owner_email = mysqli_real_escape_string($connect, $_POST['owner_email'] ?? '');
    $owner_phone = mysqli_real_escape_string($connect, $_POST['owner_phone'] ?? '');
    $owner_location = mysqli_real_escape_string($connect, $_POST['owner_location'] ?? '');
    
    // Vehicle fields
    $vehicle_year = isset($_POST['vehicle_year']) ? intval($_POST['vehicle_year']) : NULL;
    $vehicle_make = mysqli_real_escape_string($connect, $_POST['vehicle_make'] ?? '');
    $vehicle_model = mysqli_real_real_escape_string($connect, $_POST['vehicle_model'] ?? '');
    $vehicle_category = mysqli_real_escape_string($connect, $_POST['vehicle_category'] ?? '');
    $vehicle_features = mysqli_real_escape_string($connect, $_POST['vehicle_features'] ?? '');
    
    // Hotel fields
    $property_name = mysqli_real_escape_string($connect, $_POST['property_name'] ?? '');
    $property_type = mysqli_real_escape_string($connect, $_POST['property_type'] ?? '');
    $total_rooms = isset($_POST['total_rooms']) ? intval($_POST['total_rooms']) : NULL;
    $hotel_amenities = mysqli_real_escape_string($connect, $_POST['hotel_amenities'] ?? '');
    
    // Aviation fields
    $aircraft_type = mysqli_real_escape_string($connect, $_POST['aircraft_type'] ?? '');
    $aircraft_model = mysqli_real_escape_string($connect, $_POST['aircraft_model'] ?? '');
    $home_base_airport = mysqli_real_escape_string($connect, $_POST['home_base_airport'] ?? '');
    $passenger_capacity = isset($_POST['passenger_capacity']) ? intval($_POST['passenger_capacity']) : NULL;
    
    // Handle file uploads
    $upload_dir = 'uploads/properties/';
    if (!file_exists($upload_dir)) {
        mkdir($upload_dir, 0777, true);
    }
    
    $uploaded_files = [];
    if (isset($_FILES['property_photos'])) {
        $files = $_FILES['property_photos'];
        $file_count = count($files['name']);
        
        for ($i = 0; $i < $file_count; $i++) {
            if ($files['error'][$i] == 0) {
                $file_name = time() . '_' . $files['name'][$i];
                $file_path = $upload_dir . $file_name;
                
                // Check file type
                $allowed_types = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                $file_type = $files['type'][$i];
                
                if (in_array($file_type, $allowed_types)) {
                    if (move_uploaded_file($files['tmp_name'][$i], $file_path)) {
                        $uploaded_files[] = $file_path;
                    }
                }
            }
        }
    }
    
    $photo_paths = json_encode($uploaded_files);
    
    // Insert into database
    $query = "INSERT INTO property_submissions (
        submission_type, owner_name, owner_email, owner_phone, owner_location,
        vehicle_year, vehicle_make, vehicle_model, vehicle_category, vehicle_features,
        property_name, property_type, total_rooms, hotel_amenities,
        aircraft_type, aircraft_model, home_base_airport, passenger_capacity,
        photo_paths, submission_status
    ) VALUES (
        '$submission_type', '$owner_name', '$owner_email', '$owner_phone', '$owner_location',
        " . ($vehicle_year ? $vehicle_year : "NULL") . ", " . ($vehicle_make ? "'$vehicle_make'" : "NULL") . ", 
        " . ($vehicle_model ? "'$vehicle_model'" : "NULL") . ", " . ($vehicle_category ? "'$vehicle_category'" : "NULL") . ", 
        " . ($vehicle_features ? "'$vehicle_features'" : "NULL") . ",
        " . ($property_name ? "'$property_name'" : "NULL") . ", " . ($property_type ? "'$property_type'" : "NULL") . ", 
        " . ($total_rooms ? $total_rooms : "NULL") . ", " . ($hotel_amenities ? "'$hotel_amenities'" : "NULL") . ",
        " . ($aircraft_type ? "'$aircraft_type'" : "NULL") . ", " . ($aircraft_model ? "'$aircraft_model'" : "NULL") . ", 
        " . ($home_base_airport ? "'$home_base_airport'" : "NULL") . ", " . ($passenger_capacity ? $passenger_capacity : "NULL") . ",
        '$photo_paths', 'pending'
    )";
    
    if (mysqli_query($connect, $query)) {
        $success_message = "Thank you! Your property has been submitted for review. We'll contact you shortly.";
    } else {
        $error_message = "Error submitting form: " . mysqli_error($connect);
    }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Your Property | VSS Global Logistics</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Link to your existing CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css" />
    <link
        href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bitcount+Prop+Double:wght@100..900&family=Chela+One&family=Days+One&family=Fondamento:ital@0;1&family=Fugaz+One&family=Odibee+Sans&family=Pacifico&family=Playball&family=Racing+Sans+One&display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Montserrat:wght@400;600&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&display=swap" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        gold: '#D4AF37',
                        'gold-light': '#F2D06B',
                        'gold-dark': '#A68826',
                        'rich-black': '#050505',
                        'dark-gray': '#121212',
                        'primary-dark': '#000000',
                        'secondary-dark': '#1E1E1E',
                        'gold-bright': '#FFC72C',
                        'gold-shimmer': '#FFD700',
                        'text-faint': '#bdae70',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['"Playfair Display"', 'serif'],
                    }
                }
            }
        }
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Playfair Display', serif;
            background: #000000;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* bar */
        .vsslogo {
            width: 85px;
            height: 85px;
            border-radius: 100%;
            position: relative;
            top: 10px;
            right: 15px;
            border-bottom: 3px solid gold;
        }

        /* ========== SITE TITLE - ONE ROW, NO BREAKING ========== */
        .site-title {
            font-family: 'Cinzel', serif !important;
            font-weight: 700 !important;
            letter-spacing: 1.5px !important;
            background: linear-gradient(45deg, #D4AF37, #FFD700, #F8DE7E, #FFC72C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
            position: relative;
            white-space: nowrap !important;
            line-height: 1.2 !important;
            display: inline-block;
            top: 5px;
            padding-bottom: 10px !important;
            overflow: visible !important;
            text-overflow: clip !important;
            max-width: none !important;
            min-width: max-content !important;
            flex-shrink: 0 !important;
        }

        .site-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #D4AF37, transparent);
            opacity: 0.7;
            display: block;
            z-index: 1;
        }

        /* ========== RESPONSIVE NAVIGATION ========== */
        nav {
            border-bottom: 4px solid #FFD700;
            box-shadow: 0 4px 15px rgba(255, 217, 0, 0.877);
            border-radius: 0px 0px 80px 80px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            background-color: black;
        }

        nav .flex.items-center {
            flex-wrap: nowrap !important;
            min-width: 0;
            overflow: visible !important;
            width: 100%;
            padding: 0 1rem;
            justify-content: space-between;
        }

        .logo-title-container {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            min-width: 0;
            overflow: visible;
        }

        .desktop-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .desktop-menu li a {
            color: white !important;
            text-decoration: none;
            font-family: serif;
            font-size: 1rem;
            transition: color 0.3s;
            padding: 0.5rem 0;
            display: block;
        }

        .desktop-menu li a:hover {
            color: #FFD700 !important;
        }

        #menu-toggler {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 25px;
            height: 20px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 10000;
        }

        #menu-toggler .bar {
            width: 100%;
            height: 3px;
            background-color: white;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        #sidebar {
            position: fixed;
            top: 0;
            left: -100%;
            width: 250px;
            height: 100vh;
            background-color: #000;
            box-shadow: 3px 0 15px rgba(255, 215, 0, 0.3);
            transition: left 0.8s ease-out, opacity 0.6s ease-out, transform 0.6s ease-out;
            z-index: 9998;
            padding-top: 80px;
            overflow-y: auto;
            opacity: 0;
            transform: translateX(-20px);
        }

        #sidebar.active {
            left: 0;
            opacity: 1;
            transform: translateX(0);
        }

        #sidebar ul {
            list-style: none;
            padding: 1rem;
            margin: 0;
        }

        #sidebar ul li {
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
            padding-bottom: 0.5rem;
        }

        #sidebar ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            display: block;
            padding: 0.5rem 0;
            transition: color 0.3s;
        }

        #sidebar ul li a:hover {
            color: #FFD700;
        }

        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9997;
            display: none;
        }

        .menu-overlay.active {
            display: block;
        }

        /* Custom Scrollbar for Luxury Feel */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #000;
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #D4AF37;
        }

        /* Gold Gradient Text */
        .text-gradient-gold {
            background: linear-gradient(to right, #D4AF37, #F2D06B, #D4AF37);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% auto;
            animation: shine 4s linear infinite;
        }

        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }

        /* Form Input Styles */
        .vss-input {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(212, 175, 55, 0.2);
            transition: all 0.3s ease;
        }

        .vss-input:focus {
            outline: none;
            border-color: #D4AF37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
            background-color: rgba(255, 255, 255, 0.08);
        }

        /* Active Tab State */
        .tab-active {
            background-color: #D4AF37;
            color: black;
            border-color: #D4AF37;
        }

        .tab-inactive {
            background-color: transparent;
            color: #D4AF37;
            border: 1px solid #D4AF37;
        }

        footer {
            width: 100%;
            height: auto;
            margin-top: 100px;
        }

        .marquee-container {
            width: 100%;
            overflow: hidden;
            background-color: black;
            box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
            border-bottom: 4px solid rgba(255, 215, 0, 0.1);
            padding: 10px 0;
            border-radius: 5px;
        }

        .marquee-text {
            white-space: nowrap;
            display: inline-block;
            animation: marquee 80s linear infinite;
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            color: white;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
            padding: 0 20px;
        }

        .marquee-text .fi {
            display: inline-block;
            height: 1.2em;
            width: 1.3em;
            margin: 0 10px;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
            border-radius: 10px;
        }

        .fi-es.vertical {
            transform: rotate(90deg);
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* UPDATED .fit class - Centered with gap */
        .fit {
            height: auto;
            padding: 40px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to right,
                    #0D0D0D 0%,
                    #332D1C 15%,
                    #A87B2E 50%,
                    #332D1C 85%,
                    #0D0D0D 100%);
            box-shadow: 0 0 15px rgba(168, 123, 46, 0.4);
        }

        .footer-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            font-family: 'Varela Round', sans-serif;
            gap: 80px;
            padding: 0 20px 20px;
            flex-wrap: wrap;
            width: auto;
            margin: 0 auto;
            max-width: 1200px;
        }

        .footer-item {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            flex: 0 0 auto;
            min-width: 0;
            padding: 0;
            text-align: left;
            gap: 15px;
        }

        .item-icon {
            width: 25px;
            height: auto;
            margin: 0;
            margin-top: 20px;
            flex-shrink: 0;
        }

        .item-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            width: auto;
        }

        .item-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
            text-align: center;
        }

        .item-text {
            font-size: 0.95rem;
            font-weight: 300;
            line-height: 1.5;
            color: #E0E0E0;
            text-align: left;
        }

        .pull {
            font-size: 0.95rem !important;
        }

        .page-container {
            width: 100%;
            padding: 40px 0;
            background-color: #0d0d0d;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .content-wrapper {
            width: 90%;
            max-width: 1200px;
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: flex-start;
        }

        .column {
            padding: 15px;
        }

        .about-us-column {
            flex: 2;
            padding-right: 30px;
            border-right: 1px solid rgba(255, 215, 0, 0.1);
        }

        .info-columns {
            flex: 1;
            color: white;
            font-family: 'Days One', sans-serif;
            font-size: 13px;
        }

        .about-title {
            font-family: sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #FFD700;
            margin-bottom: 25px;
            letter-spacing: 1.5px;
        }

        .about-text {
            font-family: 'Days One', sans-serif;
            font-size: 14px;
            line-height: 1.6;
        }

        .about-text .line {
            display: block;
            margin-bottom: 10px;
        }

        .sub-heading {
            font-family: sans-serif;
            font-size: 1.4rem;
            color: #FFD700;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(255, 215, 0, 0.1);
            padding-bottom: 5px;
        }

        .info-columns ul {
            list-style: none !important;
            padding: 0;
        }

        .info-columns ul li {
            margin-bottom: 5px;
            padding-left: 15px;
            position: relative;
        }

        .info-columns ul li:before {
            content: "•";
            color: #FFD700;
            position: absolute;
            left: 0;
        }

        .foot4 {
            width: 100%;
            background-color: black;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            box-sizing: border-box;
            clear: both;
        }

        .foot5 {
            color: white;
            font-family: serif;
            font-size: 14px;
            text-align: left;
        }

        .privacy {
            color: white;
            font-family: serif;
            font-size: 12px;
            text-align: right;
        }

        .cookie {
            display: inline-block;
        }

        /* Success/Error Message Styles */
        .alert {
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .alert-success {
            background-color: rgba(16, 185, 129, 0.2);
            border: 1px solid #10b981;
            color: #10b981;
        }

        .alert-error {
            background-color: rgba(239, 68, 68, 0.2);
            border: 1px solid #ef4444;
            color: #ef4444;
        }

        /* ========== MEDIA QUERIES FOR RESPONSIVE NAVIGATION ========== */
        /* Desktop size - full display */
        .site-title {
            font-size: 1.8rem !important;
            white-space: nowrap !important;
            overflow: visible !important;
            text-overflow: clip !important;
            max-width: none !important;
            min-width: max-content !important;
        }

        /* Show hamburger menu on mobile */
        @media screen and (max-width: 1024px) {
            .desktop-menu {
                display: none !important;
            }

            #menu-toggler {
                display: flex;
            }
        }

        /* Show desktop menu on larger screens */
        @media screen and (min-width: 1025px) {
            .desktop-menu {
                display: flex !important;
            }

            #menu-toggler {
                display: none !important;
            }

            #sidebar {
                display: none !important;
            }
        }

        /* For tablets and smaller */
        @media screen and (max-width: 992px) {
            .site-title {
                font-size: 1.5rem !important;
            }

            .vsslogo {
                width: 70px !important;
                height: 70px !important;
            }

            .footer-container {
                gap: 60px;
                justify-content: center;
            }

            .footer-item {
                flex: 0 0 auto;
            }

            .foot4 {
                flex-direction: column;
                height: auto;
                padding: 15px 5%;
                gap: 10px;
                text-align: center;
            }

            .foot5 {
                text-align: center;
                font-size: 13px;
                order: 1;
                width: 100%;
            }

            .privacy {
                text-align: center;
                font-size: 11px;
                order: 2;
                width: 100%;
                margin-top: 5px;
            }
        }

        /* For mobile */
        @media screen and (max-width: 768px) {
            .site-title {
                font-size: 1.3rem !important;
                letter-spacing: 1px !important;
            }

            .vsslogo {
                width: 60px !important;
                height: 60px !important;
            }

            main.container.mx-auto.px-4.md\:px-8.pb-24.max-w-6xl {
                padding-top: 100px;
            }

            .footer-container {
                flex-direction: column;
                gap: 30px;
                align-items: center;
            }

            .footer-item {
                width: 100%;
                max-width: 300px;
                justify-content: flex-start;
            }

            footer {
                height: auto;
                padding-bottom: 30px;
            }

            .page-container {
                padding: 30px 25px;
            }

            .content-wrapper {
                flex-direction: column;
                gap: 35px;
            }

            .about-us-column,
            .info-columns {
                width: 100%;
                padding: 0;
                border-right: none;
            }

            .about-title {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            .about-text {
                font-size: 15px;
            }

            .footer-container {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 25px;
            }

            .footer-item {
                padding: 10px 0;
                text-align: center;
                justify-content: center;
                width: 100%;
            }

            .item-icon {
                margin-right: 10px;
                margin-top: 5px;
            }

            .item-content {
                align-items: center;
            }

            .pull {
                font-size: 14px !important;
            }

            .foot4 {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: 100%;
                height: auto;
                padding: 15px 0;
            }

            .foot5 {
                text-align: center;
                font-size: 12px;
                order: 1;
                width: 100%;
                margin: 0;
                padding: 0;
            }

            .privacy {
                text-align: center;
                font-size: 11px;
                order: 2;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        }

        /* For smaller mobile */
        @media screen and (max-width: 576px) {
            .site-title {
                font-size: 1.1rem !important;
                letter-spacing: 0.8px !important;
            }

            .vsslogo {
                width: 60px !important;
                height: 60px !important;
            }

            nav .flex.items-center {
                padding: 0 0.5rem;
            }

            .footer-container {
                gap: 25px;
            }

            .footer-item {
                padding: 10px 0;
            }

            .item-title {
                font-size: 16px;
            }

            .item-text {
                font-size: 11px;
            }

            .pull {
                font-size: 12px !important;
            }

            .foot5 {
                font-size: 11px;
            }

            .privacy {
                font-size: 10px;
            }
        }

        /* For very small mobile */
        @media screen and (max-width: 480px) {
            .site-title {
                font-size: 1rem !important;
                letter-spacing: 0.5px !important;
            }

            .vsslogo {
                width: 60px !important;
                height: 60px !important;
            }

            #sidebar {
                width: 200px;
            }

            .footer-container {
                gap: 20px;
                padding: 0 15px 20px;
            }

            .footer-item {
                max-width: 250px;
            }

            .item-icon {
                width: 20px;
            }

            footer {
                height: auto;
                padding-bottom: 30px;
            }

            .page-container {
                padding: 30px 25px;
            }

            .content-wrapper {
                flex-direction: column;
                gap: 35px;
            }

            .about-us-column,
            .info-columns {
                width: 100%;
                padding: 0;
                border-right: none;
            }

            .about-title {
                font-size: 1.8rem;
                margin-bottom: 20px;
            }

            .about-text {
                font-size: 14px;
            }

            .sub-heading {
                font-size: 1.2rem;
            }

            .footer-item .item-content {
                display: flex;
                flex-direction: column;
            }

            .footer-item .item-title {
                font-size: 14px;
                font-weight: bold;
            }

            .footer-item .item-text {
                font-size: 12px;
            }

            .foot4 {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: 100%;
                height: auto;
                padding: 10px 0;
            }

            .foot5 {
                text-align: center;
                font-size: 10px;
                order: 1;
                width: 100%;
                padding: 0 10px;
                box-sizing: border-box;
            }

            .privacy {
                text-align: center;
                font-size: 9px;
                order: 2;
                width: 100%;
                padding: 0 10px;
                box-sizing: border-box;
            }

            .pull {
                font-size: 11px !important;
            }
        }

        @media screen and (max-width: 375px) {
            .site-title {
                font-size: 0.85rem !important;
                letter-spacing: 0.2px !important;
            }

            .vsslogo {
                width: 60px !important;
                height: 60px !important;
            }

            .foot5 {
                font-size: 9px;
            }

            .privacy {
                font-size: 8px;
            }

            .pull {
                font-size: 10px !important;
            }
        }

        @media screen and (min-width: 320px) and (max-width: 360px) {
            .site-title {
                font-size: 0.8rem !important;
                letter-spacing: 0.1px !important;
            }

            .vsslogo {
                width: 60px !important;
                height: 60px !important;
            }

            .page-container {
                padding: 20px 10px;
            }

            .about-title {
                font-size: 1.3rem;
            }

            .about-text {
                font-size: 12px;
            }

            .sub-heading {
                font-size: 1rem;
            }

            .footer-item {
                padding: 5px 0;
            }

            .item-title {
                font-size: 11px;
            }

            .item-text {
                font-size: 9px;
            }

            .item-icon {
                display: none;
            }

            .pull {
                font-size: 9px !important;
            }

            .foot5 {
                font-size: 8px;
                padding: 0 5px;
            }

            .privacy {
                font-size: 7px;
            }
        }

        @media screen and (max-width: 319px) {
            .site-title {
                font-size: 0.75rem !important;
            }

            .vsslogo {
                width: 30px !important;
                height: 30px !important;
            }

            .foot5 {
                font-size: 8px;
            }

            .privacy {
                font-size: 7px;
            }
        }
    </style>
</head>

<body class="bg-rich-black text-white font-sans overflow-x-hidden">

    <!-- Navigation -->
    <nav class="fixed top-0 left-0 w-full bg-black text-white z-50 shadow-lg">
        <div class="flex items-center justify-between px-4 py-1">
            <!-- Logo + Title -->
            <div class="logo-title-container">
                <img src="images/vss logo.jpg" alt="VSS Logo" class="vsslogo">
                <span class="site-title font-bold text-2xl sm:text-1xl lg:text-3xl leading-loose mb-1">VSS GLOBAL
                    LOGISTICS</span>
            </div>

            <!-- Hamburger Button for Mobile -->
            <button id="menu-toggler" class="flex flex-col justify-center items-center w-10 h-10">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>

            <!-- DESKTOP MENU -->
            <ul class="desktop-menu">
                <li><a href="index.html" class="hover:text-yellow-400">Home</a></li>
                <li><a href="car fleet.html" class="hover:text-yellow-400">Car Fleet</a></li>
                <li><a href="flight.html" class="hover:text-yellow-400">Flight Booking</a></li>
                <li><a href="property.php" class="hover:text-yellow-400">List Your Properties</a></li>
                <li><a href="featured_properties.php" class="hover:text-yellow-400">Featured Properties</a></li>
                <li><a href="membership.html" class="hover:text-yellow-400">Membership</a></li>
            </ul>
        </div>
    </nav>

    <!-- MOBILE SIDEBAR -->
    <div id="sidebar">
        <ul class="space-y-6 text-center text-lg">
            <li><a href="index.html" class="block hover:text-yellow-400">Home</a></li>
            <li><a href="car fleet.html" class="block hover:text-yellow-400">Car Fleet</a></li>
            <li><a href="flight.html" class="block hover:text-yellow-400">Flight Booking</a></li>
            <li><a href="property.php" class="block hover:text-yellow-400">List Your Properties</a></li>
            <li><a href="featured_properties.php" class="block hover:text-yellow-400">Featured Properties</a></li>
            <li><a href="membership.html" class="block hover:text-yellow-400">Membership</a></li>
        </ul>
    </div>

    <!-- Menu Overlay -->
    <div class="menu-overlay" id="menu-overlay"></div>

    <header class="relative w-full py-20 md:py-28 px-4 text-center overflow-hidden" style="margin-top: 80px;">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-full bg-gold/5 blur-[120px] rounded-full -z-10">
        </div>

        <h1 class="text-4xl md:text-6xl font-serif font-bold mt-5">
            Partner with <span class="text-gradient-gold">Excellence</span>
        </h1>
        <p class="max-w-2xl mx-auto text-gray-400 text-lg font-light mt-4">
            List your luxury vehicles, hotels, or aircraft with VSS Global Logistics.
            We connect your premium assets with our exclusive clientele for high-value reservations and rentals.
        </p>
    </header>

    <main class="container mx-auto px-4 md:px-8 pb-24 max-w-6xl">

        <!-- Success/Error Messages -->
        <?php if ($success_message): ?>
            <div class="alert alert-success mb-8">
                <?php echo $success_message; ?>
            </div>
        <?php endif; ?>

        <?php if ($error_message): ?>
            <div class="alert alert-error mb-8">
                <?php echo $error_message; ?>
            </div>
        <?php endif; ?>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">

            <button type="button" onclick="switchForm('car')" id="btn-car"
                class="group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-active">
                <div
                    class="absolute inset-0 bg-gradient-to-br from-gold/0 to-gold/5 opacity-0 group-hover:opacity-100 transition duration-500 rounded-xl">
                </div>
                <div class="relative z-10 flex flex-col items-center">
                    <svg class="w-12 h-12 mb-4 group-hover:text-white transition-colors" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
                        <path d="M5 15l7-7 7 7" />
                    </svg>
                    <h3 class="text-xl font-serif font-bold">Luxury Vehicle</h3>
                    <p class="text-xs text-gray-500 mt-2 uppercase tracking-wide">Rent Out Your Car</p>
                </div>
            </button>

            <button type="button" onclick="switchForm('hotel')" id="btn-hotel"
                class="group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-inactive">
                <div
                    class="absolute inset-0 bg-gradient-to-br from-gold/0 to-gold/5 opacity-0 group-hover:opacity-100 transition duration-500 rounded-xl">
                </div>
                <div class="relative z-10 flex flex-col items-center">
                    <svg class="w-12 h-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    <h3 class="text-xl font-serif font-bold">Hotel & Suites</h3>
                    <p class="text-xs text-gray-500 mt-2 uppercase tracking-wide">List Rooms for Reservation</p>
                </div>
            </button>

            <button type="button" onclick="switchForm('aviation')" id="btn-aviation"
                class="group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-inactive">
                <div
                    class="absolute inset-0 bg-gradient-to-br from-gold/0 to-gold/5 opacity-0 group-hover:opacity-100 transition duration-500 rounded-xl">
                </div>
                <div class="relative z-10 flex flex-col items-center">
                    <svg class="w-12 h-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    <h3 class="text-xl font-serif font-bold">Aviation Charter</h3>
                    <p class="text-xs text-gray-500 mt-2 uppercase tracking-wide">List Jets or Choppers</p>
                </div>
            </button>
        </div>

        <div
            class="bg-dark-gray/50 backdrop-blur-md border border-white/10 rounded-2xl p-6 md:p-12 shadow-2xl relative">
            <div
                class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-gold to-transparent opacity-50">
            </div>

            <form action="property.php" method="POST" enctype="multipart/form-data" class="space-y-8">
                
                <!-- Hidden field for submission type -->
                <input type="hidden" name="submission_type" id="submission_type" value="car">

                <div class="border-b border-white/10 pb-8">
                    <h4 class="text-gold font-serif text-2xl mb-6">Owner Information</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Full Name / Company Name *</label>
                            <input type="text" name="owner_name" required
                                placeholder="e.g. John Doe or Doe Rentals Ltd"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Email Address *</label>
                            <input type="email" name="owner_email" required
                                placeholder="contact@example.com"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Phone Number *</label>
                            <input type="tel" name="owner_phone" required
                                placeholder="+234 800 000 0000"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Location (City, State) *</label>
                            <input type="text" name="owner_location" required
                                placeholder="e.g. Lagos, Nigeria"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                    </div>
                </div>

                <div id="form-section">
                    <h4 class="text-gold font-serif text-2xl mb-6 flex items-center">
                        <span id="section-title">Vehicle Details</span>
                        <div class="h-px bg-white/20 flex-grow ml-4"></div>
                    </h4>

                    <!-- Vehicle Fields -->
                    <div id="fields-car" class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in">
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-400 mb-2">Year *</label>
                            <input type="number" name="vehicle_year" required
                                placeholder="2023"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-400 mb-2">Make *</label>
                            <input type="text" name="vehicle_make" required
                                placeholder="e.g. Mercedes-Benz"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-400 mb-2">Model *</label>
                            <input type="text" name="vehicle_model" required
                                placeholder="e.g. G-Wagon G63"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div class="md:col-span-1">
                            <label class="block text-sm text-gray-400 mb-2">Category *</label>
                            <select name="vehicle_category" required class="w-full p-4 rounded-lg vss-input text-white bg-black">
                                <option value="">Select Category</option>
                                <option value="SUV">SUV</option>
                                <option value="Sedan">Sedan</option>
                                <option value="Sports Car">Sports Car</option>
                                <option value="Limousine">Limousine</option>
                                <option value="Armored Vehicle">Armored Vehicle</option>
                                <option value="Exotic">Exotic</option>
                                <option value="Luxury">Luxury</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm text-gray-400 mb-2">Special Features (Optional)</label>
                            <input type="text" name="vehicle_features"
                                placeholder="e.g. Bulletproof, Chauffeur included, Red Interior"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                    </div>

                    <!-- Hotel Fields -->
                    <div id="fields-hotel" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 animate-fade-in">
                        <div class="md:col-span-2">
                            <label class="block text-sm text-gray-400 mb-2">Hotel / Property Name *</label>
                            <input type="text" name="property_name"
                                placeholder="e.g. The VSS Royal Suites"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Property Type *</label>
                            <select name="property_type" class="w-full p-4 rounded-lg vss-input text-white bg-black">
                                <option value="">Select Type</option>
                                <option value="5-Star Hotel">5-Star Hotel</option>
                                <option value="Boutique Hotel">Boutique Hotel</option>
                                <option value="Luxury Apartment">Luxury Apartment</option>
                                <option value="Villa/Mansion">Villa / Mansion</option>
                                <option value="Resort">Resort</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Total Rooms Available *</label>
                            <input type="number" name="total_rooms"
                                placeholder="e.g. 15"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm text-gray-400 mb-2">Key Amenities *</label>
                            <textarea name="hotel_amenities" rows="2"
                                placeholder="e.g. Pool, Spa, 24/7 Concierge, Helipad access..."
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600"></textarea>
                        </div>
                    </div>

                    <!-- Aviation Fields -->
                    <div id="fields-aviation" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 animate-fade-in">
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Aircraft Type *</label>
                            <select name="aircraft_type" class="w-full p-4 rounded-lg vss-input text-white bg-black">
                                <option value="">Select Type</option>
                                <option value="Private Jet (Light)">Private Jet (Light)</option>
                                <option value="Private Jet (Heavy/Long Range)">Private Jet (Heavy/Long Range)</option>
                                <option value="Helicopter">Helicopter</option>
                                <option value="Turboprop">Turboprop</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Manufacturer & Model *</label>
                            <input type="text" name="aircraft_model"
                                placeholder="e.g. Gulfstream G650"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Home Base Airport *</label>
                            <input type="text" name="home_base_airport"
                                placeholder="e.g. MMIA Lagos"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">Passenger Capacity *</label>
                            <input type="number" name="passenger_capacity"
                                placeholder="e.g. 12"
                                class="w-full p-4 rounded-lg vss-input text-white placeholder-gray-600">
                        </div>
                    </div>
                </div>

                <div class="pt-6">
                    <label class="block text-sm text-gray-400 mb-2">Upload Asset Photos (Max 5 images)</label>
                    <div class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-gold transition cursor-pointer bg-black/20"
                         onclick="document.getElementById('file-upload').click()">
                        <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <p class="mt-2 text-sm text-gray-400">Drag and drop images here, or <span
                                class="text-gold underline">browse</span></p>
                        <p class="text-xs text-gray-600 mt-1">PNG, JPG up to 10MB</p>
                    </div>
                    <input type="file" id="file-upload" name="property_photos[]" multiple accept="image/*" class="hidden">
                    <div id="file-list" class="mt-4 text-sm text-gray-400"></div>
                </div>

                <div class="pt-6">
                    <button type="submit"
                        class="w-full py-5 bg-gold hover:bg-gold-light text-black font-bold text-lg uppercase tracking-widest rounded-lg shadow-lg shadow-gold/20 transform hover:-translate-y-1 transition-all duration-300">
                        Submit for Review
                    </button>
                    <p class="text-center text-xs text-gray-500 mt-4">By submitting, you agree to VSS Global Logistics
                        Partner Terms & Conditions.</p>
                </div>

            </form>
        </div>

    </main>

    <footer>
        <div class="foot2 animate-on-scroll">
            <div class="page-container">
                <div class="content-wrapper">
                    <div class="column about-us-column">
                        <h2 class="about-title">About Us</h2>
                        <p class="about-text">
                            <span class="line">We are the architects of unforgettable journeys, specializing in
                                bespoke luxury transport and travel.</span>
                            <span class="line">From securing the finest exotic vehicles to orchestrating flawless
                                private excursions, our expertise is unmatched.</span>
                            <span class="line">We handle every details from premium flight bookings to curated
                                global itineraries—with exceptional discretion.</span>
                            <span class="line">Our mission is simple: to transform your travel aspirations into
                                magnificent, seamless reality.</span>
                            <span class="line">Experience the world planned by experts who define luxury,
                                personalized service, and effortless execution.</span>
                        </p>
                    </div>

                    <div class="column info-columns">
                        <h3 class="sub-heading">Our Services</h3>
                        <ul>
                            <li>Luxury Transport & Rentals</li>
                            <li>Security & Protection</li>
                            <li>Concierge & lifestyle Management</li>
                            <li>Aviation & Marine Charter</li>
                        </ul>
                    </div>

                    <div class="column info-columns">
                        <h3 class="sub-heading">Contact Us</h3>
                        <p>Email: vssbookings26@gmail.com</p>
                        <p>Phone: +2348030900264</p>
                    </div>
                </div>
            </div>

            <!-- UPDATED FIT SECTION - Centered with gap -->
            <div class="container-fluid fit animate-on-scroll">
                <div class="footer-container">
                    <div class="footer-item">
                        <div class="item-content">
                            <span class="item-title">Our Location</span>
                            <span class="item-text">No 9 Boardman, Ziks Avenue Enugu</span>
                        </div>
                    </div>

                    <div class="footer-item">
                        <div class="item-content">
                            <span class="item-title">Call Us</span>
                            <span class="item-text pull">+2348030900264, +2348038615169</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="marquee-container animate-on-scroll">
                <span class="marquee-text">
                    Sponsored by VSS Global Logistics. Our services are rendered to:
                    <span class="fi fi-ng"></span><span class="fi fi-us"></span><span class="fi fi-gb"></span><span
                        class="fi fi-ca"></span><span class="fi fi-ae"></span><span class="fi fi-fr"></span><span
                        class="fi fi-de"></span><span class="fi fi-br"></span><span class="fi fi-cn"></span><span
                        class="fi fi-ru"></span><span class="fi fi-au"></span><span class="fi fi-za"></span><span
                        class="fi fi-jp"></span><span class="fi fi-in"></span><span class="fi fi-sa"></span><span
                        class="fi fi-tr"></span><span class="fi fi-eg"></span><span class="fi fi-mx"></span><span
                        class="fi fi-ar"></span><span class="fi fi-kr"></span><span class="fi fi-gh"></span><span
                        class="fi fi-es"></span><span class="fi fi-cl"></span><span class="fi fi-nz"></span><span
                        class="fi fi-se"></span><span class="fi fi-it"></span><span class="fi fi-my"></span><span
                        class="fi fi-ke"></span><span class="fi fi-pk"></span><span class="fi fi-pe"></span><span
                        class="fi fi-th"></span><span class="fi fi-vn"></span><span class="fi fi-dk"></span><span
                        class="fi fi-gr"></span><span class="fi fi-pt"></span><span class="fi fi-nl"></span><span
                        class="fi fi-co"></span><span class="fi fi-ph"></span><span class="fi fi-id"></span><span
                        class="fi fi-pl"></span><span class="fi fi-be"></span><span class="fi fi-ch"></span><span
                        class="fi fi-cz"></span><span class="fi fi-fi"></span><span class="fi fi-ie"></span><span
                        class="fi fi-il"></span><span class="fi fi-kw"></span><span class="fi fi-lu"></span><span
                        class="fi fi-no"></span><span class="fi fi-qa"></span><span class="fi fi-sg"></span><span
                        class="fi fi-tw"></span><span class="fi fi-ua"></span><span class="fi fi-hu"></span><span
                        class="fi fi-bg"></span><span class="fi fi-hr"></span><span class="fi fi-lv"></span><span
                        class="fi fi-lt"></span><span class="fi fi-ro"></span><span class="fi fi-rs"></span><span
                        class="fi fi-sk"></span><span class="fi fi-si"></span><span class="fi fi-cy"></span><span
                        class="fi fi-ec"></span><span class="fi fi-pa"></span><span class="fi fi-uy"></span><span
                        class="fi fi-ve"></span><span class="fi fi-kz"></span><span class="fi fi-my"></span><span
                        class="fi fi-et"></span><span class="fi fi-tz"></span><span class="fi fi-ug"></span><span
                        class="fi fi-sn"></span><span class="fi fi-ci"></span><span class="fi fi-co"></span><span
                        class="fi fi-ph"></span><span class="fi fi-id"></span><span class="fi fi-pl"></span>
                </span>
            </div>

            <div class="foot4">
                <div class="foot5">© Vss Logistics 2023, All Rights Reserved</div>
                <div class="privacy">
                    <div class="cookie">Terms Of Use &nbsp; &nbsp;| &nbsp; Privacy Policy &nbsp; &nbsp;| &nbsp;
                        &nbsp;Cookie Policy</div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Navigation functionality
        document.addEventListener('DOMContentLoaded', function () {
            const menuToggler = document.getElementById('menu-toggler');
            const sidebar = document.getElementById('sidebar');
            const menuOverlay = document.getElementById('menu-overlay');

            function toggleMobileMenu() {
                sidebar.classList.toggle('active');
                menuOverlay.classList.toggle('active');
                document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
            }

            if (menuToggler && sidebar && menuOverlay) {
                menuToggler.addEventListener('click', function (e) {
                    e.stopPropagation();
                    toggleMobileMenu();
                });

                menuOverlay.addEventListener('click', function () {
                    toggleMobileMenu();
                });

                sidebar.querySelectorAll('a').forEach(link => {
                    link.addEventListener('click', function () {
                        toggleMobileMenu();
                    });
                });

                document.addEventListener('click', function (event) {
                    if (!sidebar.contains(event.target) &&
                        !menuToggler.contains(event.target) &&
                        sidebar.classList.contains('active')) {
                        toggleMobileMenu();
                    }
                });
            }
        });

        // Property form functionality
        function switchForm(type) {
            // Update hidden input
            document.getElementById('submission_type').value = type;
            
            // Reset all Buttons to Inactive
            document.getElementById('btn-car').className = "group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-inactive";
            document.getElementById('btn-hotel').className = "group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-inactive";
            document.getElementById('btn-aviation').className = "group relative p-8 rounded-xl border border-white/10 hover:border-gold/50 bg-dark-gray transition-all duration-300 transform hover:-translate-y-2 tab-inactive";

            // Hide all Field Sections
            document.getElementById('fields-car').classList.add('hidden');
            document.getElementById('fields-hotel').classList.add('hidden');
            document.getElementById('fields-aviation').classList.add('hidden');

            // Remove required attributes from all fields
            document.querySelectorAll('#fields-car input, #fields-car select, #fields-hotel input, #fields-hotel select, #fields-aviation input, #fields-aviation select').forEach(field => {
                field.required = false;
            });

            // Activate Selected Button and Show Section
            if (type === 'car') {
                document.getElementById('btn-car').classList.remove('tab-inactive');
                document.getElementById('btn-car').classList.add('tab-active');
                document.getElementById('fields-car').classList.remove('hidden');
                document.getElementById('section-title').innerText = "Vehicle Details";
                
                // Add required attributes to vehicle fields
                document.querySelectorAll('#fields-car input[required], #fields-car select[required]').forEach(field => {
                    field.required = true;
                });
            }
            else if (type === 'hotel') {
                document.getElementById('btn-hotel').classList.remove('tab-inactive');
                document.getElementById('btn-hotel').classList.add('tab-active');
                document.getElementById('fields-hotel').classList.remove('hidden');
                document.getElementById('section-title').innerText = "Property Details";
                
                // Add required attributes to hotel fields
                document.querySelectorAll('#fields-hotel input[required], #fields-hotel select[required]').forEach(field => {
                    field.required = true;
                });
            }
            else if (type === 'aviation') {
                document.getElementById('btn-aviation').classList.remove('tab-inactive');
                document.getElementById('btn-aviation').classList.add('tab-active');
                document.getElementById('fields-aviation').classList.remove('hidden');
                document.getElementById('section-title').innerText = "Aircraft Details";
                
                // Add required attributes to aviation fields
                document.querySelectorAll('#fields-aviation input[required], #fields-aviation select[required]').forEach(field => {
                    field.required = true;
                });
            }
        }

        // File upload preview
        document.getElementById('file-upload').addEventListener('change', function(e) {
            const fileList = document.getElementById('file-list');
            const files = e.target.files;
            
            if (files.length > 5) {
                alert('You can only upload up to 5 images');
                this.value = '';
                fileList.innerHTML = '';
                return;
            }
            
            let html = '<p class="text-gold">Selected files:</p><ul class="list-disc list-inside">';
            for (let i = 0; i < files.length; i++) {
                html += `<li>${files[i].name} (${(files[i].size/1024).toFixed(2)} KB)</li>`;
            }
            html += '</ul>';
            fileList.innerHTML = html;
        });

        // Set default active tab
        window.onload = function() {
            switchForm('car');
        }
    </script>
</body>
</html>