<template>
    <div class="card no-border bg-transparent">
        <div  class="card-img-top hide text-center bg-white m-b-10 profile-picture" style="background-image: url(http://www.990wbob.com/uploads/1/0/2/5/10259617/659383134_orig.png);"></div>
        <div class="card-body bg-white">
            <div class="row">
                <div class="col">
                    <h6 class="card-title bold m-t-0 text-primary">{{this.company.marking}}</h6>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <p class="m-b-0 bold">{{this.company.name}}</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <small class="muted fs-12">{{this.company.street_one || ''}} {{ this.company.street_two || '' }} {{this.company.city || '' }} {{this.company.post_code || ''}} {{this.company.state || ''}} {{this.company.country || ''}}</small>
                </div>
            </div>
            <div class="row no-margin">
                <div class="col">
                    <div class="row m-t-15 p-t-5 p-b-5 b-t b-b b-grey">
                        <div class="col p-l-0">
                            <small class="muted fs-9 all-caps">Registration No:</small>
                        </div>
                        <div class="col-auto p-r-0">
                            <small v-if="this.company.registration_no !==''" class="muted fs-10 bold">{{this.company.registration_no}}</small>
                            <small v-else class="muted fs-8 hint-text">Empty</small>
                        </div>
                    </div>
                    <div class="row p-t-5 p-b-5 b-b b-grey">
                        <div class="col p-l-0">
                            <small class="muted fs-9 all-caps">Tax No:</small>
                        </div>
                        <div class="col-auto p-r-0">
                            <small v-if="this.company.tax_no !==''" class="muted fs-10 bold">{{this.company.tax_no}}</small>
                            <small v-else class="muted fs-8 hint-text">Empty</small>
                        </div>
                    </div>
                    <div class="row p-t-5 p-b-5">
                        <div class="col p-l-0">
                            <small class="muted fs-9 all-caps">Email:</small>
                        </div>
                        <div class="col-auto p-r-0">
                            <small v-if="this.company.email !==''" class="muted fs-10 bold">{{this.company.email}}</small>
                            <small v-else class="muted fs-8 hint-text">Empty</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['data'],
        data() {
            return {
                companyId: this.data,
                company: {},
                isEditing: false
            }
        },
        created(){
            this.fetchCompany();
        },
        mounted() {
            Event.$on('collapseEdit', () => {
                this.closeEdit();
            });
        },
        methods: {
            fetchCompany(){
                fetch(route('api.company.profile', {'id': this.companyId})).then(response => response.json())
                    .then(response => {
                        this.company = response.data;
                    })
                    .catch(error => console.log(error))
            },
            closeEdit(){
                this.isEditing = false;
            },
            toggleEdit(){
                Event.$emit('collapseEdit');
                this.isEditing = !this.isEditing;
            }
        }
    }
</script>