<!-- Passenger Section -->
<div class="bg-blue-50 rounded-lg border border-blue-100" style="padding: 20px;">
  <h3 class="text-sm font-medium text-blue-800 mb-3 flex items-center">
    <i class="fas fa-user-circle mr-2"></i> Passenger Information
  </h3>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
      <input type="text" name="client_name" value="<%= maskName(trip.user.u_fname) %> <%= maskName(trip.user.u_lname) %>" class="block w-full px-3 py-2 bg-gray-100 border h-12 border-gray-300 rounded-md shadow-sm sm:text-sm" disabled>
      <input type="hidden" name="user_id" value="<%= trip.user.user_id %>">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
      <input type="text" name="client_phone" value="+ <%= trip.user.c_code || '' %> <%=maskPhone(trip.user.u_phone || '') %>" class="block w-full px-3 py-2 bg-gray-100 h-12 border border-gray-300 rounded-md shadow-sm sm:text-sm" disabled>
    </div>
  </div>

  <div class="mt-4" style="padding-top: 10px;">
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input type="text" name="client_email" value="<%= maskEmail(trip.user.u_email) %>" class="block w-full px-3 py-2 bg-gray-100 h-12 border border-gray-300 rounded-md shadow-sm sm:text-sm" disabled>
  </div>
</div>
