{{-- Webform: select which list custom fields appear on the form (data saved to list). Email is always shown (required, no checkbox) and is sortable. --}}
@php
  $selected_ids = $custom_field_ids ? array_map('trim', explode(',', $custom_field_ids)) : [];
  $selected_ids = array_filter($selected_ids);
  $list_custom_fields_by_id = $list_custom_fields->keyBy(function ($f) { return (string)($f->id ?? $f->pivot->custom_field_id ?? ''); });
  $all_cf_ids = $list_custom_fields->map(function ($f) { return (string)($f->id ?? $f->pivot->custom_field_id ?? ''); })->filter()->values()->toArray();
  $base_order = (isset($field_order_array) && !empty($field_order_array))
    ? $field_order_array
    : array_merge(['email'], $all_cf_ids);
  $field_order = $base_order;
  foreach ($all_cf_ids as $id) {
    if (!in_array($id, $field_order)) {
      $field_order[] = $id;
    }
  }
  if (!in_array('email', $field_order)) {
    array_unshift($field_order, 'email');
  }
  $field_order_str = implode(',', $field_order);
@endphp
<div class="webform-fields-select border rounded p-3 bg-light">
  <p class="small mb-2">{{ __('app.webform_select_fields_help') }}</p>
  <p class="small mb-2"><i class="bi bi-grip-vertical me-1"></i>{{ __('app.webform_drag_to_reorder') }}</p>
  <input type="hidden" name="field_order" id="webform_field_order" value="{{ $field_order_str }}">
  <div id="webform-fields-sortable" class="webform-fields-sortable">
  @foreach($field_order as $item_id)
    @if($item_id === 'email')
    {{-- Email: always shown, required, checkbox checked but disabled (not editable), sortable --}}
    <div class="webform-field-item d-flex align-items-center gap-2 py-2 border-bottom border-light" data-field-type="email" data-id="email">
      <span class="webform-field-drag-handle flex-shrink-0" title="{{ __('app.webform_drag_to_reorder') }}" aria-label="{{ __('app.webform_drag_to_reorder') }}">
        <i class="bi bi-grip-vertical" aria-hidden="true"></i>
      </span>
      <div class="form-check flex-grow-1 mb-0">
        <input type="checkbox" class="form-check-input" id="wf_cf_email" checked disabled tabindex="-1" aria-label="{{ __('app.email') }} ({{ __('app.required') }})">
        <label class="form-check-label d-flex align-items-center gap-2" for="wf_cf_email">
          <span>{{ __('app.email') }}</span>
          <span class="badge bg-primary badge-sm">{{ __('app.required') }}</span>
        </label>
      </div>
    </div>
    @else
    @php $custom_field = $list_custom_fields_by_id->get($item_id); @endphp
    @if($custom_field)
      @php $cf_id = $custom_field->id ?? ($custom_field->pivot->custom_field_id ?? null); @endphp
      <div class="webform-field-item d-flex align-items-center gap-2 py-2 border-bottom border-light" data-cf-id="{{ $cf_id }}" data-id="{{ $cf_id }}">
        <span class="webform-field-drag-handle flex-shrink-0" title="{{ __('app.webform_drag_to_reorder') }}" aria-label="{{ __('app.webform_drag_to_reorder') }}">
          <i class="bi bi-grip-vertical" aria-hidden="true"></i>
        </span>
        <div class="form-check flex-grow-1 mb-0">
          <input class="form-check-input" type="checkbox" name="custom_fields[]" value="{{ $cf_id }}" id="wf_cf_{{ $cf_id }}"
            {{ in_array((string)$cf_id, $selected_ids) ? 'checked' : '' }}>
          <label class="form-check-label d-flex align-items-center gap-2" for="wf_cf_{{ $cf_id }}">
            <span>{{ $custom_field->name }}</span>
            <span class="badge bg-secondary badge-sm">{{ $custom_field->type ?? 'text' }}</span>
            @if(!empty($custom_field->is_required))
              <span class="badge bg-info badge-sm">{{ __('app.required') }}</span>
            @endif
          </label>
        </div>
      </div>
    @endif
    @endif
  @endforeach
  @if($list_custom_fields->isEmpty())
    <p class="mb-0 small pt-2">{{ __('app.webform_no_list_fields') }}</p>
  @endif
  </div>
</div>