<template>
  <q-scroll-area class="loyalty-suite-wrapper">
  <div class="loyalty-suite-overview">
    <div class="loyalty-suite-overview__header">
      <h1 class="loyalty-suite-overview__title">
        {{ $t('overview') }}
      </h1>
      <q-btn color="primary" icon="help_outline" :label="$t('documentation')" href="https://loyalty-suite.com/documentation/installation" target="_blank" />
    </div>
    <div class="loyalty-suite-overview__content">

      <div class="loyalty-suite-overview__section">
        <div class="loyalty-suite-overview__block">
          <div class="loyalty-suite-overview__block-header">
            <div class="loyalty-suite-overview__block-icon">
              <q-icon name="account_balance_wallet"></q-icon>
            </div>
            <div class="loyalty-suite-overview__block-title">{{ $t('wallets')}}</div>
          </div>
          <div class="loyalty-suite-overview__block-content">
            <div class="loyalty-suite-overview__block-item">
              {{ $t('walletsBlockOne') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('walletsBlockTwo') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('walletsBlockThree') }}
            </div>
          </div>
          <div class="loyalty-suite-overview__block-action">
            <q-btn color="primary" :label="$t('startNow')" :to="'/wallets/list'" />
          </div>
        </div>
      </div>

      <div class="loyalty-suite-overview__section">
        <div class="loyalty-suite-overview__block">
          <div class="loyalty-suite-overview__block-header">
            <div class="loyalty-suite-overview__block-icon">
              <q-icon name="military_tech"></q-icon>
            </div>
            <div class="loyalty-suite-overview__block-title">{{ $t('ranks')}}</div>
          </div>
          <div class="loyalty-suite-overview__block-content">
            <div class="loyalty-suite-overview__block-item">
              {{ $t('ranksBlockOne') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('ranksBlockTwo') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('ranksBlockThree') }}
            </div>
          </div>
          <div class="loyalty-suite-overview__block-action">
            <q-btn color="primary" :label="$t('startNow')" :to="'/ranks/list'" />
          </div>
        </div>
      </div>

      <div class="loyalty-suite-overview__section">
        <div class="loyalty-suite-overview__block">
          <div class="loyalty-suite-overview__block-header">
            <div class="loyalty-suite-overview__block-icon">
              <q-icon name="emoji_events"></q-icon>
            </div>
            <div class="loyalty-suite-overview__block-title">{{ $t('achievements')}}</div>
          </div>
          <div class="loyalty-suite-overview__block-content">
            <div class="loyalty-suite-overview__block-item">
              {{ $t('achievementsBlockOne') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('achievementsBlockTwo') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('achievementsBlockThree') }}
            </div>
          </div>
          <div class="loyalty-suite-overview__block-action">
            <q-btn color="primary" :label="$t('startNow')" :to="'/achievements/list'" />
          </div>
        </div>
      </div>

      <div class="loyalty-suite-overview__section">
        <div class="loyalty-suite-overview__block">
          <div class="loyalty-suite-overview__block-header">
            <div class="loyalty-suite-overview__block-icon">
              <q-icon name="campaign"></q-icon>
            </div>
            <div class="loyalty-suite-overview__block-title">{{ $t('challenges')}}</div>
          </div>
          <div class="loyalty-suite-overview__block-content">
            <div class="loyalty-suite-overview__block-item">
              {{ $t('challengesBlockOne') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('challengesBlockTwo') }}
            </div>
            <div class="loyalty-suite-overview__block-item">
              {{ $t('challengesBlockThree') }}
            </div>
          </div>
          <div class="loyalty-suite-overview__block-action">
            <q-btn color="primary" :label="$t('startNow')" :to="'/challenges/list'" />
          </div>
        </div>
      </div>

      <div class="loyalty-suite-overview__features">
        <div class="loyalty-suite-overview__features-wrapper">
          <div class="loyalty-suite-overview__features-header">
            <div class="loyalty-suite-overview__features-title">
              <span class="loyalty-suite-overview__features-pro">PRO</span>
              {{ $t('features') }}
            </div>
            <q-btn v-if="!isPro" color="positive" :label="$t('getPRO')" :href="getProLink" target="_blank" />
          </div>
          <div class="loyalty-suite-overview__features-list">

            <div
              v-for="(feature, index) in proFeatures"
              :key="index"
              class="loyalty-suite-overview__features-item"
            >
              <div class="loyalty-suite-overview__features-item-wrapper">
                <q-icon :name="feature.icon"></q-icon>
                <div class="loyalty-suite-overview__features-item-title">
                  {{ feature.title }}
                </div>
                <div class="loyalty-suite-overview__features-item-text">
                  {{ feature.description }}
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
  </q-scroll-area>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';

