<!-- Delivery-specific fields (receiver, image, notes) -->
<div id="deliverySections" style="display: none;">
  <div class="bg-yellow-50 rounded-lg border border-yellow-100 p-5">
    <div class="mb-4">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center pb-2.5">
        <i class="bi bi-pencil-square me-2"></i> Receiver Details
      </h3>
      <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
      <input class="form-control block w-full px-3 py-2 border border-gray-300 rounded-md" id="receiverName">
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Country Code</label>
        <select class="form-control block w-full px-3 py-2 border border-gray-300 rounded-md" id="receiverCountryCode"></select>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
        <input class="form-control block w-full px-3 py-2 border border-gray-300 rounded-md" id="receiverPhone" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
      </div>
    </div>
    <div class="mb-4 pt-5">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center pb-2.5">
        <i class="bi bi-pencil-square me-2"></i> Courier Image
      </h3>
      <input type="file" class="form-control block w-full" id="deliveryImage" accept="image/*">
    </div>
    <div class="mb-4 pt-5">
      <h3 class="text-sm font-medium text-purple-800 mb-0 flex items-center pb-2.5">
        <i class="bi bi-pencil-square me-2"></i> Courier Notes
      </h3>
      <textarea class="form-control block w-full px-3 py-2 border border-gray-300 rounded-md" id="deliveryNotes" rows="4"></textarea>
    </div>
  </div>
</div>
