<template>
	<SuperAdminPageHeader>
		<template #header>
			<a-page-header :title="$t(`menu.subscription_plans`)" class="p-0">
				<template #extra>
					<a-button type="primary" @click="addItem">
						<PlusOutlined />
						{{ $t("subscription_plans.add") }}
					</a-button>
					<a-button
						type="primary"
						@click="trailPlanSetting"
						:loading="loadingTrial"
					>
						<CrownOutlined />
						{{ $t("subscription_plans.free_trail_settings") }}
					</a-button>
				</template>
			</a-page-header>
		</template>
		<template #breadcrumb>
			<a-breadcrumb separator="-" style="font-size: 12px">
				<a-breadcrumb-item>
					<router-link :to="{ name: 'admin.dashboard.index' }">
						{{ $t(`menu.dashboard`) }}
					</router-link>
				</a-breadcrumb-item>
				<a-breadcrumb-item>
					{{ $t(`menu.subscriptions`) }}
				</a-breadcrumb-item>
				<a-breadcrumb-item>
					{{ $t(`menu.subscription_plans`) }}
				</a-breadcrumb-item>
			</a-breadcrumb>
		</template>
	</SuperAdminPageHeader>

	<a-row>
		<a-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" class="bg-setting-sidebar">
			<SubscriptionSidebar />
		</a-col>
		<a-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
			<a-card class="page-content-container">
				<AddEdit
					:addEditType="addEditType"
					:visible="addEditVisible"
					:url="addEditUrl"
					@addEditSuccess="addEditSuccess"
					@closed="onCloseAddEdit"
					:formData="formData"
					:data="viewData"
					:pageTitle="pageTitle"
					:successMessage="successMessage"
				/>

				<a-row class="mb-20">
					<a-input-group>
						<a-row :gutter="[15, 15]">
							<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
								<a-input-group compact>
									<a-select
										style="width: 25%"
										v-model:value="table.searchColumn"
										:placeholder="
											$t('common.select_default_text', [''])
										"
									>
										<a-select-option
											v-for="filterableColumn in filterableColumns"
											:key="filterableColumn.key"
										>
											{{ filterableColumn.value }}
										</a-select-option>
									</a-select>
									<a-input-search
										style="width: 75%"
										v-model:value="table.searchString"
										show-search
										@change="onTableSearch"
										@search="onTableSearch"
										:loading="table.filterLoading"
									/>
								</a-input-group>
							</a-col>
						</a-row>
					</a-input-group>
				</a-row>

				<a-row>
					<a-col :span="24">
						<div class="table-responsive">
							<a-table
								:columns="columns"
								:row-key="(record) => record.xid"
								:data-source="table.data"
								:pagination="table.pagination"
								:loading="table.loading"
								@change="handleTableChange"
								bordered
							>
								<template #bodyCell="{ column, record }">
									<template
										v-if="column.dataIndex === 'pricing_details'"
									>
										<a-descriptions :column="1" size="small">
											<a-descriptions-item
												:label="
													$t('subscription_plans.monthly_price')
												"
											>
												{{
													formatAmountCurrency(
														record.monthly_price
													)
												}}
											</a-descriptions-item>
											<a-descriptions-item
												:label="
													$t('subscription_plans.annual_price')
												"
											>
												{{
													formatAmountCurrency(
														record.annual_price
													)
												}}
											</a-descriptions-item>
										</a-descriptions>
									</template>
									<template v-if="column.dataIndex === 'modules'">
										<ul>
											<li
												v-for="activeModuleValue in record.modules"
												:key="activeModuleValue"
											>
												{{
													$t(
														`subscription_plans.${activeModuleValue}`
													)
												}}
											</li>
										</ul>
									</template>
									<template v-if="column.dataIndex === 'action'">
										<a-button
											type="primary"
											@click="editItem(record)"
											style="margin-left: 4px"
										>
											<template #icon><EditOutlined /></template>
										</a-button>
										<a-button
											v-if="record.default != 'yes'"
											type="primary"
											@click="showDeleteConfirm(record.xid)"
											style="margin-left: 4px"
										>
											<template #icon><DeleteOutlined /></template>
										</a-button>
									</template>
								</template>
							</a-table>
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
	</a-row>
</template>
<script>
import { onMounted, ref } from "vue";
import {
	PlusOutlined,
	EditOutlined,
	DeleteOutlined,
	CrownOutlined,
} from "@ant-design/icons-vue";
import fields from "./fields";
import crud from "../../../../common/composable/crud";
import common from "../../../../common/composable/common";
import AddEdit from "./AddEdit.vue";
import SuperAdminPageHeader from "../../../layouts/SuperAdminPageHeader.vue";
import SubscriptionSidebar from "../SubscriptionSidebar.vue";

export default {
	components: {
		PlusOutlined,
		EditOutlined,
		DeleteOutlined,
		CrownOutlined,
		AddEdit,
		SuperAdminPageHeader,
		SubscriptionSidebar,
	},
	setup() {
		const { url, addEditUrl, initData, columns, filterableColumns } = fields();
		const crudVariables = crud();
		const { formatAmountCurrency } = common();
		const loadingTrial = ref(false);

		onMounted(() => {
			setUrlData();
		});

		const setUrlData = () => {
			crudVariables.tableUrl.value = { url };
			crudVariables.table.filterableColumns = filterableColumns;

			crudVariables.fetch({
				page: 1,
			});

			crudVariables.crudUrl.value = addEditUrl;
			crudVariables.langKey.value = "subscription_plans";
			crudVariables.initData.value = { ...initData };
			crudVariables.formData.value = { ...initData };
		};

		const trailPlanSetting = () => {
			loadingTrial.value = true;

			// For Trial Plan
			axiosAdmin.get("superadmin/trial-plan").then((response) => {
				crudVariables.editItem(response.data.plan);
				loadingTrial.value = false;
			});
		};

		return {
			columns,
			filterableColumns,
			...crudVariables,
			setUrlData,

			formatAmountCurrency,

			trailPlanSetting,
			loadingTrial,
		};
	},
};
</script>
