<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
        <h1 class="h3 fw-bold text-center pt-3">
          {{ t("Donation") }}
        </h1>
        <div class="row">
          <div class="col-12">
            <p class="fw-light  text-center py-3">
              {{ t("DonationHeading") }}
            </p>
          </div>
        </div>
        <div class="d-flex flex-column flex-md-row gap-3">
          <div class="col-12 py-1 flex-auto">
            <div class="card" :class="{'active-sub':oneMonth,'sub-card':!oneMonth}" @click="oneMonth=true;twoMonth=false;threeMonth=false">
              <div class="card-body py-4">
                <h2 class="text-center fw-bolder">
                  €3.00
                </h2>
                <p class="text-center">
                  {{ t("SmallAmount") }}
                </p>
              </div>
            </div>
          </div>
          <div class="col-12 py-1 flex-auto">
            <div class="card" :class="{'active-sub':twoMonth,'sub-card':!twoMonth}" @click="twoMonth=true;oneMonth=false;threeMonth=false">
              <div class="card-body py-4">
                <h2 class="text-center fw-bolder">
                  €10.00
                </h2>
                <p class=" text-center">
                  {{ t("MediumAmount") }}
                </p>
              </div>
            </div>
          </div>
          <div class="col-12 py-1 flex-auto">
            <div class="card" :class="{'active-sub':threeMonth,'sub-card':!threeMonth}" @click="threeMonth=true;twoMonth=false;oneMonth=false">
              <div class="card-body py-4">
                <h2 class="text-center fw-bolder">
                  €15.00
                </h2>
                <p class=" text-center">
                  {{ t("BigAmount") }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="row pt-5">
          <div class="col-12 px-md-5 px-0">
            <p class="text-center text-muted">
              {{ t("EndStatement") }}
            </p>
          </div>
          <div class="col-12 text-end" />
        </div>
        <div class="row pt-5 justify-content-center ">
          <div class="col-12 col-md-6 col-lg-6 text-center">
            <div class="row">
              <div class="col-12">
                <p class="fw-medium text-center"><strong>{{ t("bankaccount") }}:</strong><br></p>
                <p class="fw-light text-center">
                  {{ t("Name") }}: Robert Rapp<br>
                </p>
                <p class="fw-light text-center">
                  IBAN: DE42 1001 1001 2629 4590 53
                  <span class="tooltip-container">
                    <i class="fas fa-copy ml-2 cursor-pointer" title="In die Zwischenablage kopieren" @click="copyIBANToClipboard('DE42 1001 1001 2629 4590 53')" />
                    <span class="tooltiptext" :class="{ 'show': showTooltip }">Kopiert!</span>
                  </span>
                </p>
                <p class="fw-light text-center">
                  BIC: NTSBDEB1XXX
                </p>
                <p class="fw-light text-center">
                  {{ userVerwendungszweck }}
                  <span class="tooltip-container">
                    <i class="fas fa-copy ml-2 cursor-pointer" title="In die Zwischenablage kopieren" @click="copyToClipboard(userVerwendungszweck)" />
                    <span class="tooltiptext" :class="{ 'show': showTooltip1 }">Kopiert!</span>
                  </span>
                </p>
              </div>
            </div>
          </div>

        <!--          <StripeElements-->
        <!--              v-if="stripeLoaded"-->
        <!--              v-slot="{ elements, instance }" ref="elms"-->
        <!--          :stripe-key="stripeKey"-->
        <!--          :instance-options="instanceOptions"-->
        <!--          :elements-options="elementsOptions"-->
        <!--          >-->
        <!--          <StripeElement-->
        <!--              ref="card"-->
        <!--              :elements="elements"-->
        <!--              :options="cardOptions"-->
        <!--          />-->
        <!--          </StripeElements>-->
        <!--          <button type="button" class="btn text-white fs-5  col-12 fw-bold py-2" @click="pay" style="background-color: #e9c046">Pay</button>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapActions, mapStores } from 'pinia'
