{{-- Popovers: app.js viewModal → initBootstrapPopoversIn. Growth rate: native form-select like custom-field #type (initWarmupPlanGrowthNativeInModal). --}}
<style>
.popover {
  z-index: 9999 !important;
}
</style>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg warmup-plan-modal">
  <div class="modal-content border-0 shadow">
    <form id="frm-group" method="post" action="{{route('warmup_plans.store')}}" 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-graph-up-arrow fs-20"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.add_new_warmup_plan') }}</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-md-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{__('app.name')}}</label>
                  <input type="text" class="form-control" placeholder="{{__('app.name')}}" value="{{ old('name') }}" name="name" required>
                  <div class="invalid-feedback">{{__('app.name_required')}}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="mb-0">
            <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.plan_configuration') }}</div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{ __('app.total_emails') }}
                    <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
                      title="{{ __('app.total_emails') }}" data-bs-content="{{ __('app.warmup_plans_total_emails_help') }}"
                      data-bs-custom-class="header-primary" class="text-primary lh-1 p-0">
                      <i class="bi bi-question-circle" aria-hidden="true"></i>
                    </a>
                  </label>
                  <input type="number" class="form-control" placeholder="{{__('app.total_emails')}}" value="{{ old('total_emails') }}" name="total_emails" min="0" required>
                  <div class="invalid-feedback">{{__('app.total_emails_required')}}</div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label class="form-label fw-semibold mt-2">{{ __('app.growth') }}
                    <a tabindex="-1" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left"
                      title="{{ __('app.growth') }}" data-bs-content="{{ __('app.warmup_plans_growth_help') }}"
                      data-bs-custom-class="header-primary" class="text-primary lh-1 p-0">
                      <i class="bi bi-question-circle" aria-hidden="true"></i>
                    </a>
                  </label>
                  <select name="growth_factor" id="growth_factor" class="form-select" aria-label="{{ __('app.growth') }}">
                    @foreach($growthFactors as $type => $name)
                      <option value="{{ $type }}" {{ old('growth_factor') == $type ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                  </select>
                  <div class="invalid-feedback">{{__('app.growth_required')}}</div>
                </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">
          <i class="bi bi-check-lg me-1"></i>{{ __('app.create') }}
        </button>
      </div>
    </form>
  </div>
</div>