<!-- Promo Code Section -->
<div class="bg-purple-50 rounded-lg border border-purple-100" style="padding: 20px;">
  <h3 class="text-sm font-medium text-purple-800 mb-3 flex items-center">
    <i class="fas fa-tag mr-2"></i> Promo Code
  </h3>

  <div class="flex gap-2" style="padding-bottom: 10px;">
    <div class="flex-1">
      <label class="block text-sm font-medium text-gray-700 mb-1">Enter Promo Code</label>
      <input type="text" <%=   trip.trip_status !== "request" ? 'disabled' : '' %> name="promo_code" id="promo_code" value="<%= trip.promo_code %>" 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">
    </div>
    <div class="flex items-end">
      <button <%=   trip.trip_status !== "request" ? 'disabled' : '' %> type="button" id="submitPromo" class="h-12 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
        Apply
      </button>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-1 gap-4 mt-4" style="padding-bottom: 10px;">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Promo Amount</label>
      <input type="text" name="promo_amt" name="promo_amt" value="<%= trip.promo_amt %>" 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" disabled>
    </div>
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Trip Pay Amount</label>
    <input type="text" id="trip_pay_amount" name="trip_pay_amount" value="<%= trip.trip_pay_amount %>" 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" disabled>
  </div>
</div>
