@php

@endphp

<div class="row w-100 m-auto">
    <div class="form-group col">
        <label class="control-label" for="input-cities">
            {{ __('cities.cities') }}
            ({{ __('cities.search_for_city') }})
        </label>
        <div class="">
            <input type="text" name="cities_input" value="" placeholder="{{ __('cities.search_for_city') }}"
                   id="input-cities" class="form-control {{ $errors->has('cities') ? 'is-invalid' : '' }}" />
            <div id="cities_wrapper" class="card mt-2 autocomplete-card autocomplete-items-wrapper">
                @if(isset($selectedCities))
                    @foreach($selectedCities as $city)
                        <div id="cities_item_{{ $city['id'] }}">
                            <i class="fa fa-minus-circle"></i>
                            {{ $city['currentDescription']['title'] ?? "" }}
                            <input type="hidden" name="cities[]" value="{{ $city['id'] }}" />
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
    <!-- end cities -->
</div> <!-- end of row -->

@push('stack_scripts')
    <script>
        let citiesInput = $('input[name=\'cities_input\']');
        citiesInput.autocomplete({
            'source': function (request, response) {
                let form = citiesInput.closest('form');

                $.ajax({
                    url: '{{ route('cities.search') }}',
                    data: $('input[name!=_method]', form).serialize() + '&search_name=' + request['term'] , // + '&role=user'
                    dataType: 'json',
                    type: 'post',
                    success: function (json) {
                        response($.map(json['items'], function (item) {
                            return {
                                label: item['name'],
                                value: item['name'],
                                id: item['id']
                            }
                        }));
                    }
                });
            }, 'select': function (e, selected) {
                let item = selected['item'];
                $('#cities_item_' + item['id']).remove();
                $('#cities_wrapper').append('<div id="cities_item_' + item['id'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="cities[]" value="' + item['id'] + '" /></div>');
                $(this).val('');return false;
            }
        });
        $('#cities_wrapper').delegate('.fa-minus-circle', 'click', function () {
            $(this).parent().remove();
        });
    </script>
@endpush