<!-- Fare Summary -->
<div class="bg-gray-50 rounded-lg border border-gray-200 p-6">
  <div class="flex justify-between 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>
    <p class="btn btn-primary" data-tooltip="View fare breakdown" data-bs-toggle="modal"
      data-bs-target="#fareCalcModal">
      <i class="bi bi-info-circle-fill me-1"></i>
    </p>
  </div>
  <br>
  <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>
      <input type="hidden" name="base_price" id="basePriceInput">
    </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>
      <input type="hidden" name="fare_per_km" id="farePerKMInput">
    </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>
      <input type="hidden" name="fare_per_min" id="farePerMinInput">
    </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>
      <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">0 min</span>
      <input type="hidden" name="job_time" id="jobTimeInput">
    </div>
    <div class="border-t border-gray-200 pt-2 mt-2 flex justify-between font-medium hidden">
      <span class="text-gray-700">Subtotal:</span>
      <span id="totalFare">
        <%= city_cur %>0.00
      </span>
      <input type="hidden" name="total_fare" id="totalFareInput">
    </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>
      <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 %>0.00</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 %>0.00</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" id="promoAmtvalue"></span>
        <%= city_cur %>0.00
      </span>
      <input type="hidden" name="gross_fare" id="grossFareInput">
    </div>
  </div>
</div>