@props(['init'=>'','route'=>''])


@php

    if(isset($attributes['url']) && $attributes['url'] !=''){
        $init = "initWithURL()";
        $route = $attributes['url'];
    }else{
        $init="initWOURL()";
        $route="";
    }

@endphp

<div class="{{$attributes['class']}}">
    <label class=" text-black text-bold">{!! $attributes['label'] !!}</label>
    <select id="{{$attributes['id']}}" name="{!! $attributes['name'] !!}">
        {{$slot}}
    </select>
</div>
@push('scripts')
    <script>
        @if($attributes['url'])
        $('#{{$attributes['id']}}').select2({
            placeholder: '-',
            allowClear: true,
            escapeMarkup: function(markup) {
                return markup;
            },
            templateResult: function(data) {
                return data.text;
            },
            templateSelection: function(data) {
                return data.text;
            },
            ajax: {
                url: '{{$attributes['url']}}',
                dataType: 'json',

                data: function (params) {
                    var query = {
                        s: params.term,
                        page: params.page || 1
                    };
                    return query;
                },
                processResults: function (data) {
                    console.log(data.data)
                    return {
                        results: $.map(data.data, function (item, index) {
                            return {
                                text: '<i class="mdi mdi-24px mdi-' + item['{{$attributes['key-text']}}'] + '"></i> '+ item['{{$attributes['key-text']}}'],
                                id: item['{{$attributes['key-id']}}'],
                            }
                        }),
                        pagination: {
                            more: data.next_page_url != null
                        }
                    };
                }
            }

        })

        @else
        $('#{{$attributes['id']}}').select2({})
        @endif
    </script>
@endpush