<template>
    <div class="row m-b-10 parentContainer ">
        <div class="col m-b-5">
            <div class="row bg-white no-margin p-b-10">
                <div class="col-3 b-t b-info" style="border-top-width: 2px;"></div>
                <div class="col b-t b-grey" style="border-top-width: 2px;"></div>
            </div>
            <div class="row bg-white no-margin align-items-center justify-content-center p-b-10">
                <div class="col ">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="semi-bold">
                                        <span class="fs-12 bold text-info">{{this.warehouse.name}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <small class="muted fs-9">{{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>
                </div>
                <div class="col-auto">
                    <div class="row h-100">
                        <div class="col">
                            <div class="row no-margin">
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest m-r-5">
                                    <a class="pointer" @click='toggleEdit()' v-show="!isEditing">
                                        <div class="row link align-items-center justify-content-center h-100" data-toggle="tooltip" title="Edit" data-placement="bottom">
                                            <div class="col">
                                                <i class="fa fa-pencil text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="pointer" @click='closeEdit()' v-show="isEditing">
                                        <div class="row link align-items-center justify-content-center h-100" data-toggle="tooltip" title="Edit" data-placement="bottom">
                                            <div class="col">
                                                <i class="fa fa-times text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-auto text-right p-t-10 p-b-10 m-r-5 bg-master-lightest">
                                    <a :href="route('warehouses.profile', {warehouseId: this.warehouse.id})">
                                        <div class="row link align-items-center justify-content-center h-100" data-toggle="tooltip" title="Manage" data-placement="bottom">
                                            <div class="col">
                                                <i class="fa fa-chevron-right text-master-dark"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row bg-white no-margin">
                <div class="col no-padding">
                    <slide-up-down :active="isEditing" ref="upDown" :duration="700">
                        <warehouse-form-component class="padding-15 b-t b-grey" v-on:collapseEdit="closeEdit()" v-on:updateLayout="resizeSlider()" :data="this.warehouse"></warehouse-form-component>
                    </slide-up-down>
                </div>
            </div>
            <confirm-modal-component
                    title="Remove Warehouse"
                    :message="'Are you sure you want to remove <strong>'+warehouse.name+'</strong>?'"
                    type="delete"
                    danger
                    v-on:confirm="deleteWompany()"></confirm-modal-component>
        </div>
    </div>
    <!--<div class="row parentContainer">-->
        <!--<div class="col m-b-5">-->
            <!--<div class="row bg-white no-margin">-->
                <!--<div class="col p-b-15">-->
                    <!--<div class="row p-b-15">-->
                        <!--<div class="col-5 b-t b-complete" style="border-top-width: 2px;"></div>-->
                        <!--<div class="col b-t b-grey" style="border-top-width: 2px;"></div>-->
                    <!--</div>-->
                    <!--<div class="row">-->
                        <!--<div class="col">-->
                            <!--<div class="row m-b-5">-->
                                <!--<div class="col">-->
                                    <!--<div class="row">-->
                                        <!--<div class="col-auto">-->
                                            <!--<p class="fs-12 semi-bold no-margin bold b-b b-grey p-r-20 p-b-5"><i class="fa fa-cubes fs-16 m-r-5 hint-text"></i>{{this.warehouse.name}}</p>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="row">-->
                                <!--<div class="col">-->
                                    <!--<small class="muted fs-9"><i class="fa fa-envelope-open-o m-r-5"></i>{{this.warehouse.email}}</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="row">-->
                                <!--<div class="col muted ellipsis-line-2">-->
                                    <!--<small class="muted fs-9"><i class="fa fa-map-marker m-r-5"></i>{{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 class="row m-t-10">-->
                                <!--<div class="col">-->
                                    <!--<button class="btn btn-xs b-rad-none btn-default requestModal"  data-type="edit"><i class="fa fa-pencil fs-10 text-info link hint-text pointer"></i></button>-->
                                <!--</div>-->
                                <!--<div class="col-auto">-->
                                    <!--<a :href="route('warehouses.profile', {warehouseId: this.warehouse.id})">-->
                                        <!--<button class="btn btn-xs b-rad-none btn-default"><i class="fa fa-chevron-right fs-10 text-master link hint-text pointer"></i></button>-->
                                    <!--</a>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="row bg-white no-margin">-->
                <!--<div class="col no-padding">-->
                    <!--<slide-up-down :active="isEditing" :duration="700">-->
                        <!--<warehouse-form-component v-on:collapseEdit="closeEdit()" :data="this.warehouse"></warehouse-form-component>-->
                    <!--</slide-up-down>-->
                <!--</div>-->
            <!--</div>-->
            <!--<modal-component type="edit">-->
                <!--<warehouse-form-component v-on:collapseEdit="closeEdit()" :data="this.warehouse"></warehouse-form-component>-->
            <!--</modal-component>-->
            <!--<confirm-modal-component-->
                    <!--title="Remove Warehouse"-->
                    <!--:message="'Are you sure you want to remove <strong>'+warehouse.name+'</strong>?'"-->
                    <!--type="delete"-->
                    <!--danger-->
                    <!--v-on:confirm="deleteWarehouse()"></confirm-modal-component>-->
        <!--</div>-->
    <!--</div>-->
</template>

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