<!-- Co-passenger Details -->
<% if (typeof copInfo !== 'undefined' && copInfo && Object.keys(copInfo).length > 0) { %>

<div class="bg-blue-50 rounded-lg border border-blue-100 p-3">
  <h3 class="text-sm font-medium text-blue-800 mb-3 flex items-center">
    <i class="fas fa-user-circle mr-2"></i> Co-passenger Details
  </h3>

  <%
    const children = [];
    const guardian = [];

    for (const key in copInfo) {
      const value = copInfo[key];
      if (!value) continue;

      switch (key) {
        case 'co_child_name':
          children[0] = `Child Name : ${value}`;
          break;

        case 'co_child_age':
          children[1] = `Child Age (Years) : ${value}`;
          break;

        case 'co_child_add_info':
          children[2] = `Additional Info : ${value}`;
          break;

        case 'co_pass_name':
          guardian[0] = `Guardian Name : ${value}`;
          break;

        case 'co_pass_phone':
          guardian[1] = `Guardian Phone : ${value}`;
          break;
      }
    }
  %>

  <% if (children.filter(Boolean).length > 0) { %>
    <h6 class="text-sm font-semibold text-gray-700">Child's Details</h6>
    <p class="text-xs text-gray-600 mb-2">
      <%= children.filter(Boolean).join(', ') %>
    </p>
    <hr class="my-2">
  <% } %>

  <% if (guardian.filter(Boolean).length > 0) { %>
    <h6 class="text-sm font-semibold text-gray-700">Guardian's Details</h6>
    <p class="text-xs text-gray-600">
      <%= guardian.filter(Boolean).join(', ') %>
    </p>
  <% } %>

</div>

<% } %>
