<!-- Trip Details: Category, Rental, Locations, Distance, Notes -->
<div class="space-y-4">
  <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
      <select name="category_id" id="categorySelect" class="block form-select w-full pl-3 pr-10 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
        <option value="">Select Category</option>
      </select>
    </div>
  </div>
  <div id="rentalPackageContainer" class="hidden mt-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Rental Package</label>
    <div class="relative">
      <select name="rental_package" id="rentalPackageSelect" class="block form-select w-full pl-3 pr-10 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
        <option value="">Select Rental Package</option>
      </select>
    </div>
  </div>
  <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 <span class="text-red-500">*</span></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 %>) <span class="text-gray-500 font-normal">(0 if no destination)</span></label>
      <input type="text" id="trip_distance" name="trip_distance" placeholder="0" class="block w-full px-3 py-2 h-12 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
    </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="block w-full px-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>
