<template>
    <div class="panel">
        <div class="row m-t-30">
            <div class="col-3">
                <div class="row">
                    <div class="col">
                        <company-summary-component :data="companyId"></company-summary-component>
                    </div>
                </div>
                <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-5 p-t-5 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 all-caps fs-12">
                                                            My 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="#address-book" data-toggle="tab" role="tab">
                                    <div class="row m-b-10">
                                        <div class="col">
                                            <div class="row p-b-5 p-t-5 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-complete text-center text-white" style="width: 30px; height: 30px;">
                                                                <i class="fa fa-book fs-12 lh-30"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col all-caps fs-12">
                                                            Delivery Addresses
                                                        </div>
                                                        <div class="col-auto">
                                                            <i class="fa fa-angle-right fs-12 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-5 p-t-5 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 all-caps fs-12">
                                                            Manage Company
                                                        </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-9">
                <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="#processing">
                                        Processing
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#ship">
                                        To Ship
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#receive">
                                        To Receive
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#complete">
                                        Complete
                                    </a>
                                </li>
                                <li class="ml-auto">
                                    <div class="row h-100 parentContainer">
                                        <div class="col">
                                            <button class="btn btn-xs btn-primary b-rad-none no-border h-100 fs-11 all-caps semi-bold p-l-20 p-r-20 requestModal"  data-type="newOrder">Create new order</button>
                                            <modal-component type="newOrder">
                                                <order-form-component :data="companyId"></order-form-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="tab-content bg-transparent p-l-0 p-r-0">
                                <div class="tab-pane active" id="processing">
                                    <orders-list-component :id="companyId" type="company" category="processing"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="ship">
                                    <orders-list-component :id="companyId" type="company" category="shipping"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="receive">
                                    <orders-list-component :id="companyId" type="company" category="receiving"></orders-list-component>
                                </div>
                                <div class="tab-pane" id="complete">
                                    <orders-list-component :id="companyId" type="company" category="complete"></orders-list-component>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="address-book">
                            <address-book-list-component :data="companyId"></address-book-list-component>
                        </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">
                                    <company-form-component v-if="company !== null" :data="company"></company-form-component>
                                </div>
                                <div class="tab-pane" id="contacts">
                                    <!--<contact-list-component :data="initContacts()"></contact-list-component>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['data'],
        data() {
            return {
                companyId: this.data,
                company: null
            }
        },
        created(){
            this.fetchCompany();
        },
        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))
            },
            initContacts(){
                return {
                    'type': 'company',
                    'reference': this.company_id
                }
            }
        }
    }
</script>