<template>
  <div class="card mb-4">
    <div class="card-header">
      <card-title :title="$t('Dashboard.Landing.Card.TeamBonus.Title')" />
      <div class="px-4 pt-1 remove-gutter-1 clearfix">
        <icon name="dashboard-tri-person" class="icon-size-4 text-primary fill-medium" />
        <big-currency class="float-right" :currency="currency" :price="teamBonusTotal" variant="large" />
      </div>
    </div>
    <div class="card-body border-top p-4 collapse">
      <b-row>
        <b-col cols="12" md="8">
          <b-row>
            <b-col cols="12" md="6" class="border d-flex flex-column justify-content-center h-100">
              <div class="py-2">
                <div class="float-right rounded bg-info-green text-white py-1 px-2">
                  {{ teamBonusLeftData.name }}
                </div>
                <h5>
                  {{ $t('Dashboard.Landing.Card.TeamBonus.Left') }}
                </h5>
              </div>
              <div class="py-2">
                <div class="font-size-6">
                  {{ $t('Dashboard.Landing.Card.TeamBonus.TotalGcv') }}
                </div>
                <div class="font-size-5 text-black">
                  {{ teamBonusLeftData.gcv }}
                </div>
              </div>
              <div class="pt-2 pb-3">
                <div class="font-size-6">
                  {{ $t('Dashboard.Landing.Card.TeamBonus.SponsorLine') }}
                </div>
                <div class="font-size-5 text-black">
                  {{ teamBonusLeftData.active_sponsorline }}
                </div>
              </div>
            </b-col>
            <b-col
              cols="12"
              md="6"
              class="border-x border-md-y border-md-left-0 d-flex flex-column justify-content-center h-100"
            >
              <div class="py-2">
                <div class="float-right rounded bg-info-orange text-white py-1 px-2">
                  {{ teamBonusRightData.name }}
                </div>
                <h5>
                  {{ $t('Dashboard.Landing.Card.TeamBonus.Right') }}
                </h5>
              </div>
              <div class="py-2">
                <div class="font-size-6">
                  {{ $t('Dashboard.Landing.Card.TeamBonus.TotalGcv') }}
                </div>
                <div class="font-size-5 text-black">
                  {{ teamBonusRightData.gcv }}
                </div>
              </div>
              <div class="pt-2 pb-3">
                <div class="font-size-6">
                  {{ $t('Dashboard.Landing.Card.TeamBonus.SponsorLine') }}
                </div>
                <div class="font-size-5 text-black">
                  {{ teamBonusRightData.active_sponsorline }}
                </div>
              </div>
            </b-col>
          </b-row>
        </b-col>
        <b-col cols="12" md="4">
          <b-row class="px-md-2 h-100">
            <b-col class="py-3 border d-flex flex-column justify-content-center h-100">
              <div>
                <div class="font-size-6">
                  {{ $t('Dashboard.Landing.Card.TeamBonus.TeamBonusEntitlement') }}
                </div>
                <div class="font-size-3 text-black font-weight-bold-extra py-1">
                  {{ teamBonusEntitlementPercentage }}%
                </div>
                <div>
                  <b-link @click="showTeamBonus()">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.ViewDetails') }}
                  </b-link>
                  <icon name="dashboard-arrow-right" class="text-primary align-bottom" />
                </div>
              </div>
            </b-col>
          </b-row>
        </b-col>
      </b-row>
    </div>
    <b-modal
      v-model="showTeamBonusModal"
      :title="$t('Dashboard.Landing.Card.TeamBonus.StructureQualify')"
      hide-footer
      centered
      size="lg"
    >
      <div v-if="isLoading('teamBonusDetailLoading')" class="vh-25 d-flex justify-content-center align-items-center">
        <icon name="spinner" pulse class="icon-size-4"></icon>
      </div>
      <div v-else-if="getTeamBonusDetail.length === 0" class="text-center w-100 my-5">
        <h5>{{ $t('Common.RecordNotFound') }}</h5>
      </div>
      <div v-else>
        <b-container
          :class="{ 'nh-50': getTeamBonusDetail.length < 10, 'nh-75': getTeamBonusDetail.length >= 10 }"
          v-bar="vueSidebarConfig"
        >
          <div>
            <table class="table mb-5">
              <thead>
                <tr>
                  <th scope="col" class="align-middle">{{ $t('Dashboard.Landing.Card.TeamBonus.Detail.No') }}</th>
                  <th scope="col" class="align-middle">{{ $t('Common.IboId') }}</th>
                  <th scope="col" class="align-middle">{{ $t('Common.IboName') }}</th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.SalesStatus') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.1SD') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.2SD') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.1RD') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.2RD') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.1ED') }}
                  </th>
                  <th scope="col" class="align-middle text-center">
                    {{ $t('Dashboard.Landing.Card.TeamBonus.Detail.2ED') }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(data, index) in getTeamBonusDetail" :key="`team-bonus-detail-${index}`">
                  <td>{{ index + 1 }}</td>
                  <td>{{ data.old_member_id }}</td>
                  <td>{{ data.name }}</td>
                  <td class="align-middle text-center" :class="data.status === 0 ? 'text-danger' : 'text-info'">
                    {{ data.status === 0 ? $t('Common.Inactive') : $t('Common.Active') }}
                  </td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_1SD }}</td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_2SD }}</td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_1RD }}</td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_2RD }}</td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_1ED }}</td>
                  <td class="text-center">{{ data.total_sponsor_unique_line_2ED }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </b-container>
      </div>
    </b-modal>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import BigCurrency from './BigCurrency'
import CardTitle from '@/app/_global/components/elements/CardTitle'

export default {
  name: 'TeamBonus',
  components: { CardTitle, BigCurrency },
  props: ['teamBonusLeftData', 'teamBonusRightData', 'teamBonusEntitlementPercentage', 'teamBonusTotal', 'currency'],
  data() {
    return {
      showTeamBonusModal: false,
      activeWelcomeBonus: '',
      vueSidebarConfig: {
        preventParentScroll: true,
        resizeRefresh: true,
      },
    }
  },
  methods: {
    ...mapActions(['loadTeamBonusDetail']),
    showTeamBonus() {
      this.loadTeamBonusDetail()
      this.showTeamBonusModal = !this.showTeamBonusModal
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails', 'getTeamBonusDetail']),
  },
}
</script>
