<?php if(isset($attribute)): ?>
    <?php
        $lookUpEntityData = app('Webkul\Attribute\Repositories\AttributeRepository')
            ->getLookUpEntity($attribute->lookup_type, old($attribute->code) ?: $value);
    ?>

    <lookup-component :attribute='<?php echo json_encode($attribute, 15, 512) ?>' :validations="'<?php echo e($validations); ?>'" :data='<?php echo json_encode($lookUpEntityData, 15, 512) ?>'></lookup-component>
<?php endif; ?>

<?php if (! $__env->hasRenderedOnce('1bf8ecbd-d8ee-4d65-aed2-84587870f111')): $__env->markAsRenderedOnce('1bf8ecbd-d8ee-4d65-aed2-84587870f111'); ?>
    <?php $__env->startPush('scripts'); ?>

        <script type="text/x-template" id="lookup-component-template">
            <div class="lookup-control">
                <div class="form-group" style="margin-bottom: 0">
                    <input
                        type="text"
                        :name="attribute['code']"
                        class="control"
                        :id="attribute['code']"
                        :for="attribute['code']"
                        placeholder="<?php echo e(__('admin::app.common.start-typing')); ?>"
                        autocomplete="off"
                        v-model="search_term"
                        v-validate="validations"
                        :data-vv-as="attribute['name']"
                        v-on:keyup="search"
                    >

                    <input
                        type="hidden"
                        :name="attribute['code']"
                        v-model="entity_id"
                        v-validate="validations"
                        :data-vv-as="attribute['name']"
                    />

                    <div class="lookup-results" v-if="state == ''">
                        <ul>
                            <li v-for='(result, index) in results' @click="addLookUp(result)">
                                <span>{{ result.name }}</span>
                            </li>

                            <li v-if='! results.length && search_term.length && ! is_searching'>
                                <span><?php echo e(__('admin::app.common.no-result-found')); ?></span>
                            </li>
                        </ul>
                    </div>

                    <i class="icon loader-active-icon" v-if="is_searching"></i>
                </div>
            </div>
        </script>

        <script>
            Vue.component('lookup-component', {

                template: '#lookup-component-template',

                props: ['validations', 'attribute', 'searchRoute', 'data'],

                inject: ['$validator'],

                data: function () {
                    return {
                        search_term: this.data ? this.data['name'] : '',

                        entity_id: this.data ? this.data['id'] : '',

                        is_searching: false,

                        state: this.data ? 'old' : '',

                        results: [],

                        search_route: this.searchRoute ?? `<?php echo e(route('admin.settings.attributes.lookup')); ?>/${this.attribute.lookup_type}`,
                    }
                },

                watch: { 
                    data: function(newVal, oldVal) {
                        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
                            this.search_term = newVal ? newVal['name'] : '';

                            this.entity_id = newVal ? newVal['id'] : '';

                            this.state = newVal ? 'old' : '';
                        }
                    }
                },

                mounted: function () {
                    if (this.data && typeof this.data == 'string') {
                        this.getLookUpEntity();
                    }
                },

                methods: {
                    search: debounce(function () {
                        this.state = '';

                        this.entity_id = null;

                        this.is_searching = true;

                        if (this.search_term.length < 2) {
                            this.results = [];

                            this.is_searching = false;

                            return;
                        }

                        this.$http.get(this.search_route, {params: {query: this.search_term}})
                            .then (response => {
                                this.results = response.data;

                                this.is_searching = false;
                            })
                            .catch (error => {
                                this.is_searching = false;
                            })
                    }, 500),

                    addLookUp: function(result) {
                        this.state = 'old';

                        this.entity_id = result['id'];

                        this.search_term = result['name'];

                        eventBus.$emit('lookup-added', result);
                    },

                    createNew: function() {
                        this.state = 'new';

                        this.entity_id = null;
                    },

                    getLookUpEntity: function() {
                        this.$http.get("<?php echo e(route('admin.settings.attributes.lookup_entity')); ?>/" + this.attribute.lookup_type, {params: {query: this.data}})
                            .then (response => {
                                this.entity_id = response.data['id']

                                this.search_term = response.data['name']
                            })
                            .catch (error => {
                            })
                    }
                }
            });
        </script>
        
    <?php $__env->stopPush(); ?>
<?php endif; ?><?php /**PATH C:\xampp\htdocs\laravel-crm\packages\Webkul\Admin\src/resources/views/common/custom-attributes/edit/lookup.blade.php ENDPATH**/ ?>