<!-- Fare Summary -->
<div class="bg-gray-50 rounded-lg  border border-gray-200" style="padding: 30px;">
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <h3 class="text-sm font-medium text-gray-800 mb-3 flex items-center">
      <i class="fas fa-receipt mr-2"></i> Fare Breakdown
    </h3>
  </div>
  <br />

  <div class="space-y-3">
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Base Fare:</span>
      <span class="font-medium" id="basePrice"><%= city_cur %><%= trip.trip_base_fare %></span>
      <input type="hidden" name="base_price" id="basePriceInput">
    </div>
    <!-- Hidden Fare Per KM and Fare Per Min as requested -->
    <input type="hidden" name="fare_per_km" id="farePerKMInput" value="<%= trip.category.cat_fare_per_km %>">
    <input type="hidden" name="fare_per_min" id="farePerMinInput" value="<%= trip.category.cat_fare_per_min %>">
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Job Distance:</span>
      <span class="font-medium" id="jobDistance"><%= trip.trip_distance %></span>
      <input type="hidden" name="job_distance" id="jobDistanceInput">
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Job Time:</span>
      <span class="font-medium" id="jobTime"><%= trip.trip_total_time %><%= trip.trip_total_time <= 1 ? ' min' : ' mins' %></span>
      <input type="hidden" name="job_time" id="jobTimeInput">
    </div>

    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Promo Discount:</span>
      <span class="text-red-500" id="promoAmount">-<%= city_cur %><%= trip.promo_amt || 0 %> </span>
      <input type="hidden" name="promo_amount" id="promoAmountInput">
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">GST (<%= city_tax %>%):</span>
      <span class="text-blue-500" id="gstAmount">+<%= city_cur %><%= trip.tax_amt %></span>
      <input type="hidden" name="gst_amount" id="gstAmountInput">
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Adjustments:</span>
      <span class="text-blue-500" id="adjustAmount">+<%= city_cur %><%= trip.adjust_amt %></span>
      <input type="hidden" name="adjust_amount" id="adjustAmountInput">
    </div>

    <div class="border-t border-gray-200 pt-2 mt-2 flex justify-between font-semibold">
      <span class="text-gray-800">Total Amount:</span>
      <span class="text-lg text-green-600" id="grossFare"><span class="text-lg text-red-600 none" id="promoAmtvalue"></span><%= trip.trip_pay_amount %></span>
      <input type="hidden" name="gross_fare" id="grossFareInput">
    </div>
  </div>
</div>
