<!-- Category and Distance -->
<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 <%=   trip.trip_status !== "request" ? 'disabled' : '' %> 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>

<!-- Rental Package Container -->
<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" <%=   trip.trip_status !== "request" ? 'disabled' : '' %> 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 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" name="trip_distance" id="trip_distance" value="<%= trip.trip_distance %>" class="block w-full px-3 py-2 border h-12 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" <%= trip.trip_status !== "request" ? 'disabled' : '' %>>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Pickup Notes</label>
    <input name="p_notes" id="p_notes" value="<%= trip.p_notes %>" class="block w-full px-3 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>
