<!-- Delivery Section -->
<div id="deliverySections" style="display:none;">
  <div class="bg-yellow-50 rounded-lg  border border-yellow-100" style="padding: 20px;">
    <!-- Receiver Details -->
    <div class="mb-4">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center" style="padding-bottom: 10px;">
        <i class="bi bi-pencil-square me-2"></i>Receiver Details
      </h3>

      <label>Full Name</label>
      <input class="form-control" id="receiverName" value="<%= trip?.receiver?.u_name %>" <%=   trip.trip_type == "delivery" ? 'disabled' : '' %>>

      <div class="row mt-3">
        <div class="col-md-6">
          <label>Country Code</label>
          <select <%=   trip.trip_type == "delivery" ? 'disabled' : '' %> class="form-control" id="receiverCountryCode"></select >
        </div>

        <div class="col-md-6">
          <label>Phone Number</label>
          <input class="form-control" id="receiverPhone" value="<%= trip?.receiver?.u_phone %>" oninput="this.value = this.value.replace(/[^0-9]/g, '')" <%=   trip.trip_type == "delivery" ? 'disabled' : '' %>>
        </div>
      </div>
    </div>

    <!-- Delivery Images -->
    <div class="mb-4" style="padding-top: 20px;">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center" style="padding-bottom: 10px;">
        <i class="bi bi-pencil-square me-2"></i>Courier Image
      </h3>

      <input type="file" class="form-control" id="deliveryImage" accept="image/*" <%=   trip.trip_type == "delivery" ? 'disabled' : '' %>>
      <% if (trip.images && trip.images.length > 0) { %>
      <div style="margin-top: 10px;">
        <label>Existing Courier Image</label><br>
        <img src="<%= IMAGE_FOLDER_PATH %><%= trip.images[0].img_path %>" alt="Courier Image" style="width: 150px; border-radius: 8px; margin-top: 5px;">
      </div>
      <% } %>
    </div>

    <!-- Delivery Notes -->
    <div class="mb-4" style="padding-top: 20px;">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center" style="padding-bottom: 10px;">
        <i class="bi bi-pencil-square me-2"></i>Courier Notes
      </h3>

      <textarea <%=   trip.trip_type == "delivery" ? 'disabled' : '' %> class="form-control" id="deliveryNotes" rows="4"><%= trip.delivery_notes || '' %></textarea>
    </div>
  </div>
</div>
