<!-- Trip Details -->
<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
    <select name="category_id" id="categorySelect" class="form-select">
      <option value="">Select Category</option>
    </select>
  </div>

  <div id="rentalPackageContainer" class="hidden mt-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Rental Package</label>
    <select name="rental_package" id="rentalPackageSelect" class="form-select">
      <option value="">Select Rental Package</option>
    </select>
  </div>

  <!-- Location Inputs -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Pickup Location</label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style="height: 46px; margin-left: 15px;">
        <i class="fas fa-map-marker-alt text-gray-400"></i>
      </div>
      <input style="padding-left: 35px;" type="text" id="trip_from_loc" name="trip_from_loc" placeholder="Enter pickup address" class="block w-full pl-10 form-select pr-3 h-12 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
    </div>
  </div>

  <div id="dropLocationContainer">
    <label class="block text-sm font-medium text-gray-700 mb-1">Drop Location</label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" style="height: 46px; margin-left: 15px;">
        <i class="fas fa-map-marker-alt text-gray-400"></i>
      </div>
      <input style="padding-left: 35px;" type="text" id="trip_to_loc" name="trip_to_loc" placeholder="Enter drop address" class="block w-full pl-10 form-select pr-3 h-12 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
    </div>
  </div>


  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Distance (<%=dunit%>)</label>
      <input type="text" id="trip_distance" name="trip_distance" class="form-input">
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Pickup Notes</label>
      <input id="p_notes" name="p_notes" class="form-input">
    </div>
  </div>
</div>

<!-- Hidden Map Fields -->
<input type="hidden" id="pickupLat" name="pickupLat">
<input type="hidden" id="pickupLng" name="pickupLng">
<input type="hidden" id="dropLat" name="dropLat">
<input type="hidden" id="dropLng" name="dropLng">
<input type="hidden" id="tripDistance" name="tripDistance">
<input type="hidden" id="tripTime" name="tripTime">
<input type="hidden" id="polyline" name="polyline">