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

  function toggleDeliveryFields(tripType) {
    const section = document.getElementById("deliverySections");
    if (tripType === "delivery") {
      section.style.display = "block";
    } else {
      section.style.display = "none";
    }
  }

  function updateDeliveryValidationRules(tripType) {
    if (tripType === "delivery") {
      validationRules.receiverName = {
        required: true,
        message: "Receiver name is required"
      };
      validationRules.receiverCountryCode = {
        required: true,
        message: "Country code is required"
      };
      validationRules.receiverPhone = {
        required: true,
        message: "Receiver phone number is required",
        validate: (value) => /^\d{5,15}$/.test(value),
        invalidMessage: "Please enter a valid phone number"
      };
      validationRules.deliveryImage = {
        required: true,
        message: "Courier proof image is required"
      };
    } else {
      delete validationRules.receiverName;
      delete validationRules.receiverCountryCode;
      delete validationRules.receiverPhone;
      delete validationRules.deliveryImage;
    }
  }

  document.getElementById("tripType").addEventListener("change", function() {
    toggleDeliveryFields(this.value);
    updateDeliveryValidationRules(this.value);
  });

  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);

  const tripType = "<%= trip.trip_type %>";
  if (tripType === "delivery") {
    document.getElementById("deliverySections").style.display = "block";
  } else {
    document.getElementById("deliverySections").style.display = "none";
  }
});
</script>
