<script>
document.addEventListener("DOMContentLoaded", function() {
  $('#receiverCountryCode').select2({
    placeholder: "Select Country Code",
    width: "100%"
  });

  const cur = "<%= city_cur %>";

  document.getElementById("calcBaseFare").innerText = `<%= city_cur %><%= trip.category.cat_base_price %>`;
  document.getElementById("calcFarePerKM").innerText = `<%= city_cur %><%= trip.category.fare_per_km %>`;
  document.getElementById("calcDistanceKM").innerText = `<%= trip.trip_distance %>`;
  document.getElementById("calcFarePerMin").innerText = `<%= city_cur %><%= trip.category.fare_per_min %>`;
  document.getElementById("calcJobTime").innerText = Number(`<%= trip.trip_total_time %>`).toFixed(0);
  document.getElementById("calcGstRate").innerText = Number(<%= city_tax%> || 0).toFixed(0);

  // TJF
  document.getElementById("calcTjfFormula").innerText =
    `(${Number(`<%= trip.category.cat_base_price %>`)} + (${Number(`<%= trip.category.fare_per_km %>`)} × ${`<%= trip.trip_distance %>`}) + (${Number(`<%= trip.category.fare_per_min %>`)} × ${` <%= trip.trip_total_time %>`}))`;
  document.getElementById("calcTjfValue").innerText = `${cur}${Number(`<%= trip.trip_base_fare %>`).toFixed(2)}`;

  // Promo
  document.getElementById("calcPromo").innerText = `${cur}${Number(`<%= trip.trip_promo_amt %>` || 0).toFixed(2)}`;

  // TJF After Promo
  document.getElementById("calcTjfAfterPromoFormula").innerText =
    `(${Number(`<%= trip.trip_pay_amount_without_promo %>`).toFixed(2)} - ${Number(`<%= trip.trip_promo_amt %>`).toFixed(2)})`;
  document.getElementById("calcTjfAfterPromoValue").innerText = `${cur}${Number(`<%= trip.trip_pay_amount %>`).toFixed(2)}`;

  // GST
  document.getElementById("calcGstFormula").innerText =
    `((${Number(`<%= trip.trip_base_fare %>`).toFixed(2)} × ${Number(<%= city_tax%> || 0)}) / 100)`;
  document.getElementById("calcGstValue").innerText = `${cur}${Number( <%= trip.tax_amt %> || 0).toFixed(2)}`;

  // Gross Fare
  document.getElementById("calcGrossFareFormula").innerText =
    `(${Number(`<%= trip.trip_base_fare %>`).toFixed(2)} + ${Number(<%= trip.tax_amt %> ).toFixed(2)})`;
  document.getElementById("calcGrossFareValue").innerText = `${cur}${Number(`<%= trip.trip_pay_amount %>`).toFixed(2)}`;

  function toggleDeliveryFields(tripType) {
    const section = document.getElementById("deliverySections");
    if (tripType === "delivery") {
      section.style.display = "block";
      document.getElementById("receiverName").required = true;
      document.getElementById("receiverCountryCode").required = true;
      document.getElementById("receiverPhone").required = true;
      document.getElementById("deliveryImage").required = true;
    } else {
      section.style.display = "none";
      document.getElementById("receiverName").required = false;
      document.getElementById("receiverCountryCode").required = false;
      document.getElementById("receiverPhone").required = false;
      document.getElementById("deliveryImage").required = false;
    }
  }

  const rideModeSelect = document.getElementById("ride_mode") || document.querySelector('select[name="is_ride_later"]');
  const tripDateInput = document.getElementById("trip_datetime");

  function toggleTripDate() {
    if (rideModeSelect.value === "0") {
      tripDateInput.disabled = true;
      tripDateInput.classList.add("bg-gray-100", "cursor-not-allowed");
    } else {
      tripDateInput.disabled = false;
      tripDateInput.classList.remove("bg-gray-100", "cursor-not-allowed");
    }
  }

  toggleTripDate();
  rideModeSelect.addEventListener("change", toggleTripDate);
});
</script>
