<template>
    <div class="row align-items-center justify-content-center p-b-20">
        <div class="col">
            <div class="row">
                <div class="col p-r-0">
                    <div class="row">
                        <div class="col p-r-0">
                            <input type="text" class="form-control no-border" v-model="query" @keyup="search()" :placeholder="placeholder" id="icon-filter" name="icon-filter" autocomplete="off">
                        </div>
                        <div class="col-auto bg-white pointer" @click="closeSearch()">
                            <i class="fa fa-times fs-10 muted lh-35"></i>
                        </div>
                    </div>
                    <div class="row no-margin" :class="{'hide': !isActive}">
                        <div class="col b-t b-grey no-padding absolute w-100 bg-white" style="z-index: 999; box-shadow: 0px 1px 8px -4px rgba(0,0,0,0.75);">
                            <div class="row no-margin b-b b-grey" v-for="result in results" v-bind:key="result.id">
                                <div class="col">
                                    <a :href="route('companies.profile', {companyId: result.id})">
                                        <div class="row bold align-items-center p-t-10 p-b-10 ">
                                            <div class="col-3 p-r-10">
                                                <div class="block p-l-10 p-r-10 p-t-5 p-b-5 bg-master text-white fs-9 b-rad-none text-center">
                                                    {{result.marking}}
                                                </div>
                                            </div>
                                            <div class="col p-l-0 fs-10">{{result.name}}</div>
                                        </div>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <!--<div class="text-success fs-12 bold">Advanced Search</div>-->
        </div>
        <div class="col-1"></div>
    </div>
</template>
<script>
    export default {
        props: {
            'placeholder': {
                type: String,
                default: "Search user or group"
            }
        },
        data(){
            return {
                query: "",
                results: [],
                isActive: false
            }
        },
        methods: {
            route: route,
            search(){
                if(this.query.length > 2 ){
                    fetch(route('api.company.search') + '?query=' + this.query).then(response => response.json())
                        .then(response => {
                            this.results = response.data;
                            this.isActive = true;
                        })
                        .catch(error => console.log(error))

                } else {
                    this.isActive = false;
                }
            },
            closeSearch(){
                this.query = '';
                this.isActive = false;
            },
        }
    }
</script>