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

  <% if (typeof translatedExtraOptions !== 'undefined' && translatedExtraOptions.length > 0) { %>

    <% translatedExtraOptions.forEach(extOption => { %>
      <div class="card" style="margin-bottom:0.875rem;">
        <div class="card-header">
          <h6 class="card-title">
            <div class="form-check">
                <input
                    class="form-check-input specialPreferenceId"
                    type="checkbox"
                    id="extra_<%= extOption.extra_option_id %>"
                    name="specialPreferenceExtraOptionId[]"
                    value="<%= extOption.extra_option_id %>"
                    data-title="<%= extOption.title_no_trans %>"
                    style="margin-top: 2px; margin-right: 5px;"
                >
                <label for="extra_<%= extOption.extra_option_id %>"><%= extOption.type %></label>
            </div>
            <span style="float:right; font-size:12px;">
              <%= Number(extOption.fare).toFixed(2) %>
            </span>
          </h6>

          <% if (extOption.short_desc) { %>
            <span style="margin-left:18px; font-size:10px;">
              <%= extOption.short_desc %>
            </span>
          <% } %>
        </div>
      </div>
    <% }) %>

    <!-- Extra Details Card -->
    <div id="ExtraSpecialPrefGroup" style="display: block;">
        <div class="bg-yellow-50 rounded-lg border border-yellow-100 p-5">
            <div class="mb-4">
                <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" name="specialPreferenceName" id="specialPreferenceName">
            </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" name="specialPreferenceCountryId" id="specialPreferenceCountryId"></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" name="specialPreferencePhone" id="specialPreferencePhone" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                </div>
            </div>
        </div>
    </div>
  <% } %>
</div>