import { useUserStore } from '~/stores/user'
export default {
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    const userVerwendungszweck = ref(useUserStore().user.email)
    const usermail = useUserStore().user.email

    return { t, localePath, userVerwendungszweck, usermail }
  },

  data () {
    return {
      oneMonth: false,
      twoMonth: false,
      threeMonth: false,
      loading: false,
      cancel_loading: false,
      showTooltip: false,
      showTooltip1: false,
      subscription: '',
      form: {
        type: 'one'
      }
    }
  },
  computed: {
    // ...mapState(useUserStore, ['user']),
    ...mapStores(useUserStore)
  },
  mounted () {
    this.fetchSubscription()
  },

  methods: {
    ...mapActions(useUserStore, ['updateUser', 'logout']),
    copyToClipboard (text) {
      navigator.clipboard.writeText(text).then(() => {
        this.showTooltip1 = true
        setTimeout(() => {
          this.showTooltip1 = false
        }, 2000) // Tooltip verschwindet nach 2 Sekunden
      }).catch((err) => {
        useNuxtApp().$logger.error('Fehler beim Kopieren: ', err)
      })
    },
    copyIBANToClipboard (text) {
      navigator.clipboard.writeText(text).then(() => {
        this.showTooltip = true
        setTimeout(() => {
          this.showTooltip = false
        }, 2000) // Tooltip verschwindet nach 2 Sekunden
      }).catch((err) => {
        useNuxtApp().$logger.error('Fehler beim Kopieren: ', err)
      })
    },
    updateUserNow () {
      this.$axios.post('/api/auth/me').then(({ data }) => {
        this.updateUser(data.user)
      }).catch(() => {
        this.logout()
        this.$router.push(this.localePath('/auth/login'))
      })
    },
    paypal () {
      window.open('https://www.paypal.com/pools/c/93YzF9GqEP', '_blank')
    },
    fetchSubscription () {
      this.$axios.post('/api/fetch-subscription').then(({ data }) => {
        this.subscription = data.name
        if (data.name === 'monthly') {
          this.oneMonth = true
          this.twoMonth = false
          this.threeMonth = false
        }
        if (data.name === 'sixmonth') {
          this.oneMonth = false
          this.twoMonth = true
          this.threeMonth = false
        }
        if (data.name === 'yearly') {
          this.oneMonth = false
          this.twoMonth = false
          this.threeMonth = true
        }
      })
    }
  }

}

// export default {
//   name: 'CardOnly',
//   data() {
//     return {
//       stripeKey: 'pk_test_0S0H9CTYtkhPlArgg4KkPFcZ',
//       instanceOptions: {},
//       elementsOptions: {},
//       cardOptions: {},
//       stripeLoaded: false,
//       card: null,
//       elms: null,
//       oneMonth:false,
//       twoMonth:false,
//       threeMonth:false,
//     };
//   },
//   components: {
//     StripeElements,
//     StripeElement,
//   },
//   beforeMount() {
//     const stripePromise = loadStripe(this.stripeKey);
//     stripePromise.then(() => {
//       this.stripeLoaded = true;
//     });
//   },
//   methods: {
//     pay() {
//       const cardElement = this.$refs.card.stripeElement;
//
//       this.$refs.elms.instance
//           .createPaymentMethod({ type: 'card', card: cardElement })
//           .then((result) => {
//         // useNuxtApp().$logger.log(result);
//         // useNuxtApp().$logger.log(result.paymentMethod);
//             this.$axios.post('/api/subscribe', result).then((response) => {
//           // useNuxtApp().$logger.log(response.data);
//             });
//           });
//     },
//   },
//   computed: {
//
//   },
//   created() {
//
//   },
// };
</script>
<style>
.flex-auto {
  flex: 1 1 auto;
}
.active-sub{
  background: #E9C046;
  box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
  border-radius: 12px;
  color:white;
  background-color:#E9C046 !important;
}
.sub-card{
  background: #FFFFFF;
  box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
  border-radius: 12px;
  color:black;
  height: 100%;
  transition: 250ms ease-in-out;
}
.sub-card:hover, .sub-card:focus{
  background: #E9C046;
  box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
  border-radius: 12px;
  color:white;
  border-color: #E9C046;
  background-color:#E9C046 !important;
}
.tooltip-container {
  margin-left: 10px;
  font-size: smaller;
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  width: auto;
  background-color: #e9c046;
  color: #000000;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 20%;
  margin-left: -30px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptext.show {
  visibility: visible;
  opacity: 1;
}
</style>
