<!-- Trip Settings -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- Trip Type -->
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Trip Type</label>
    <div class="relative">
      <select name="trip_type" disabled id="tripType" 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">
        <% 
          const env = 0;
          const options = env === 1 ? ["Normal", "Ride Later"] : ["Normal","Rental", "Outstation", "Delivery"];
          const selectedType = trip.trip_type || 'normal';
          
          options.forEach(function(option) {
            const value = option?.toLowerCase()?.replace(" ", "_");
            let label = option;

            // change only display text
            if (value === "delivery") {
              label = "Courier";
            }
        %>
        <option value="<%= value %>" <%= selectedType === value ? 'selected' : '' %>><%= label %></option>
        <% }) %>
      </select>
    </div>
  </div>

  <!-- Normal Trip Options (Ride Now/Later) -->
  <div id="normalOptions">
    <label class="block text-sm font-medium text-gray-700 mb-1">Ride Mode</label>
    <div class="relative">
      <select disabled name="is_ride_later" 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="0" <%= trip.is_ride_later == 0 ? 'selected' : '' %>>Ride Now</option>
        <option value="1" <%= trip.is_ride_later == 1 ? 'selected' : '' %>>Ride Later</option>
      </select>
    </div>
  </div>

  <!-- Outstation Trip Options (Single/Round Trip) -->
  <div id="outstationOptions" class="hidden">
    <label class="block text-sm font-medium text-gray-700 mb-1">Trip Mode</label>
    <div class="relative">
      <select name="is_oneway" disabled 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 bg-gray-100 cursor-not-allowed">
        <option <%= trip.is_oneway == 0 ? 'selected' : '' %> value="1">Single Trip</option>
        <option <%= trip.is_oneway == 0 ? 'selected' : '' %> value="0">Round Trip</option>
      </select>
    </div>
  </div>

  <!-- Return Date (for Outstation Round Trip) -->
  <div id="returnDateContainer" class="hidden">
    <label class="block text-sm font-medium text-gray-700 mb-1">Return Date</label>
    <input <%=   trip.trip_status !== "request" ? 'disabled' : '' %> type="datetime-local" name="trip_end_date" value="<%= trip?.trip_end_date ? new Date(trip?.trip_end_date)?.toISOString().slice(0,16) : '' %>" 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>

  <!-- Rental Trip Options (hidden by default) -->
  <div id="rentalOptions" class="hidden">
    <!-- Rental specific fields would go here -->
  </div>
</div>

<!-- Start Date -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
  <input type="datetime-local" id="trip_datetime" <%=   trip.trip_status !== "request" ? 'disabled' : '' %> name="trip_datetime" value="<%= trip.trip_date ? new Date(trip.trip_date).toISOString().slice(0,16) : '' %>" 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">
  <p class="mt-1 text-xs text-blue-600 text-right">**Change ride mode to modify trip date</p>
</div>
