<script setup>
import briefcase from '@images/cards/briefcase.png'
import logoCreditCard2 from '@images/cards/logo-credit-card-2.png'
import logoMastercardSmall from '@images/cards/logo-mastercard-small.png'

const savedCards = [
  {
    logo: logoMastercardSmall,
    type: 'Credit card',
    number: '2566 xxxx xxxx 8908',
  },
  {
    logo: logoCreditCard2,
    type: 'Credit card',
    number: '8990 xxxx xxxx 6852',
  },
]
</script>

<template>
  <VCard>
    <!-- SECTION Card Header and Menu -->
    <VCardItem>
      <!-- 👉 Title -->
      <VCardTitle>Upgrade Your Plan</VCardTitle>

      <!-- 👉 menu -->
      <template #append>
        <div class="me-n3">
          <MoreBtn />
        </div>
      </template>
    </VCardItem>
    <!-- !SECTION -->

    <VCardText>
      <p class="text-body-2">
        Please make the payment to start enjoying all the features of our premium plan as soon as possible.
      </p>

      <!-- SECTION Upgrade plan banner -->
      <div class="plan-upgrade-banner pa-4 d-flex rounded align-center">
        <VAvatar
          rounded
          size="40"
          class="plan-details me-2 border-opacity-100 border-primary"
        >
          <VImg
            :src="briefcase"
            alt="briefcase"
            height="20"
          />
        </VAvatar>

        <div class="d-flex flex-column">
          <h6 class="text-h6">
            Platinum
          </h6>
          <span class="text-primary text-body-2">Upgrade Plan</span>
        </div>
        <VSpacer />
        <div class="d-flex align-center">
          <sup>
            <div class="text-body-2 text-high-emphasis">$</div>
          </sup>
          <h4 class="text-h4">
            5250
          </h4>
          <sub>
            <div class="text-body-2 text-high-emphasis">/Year</div>
          </sub>
        </div>
      </div>
      <!-- !SECTION -->

      <!-- SECTION Payment Details -->
      <VList class="card-list mt-1">
        <h6 class="text-h6 my-2">
          Payment details
        </h6>

        <VListItem
          v-for="card in savedCards"
          :key="card.logo"
          class="mb-2"
        >
          <!-- 👉 Avatar -->
          <template #prepend>
            <img
              :src="card.logo"
              height="30"
              width="42"
              class="me-3"
            >
          </template>

          <!-- 👉 Title and Subtitle -->

          <VListItemTitle class="font-weight-medium mb-1">
            {{ card.type }}
          </VListItemTitle>
          <VListItemSubtitle class="me-2">
            {{ card.number }}
          </VListItemSubtitle>

          <!-- 👉 Action -->
          <template #append>
            <VListItemAction>
              <VTextField
                density="compact"
                label="CVV"
                placeholder="123"
                style="inline-size: 5rem;"
              />
            </VListItemAction>
          </template>
        </VListItem>

        <!-- 👉 Add Payment  -->
        <VListItem class="mb-3 text-body-1">
          <a href="javascript:void(0)">Add Payment Method</a>
        </VListItem>
      </VList>
      <!-- !SECTION -->

      <!-- 👉 Email -->
      <VForm>
        <VRow>
          <VCol cols="12">
            <VTextField
              placeholder="Email Address"
              density="compact"
              class="mb-3"
            />
            <VBtn block>
              Contact Now
            </VBtn>
          </VCol>
        </VRow>
      </VForm>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped>
.plan-upgrade-banner {
  .plan-details {
    border: 1px solid rgb(var(--v-theme-primary));
  }

  background-color: rgba(var(--v-theme-primary), 0.16);
}

.card-list {
  --v-card-list-gap: 0;
}
</style>
