<!-- Upgrade page view -->
<script setup lang="ts">
import { inject, ref } from 'vue';
import useBgImage from '../composables/useBgImage';
import { AppConfigType } from '../types';
import Toggle from '../components/form/Toggle.vue';
import Badge from '../components/base/Badge.vue';
import Button from '../components/base/Button.vue';
import Card from '../components/layout/Card.vue';
import ContainerSmall from '../components/layout/ContainerSmall.vue';
import usePopupWindow from '../composables/usePopupWindow';
import { useRouter } from 'vue-router';
import useSetPageTitle from '../composables/useSetPageTitle';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Set page title
useSetPageTitle($gettext('Upgrade'));

// Get plugin config
const config: AppConfigType = inject('pluginConfig');

// Router
const router = useRouter();

// Set backgroud image on body
useBgImage(config.plugin_url);

// Subscription type
// false - monthly; true - annually
const subscriptionType = ref(false);

// Open payment popup window
const openPaymentPopup = () => {
    usePopupWindow('https://app.boostsite.com/plugin/order-checkout/seo_plugin_plan', 1200, 800, () => {
        // Refresh the page
        router.go(0);
    });
};
</script>

<template>
    <ContainerSmall>
        <!-- Logo -->
        <img width="139px" class="max-md:mx-auto" :src="`${config.plugin_url}/public/images/boostsite-logo.png`" />

        <!-- Subscription type -->
        <div
            class="flex flex-col md:flex-row justify-between items-center gap-2 pt-7 md:pt-9 pb-4 md:pb-7 border-b border-b-neutral-900"
        >
            <p class="font-bold">{{ $gettext('Subscription') }}</p>

            <!-- Toggle -->
            <div class="flex items-center gap-1.5">
                <Toggle
                    :inactive-text="$gettext('monthly')"
                    :active-text="$gettext('annually')"
                    v-model="subscriptionType"
                />
                <Badge type="success">{{ $gettext('15% OFF') }}</Badge>
            </div>
        </div>

        <!-- Subtotal and tax -->
        <div class="flex justify-between items-center pt-5 mb-2">
            <p class="font-bold">{{ $gettext('Subtotal') }}</p>

            <p class="leading-xl" v-if="!subscriptionType">$24/{{ $gettext('mo') }}</p>
            <div class="flex gap-2 leading-xl" v-else>
                <del class="text-base-200">$288</del>
                <p>$240/{{ $gettext('year') }}</p>
            </div>
        </div>

        <div class="flex justify-between items-center pb-5 border-b border-b-neutral-900">
            <p class="font-bold">{{ $gettext('Tax') }}</p>

            <p class="text-base-200">{{ $gettext('Enter address to calculate') }}</p>
        </div>

        <!-- Total -->
        <div class="flex justify-between items-center py-8 md:py-11">
            <p class="font-bold">{{ $gettext('Total due today') }}</p>

            <p class="font-bold text-xl md:text-2xl leading-xl" v-if="!subscriptionType">$24.00</p>
            <div class="flex gap-2" v-else>
                <del class="text-base-200">$288</del>
                <p class="font-bold text-xl md:text-2xl leading-xl">$240</p>
            </div>
        </div>

        <!-- Go to payment -->
        <Button
            class="w-full mb-10"
            :text="$gettext('Proceed to payment')"
            size="large"
            @click.prevent="openPaymentPopup"
        />

        <!-- Card -->
        <div class="w-full">
            <Card
                :image-url="`${config.plugin_url}/public/images/articles.png`"
                :image-alt="$gettext('Upgrade to premium plan')"
                type="vertical"
            >
                <div class="flex flex-col gap-6">
                    <div>
                        <p class="text-info-900 mb-1.5">{{ $gettext("With premium plan you'll get:") }}</p>
                        <ul class="text-info-900 list-disc pl-4">
                            <li>{{ $gettext('unlimited subjects & schedules') }}</li>
                            <li>
                                {{
                                    $gettext(
                                        'up to 35 articles generated per week (with option to buy additional articles when needed)'
                                    )
                                }}
                            </li>
                            <li>{{ $gettext('advanced scheduling') }}</li>
                            <li>{{ $gettext('ability to add key words to every article') }}</li>
                        </ul>
                    </div>
                </div>
            </Card>
        </div>
    </ContainerSmall>
</template>

<style scoped></style>
