<template>
    <div class="input-group input-group-sm" v-on-clickaway="away">
        <input type="text" placeholder="Search Anything" v-model="search_text" class="form-control form-control-sm" @keyup.enter="search()" />
        <div class="input-group-append ">
            <button class="btn btn-outline-light btn-sm" @click="search">
                <i class="fas fa-search mr-1"></i>
            </button>
            <div v-if="show_search_results" class="dropdown-menu show pl-1 bg-light-gray overflow-auto" x-placement="bottom-start"
                style="position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform; max-height:400px; ">
                <center>
                    <div v-if="loading" class="spinner-grow text-dark" role="status">
                    <span class="sr-only">Loading...</span>
                    </div>
                </center>
                <!-- <span v-html="users_result_data"></span>
                <div class="dropdown-divider"></div> -->
                <span class="badge badge-pill badge-info">Proposals: {{ proposals_count}}</span>
                <span v-html="proposals_result_data"></span>
                <div class="dropdown-divider"></div>
                <span class="badge badge-pill badge-info">Estimates: {{ estimates_count}}</span>
                <span v-html="estimates_result_data"></span>
                <div class="dropdown-divider"></div>
                <span class="badge badge-pill badge-info">Invoices: {{ invoices_count}}</span>
                <span v-html="invoices_result_data"></span>
                <div class="dropdown-divider"></div>
                <span class="badge badge-pill badge-info">Leads: {{ leads_count}}</span>
                <span v-html="leads_result_data"></span>
                <div class="dropdown-divider"></div>
                <span class="badge badge-pill badge-info">Customers: {{ customers_count}}</span>
                <span v-html="customers_result_data"></span>
            </div>
        </div>
    </div>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
export default {
    mixins: [ clickaway ],
    name: 'GlobalSearch',
    data(){
        return {
            loading:false,
            search_text:'',
            show_search_results:false,
            users_result_data:'',
            users_count:0,
            proposals_result_data:'',
            proposals_count:0,
            estimates_result_data:'',
            estimates_count:0,
            invoices_result_data:'',
            invoices_count:0,
            customers_result_data:'',
            customers_count:0,
        }
    },
    mounted(){
        // console.log('global search comp mounted');
        // console.log(window.axios.defaults.baseURL);
        // console.log('routes route');
        // console.log(this.$route);
    },
    methods:{
        away: function() {
            this.loading=false;
            this.show_search_results = false;
            this.search_text = '';

            this.users_result_data = '';
            this.proposals_count = 0;
            this.proposals_result_data ='';
            this.proposals_count =0;
            this.estimates_result_data = '';
            this.estimates_count = 0;
            this.invoices_result_data = '';
            this.invoices_count = 0;
            this.leads_result_data = '';
            this.leads_count = 0;
            this.customers_result_data = '';
            this.customers_count = 0;
        },
        search(){
            if(this.search_text == ''){
                return alert('Please write some text to search!');
            }
            this.loading = true;
            this.show_search_results = true;
            axios.post('/api/v1/global_search',{
                search_text: this.search_text
            })
            .then((res) => {
                // const users = res.data.users.data.map(item => {
                //   return `<a class='dropdown-item' key='${item.id}' href='${item.id}'>${ item.name } - ${item.email}</a>`
                // })
                // this.users_result_data = users.join("");
                
                //++++++++ Proposals +++++++ 
                const proposal_url = `${window.axios.defaults.baseURL}/proposal/edit/`;
                const proposals = res.data.proposals.data.map(item => {
                  return `<a class='dropdown-item' key='${item.id}' href='${proposal_url}${item.id}'>${ item.subject }</a>`
                })
                this.proposals_count = res.data.proposals.count;
                this.proposals_result_data = proposals.join("");

                //++++++++ Estimates +++++++ 
                const estimate_url = `${window.axios.defaults.baseURL}/estimate/edit/`;
                const estimates = res.data.estimates.data.map(item => {
                  return `<a class='dropdown-item' key='${item.id}' href='${estimate_url}${item.id}'>${ item.estimate_title }</a>`
                })
                this.estimates_count = res.data.estimates.count;
                this.estimates_result_data = estimates.join("");

                //++++++++ invoices +++++++ 
                const invoice_url = `${window.axios.defaults.baseURL}/invoice/edit/`;
                const invoices = res.data.invoices.data.map(item => {
                  return `<a class='dropdown-item' key='${item.id}' href='${invoice_url}${item.id}'>${ item.invoice_title }</a>`
                })
                this.invoices_count = res.data.invoices.count;
                this.invoices_result_data = invoices.join("");

                //++++++++ leads +++++++ 
                const lead_url = `${window.axios.defaults.baseURL}/lead/show/`;
                const leads = res.data.leads.data.map(item => {
                  return `<a class='dropdown-item' key='${item.id}' href='${lead_url}${item.id}'>${ item.first_name } ${ item.last_name } - ${ item.company_name }</a>`
                })
                this.leads_count = res.data.leads.count;
                this.leads_result_data = leads.join("");

                //++++++++ customers +++++++ 
                const customer_url = `${window.axios.defaults.baseURL}/customer/show/`;
                const customers = res.data.customers.data.map(item => {
                  return `<a class='dropdown-item' key='${item.id}' href='${customer_url}${item.id}'>${ item.username } - ${ item.company_name }</a>`
                })
                this.customers_count = res.data.customers.count;
                this.customers_result_data = customers.join("");

                // ============================
                
                this.loading = false;
            });
        },
    }
}
</script>
