<template>
    <div class="row m-b-15 parentContainer">
        <div class="col-md-12 col-lg col-xl">
            <div class="row">
                <div class="col">
                    <div class="row tabsContainer">
                        <div class="col">
                            <div class="row m-l-0 m-r-0">
                                <div class="col-6 col-md-8">
                                    <div class="row">
                                        <div class="col m-r-5">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter active tabButton" tab-name="vouchers">
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5">All Vouchers</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col m-r-5 d-none d-md-inline">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="rewards">
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5">Rewards Vouchers</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col m-r-5 d-none d-md-inline">
                                            <div class="row fs-12 text-center">
                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="used">
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="fs-12 m-t-5">Used Vouchers</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row no-margin">
                                <div class="col bg-white padding-25">
                                    <div class="row tabsContainer tabContent active" tab-name="vouchers">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="row">
                                                        <div class="col" v-if="this.$store.getters.getUserId">
                                                            <list-component section="customerVouchersListSection" :endpoint="route('api.voucher.user.list')" :options="{ 'has_active_reward': true }">
                                                                <template slot="list" slot-scope="{data}">
                                                                    <single-user-reward-item-component :data="data"></single-user-reward-item-component>
                                                                </template>
                                                            </list-component>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row tabsContainer tabContent hide" tab-name="rewards">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="row">
                                                        <div class="col" v-if="this.$store.getters.getUserId">
                                                            <list-component section="customerRewardsListSection" :endpoint="route('api.reward.list.details')" :options="{'random_name': true, order_by:{ column:'order', DESC:false}}">
                                                                <template slot="list" slot-scope="{data}">
                                                                    <single-reward-details-item-component :data="data"></single-reward-details-item-component>
                                                                </template>
                                                            </list-component>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row tabsContainer tabContent hide" tab-name="used">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="row">
                                                        <div class="col" v-if="this.$store.getters.getUserId">
                                                            <list-component section="customerUsedVouchersListSection" :endpoint="route('api.voucher.user.list')" :options="{ 'has_used_voucher': true }">
                                                                <template slot="list" slot-scope="{data}">
                                                                    <single-user-reward-item-component :data="data"></single-user-reward-item-component>
                                                                </template>
                                                            </list-component>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {}
</script>
