<template>
    <div class="row" @keyup.enter="fetchReport">
        <div class="col">
            <div class="row m-b-15">
                <div class="col-8 p-r-0">
                    <div class="row">
                        <div class="col p-r-0">
                            <div class="form-group no-margin form-group-default b-rad-none">
                                <label class="text-primary">Email</label>
                                <input type="text" class="form-control" v-model="email" />
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col p-l-0">
                    <div class="btn btn-primary b-rad-none" @click="fetchReport()">
                        <i class="fa fa-search lh-40"></i>
                    </div>
                    <div class="btn btn-secondary b-rad-none" @click="resetSearch()">
                        <i class="fa fa-remove lh-40"></i>
                    </div>
                </div>
            </div>
            <div class="row" v-if="search">
                <div class="col bg-white padding-25">
                    <p v-if="!userCompany">{{ message }}</p>
                    <loading-component v-if="isLoading"></loading-component>
                    <user-company-component v-if="userCompany" :data="userCompany"></user-company-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import LoadingComponent from "../../general/elements/LoadingComponent";
    export default {
        components: {LoadingComponent},
        data(){
            return {
                section: 'searchUserCompanyByEmailSection',
                isLoading: false,
                search: false,
                email: '',
                userCompany: null,
                message: 'Searching...'
            }
        },
        validations: {
            marking: {},
        },
        methods: {
            fetchReport(){
                this.isLoading = true;
                this.search = true;
                this.userCompany = null;
                this.message = 'Searching...';
                this.submit(route('api.account.user.company', this.email), 'get', this.section, false, false);
            },
            successHandler(response){
                this.isLoading = false;
                this.report = response.payload.data;
                if(response.payload.data != undefined)
                    this.userCompany = response.payload.data;
                else
                    this.message = 'Customer not found';
            },
            errorHandler(response){
                this.isLoading = false;
                this.userCompany = null;
                this.message = 'Customer not found';
            },
            resetSearch() {
                this.userCompany = null;
                this.search = false;
                this.email = '';
                message: 'Searching...';
            }
        }
    }
</script>
