{{-- Popovers: initialized in app.js (viewModal → initBootstrapPopoversIn). Field styling aligned with lists create/edit. --}}
<style>
.popover {
  z-index: 9999 !important;
}
</style>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg bulk-update-modal">
  <div class="modal-content border-0 shadow">
    <form id="frm-group" method="post" 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-arrow-repeat fs-20"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.bulk_update') }}</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="d-flex align-items-start justify-content-between gap-2 mb-2">
            <span class="text-secondary text-uppercase fw-semibold list-form-sec-label">{{ __('app.preference') }}</span>
            <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
              title="{{ __('app.preference') }}" data-bs-content="{{ __('app.bulk_update_preference_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="form-group">
            <select name="option" id="option" class="form-select" aria-label="{{ __('app.preference') }}">
              <option value="file">{{ __('app.file') }}</option>
              <option value="list">{{ __('app.lists') }}</option>
              <option value="write">{{ __('app.emails') }}</option>
            </select>
          </div>
        </div>

        <div class="mb-3 pb-3 border-bottom">
          <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
            <span class="text-secondary text-uppercase fw-semibold list-form-sec-label">{{ __('app.lists') }}</span>
            <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
              title="{{ __('app.lists') }}" data-bs-content="{{ __('app.bulk_update_lists_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>
          @php $list_ids = []; @endphp
          @include('includes.dropdown_lists', ['popup' => 1, 'multiple' => 1])
        </div>

        <div class="mb-3 pb-3 border-bottom" id="data-input-section">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.data_input') }}</div>
          <div id="section-emails" class="form-group mb-2" style="display: none;">
            <label class="form-label fw-semibold mt-2" for="bulk-emails">{{ __('app.emails') }}</label>
            <textarea class="form-control" id="bulk-emails" name="emails" rows="6" placeholder="{{ __('app.email_addresses') }}, {{ __('app.multiple_emails_placeholder') }}" required></textarea>
          </div>
          <div id="section-file" class="form-group mb-2">
            <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 class="small text-secondary" id="info-filesize">
            {!! \App\Http\Helper\Helper::getMaxFileSize(false, true) !!}
          </div>
        </div>

        <div class="mb-0">
          <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
            <span class="text-secondary text-uppercase fw-semibold list-form-sec-label">{{ __('app.action') }}</span>
            <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
              title="{{ __('app.action') }}" data-bs-content="{{ __('app.bulk_update_action_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="form-group">
            <select name="action" id="action" class="form-select" aria-label="{{ __('app.action') }}">
              <option value="active">{{ __('app.set_as_active') }}</option>
              <option value="inactive">{{ __('app.set_as_inactive') }}</option>
              <option value="confirmed">{{ __('app.set_as_confirmed') }}</option>
              <option value="unconfirmed">{{ __('app.set_as_unconfirmed') }}</option>
              <option value="subscribed">{{ __('app.set_as_subscribed') }}</option>
              <option value="unsubscribed">{{ __('app.set_as_unsubscribed') }}</option>
              <option value="verified">{{ __('app.set_as_verified') }}</option>
              <option value="unverified">{{ __('app.set_as_unverified') }}</option>
            </select>
          </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 id="btn-import" type="button" class="btn btn-primary btn-loading" onclick="importBulkUpdate(this.form);">
          <i class="bi bi-arrow-repeat me-1"></i>{{ __('app.update') }}
        </button>
      </div>
    </form>
  </div>
</div>
<span id="msg_update" data-value="{{ __('app.updated_successfully') }}"></span>