<!-- Fare Summary -->
<div class="section-card bg-gray-50 border-gray-200">
  <h3 class="section-title text-gray-800">
    <i class="fas fa-receipt mr-2"></i> Fare Breakdown
  </h3>

  <div class="space-y-3">
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Base Price:</span>
      <span class="font-medium" id="basePrice"><%= city_cur %>0.00</span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Fare Per KM:</span>
      <span class="font-medium" id="farePerKM"><%= city_cur %>0.00</span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Fare Per Min:</span>
      <span class="font-medium" id="farePerMin"><%= city_cur %>0.00</span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Job Distance:</span>
      <span class="font-medium" id="jobDistance">0 <%=dunit%></span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Job Time:</span>
      <span class="font-medium" id="jobTime">0 min</span>
    </div>

    <div class="border-t border-gray-200 pt-2 mt-2 flex justify-between font-medium">
      <span class="text-gray-700">Subtotal:</span>
      <span id="totalFare"><%= city_cur %>0.00</span>
    </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 %>0.00</span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">GST (10%):</span>
      <span class="text-blue-500" id="gstAmount">+<%= city_cur %>0.00</span>
    </div>
    <div class="flex justify-between text-sm">
      <span class="text-gray-600">Adjustments:</span>
      <span class="text-blue-500" id="adjustAmount">+<%= city_cur %>0.00</span>
    </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"><%= city_cur %>0.00</span>
    </div>
  </div>
</div>