<script src="{{asset('assets/js/app.js')}}"></script>
<script>
$('[data-bs-toggle="popover"]').popover({
    container: 'body'
});
</script>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <form id="frm-group" method="post" action="{{route('tracking_domains.store')}}" class="needs-validation" novalidate>
        @csrf
        <div class="modal-header">
          <h6 class="modal-title">{{__('app.add_new_tracking_domain')}}</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{__('app.close')}}"></button>
        </div>
        <div class="modal-body">
          <div class="box-body">
            <div class="row">
            <div class="col-md-3">
              <label class="form-label">{{__('app.protocol')}}</label>
              <select name="protocol" class="form-select form-select-lg">
                 <option value="https://">https://</option>
                 <option value="http://">http://</option>
              </select>
            </div>
            <div class="col-md-9">
              <label class="form-label">{{__('app.domain')}}</label>
              <input type="text" class="form-control" placeholder="track.example.com" value="" name="domain" required>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 mt-3">
              <label class="form-label">{{__('app.active')}}</label>
              <select name="is_active" class="form-select form-select-lg">
                 <option value="1">{{ __('app.yes')}}</option>
                 <option value="0">{{ __('app.no') }}</option>
              </select>
            </div>
            <div class="col-md-4 mt-3">
              <label class="form-label">{{__('app.verified')}}
              <a tabindex="-1" role="button"
              data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.verified')}}"
              data-bs-content="{{__('app.domain_verified_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
              </a>
              </label>
              <select name="is_verified" class="form-select form-select-lg">
                 <option value="0">{{ __('app.no')}}</option>
                 <option value="1">{{ __('app.yes') }}</option>
              </select>
            </div>
            <div class="col-md-4 mt-3">
              <label class="form-label">{{__('app.auto_verification')}}
              <a tabindex="-1" role="button"
          data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.auto_verification')}}"
          data-bs-content="{{__('app.domain_auto_verfication_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
          </a></label>
              <select name="auto_verification" class="form-select form-select-lg">
                 <option value="0">{{ __('app.no')}}</option>
                 <option value="1">{{ __('app.yes') }}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{__('app.close')}}</button>
        <button type="submit" class="btn btn-primary btn-loading"><i class=""></i> {{__('app.create')}}</button>
      </div>
    </form>
  </div>
</div>