{{-- Popovers: initialized in app.js (viewModal → initBootstrapPopoversIn). Layout aligned with lists bulk update. --}}
<style>
.popover {
  z-index: 9999 !important;
}
</style>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg suppression-modal">
  <div class="modal-content border-0 shadow">
    <form id="frm-group" method="post" action="{{ route('suppressions.store') }}" enctype="multipart/form-data" class="needs-validation" novalidate>
      @csrf
      <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-shield-exclamation fs-20"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.add_suppression') }}</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="mb-3 pb-3 border-bottom">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.basic_information') }}</div>
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2">{{ __('app.group') }}
                  <a href="javascript:;" onclick="viewModal('modal', '{{ route('group.create', ['type_id' => config('custom.group_suppression')]) }}');" class="text-primary ms-1" title="{{ __('app.add') }}">
                    <i class="bi bi-plus-circle"></i>
                  </a>
                </label>
                <select name="group_id" class="single-select form-select" id="group_id" required>
                  <option value="">{{ __('app.select_group') }}</option>
                  @foreach ($groups as $id => $group_name)
                    <option value="{{ $id }}">{{ $group_name }}</option>
                  @endforeach
                </select>
                <div class="invalid-feedback">{{ __('app.select_group_error') }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-3 pb-3 border-bottom">
          <div class="d-flex align-items-start justify-content-between flex-wrap gap-2 mb-2">
            <span class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-0">{{ __('app.resource_settings') }}</span>
            <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
              title="{{ __('app.resource') }}" data-bs-content="{{ __('app.suppression_resource_help') }}"
              data-bs-custom-class="header-primary" class="text-primary lh-1 p-0 flex-shrink-0">
              <i class="bi bi-question-circle" aria-hidden="true"></i>
            </a>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2" for="resource">{{ __('app.resource') }}</label>
                <select name="resource" id="resource" class="form-select">
                  <option value="emails">{{ __('app.email_addresses') }}</option>
                  <option value="file">{{ __('app.file') }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-3 pb-3 border-bottom" id="section-emails">
          <div class="d-flex align-items-start justify-content-between flex-wrap gap-2 mb-2">
            <span class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-0">{{ __('app.email_input') }}</span>
            <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
              title="{{ __('app.email_addresses') }}" data-bs-content="{{ __('app.suppression_email_addresses_help') }}"
              data-bs-custom-class="header-primary" class="text-primary lh-1 p-0 flex-shrink-0">
              <i class="bi bi-question-circle" aria-hidden="true"></i>
            </a>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2" for="suppression-emails-input">{{ __('app.email_addresses') }}</label>
                <textarea class="form-control" name="emails" id="suppression-emails-input" rows="7" placeholder="{{ __('app.multiple_emails_placeholder') }}"></textarea>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-3 pb-3 border-bottom" id="section-file" style="display: none;">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.file_upload') }}</div>
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label class="form-label fw-semibold mt-2" for="file">{{ __('app.file') }}</label>
                <input class="form-control" name="file" type="file" id="file">
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <div id="info-filesize" style="display: none;">
                  <label class="form-label">{!! \App\Http\Helper\Helper::getMaxFileSize(false, true) !!}</label>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-0" id="fields-mapping" style="display: none;">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.fields_mapping') }}</div>
          <div class="row">
            <div class="col-12">
              <div class="box-body" id="suppression-fields"></div>
            </div>
          </div>
        </div>
      </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"></i>{{ __('app.close') }}
        </button>
        <button type="submit" class="btn btn-primary btn-loading" id="btn-save">
          <i class="bi bi-check-lg me-1"></i>{{ __('app.save') }}
        </button>
        <button type="button" class="btn btn-primary btn-loading" id="btn-proceed" style="display:none" onclick="suppressionImport(this, this.form, '{{ route('suppression.import') }}');">
          <i class="bi bi-arrow-right me-1"></i>{{ __('app.proceed') }}
        </button>
        <button type="button" class="btn btn-primary btn-loading" id="btn-import" style="display:none" onclick="doSuppressionImport(this, this.form, '{{ route('suppression.import') }}');">
          <i class="bi bi-upload me-1"></i>{{ __('app.import') }}
        </button>
      </div>
    </form>
  </div>
</div>