<template>
    <div class="panel">
        <div class="row m-t-30">
            <div class="col-3">
                <warehouse-summary-component :data="warehouseId"></warehouse-summary-component>
                <div class="row no-margin">
                    <div class="col">
                        <ul class="nav" role="tablist">
                            <li class="full-width side-tab">
                                <a href="#orders" class="active" data-toggle="tab" role="tab">
                                    <div class="row m-b-10">
                                        <div class="col">
                                            <div class="row p-b-10 p-t-10 bg-white tab-container">
                                                <div class="col text-master">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col-auto p-r-0">
                                                            <div class="btn-rounded bg-primary text-center text-white" style="width: 30px; height: 30px;">
                                                                <i class="fa fa-cube fs-12 lh-30"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            Manage Orders
                                                        </div>
                                                        <div class="col-auto">
                                                            <i class="fa fa-angle-right fs-14 lh-25"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="full-width side-tab">
                                <a href="#profile" data-toggle="tab" role="tab">
                                    <div class="row m-b-10">
                                        <div class="col">
                                            <div class="row p-b-10 p-t-10 bg-white tab-container">
                                                <div class="col text-master">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col-auto p-r-0">
                                                            <div class="btn-rounded bg-warning text-center text-white" style="width: 30px; height: 30px;">
                                                                <i class="fa fa-cubes fs-12 lh-30"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            Manage Warehouse
                                                        </div>
                                                        <div class="col-auto">
                                                            <i class="fa fa-angle-right fs-12 lh-25"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-7">
                <div class="card no-border bg-transparent">
                    <div class="tab-content bg-transparent p-l-0 p-r-0">
                        <div class="tab-pane active" id="orders">
                            <ul class="nav nav-tabs nav-tabs-simple" role="tablist" data-init-reponsive-tabs="dropdownfx">
                                <li>
                                    <a class="active" data-toggle="tab" href="#receive">
                                        To Receive
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#ship">
                                        To Ship
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#complete">
                                        Complete
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#rejected">
                                        Rejected
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content bg-transparent p-l-0 p-r-0">
                                <div class="tab-pane active" id="receive">
                                    <orders-list-component :id="warehouseId" type="warehouse" category="receiving"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="ship">
                                    <orders-list-component :id="warehouseId" type="warehouse" category="shipping"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="complete">
                                    <orders-list-component :id="warehouseId" type="warehouse" category="complete"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="rejected">

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="profile">
                            <ul class="nav nav-tabs nav-tabs-simple" role="tablist" data-init-reponsive-tabs="dropdownfx">
                                <li>
                                    <a class="active" data-toggle="tab" href="#about">
                                        About
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#contacts">
                                        Contacts
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content bg-transparent p-l-0 p-r-0">
                                <div class="tab-pane active" id="about">
                                    <warehouse-form-component v-if="warehouse !== null" :data="warehouse"></warehouse-form-component>
                                </div>
                                <div class="tab-pane" id="contacts">
                                    <contact-list-component :data="initContacts()"></contact-list-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="row m-b-15 parentContainer">
                    <div class="col">
                        <a :href="route('order.bulk.receive_note', {warehouseId: warehouseId})" class="btn btn-sm btn-block btn-primary b-rad-none all-caps fs-10 bold p-t-10 p-b-10 requestModal">Warehouse List</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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