{{-- Popovers: initBootstrapPopoversIn in app.js (viewModal). --}}
<style>
.popover {
  z-index: 9999 !important;
}
/* Align radios with card content: avoid stacked .form-check padding + .p-3 offset */
.customize-listing-modal .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 0;
  padding-left: 0;
  margin-bottom: 0;
}
.customize-listing-modal .form-check-input {
  float: none;
  margin-left: 0;
  margin-top: 0.2rem;
  flex-shrink: 0;
}
</style>
@php
  $listingPrefs = is_string($contact_customize_listing ?? null)
    ? json_decode($contact_customize_listing, true)
    : (is_array($contact_customize_listing ?? null) ? $contact_customize_listing : []);
  $selectedIds = $listingPrefs['custom_field_ids'] ?? [];
  $normalizedSelected = array_map(static function ($v) {
    return (string) $v;
  }, (array) $selectedIds);
  $chosenFieldId = null;
  foreach ($custom_fields as $cf) {
    if (in_array((string) $cf->id, $normalizedSelected, true)) {
      $chosenFieldId = $cf->id;
      break;
    }
  }
  $noneSelected = $chosenFieldId === null;
@endphp
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg customize-listing-modal">
  <div class="modal-content border-0 shadow">
    <form id="frm-group" method="post" action="{{ route('contacts.customize.listing') }}" class="needs-validation" novalidate>
      @csrf
      @method('PUT')

      <div class="modal-header border-bottom py-3 px-4">
        <div class="d-flex align-items-center gap-3 min-w-0 flex-grow-1">
          <span class="avatar avatar-md avatar-rounded bg-primary-transparent text-primary flex-shrink-0 d-inline-flex align-items-center justify-content-center">
            <i class="bi bi-layout-three-columns fs-20" aria-hidden="true"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.contact_customize_listing') }}</h5>
          </div>
        </div>
        <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="modal" aria-label="{{ __('app.close') }}"></button>
      </div>

      <div class="modal-body px-4 py-3">
        <div class="d-flex align-items-start justify-content-between gap-2 mb-3 pb-3 border-bottom">
          <div class="min-w-0">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-1">{{ __('app.field_configuration') }}</div>
            <p class="mb-0 text-secondary small">{{ __('app.contact_customize_listing_help') }}</p>
          </div>
          <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
            title="{{ __('app.contact_customize_listing') }}" data-bs-content="{{ __('app.contact_customize_listing_help') }}"
            data-bs-custom-class="header-primary" class="text-primary lh-1 p-0 flex-shrink-0 mt-1">
            <i class="bi bi-question-circle" aria-hidden="true"></i>
          </a>
        </div>

        <fieldset class="mb-0 border-0 p-0 m-0">
          <legend class="visually-hidden">{{ __('app.contact_customize_listing') }}</legend>
          <div class="row g-3">
            <div class="col-12">
              <div class="p-3 rounded border bg-light bg-opacity-50">
                <div class="form-check mb-0">
                  <input class="form-check-input" type="radio" name="custom_field_ids[]" id="custom-listing-field-none" value="0" {{ $noneSelected ? 'checked' : '' }}>
                  <label class="form-check-label fw-semibold" for="custom-listing-field-none">{{ __('app.none') }}</label>
                </div>
              </div>
            </div>
            @foreach ($custom_fields as $custom_field)
              <div class="col-md-6 col-xl-4">
                <div class="p-3 rounded border h-100">
                  <div class="form-check mb-0">
                    <input class="form-check-input" type="radio" name="custom_field_ids[]" id="custom-listing-field-{{ $custom_field->id }}"
                      value="{{ $custom_field->id }}"
                      {{ !$noneSelected && (string) $chosenFieldId === (string) $custom_field->id ? 'checked' : '' }}>
                    <label class="form-check-label fw-medium" for="custom-listing-field-{{ $custom_field->id }}">{{ $custom_field->name }}</label>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </fieldset>
      </div>

      <div class="modal-footer border-top bg-light px-4 py-3 gap-2 flex-wrap mt-3">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
          <i class="bi bi-x-lg me-1" aria-hidden="true"></i>{{ __('app.close') }}
        </button>
        <button type="submit" class="btn btn-primary btn-loading">
          <i class="bi bi-check-lg me-1" aria-hidden="true"></i>{{ __('app.save') }}
        </button>
      </div>
    </form>
  </div>
</div>