<template>
    <div class="col">
        <div class="row">
            <div class="col p-r-15 p-l-0">
                <div class="row m-b-10">
                    <div class="col">
                        <div class="row p-b-5 p-t-5 bg-white tab-container">
                            <div class="col text-master">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col all-caps fs-12">
                                        <input type="text" class="form-control no-border" v-model="query" @keyup="search()" placeholder="Order No" id="icon-filter" name="icon-filter">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row m-b-10">
                    <div class="col">
                        <div class="row p-b-5 p-t-5 bg-white tab-container">
                            <div class="col text-master">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col all-caps fs-7">
                                        <date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
                                    </div>
                                    <div class="col-1 all-caps">
                                        <strong>-</strong>
                                    </div>
                                    <div class="col all-caps fs-6">
                                        <date-picker-component class="no-border" placeholder="Start Date"></date-picker-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row m-b-10">
                    <div class="col">
                        <div class="row p-b-5 p-t-5 bg-white tab-container">
                            <div class="col text-master">
                                <div class="row align-items-center justify-content-center">
                                    <div class="col all-caps fs-6">
                                        <select class="form-control no-border muted" v-model="selected">
                                            <option disabled value="">Search By Status</option>
                                            <option v-bind:value="{ string: Processing }">Processing</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="col-auto">-->
    <!--&lt;!&ndash;<div class="text-success fs-12 bold">Advanced Search</div>&ndash;&gt;-->
    <!--</div>-->
    <!--<div class="col-1"></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>
