<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-sm-9">
        <h2 class="fw-bold text-center me-5 pt-5">
          <span class="float-start" style="cursor: pointer" @click="$router.go(-1)"><i
            class="fa-solid fa-arrow-left-long"
          /></span> {{ t("Donation") }}
        </h2>
        <div class="row">
          <div class="col-12">
            <h4 class="fw-light  text-center pt-3">
              {{ t("DonationHeading") }}
            </h4>
          </div>
        </div>
        <div class="row">
          <section class="pricing py-5">
            <div class="row">
              <!-- Basic Tier -->
              <div class="col-md-4">
                <div id="basic-plan" class="card mb-5 mb-lg-0" data-plan="starter">
                  <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">
                      Basic
                    </h5>
                    <h6 class="card-price text-center">
                      <span class="price" data-price-type="starter">8.00</span><span class="period">/month</span>
                    </h6>
                    <div v-if="currentSubscription() == 1" class="d-flex justify-content-center my-2">
                      <span class="badge bg-warning">Active</span>
                    </div>
                    <hr>
                    <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Good for students, employees</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Full access to app</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>3 Professional soundscapes</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>mindboost@technology</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>30 Days Trial</li>
                      <li>
                        <div class="pricing-toggle my-2 d-flex align-items-center">
                          <div class="me-3">
                            <input
                              id="starter-month"
                              type="radio"
                              class="me-1"
                              name="cycle-starter"
                              value="month"
                              :checked="currentSubscription() === 1 && dataStore.user.montly === '1' || currentSubscription() !== 1"
                            >
                            <label for="starter-month" class="form-check-label">Monthly</label>
                          </div>
                          <div>
                            <input
                              id="starter-year"
                              type="radio"
                              class="me-1"
                              name="cycle-starter"
                              :checked="currentSubscription() == 1 && dataStore.user.yearly === '1'"
                              value="year"
                            >
                            <label for="starter-year" class="form-check-label">Yearly <sup>save 20%</sup></label>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="d-grid">
                      <span v-if="isInvited">
                        <div class="row">
                          <button class="btn btn-warning text-uppercase buy-now" @click="showManagerPlan()">Buy
                            Now</button>
                        </div>
                      </span>
                      <span v-else>
                        <div class="row">
                          <button
                            class="btn btn-warning text-uppercase buy-now"
                            :disabled="currentSubscription() === 1"
                          >Active</button>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Team Tier -->
              <div class="col-md-4">
                <div id="team-plan" class="card mb-5 mb-lg-0" data-plan="pro">
                  <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">
                      Team
                    </h5>
                    <h6 class="card-price text-center">
                      <span class="price" data-price-type="pro">5</span><span class="period">/month</span>
                    </h6>
                    <div v-if="currentSubscription() == 2" class="d-flex justify-content-center my-2">
                      <span class="badge bg-warning">Active</span>
                    </div>
                    <hr>
                    <ul class="fa-ul">
                      <li>
                        <span class="fa-li"><i class="fas fa-check" /></span>Good for colleagues, groups, teams,
                        departments
                      </li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Full access to app</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>3 Professional soundscapes</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>mindboost@technology</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>Individual User Management</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>Flexible Trial Version</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>Coherent invoicing</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span> + Basic Per User</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>30 Days Trial</li>
                      <li>
                        <div class="pricing-toggle my-2 d-flex align-items-center">
                          <div class="me-3">
                            <input
                              id="pro-month"
                              type="radio"
                              class="me-1"
                              name="cycle-pro"
                              value="month"
                              :checked="currentSubscription() === 2 && dataStore.user.montly === '1' || currentSubscription() !== 2"
                            >
                            <label for="pro-month" class="form-check-label">Monthly</label>
                          </div>
                          <div>
                            <input
                              id="pro-year"
                              type="radio"
                              class="me-1"
                              name="cycle-pro"
                              :checked="currentSubscription() === 2 && dataStore.user.yearly === '1'"
                              value="year"
                            >
                            <label for="pro-year" class="form-check-label">Yearly <sup>save 20%</sup></label>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="d-grid">
                      <span v-if="isInvited">
                        <div class="row">
                          <button class="btn btn-warning text-uppercase team-plan" @click="showManagerPlan()">Buy
                            Now</button>
                        </div>
                      </span>
                      <span v-else>
                        <div class="row">
                          <button
                            class="btn btn-warning text-uppercase team-plan"
                            :disabled="currentSubscription() === 2"
                          >Active</button>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Enterprise Tier -->
              <div class="col-md-4">
                <div id="enterprise-plan" class="card" data-plan="enterprise">
                  <div class="card-body">
                    <h5 class="card-title text-muted text-uppercase text-center">
                      Enterprise
                    </h5>
                    <h6 class="card-price text-center">
                      <span>Depends</span>
                    </h6>
                    <div v-if="currentSubscription() == 3" class="d-flex justify-content-center my-2">
                      <span class="badge bg-warning">Active</span>
                    </div>
                    <hr>
                    <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Good For Enterprise > 200</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Full access to app</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>3 Professional soundscapes</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>mindboost@technology</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Individual User Management</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Flexible Trial Version</li>
                      <li><span class="fa-li"><i class="fas fa-check" /></span>Coherent invoicing</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>Dedicated Partnership</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>In-person Onboarding</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>Individual Pricing</li>
                      <li><span class="fa-li"><i class="fas fa-plus" /></span>30 Days Trial</li>
                      <li>
                        <div class="pricing-toggle my-2 d-flex align-items-center">
                          <div class="me-3">
                            <input
                              id="enterprise-month"
                              type="radio"
                              class="me-1"
                              name="cycle-enterprise"
                              value="month"
                              checked
                            >
                            <label for="enterprise-month" class="form-check-label">Monthly</label>
                          </div>
                          <div>
                            <input
                              id="enterprise-year"
                              type="radio"
                              class="me-1"
                              name="cycle-enterprise"
                              value="year"
                            >
                            <label for="enterprise-year" class="form-check-label">Yearly <sup>save 20%</sup></label>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="d-grid">
                      <span v-if="isInvited">
                        <div class="row">
                          <button type="button" class="btn btn-warning text-uppercase" @click="showManagerPlan()">
                            contact us
                          </button>
                        </div>
                      </span>
                      <span v-else>
                        <div class="row">
                          <button
                            type="button"
                            class="btn btn-warning text-uppercase"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModal"
                          >
                            contact us
                          </button>
                        </div>
                      </span>

                      <!-- Modal for enterprise contact us form -->
                      <div
                        id="exampleModal"
                        class="modal fade"
                        tabindex="-1"
                        aria-labelledby="exampleModalLabel"
                        aria-hidden="true"
                      >
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h1 id="exampleModalLabel" class="modal-title fs-5">
                                Contact Us
                              </h1>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
                            </div>
                            <form @submit.prevent="submitForm">
                              <div class="modal-body">
                                <div class="mb-3">
                                  <label for="name" class="form-label">Name</label>
                                  <input
                                    id="name"
                                    v-model="contact_form.name"
                                    type="text"
                                    class="form-control"
                                    required
                                  >
                                </div>
                                <div class="mb-3">
                                  <label for="companyName" class="form-label">Company Name</label>
                                  <input
                                    id="companyName"
                                    v-model="contact_form.company_name"
                                    type="text"
                                    class="form-control"
                                    required
                                  >
                                </div>
                                <div class="mb-3">
                                  <label for="message" class="form-label">Message</label>
                                  <textarea id="message" v-model="contact_form.message" class="form-control" required />
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="submit" class="btn btn-warning text-uppercase">
                                  Send Message
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapStores } from 'pinia'
import { useUserStore } from '~/stores/user'
// entery point
export default {
  components: { },
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    const dataStore = useUserStore() // Initialize store in setup()

    return {
      t,
      localePath,
      dataStore
    }
  },
  // dara store
  data () {
    return {
      oneMonth: false,
      twoMonth: false,
      threeMonth: false,
      loading: false,
      cancel_loading: false,
      subscription: '',
      form: {
        type: 'one'
      },
      contact_form: {
        name: '',
        company_name: '',
        email: 'dowhf@access.bro', // Removed direct reference to userStore
        message: ''
      },
      isInvited: 0,
      isManagerPlan: 0
    }
  },
  // computed
  computed: {
    ...mapStores(useUserStore)
  },
  // mounted
  mounted () {
    const urlBackend = useRuntimeConfig().public.BACKEND_URL || 'https://b.mindboost.team'
    this.fetchSubscription()
    this.GetManagerDetails()

    if (window.Paddle) {
      // Initialize Paddle
      Paddle.Environment.set('sandbox')
      Paddle.Initialize({
        token: 'test_27bb608597d1a4d75fe1bce2be7',
        eventCallback: async function (data) {
          if (data.name === 'checkout.completed') {
            // useNuxtApp().$logger.log(data)
            try {
              const response = await axios.post(urlBackend + '/api/paddle-webhook', data)
              // useNuxtApp().$logger.log('this is subscription data data', response)
              // Access the Pinia store and update the user data
              const userStore = useUserStore()
              userStore.updateUser(response.data.user)
            } catch (error) {
              // useNuxtApp().$logger.log(error)
            }
          }
        }
      })
      // Product definitions for each plan
      const products = {
        starter: {
          productId: 'pro_01j508hk3rp5f5g68n7tqv1thd',
          monthPriceId: 'pri_01j508ssstj4n6xra9j8ymr3d1',
          yearPriceId: 'pri_01j508x0rwntqs581rj3xfx49n'
        },
        pro: {
          productId: 'pro_01j5090jy3jkf4w9vr0j279fm5',
          monthPriceId: 'pri_01j50947nd6t9ztgsrq5h6fsmx',
          yearPriceId: 'pri_01j5097bzyp9zrevw0nsagb477'
        },
        enterprise: {
          productId: 'pro_01j509nre47wbdtmqmd6x098s5',
          monthPriceId: 'pri_01j509qknvfx3hv0459kpkvvar',
          yearPriceId: 'pri_01j509ryg22rzs0ahwrb2vwzhq'
        }
      }

      // Functions to handle pricing updates
      const updateBasicPlan = () => {
        const plan = 'starter'
        const cycle = document.querySelector('input[name="cycle-starter"]:checked').value
        const priceId = cycle === 'month' ? products[plan].monthPriceId : products[plan].yearPriceId
        Paddle.PricePreview({ items: [{ quantity: 1, priceId }] })
          .then((result) => {
            document.querySelector('#basic-plan .price').textContent = result.data.details.lineItems[0].formattedTotals.subtotal
            document.querySelector('#basic-plan .period').textContent = cycle === 'month' ? '/month' : '/year'
          })
      }

      //  Update the basic plan pricing on page load
      const updateTeamPlan = () => {
        const plan = 'pro'
        const cycle = document.querySelector('input[name="cycle-pro"]:checked').value
        const priceId = cycle === 'month' ? products[plan].monthPriceId : products[plan].yearPriceId
        Paddle.PricePreview({ items: [{ quantity: 5, priceId }] })
          .then((result) => {
            document.querySelector('#team-plan .price').textContent = result.data.details.lineItems[0].formattedTotals.subtotal
            document.querySelector('#team-plan .period').textContent = cycle === 'month' ? '/month' : '/year'
          })
      }

      //  Update the enterprise plan pricing on page load
      const updateEnterprisePlan = () => {
        const plan = 'enterprise'
        const cycle = document.querySelector('input[name="cycle-enterprise"]:checked').value
        const priceId = cycle === 'month' ? products[plan].monthPriceId : products[plan].yearPriceId
        Paddle.PricePreview({ items: [{ quantity: 1, priceId }] })
          .then((result) => {
            document.querySelector('#enterprise-plan .price').textContent = result.data.details.lineItems[0].formattedTotals.subtotal
            document.querySelector('#enterprise-plan .period').textContent = cycle === 'month' ? '/month' : '/year'
          })
      }

      // Event handlers for plan and cycle changes
      const handlePlanChange = (event) => {
        const plan = event.target.closest('.card').getAttribute('data-plan')
        if (plan === 'starter') {
          updateBasicPlan()
        } else if (plan === 'pro') {
          updateTeamPlan()
        } else if (plan === 'enterprise') {
          updateEnterprisePlan()
        }
      }

      // Set event listeners for plan and cycle changes
      document.querySelectorAll('input[name^="cycle-"]').forEach((input) => {
        input.addEventListener('change', handlePlanChange)
      })

      // Event handlers for buy now buttons
      document.querySelectorAll('.buy-now').forEach((button) => {
        button.addEventListener('click', () => {
          const plan = button.closest('.card').getAttribute('data-plan')
          const cycle = document.querySelector(`input[name="cycle-${plan}"]:checked`).value
          const priceId = cycle === 'month' ? products[plan].monthPriceId : products[plan].yearPriceId
          Paddle.Checkout.open({
            items: [{ priceId, quantity: 1 }],
            customer: {
              email: this.dataStore.user.email,
              address: { countryCode: 'PK', postalCode: '59351' }
            },
            source: window.location.href
          })
        })
      })
      // Event handlers for team-plan class
      document.querySelectorAll('.team-plan').forEach((button) => {
        button.addEventListener('click', () => {
          const plan = button.closest('.card').getAttribute('data-plan')
          const cycle = document.querySelector(`input[name="cycle-${plan}"]:checked`).value
          const priceId = cycle === 'month' ? products[plan].monthPriceId : products[plan].yearPriceId
          Paddle.Checkout.open({
            items: [{ priceId, quantity: 5 }],
            customer: {
              email: this.dataStore.user.email,
              address: { countryCode: 'PK', postalCode: '59351' }
            },
            source: window.location.href
          })
        })
      })
      // Initialize prices
      updateBasicPlan()
      updateTeamPlan()
      updateEnterprisePlan()
    }
  },
  // ======================= methods =======================
  methods: {
    // check user plan
    isDisabled () {
      const dataStore = useUserStore()
      const userasdf = dataStore
      // useNuxtApp().$logger.log('store', user); // Debugging
      return !(userasdf.user.team_subscription_plan === '1' ||
        userasdf.user.enterprise_subscription_plan === '1') &&
        (userasdf.user.basic_subscription_plan !== '0')
    },
    // get user current plan
    currentSubscription () {
      const dataStore = useUserStore()
      const userasdf = dataStore
      return (userasdf.user.current_subscription_plan)
    },
    /**
   * showManagerPlan in toster form
   */
    showManagerPlan () {
      let managerPlan = '' // Changed from const to let
      if (this.isManagerPlan === 1) {
        managerPlan = 'Basic'
      } else if (this.isManagerPlan === 2) {
        managerPlan = 'Team'
      } else if (this.isManagerPlan === 3) {
        managerPlan = 'Enterprise'
      }

      this.$toast.success(`Manager already has the ${managerPlan} plan`) // Fixed typo
    },
    /**
    * Submits the contact form to the server
   */
    async submitForm () {
      try {
        await axios.post(urlBackend + '/api/enterprise-plan-contact', this.contact_form)
        // useNuxtApp().$logger.log('Success:', response.data)
        Swal.fire({
          title: 'Good job!',
          text: 'Message sent successfully! Support team will contact you soon.',
          icon: 'success'
        })
      } catch (error) {
        // useNuxtApp().$logger.error('Error:', error.response);
        this.$toast.error('Oops, something went wrong!')
      }
    },
    ...mapActions(useUserStore, ['updateUser', 'logout']),
    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
        this.oneMonth = data.name === 'monthly'
        this.twoMonth = data.name === 'sixmonth'
        this.threeMonth = data.name === 'yearly'
      })
    },
    async GetManagerDetails () {
      const userStore = useUserStore()
      if (userStore.user.inviter_id) {
        const response = await axios.post(urlBackend + '/api/fetch-manger-detail', { manager_id: userStore.user.inviter_id })
        // useNuxtApp().$logger.log('manager_id', response.data.data)
        this.isInvited = 1
        // useNuxtApp().$logger.log('response.data.data.inviter_id', response.data.data.inviter_id)
        this.isManagerPlan = response.data.data.current_subscription_plan
      }
    }

  }
}
</script>
<style>
.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;
}

/* style for plan cards  */
.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }

  .pricing .card:hover .btn {
    opacity: 1;
  }
}
</style>
