@push('css')
    <style>
        .ui-autocomplete
        {
            display: block;
            z-index: 99999999999999999999
        }
    </style>
    @endpush


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <form  action="{{route('admin.research.choose.admin')}}" method="post" class="form-horizontal"
                           enctype="multipart/form-data" id="demo-form" data-parsley-validate="">

                        @csrf
                        <div class="box-body">

                            <input type="hidden" name="research_id" id="research_id">
                            <input type="hidden" name="type" id="type">
                            <div class="form-group row ">
                                <label class="col-sm-2 col-form-label">
                                    {{__('admin.Editor')}} </label>
                                <div class="col-sm-8">
                                    {{--<select class="form-control select2" name="admin_id" id="search" data-live-search="true">--}}

                                    {{--</select>--}}
                                    <input type='text' class="form-control" id='autocomplete'>
                                    <input type='hidden' name="admin_id" id='admin_id' >
                                    @if ($errors->has('admin_id'))
                                        <span class="text-danger ">
                                    <strong>{{ $errors->first('admin_id') }}</strong>
                            </span>
                                    @endif
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('admin.Close')}}</button>
                            <button type="submit" class="btn btn-primary">{{__('admin.Save changes')}}</button>
                        </div>
                    </form>

                </div>

            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('send invitation to other researches')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <form  action="{{route('admin.research.mail')}}" method="post" class="form-horizontal"
                           enctype="multipart/form-data" id="demo-form" data-parsley-validate="">
                        @csrf
                        <div class="box-body">

                            <input type="hidden" name="research_id" id="research_id3">
                            <input type="hidden" name="type" id="type" value="research">
                            <div class="form-group row ">
                                <label class="col-sm-3 col-form-label">
                                    {{__('send mail')}}  </label>
                                <div class="col-sm-9">
                                    <input type="email" name="email" class="form-control">
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('admin.Close')}}</button>
                            <button type="submit" class="btn btn-primary">{{__('admin.Save changes')}}</button>

                        </div>
                    </form>

                </div>

            </div>

        </div>
    </div>
</div>

@push('scripts')
<script type="text/javascript">
    $('body').ready(function() {

        $( "#autocomplete" ).autocomplete({
            source: function( request, response ) {
                // Fetch data
                $.ajax({
                    url: "{{ route('admin.research.autoCompleteAdmin') }}",
                    type: 'get',
                    dataType: "json",
                    data: {
                        q: request.term,
                        type: 'editor'
                    },
                    success: function( data ) {


                        response($.map(data , function (key,el) {
                            return {
                                label: el,
                                value: key
                            };
                        }));
                    }
                });
            },
            select: function (event, ui) {
                event.preventDefault();
                // Set selection
                $('#autocomplete').val(ui.item.label); // display the selected text
                $('#admin_id').val(ui.item.value); // save selected id to input
                return false;
            },
        })


        <!--$('#search').select2({-->
            <!--placeholder: 'Search for Editor',-->
            <!--allowClear: true,-->
            <!--minimumInputLength: 1,-->
            <!--tags: true,-->
            <!--ajax: {-->
                <!--url: "{{ route('admin.research.autoCompleteAdmin') }}",-->

                <!--data: function (params) {-->
                    <!--var query = {-->
                        <!--q: params.term,-->
                        <!--type: '{{request()->type}}'-->
                    <!--}-->
                    <!--console.log(query)-->
                    <!--return query;-->
                <!--},-->

                <!--dataType: 'json',-->
                <!--delay: 250,-->
                <!--processResults: function (data) {-->
                    <!--return {-->
                        <!--results: $.map(data, function (item) {-->
                            <!--console.log(item);-->

                            <!--return {-->
                                <!--text: item.name,-->
                                <!--id: item.id,-->
                            <!--}-->
                        <!--})-->
                    <!--};-->
                <!--},-->
                <!--cache: true,-->
            <!--}-->


        <!--});-->
    });
</script>
@endpush