export default defineComponent({
  setup() {
    const { t } = useI18n();
    const isPro = window.loyalty_suite_admin_data.isPro;
    const getProLink = window.loyalty_suite_admin_data.getProLink;
    const proFeatures = [
      {
        icon: 'card_giftcard',
        title: t('proRewardTypesTitle'),
        description: t('proRewardTypesDescription'),
      },
      {
        icon: 'account_balance_wallet',
        title: t('proWalletFeaturesTitle'),
        description: t('proWalletFeaturesDescription'),
      },
      {
        icon: 'share',
        title: t('proSocialNetworkConditionsTitle'),
        description: t('proSocialNetworkConditionsDescription'),
      },
      {
        icon: 'shopping_cart',
        title: t('proWooConditionsTitle'),
        description: t('proWooConditionsDescription'),
      },
      {
        icon: 'group_add',
        title: t('proReferralConditionTitle'),
        description: t('proReferralConditionDescription'),
      },
      {
        icon: 'all_inclusive',
        title: t('proNoLimitsTitle'),
        description: t('proNoLimitsDescription'),
      }
    ];

    return { getProLink, proFeatures, isPro }
  }
})
</script>

<style lang="scss" scoped>
  .loyalty-suite-overview {
    display: flex;
    flex-direction: column;
    width: 100%;

    &__header {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 15px;

      .q-btn {
        margin-left: auto;
      }
    }

    &__title {
      display: flex;
      font-size: 24px;
    }

    &__content {
      display: flex;
      width: calc(100% + 20px);
      flex-wrap: wrap;
      margin: 0 -10px;
    }

    &__features {
      display: flex;
      width: 100%;
      padding: 10px;

      &-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: $white;
        box-shadow: $shadow-size $shadow;
        border-radius: 5px;
        padding: 25px 25px 15px 25px;
      }

      &-pro {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        background: $primary;
        border-radius: 3px;
        font-size: 16px;
        text-transform: uppercase;
        color: $white;
        margin-right: 10px;
      }

      &-header {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
        .q-btn {
          padding: 4px 20px;
          margin: 0 0 0 auto;
        }
      }

      &-title {
        display: flex;
        font-size: 18px;
        align-items: center;
      }

      &-list {
        display: flex;
        width: calc(100% + 20px);
        flex-wrap: wrap;
        margin: 0 -10px;
      }

      &-item {
        display: flex;
        width: 25%;
        padding: 10px;
        align-items: flex-start;

        &-wrapper {
          display: flex;
          width: 100%;
          height: 100%;
          flex-direction: column;
          align-items: center;
          border: 1px solid $border;
          padding: 15px;
          border-radius: 5px;
        }

        .q-icon {
          color: $warning;
          font-size: 48px;
          margin-bottom: 15px
        }

        &-title {
          display: flex;
          width: 100%;
          justify-content: center;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 15px;
        }

        &-text {
          display: flex;
          width: 100%;
          font-size: 12px;
          justify-content: center;
          text-align: center;
        }
      }
    }

    &__section {
      display: flex;
      width: 25%;
      padding: 10px;
    }

    &__block {
      display: flex;
      width: 100%;
      flex-direction: column;
      background: $white;
      box-shadow: $shadow-size $shadow;
      border-radius: 5px;
      padding: 25px;

      &-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative;
      }

      &-title {
        display: flex;
        font-size: 18px;
        line-height: normal;
        font-weight: 500;
        margin: 20px 0 5px 0;
      }

      &-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: $primary;
        .q-icon {
          font-size: 28px;
          color: $white;
        }
      }

      &-content {
        display: flex;
        width: 100%;
        flex-direction: column;
      }

      &-item {
        display: flex;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid $border;
        background: $white;
        line-height: 1.4;
        &:last-child {
          margin-bottom: 0;
          border-bottom: none;
        }
      }

      &-action {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: auto;
      }

      a.loyalty-suite-overview__block-link {
        display: flex;
        width: auto;
        align-self: center;
        justify-content: center;
        align-items: center;
        background: $primary;
        transition: 0.3s;
        text-decoration: none;
        color: $white;
        font-size: 14px;
        line-height: normal;
        border-radius: 5px;
        padding: 10px 20px;
        margin-top: 10px;
        &:hover {
          background: $primary-90;
        }
      }
    }
  }

  @media (max-width: 1280px) {
    .loyalty-suite-overview {
      &__section {
        width: 50%;
      }
      &__features-item {
        width: 50%;
      }
    }
  }

  @media (max-width: 576px) {
    .loyalty-suite-overview {
      &__section {
        width: 100%;
      }
      &__features-item {
        width: 100%;
      }
    }
  }
</style>
