<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create Listing - ClosetLoop</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="css/fashion-theme.css">
    <!-- Firebase SDKs -->
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-storage-compat.js"></script>
    <!-- Initialize Firebase -->
    <script src="js/firebase-config.js"></script>
    <style>
      * {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      
      *::-webkit-scrollbar {
        display: none;
        width: 0;
        background: transparent;
      }
      
      /* Hide scrollbars globally for both PC and mobile */
      html, body {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
      }
      
      /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
      html::-webkit-scrollbar,
      body::-webkit-scrollbar {
        display: none;
      }
      
      /* Hide scrollbars for all elements */
      * {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
      }
      
      *::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
      }
      
      body {
        font-family: 'Poppins', sans-serif;
        background-color: #f8fafc;
      }

      .form-input:focus {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
      }

      /* Fix input and select styling for better visibility */
      .form-input,
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="password"],
      textarea,
      select {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
      }

      .form-input::placeholder,
      input::placeholder,
      textarea::placeholder {
        color: #9ca3af !important;
      }

      /* Style select dropdowns */
      select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
        appearance: none;
      }

      /* Style select options */
      select option {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        padding: 0.5rem;
      }

      /* Focus states */
      .form-input:focus,
      input:focus,
      textarea:focus,
      select:focus {
        border-color: #7c3aed !important;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
        outline: none !important;
      }

      /* Disabled state styling */
      .form-input:disabled,
      input:disabled,
      textarea:disabled,
      select:disabled {
        background-color: #f3f4f6 !important;
        color: #9ca3af !important;
        cursor: not-allowed !important;
        opacity: 0.7;
      }

      /* Ensure proper contrast for all form elements */
      .form-input,
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="password"],
      textarea,
      select {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
        font-weight: 400 !important;
      }

      /* Make sure the first option in selects is visible */
      select option:first-child {
        color: #6b7280 !important;
        font-style: italic;
      }

      /* Override any Tailwind classes that might interfere */
      .w-full.px-4.py-3.border.border-gray-300.rounded-xl.focus\\:outline-none.transition {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
      }

      /* Ensure proper styling for all form elements with form-input class */
      .form-input.w-full.px-4.py-3.border.border-gray-300.rounded-xl.focus\\:outline-none.transition {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
      }

      /* Specific styling for select elements */
      select.form-input {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
      }

      /* Ensure text inputs are visible */
      input[type="text"].form-input,
      input[type="number"].form-input,
      textarea.form-input {
        color: #1f2937 !important;
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
      }

      .loading {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }

      .loading.active {
        display: flex;
      }

      .image-preview {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 0.75rem;
      position: relative;
    }
    
    .category-card {
      transition: all 0.3s ease;
      border-radius: 1rem;
      overflow: hidden;
      position: relative;
      height: 180px;
      cursor: pointer;
    }
    
    .category-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .category-card.selected {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.2), 0 10px 10px -5px rgba(124, 58, 237, 0.1);
      border: 3px solid #7c3aed;
    }
    
    .category-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    }
    
    .option-card {
      transition: all 0.3s ease;
      border: 2px solid #e5e7eb;
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
      cursor: pointer;
    }
    
    .option-card:hover, .option-card.selected {
      border-color: #7c3aed;
      background-color: #f5f3ff;
    }
    
    .option-card.selected {
      box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.1), 0 4px 6px -2px rgba(124, 58, 237, 0.05);
    }
    
    .step-indicator {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .step {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    
    .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e5e7eb;
      color: #6b7280;
      font-weight: 600;
      margin-right: 0.5rem;
    }
    
    .step.active .step-number {
      background-color: #7c3aed;
      color: white;
    }
    
    .step.completed .step-number {
      background-color: #10b981;
      color: white;
    }
    
    .step-label {
      color: #6b7280;
      font-weight: 500;
    }
    
    .step.active .step-label {
      color: #7c3aed;
      font-weight: 600;
    }
    
    .step.completed .step-label {
      color: #10b981;
      font-weight: 600;
    }
    
    .step-divider {
      width: 40px;
      height: 2px;
      background-color: #e5e7eb;
      margin: 0 10px;
      flex-shrink: 0;
    }
    
    .step-divider.completed {
      background-color: #10b981;
    }
    
    .back-button {
      background-color: #f3f4f6;
      color: #4b5563;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.2s;
      text-decoration: none;
    }
    
    .back-button:hover {
      background-color: #e5e7eb;
    }
    
    .remove-image {
      position: absolute;
      top: -8px;
      right: -8px;
      background: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      cursor: pointer;
      z-index: 10;
    }
    
    .image-container {
      position: relative;
      display: inline-block;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }

    .upload-area {
      border: 2px dashed #d1d5db;
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .upload-area:hover {
      border-color: #7c3aed;
      background-color: #f5f3ff;
    }
    
    .upload-area.dragover {
      border-color: #7c3aed;
      background-color: #f5f3ff;
    }

    /* Mobile-specific improvements */
    @media (max-width: 768px) {
      .step-indicator {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
      }
      
      .step {
        min-width: auto;
        margin-right: 0.25rem;
      }
      
      .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
      }
      
      .step-label {
        font-size: 0.75rem;
        white-space: nowrap;
      }
      
      .step-divider {
        width: 20px;
        margin: 0 5px;
      }
      
      .category-card {
        height: 140px;
      }
      
      .category-overlay {
        padding: 1rem;
      }
      
      .category-overlay h3 {
        font-size: 1rem;
      }
      
      .category-overlay p {
        font-size: 0.75rem;
      }
      
      .option-card {
        padding: 1.5rem;
      }
      
      .option-card .w-20 {
        width: 3rem;
        height: 3rem;
      }
      
      .option-card .text-3xl {
        font-size: 1.5rem;
      }
      
      .upload-area {
        padding: 1.5rem;
      }
      
      .image-preview {
        width: 120px;
        height: 120px;
      }
      
      .form-input {
        font-size: 16px; /* Prevents zoom on iOS */
      }
      
      .max-w-4xl {
        max-width: 100%;
        padding: 0 1rem;
      }
      
      .bg-white.rounded-2xl {
        border-radius: 1rem;
        padding: 1.5rem;
      }
      
      .text-3xl {
        font-size: 1.875rem;
      }
      
      .text-2xl {
        font-size: 1.5rem;
      }
      
      .text-xl {
        font-size: 1.25rem;
      }
      
      .grid.grid-cols-1.sm\\:grid-cols-2.md\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      
      .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      
      .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      
      .flex.justify-between.items-center {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
      }
      
      .flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      
      .space-y-6 > * + * {
        margin-top: 1.5rem;
      }
      
      .space-y-4 > * + * {
        margin-top: 1rem;
      }
      
      .mb-8 {
        margin-bottom: 2rem;
      }
      
      .mb-6 {
        margin-bottom: 1.5rem;
      }
      
      .mb-4 {
        margin-bottom: 1rem;
      }
      
      .pt-24 {
        padding-top: 6rem;
      }
      
      .pb-12 {
        padding-bottom: 3rem;
      }
      
      .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .step-indicator {
        justify-content: center;
        flex-wrap: wrap;
      }
      
      .step {
        margin-bottom: 0.5rem;
      }
      
      .category-card {
        height: 120px;
      }
      
      .grid.grid-cols-1.sm\\:grid-cols-2.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
      }
      
      .upload-area {
        padding: 1rem;
      }
      
      .upload-area .w-10 {
        width: 2rem;
        height: 2rem;
      }
      
      .upload-area p {
        font-size: 0.875rem;
      }
      
      .image-preview {
        width: 100px;
        height: 100px;
      }
      
      .max-w-4xl {
        padding: 0 0.75rem;
      }
      
      .bg-white.rounded-2xl {
        padding: 1rem;
      }
      
      .text-3xl {
        font-size: 1.5rem;
      }
      
      .text-2xl {
        font-size: 1.25rem;
      }
      
      .text-xl {
        font-size: 1.125rem;
      }
      
      /* Touch-friendly improvements */
      .category-card,
      .option-card,
      .back-button,
      button,
      input[type="file"] {
        min-height: 44px; /* iOS minimum touch target */
      }
      
      .category-card,
      .option-card {
        -webkit-tap-highlight-color: transparent;
      }
      
      /* Prevent zoom on input focus */
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="password"],
      textarea,
      select {
        font-size: 16px;
      }
      
      /* Better spacing for mobile */
      .space-y-6 > * + * {
        margin-top: 1.25rem;
      }
      
      .space-y-4 > * + * {
        margin-top: 0.875rem;
      }
    }
    </style>
  </head>
  <body>
    <!-- Loading Spinner -->
    <div id="loadingState" class="fixed inset-0 bg-white/95 z-[100] flex items-center justify-center">
      <div class="text-center">
        <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-purple-600 mx-auto mb-4"></div>
        <p class="text-gray-600 font-medium">Checking authentication...</p>
        <p class="text-sm text-gray-500 mt-2">Please wait while we verify your login status</p>
      </div>
    </div>



    <!-- Create Listing Form -->
    <div id="mainContent" class="pt-8 pb-12 px-6 hidden">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-2xl shadow-md p-8">
        <h1 class="text-3xl font-bold mb-8 text-center">List Your Item</h1>
        
        <!-- Modern Stepper Start -->
        <div class="modern-stepper">
          <div class="modern-step active" id="modern-step1">
            <div class="modern-step-circle">1</div>
            <div class="modern-step-label">Category</div>
          </div>
          <div class="modern-step-connector"></div>
          <div class="modern-step" id="modern-step2">
            <div class="modern-step-circle">2</div>
            <div class="modern-step-label">Gender</div>
          </div>
          <div class="modern-step-connector"></div>
          <div class="modern-step" id="modern-step3">
            <div class="modern-step-circle">3</div>
            <div class="modern-step-label">Age</div>
          </div>
          <div class="modern-step-connector"></div>
          <div class="modern-step" id="modern-step4">
            <div class="modern-step-circle">4</div>
            <div class="modern-step-label">Location</div>
          </div>
          <div class="modern-step-connector"></div>
          <div class="modern-step" id="modern-step5">
            <div class="modern-step-circle">5</div>
            <div class="modern-step-label">Details</div>
          </div>
        </div>
        <!-- Modern Stepper End -->
        
        <!-- Step 1: Category Selection -->
        <div id="step-category" class="step-content">
          <h2 class="text-2xl font-semibold mb-6 text-center">What are you listing today?</h2>
          <p class="text-gray-600 text-center mb-8">Choose the category that best describes your item</p>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            <!-- Casual Clothes -->
            <div class="category-card" data-category="casual">
              <img src="https://images.unsplash.com/photo-1434389677669-e08b4cac3105?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=705&q=80" alt="Casual Clothes" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Casual Clothes</h3>
                <p class="text-white/80 text-sm">Everyday wear</p>
              </div>
            </div>
            
            <!-- Party Wear -->
            <div class="category-card" data-category="party">
              <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="Party Wear" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Party Wear</h3>
                <p class="text-white/80 text-sm">Special occasions</p>
              </div>
            </div>
            
            <!-- Wedding Collection -->
            <div class="category-card" data-category="wedding">
              <img src="assets/wedding-collection.jpg" 
                  alt="Wedding Collection" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Wedding Collection</h3>
                <p class="text-white/80 text-sm">Bridal & formal</p>
              </div>
            </div>
            
            <!-- Shoes -->
            <div class="category-card" data-category="shoes">
              <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Shoes" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Shoes</h3>
                <p class="text-white/80 text-sm">Footwear</p>
              </div>
            </div>
            
            <!-- Formal Wear -->
            <div class="category-card" data-category="formal">
              <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Formal Wear" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Formal Wear</h3>
                <p class="text-white/80 text-sm">Business & office</p>
              </div>
            </div>
            
            <!-- Accessories -->
            <div class="category-card" data-category="accessories">
              <img src="https://images.unsplash.com/photo-1603561591411-07134e71a2a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Accessories" class="w-full h-full object-cover">
              <div class="category-overlay">
                <h3 class="text-xl font-semibold text-white">Accessories</h3>
                <p class="text-white/80 text-sm">Jewelry & bags</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Step 2: Gender Selection -->
        <div id="step-gender" class="step-content hidden">
          <a href="#" class="back-button mb-6" onclick="goToStep(1)">
            <i class="fas fa-arrow-left"></i> Back to Categories
          </a>
          
          <h2 class="text-2xl font-semibold mb-6 text-center">Who is this for?</h2>
          <p class="text-gray-600 text-center mb-8">Select the target gender for your item</p>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Women -->
            <div class="option-card" data-gender="women">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-purple-100 flex items-center justify-center">
                  <i class="fas fa-female text-3xl text-purple-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Women</h3>
              <p class="text-gray-600">Clothing for women and girls</p>
            </div>
            
            <!-- Men -->
            <div class="option-card" data-gender="men">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center">
                  <i class="fas fa-male text-3xl text-blue-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Men</h3>
              <p class="text-gray-600">Clothing for men and boys</p>
            </div>
            
            <!-- Unisex -->
            <div class="option-card" data-gender="unisex">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center">
                  <i class="fas fa-venus-mars text-3xl text-green-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Unisex</h3>
              <p class="text-gray-600">Suitable for everyone</p>
            </div>
          </div>
        </div>
        
        <!-- Step 3: Age Group Selection -->
        <div id="step-age" class="step-content hidden">
          <a href="#" class="back-button mb-6" onclick="goToStep(2)">
            <i class="fas fa-arrow-left"></i> Back to Gender
          </a>
          
          <h2 class="text-2xl font-semibold mb-6 text-center">Age Group</h2>
          <p class="text-gray-600 text-center mb-8">Select the appropriate age range</p>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Kids -->
            <div class="option-card" data-age="kids">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-yellow-100 flex items-center justify-center">
                  <i class="fas fa-child text-3xl text-yellow-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Kids (0-12)</h3>
              <p class="text-gray-600">Clothing for children</p>
            </div>
            
            <!-- Teens -->
            <div class="option-card" data-age="teens">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-orange-100 flex items-center justify-center">
                  <i class="fas fa-user-graduate text-3xl text-orange-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Teens (13-19)</h3>
              <p class="text-gray-600">Clothing for teenagers</p>
            </div>
            
            <!-- Adults -->
            <div class="option-card" data-age="adults">
              <div class="flex justify-center mb-4">
                <div class="w-20 h-20 rounded-full bg-indigo-100 flex items-center justify-center">
                  <i class="fas fa-user text-3xl text-indigo-600"></i>
                </div>
              </div>
              <h3 class="text-xl font-semibold mb-2">Adults (20+)</h3>
              <p class="text-gray-600">Clothing for adults</p>
            </div>
          </div>
        </div>
        
        <!-- Step 4: Location Selection -->
        <div id="step-location" class="step-content hidden">
            <a href="#" class="back-button mb-6" onclick="goToStep(3)">
                <i class="fas fa-arrow-left"></i> Back to Age Group
            </a>
            <h2 class="text-2xl font-bold mb-2 text-center">CONFIRM YOUR LOCATION</h2>

            <div class="border-b border-gray-200 mb-6">
                <nav class="-mb-px flex justify-center" aria-label="Tabs">
                    <a href="#" class="w-1/2 py-4 px-1 text-center border-b-2 border-purple-600 font-medium text-sm text-purple-600">
                        LIST
                    </a>
                    <a href="#" class="w-1/2 py-4 px-1 text-center border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm">
                        CURRENT LOCATION
                    </a>
                </nav>
            </div>

            <div class="space-y-4">
                <div>
                    <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State *</label>
                    <select id="state" name="state" required class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition">
                        <option value="">Select a state</option>
                    </select>
                </div>
                <div>
                    <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City *</label>
                    <select id="city" name="city" required class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition" disabled>
                        <option value="">Select a city</option>
                    </select>
                </div>
                <div>
                    <label for="neighbourhood" class="block text-sm font-medium text-gray-700 mb-1">Neighbourhood *</label>
                    <input type="text" id="neighbourhood" name="neighbourhood" required class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition" placeholder="e.g., Ali Nagar">
                </div>
            </div>

            <div class="pt-6">
              <button
                type="button"
                onclick="goToStep(5)"
                class="w-full bg-purple-600 text-white py-3 px-4 rounded-xl hover:bg-purple-700 transition duration-200 font-medium"
              >
                Next
              </button>
            </div>
        </div>
        
        <!-- Step 5: Form Details -->
        <div id="step-form" class="step-content hidden">
          <a href="#" class="back-button mb-6" onclick="goToStep(4)">
            <i class="fas fa-arrow-left"></i> Back to Location
          </a>
          
          <div class="flex justify-between items-center mb-6">
            <div>
              <h2 class="text-2xl font-bold" id="formTitle">Item Details</h2>
              <p class="text-gray-600" id="formSubtitle">Add details about your item</p>
            </div>
            <div class="flex gap-2">
              <div class="bg-purple-100 px-4 py-2 rounded-full">
                <span id="categoryBadge" class="text-purple-700 font-medium"></span>
              </div>
              <div class="bg-blue-100 px-4 py-2 rounded-full">
                <span id="genderBadge" class="text-blue-700 font-medium"></span>
              </div>
              <div class="bg-green-100 px-4 py-2 rounded-full">
                <span id="ageBadge" class="text-green-700 font-medium"></span>
              </div>
            </div>
          </div>
          
          <form id="listingForm" class="space-y-6">
            <input type="hidden" id="selectedCategory" name="category">
            <input type="hidden" id="selectedGender" name="gender">
            <input type="hidden" id="selectedAge" name="ageGroup">
            
            <!-- Basic Information -->
            <div>
              <h2 class="text-xl font-semibold mb-4">Basic Information</h2>
              <div class="space-y-4">
                <div>
                  <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                  <input
                    type="text"
                    id="title"
                    name="title"
                    required
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                    placeholder="e.g., Black Evening Dress"
                  />
                </div>

                <div>
                  <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                  <textarea
                    id="description"
                    name="description"
                    required
                    rows="4"
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                    placeholder="Describe your item in detail..."
                  ></textarea>
                </div>

                <!-- Category-specific fields -->
                <div id="sizeField">
                  <label for="size" class="block text-sm font-medium text-gray-700 mb-1">Size</label>
                  <select
                    id="size"
                    name="size"
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                  >
                    <option value="">Select a size</option>
                    <option value="XS">XS</option>
                    <option value="S">S</option>
                    <option value="M">M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                  </select>
                </div>
                
                <div id="shoeSizeField" class="hidden">
                  <label for="shoeSize" class="block text-sm font-medium text-gray-700 mb-1">Shoe Size</label>
                  <select
                    id="shoeSize"
                    name="shoeSize"
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                  >
                    <option value="">Select shoe size</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                  </select>
                </div>
                
                <div id="accessoryTypeField" class="hidden">
                  <label for="accessoryType" class="block text-sm font-medium text-gray-700 mb-1">Accessory Type</label>
                  <select
                    id="accessoryType"
                    name="accessoryType"
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                  >
                    <option value="">Select accessory type</option>
                    <option value="jewelry">Jewelry</option>
                    <option value="bag">Bag</option>
                    <option value="hat">Hat</option>
                    <option value="scarf">Scarf</option>
                    <option value="belt">Belt</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Pricing -->
            <div>
              <h2 class="text-xl font-semibold mb-4">Pricing</h2>
              <div class="space-y-4">
                <div>
                  <label for="rentPrice" class="block text-sm font-medium text-gray-700 mb-1">Rent Price (per day)</label>
                  <div class="relative">
                    <span class="absolute left-4 top-1/2 transform -translate-y-1/2">₹</span>
                    <input
                      type="number"
                      id="rentPrice"
                      name="rentPrice"
                      required
                      min="0"
                      step="0.01"
                      class="form-input w-full pl-8 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                      placeholder="0.00"
                    />
                  </div>
                </div>

                <div>
                  <label for="salePrice" class="block text-sm font-medium text-gray-700 mb-1">Sale Price (optional)</label>
                  <div class="relative">
                    <span class="absolute left-4 top-1/2 transform -translate-y-1/2">₹</span>
                    <input
                      type="number"
                      id="salePrice"
                      name="salePrice"
                      min="0"
                      step="0.01"
                      class="form-input w-full pl-8 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                      placeholder="0.00"
                    />
                  </div>
                </div>
              </div>
            </div>

            <!-- Images -->
            <div>
              <h2 class="text-xl font-semibold mb-4">Upload Photos</h2>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">Select Images (Up to 8)</label>
                  <div class="upload-area" id="uploadArea">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                      <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                      </svg>
                      <p class="mb-2 text-sm text-gray-500 text-center"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                      <p class="text-xs text-gray-500 text-center">PNG, JPG up to 10MB</p>
                      <p class="text-xs text-gray-400 text-center mt-1">Tap to select images on mobile</p>
                    </div>
                    <input id="images" type="file" class="hidden" accept="image/*" multiple />
                  </div> 
                </div>
                <div id="imagePreview" class="flex flex-wrap gap-4 mt-4">
                  <!-- Image previews will be added here -->
                </div>
              </div>
            </div>

            <!-- Additional Details -->
            <div>
              <h2 class="text-xl font-semibold mb-4">Additional Details</h2>
              <div class="space-y-4">
                <div>
                  <label for="condition" class="block text-sm font-medium text-gray-700 mb-1">Condition</label>
                  <select
                    id="condition"
                    name="condition"
                    required
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                  >
                    <option value="">Select condition</option>
                    <option value="new">New with tags</option>
                    <option value="like_new">Like new</option>
                    <option value="good">Good</option>
                    <option value="fair">Fair</option>
                  </select>
                </div>

                <div>
                  <label for="brand" class="block text-sm font-medium text-gray-700 mb-1">Brand (optional)</label>
                  <input
                    type="text"
                    id="brand"
                    name="brand"
                    class="form-input w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none transition"
                    placeholder="e.g., Zara"
                  />
                </div>
              </div>
            </div>

            <div class="pt-6">
              <button
                type="submit"
                class="w-full bg-purple-600 text-white py-3 px-4 rounded-xl hover:bg-purple-700 transition duration-200 font-medium"
              >
                Create Listing
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Auth State Script -->
  <script src="js/auth-state.js"></script>
  <!-- Location Script -->
  <script src="js/locations.js"></script>
  <!-- Listing Script -->
  <script src="js/create-listing.js"></script>
  

  <!-- User Activity Tracking -->
  <script src="js/user-activity-tracker.js"></script>
  
  </body>
</html>