<template>
    <div class="card no-border bg-transparent">
        <div class="card-body bg-white">
            <div class="row">
                <div class="col">
                    <h6 class="card-title bold m-t-0"><i class="fa fa-cubes fs-16 m-r-5 hint-text"></i>{{this.warehouse.name}}</h6>
                </div>
            </div>
            <div class="row">
                <div class="col text-justify">
                    <small class="muted">{{this.warehouse.street_one}} {{this.warehouse.street_two}}, {{this.warehouse.city}}, {{this.warehouse.state}}, {{this.warehouse.post_code}}, {{this.warehouse.country}}</small>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['data'],
        data() {
            return {
                warehouseId: this.data,
                warehouse: {}
            }
        },
        created(){
            this.fetchWarehouse();
        },
        methods: {
            fetchWarehouse(){
                fetch(route('api.warehouse.profile', {'id': this.warehouseId})).then(response => response.json())
                    .then(response => {
                        this.warehouse = response.data;
                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>