<template>


    <section class="ctaTabs membersTabs <!-- dashBoardTabs -->">

        <div class="ctaTabsWrap">

            <div class="ctaTabsNav">

                <ul>
                    <li v-for="(tab, tabIndex) in tabs">
                        <button
                                type="button"
                                v-html="tab.label"
                                :class="[tabIndex == active_tab_index ? 'activeTab' : '']"
                                @click.prevent="setActiveTab(tabIndex)"
                        ></button>
                    </li>
                </ul>

                <div class="selectWrap row">
                    <div class="inputWrap">
                        <select
                                class="no-chosen"
                                v-model="active_tab_index"
                        >
                            <option
                                    v-for="(tab, tabIndex) in tabs"
                                    v-html="tab.label"
                                    :value="tabIndex"
                                    :selected="tab.is_active"
                            ></option>
                        </select>
                    </div> <!-- .inputWrap -->
                </div> <!-- .selectWrap -->

            </div> <!-- .categoryTabsNav -->


            <div class="tabContentWrapper">

                <div v-for="(tab, tabIndex) in tabs" class="ctaTabContent" :class="[tabIndex == active_tab_index ? 'showBox' : '']">

                    <div class="orderList">

                        <ul v-if="tab.data.length">
                            <li v-for="order in tab.data">

                                <div class="orderBox nhsOrderBox">

                                    <div class="orderHeader">


                                        <div class="innerOrderHeader">

                                            <div class="orderDate headerCol">
                                                <span class="headerLabel">Member</span>
                                                <span class="headerData" v-text="order.member_display_id" ></span>
                                            </div><!-- .orderDate -->

                                            <div class="orderDate headerCol">
                                                <span class="headerLabel">Status</span>
                                                <span class="headerData" v-text="order.status_label"></span>
                                            </div><!-- .orderDate -->

                                            <div class="orderDate headerCol">
                                                <span class="headerLabel">NHS Number</span>
                                                <span class="headerData" v-text="order.nhs_member.nhs_number || '-'" ></span>
                                            </div><!-- .orderDate -->

                                            <div class="orderDate headerCol">
                                                <span class="headerLabel">Last updated at</span>
                                                <span class="headerData" v-text="order.updated_at"></span>
                                            </div><!-- .orderDate -->

                                        </div><!-- .innerOrderHeader -->

                                    </div><!-- .orderHeader -->


                                    <div class="orderBody">
                                        <div class="orderBodyWrap">
                                            <div class="orderBodyRight">
                                                <div class="orderContent prescriptionContent">

                                                    <section v-if="order.nhs_member.member.referrer_member_id">
                                                        <h4 class="orderTitle">
                                                            Patient: {{ order.patient_full_name}}
                                                        </h4>

                                                        <h4 class="orderTitle">Email: {{ order.nhs_member.member.email }}</h4>
                                                    </section>

                                                    <div v-if="order.items.length" class="orderList wysiwyg">
                                                        <h4 class="orderTitle itemsTitle">Items:</h4>
                                                        <ol>
                                                            <li v-for="order_item in order.items">{{ order_item.name }} : {{ order_item.refill_date }}</li>
                                                        </ol>
                                                    </div> <!-- .orderList -->

                                                    <p v-else>Looks like you haven't finished your order, let's change that!</p>

                                                    <div class="buttonWrapper" v-if="order.is_editable">
                                                        <a :href="order.prescription_edit_url" class="button">
                                                            <span v-if="order.items.length">Edit order</span>
                                                            <span v-else>Finish order</span>
                                                        </a>
                                                    </div>

                                                    <div class="buttonWrapper" v-if="order.can_be_reordered">
                                                        <a :href="order.prescription_copy_url" class="button">
                                                            Re-order
                                                        </a>
                                                    </div>

                                                </div><!-- .orderContent -->
                                            </div><!-- .orderBodyRight -->
                                        </div><!-- .orderBodyWrap -->
                                    </div><!-- .orderBody -->

                                </div><!-- .orderBox -->

                            </li>
                        </ul>

                        <div v-if="! tab.data.length">
                            <h4 class="emptyOrders">
                                You currently have no orders in this category.
                            </h4>
                        </div>

                    </div> <!-- .orderList -->


                    <div class="paginationWrap" v-if="tab.pagination" v-cloak>

                        <ul class="pagination" v-if="tab.pagination.last_page > 1">

                            <li class="prev">
                                <a
                                        rel="prev"
                                        :class="[tab.pagination.prev_page_url ? '' : 'pageButtonDisabled']"
                                        @click.prevent="refreshTabData(tabIndex, tab.pagination.prev_page_url)"
                                >
                                    Prev
                                </a>
                            </li>

                            <li v-for="index in tab.pagination.last_page" :key="index">
                                <a
                                        v-html="index"
                                        :class="[tab.pagination.current_page == index ? 'pageButtonDisabled' : '']"
                                        @click.prevent="refreshTabData(tabIndex, tab.dataUrl + '&page=' + index)"
                                ></a>
                            </li>


                            </li>
                            <li class="next">
                                <a
                                        rel="next"
                                        :class="[tab.pagination.next_page_url ? '' : 'pageButtonDisabled']"
                                        @click.prevent="refreshTabData(tabIndex, tab.pagination.next_page_url)"
                                >
                                    Next
                                </a>
                            </li>
                        </ul>
                    </div><!-- .paginationWrap -->



                    <div v-if="tab.viewMoreUrl">
                        <a :href="tab.viewMoreUrl">View more...</a>
                    </div>


                </div> <!-- .ctaTabContent -->

            </div> <!-- .tabContentWrapper -->




        </div> <!-- .ctaTabsWrap -->

    </section> <!-- .ctaTabs -->

</template>


<script>

export default {

    props: [
        'tabsConfig',
    ],


    data: function() {
        return {
            loading: true,
            tabs: [],
            active_tab_index: null,
        }
    },


    mounted: function() {
        this.loading = false;
    },


    created: function() {
        this.tabs = JSON.parse(this.tabsConfig);

        for (let tab_index in this.tabs) {
            if (this.tabs[tab_index].isActive) this.setActiveTab(tab_index);
            this.refreshTabData(tab_index);
        }


    },


    methods: {

        setActiveTab(active_tab_index) {
            this.active_tab_index = active_tab_index;
        },


        refreshTabData(tab_index, data_url) {
            let vm = this;

            if (! data_url) {
                data_url = this.tabs[tab_index].dataUrl;
            }

            this
                .$http
                .post(data_url, {})
                .then(function(res) {
                    vm.tabs[tab_index].data = res.data.data;
                    if (vm.tabs[tab_index].pagination) {
                        vm.tabs[tab_index].pagination = res.data;
                    }
                })
                .catch(function (error) {
                    vm.loading = false;
                });

        },

    },

}

</script>

