<style>
.choices__list--dropdown, .choices__list[aria-expanded] {
   z-index: 10000 !important; /* Below Choices.js but above other elements */
}
</style>
<script>
$('[data-bs-toggle="popover"]').popover({
    container: 'body'
});
</script>
<script src="{{asset('assets/js/app.js')}}"></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('custom_fields.store')}}" class="needs-validation" novalidate>
        @csrf
        <div class="modal-header">
          <h6 class="modal-title">{{__('app.add_new_custom_field')}}</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="col-md-12">
              <label class="form-label">{{__('app.name')}}</label>
              <input type="text" class="form-control" placeholder="{{__('app.name')}}" value="" name="name" required>
            </div>
            <div class="col-md-12 mt-3">
              <label class="form-label">{{__('app.default')}}
              <a tabindex="-1" role="button"
              data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.default')}}"
              data-bs-content="{{__('app.custom_field_default_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
              </a>
              </label>
              <input type="text" class="form-control" placeholder="{{__('app.default')}}" value="" name="default">
            </div>
            <div class="col-md-12 mt-3">
              <label class="form-label">{{__('app.required')}}
              <a tabindex="-1" role="button"
              data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.required')}}"
              data-bs-content="{{__('app.custom_field_required_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
              </a>
              </label>
              <select name="is_required" class="form-select form-select-lg">
                <option value="0">{{ __('app.no')}}</option>
                <option value="1">{{ __('app.yes') }}</option>                 
              </select>
           </div>
            <div class="col-md-12 mt-3">
              <label class="form-label">{{__('app.type')}}
              <a tabindex="-1" role="button"
              data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.type')}}"
              data-bs-content="{{__('app.custom_field_type_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
              </a>
              </label>
              <select name="type" id="type" class="single-select form-control">
               @foreach($custom_field_type as $type => $name)
               <option value="{{ $type }}">{{ $name }}</option>
               @endforeach
             </select>
           </div>
           <div class="col-md-12 mt-3" id="values" style="display:none;">
            <label class="form-label">{{__('app.values')}}</label>
            <textarea class="form-control" name="values" rows="4" placeholder="{{ __('app.custom_field_values_placeholder') }}"></textarea>
          </div>
          <div class="col-md-12 mt-3">
            <label class="form-label">{{__('app.lists')}}
              <a href="{{route('lists.create')}}" tabindex="-1">
                <i class="bi bi-plus-circle text-primary"></i>
              </a>
              <a tabindex="-1" role="button"
              data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="{{__('app.lists')}}"
              data-bs-content="{{__('app.custom_field_lists_help')}}" data-bs-custom-class="header-primary"><i class="bi bi-question-square text-primary"></i>
              </a>
            </label>
            @include('includes.dropdown_lists', ['popup' => 1, 'multiple' => 1])
          </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>