<template>
    <section class="flex flex-col w-full gap-6">
        <ServiceCard :service="service" :preview="preview" />
        <Card title="Register.What_inc">
            <div class="w-full overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="">
                        <tr class="normal-case">
                            <th
                                scope="col"
                                class="px-6 py-3 text-xs font-semibold align-top"
                            >
                                {{
                                    service.three_tiers
                                        ? $t("Register.service_tiers")
                                        : $t("Register.price")
                                }}
                            </th>
                            <th scope="col" class="px-6 py-3">
                                <div class="text-xs">
                                    <template v-if="service.three_tiers">
                                        <p
                                            class="text-sm font-semibold text-gray-300 line-clamp-3"
                                        >
                                            {{ $t("Register.basic") }}
                                        </p>
                                    </template>
                                    <p class="text-gray-200 font-medium mb-1.5">
                                        {{
                                            currency(
                                                props.service.basic_tier_price
                                            )
                                        }}
                                    </p>
                                </div>
                            </th>
                            <template v-if="service.three_tiers">
                                <th scope="col" class="px-6 py-3">
                                    <div class="text-xs">
                                        <p
                                            class="text-sm font-semibold text-gray-300 line-clamp-3"
                                        >
                                            {{ $t("Register.standard") }}
                                        </p>
                                        <p
                                            class="text-gray-200 font-medium mb-1.5"
                                        >
                                            {{
                                                currency(
                                                    props.service
                                                        .standard_tier_price
                                                )
                                            }}
                                        </p>
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    <div class="text-xs">
                                        <p
                                            class="text-sm font-semibold text-gray-300 line-clamp-3"
                                        >
                                            {{ $t("Register.pro") }}
                                        </p>
                                        <p
                                            class="text-gray-200 font-medium mb-1.5"
                                        >
                                            {{
                                                currency(
                                                    props.service.pro_tier_price
                                                )
                                            }}
                                        </p>
                                    </div>
                                </th>
                            </template>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            class="text-xs font-medium text-gray-200 bg-white even:bg-blue-200 whitespace-nowrap"
                        >
                            <th
                                scope="row"
                                class="px-6 py-4 text-xs font-medium text-gray-200"
                            >
                                {{ $t("Register.delivery_days") }}:
                            </th>
                            <td
                                class="px-6 py-4 text-xs font-medium text-gray-200"
                            >
                                {{ service.basic_tier_days }}
                            </td>
                            <template v-if="service.three_tiers">
                                <td
                                    class="px-6 py-4 text-xs font-medium text-gray-200"
                                >
                                    {{ service.standard_tier_days }}
                                </td>
                                <td
                                    class="px-6 py-4 text-xs font-medium text-gray-200"
                                >
                                    {{ service.pro_tier_days }}
                                </td>
                            </template>
                        </tr>
                        <tr
                            v-for="(included, i) in service.tier_options"
                            :key="
                                preview
                                    ? 'tier_option_preview_' + i
                                    : included.id
                            "
                            class="text-xs font-medium text-gray-200 bg-white even:bg-blue-200 whitespace-nowrap"
                        >
                            <th
                                scope="row"
                                class="px-6 py-4 text-xs font-medium text-gray-200"
                            >
                                {{ included.title }}
                            </th>
                            <td
                                class="px-6 py-4 text-xs font-medium text-gray-200"
                            >
                                <svg
                                    v-if="included.basic_enabled"
                                    width="16"
                                    height="17"
                                    viewBox="0 0 16 17"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <g clip-path="url(#clip0_919_53985)">
                                        <path
                                            d="M3.33325 8.28353L6.66659 11.6169L13.3333 4.9502"
                                            stroke="#50CD89"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_919_53985">
                                            <rect
                                                width="16"
                                                height="16"
                                                fill="white"
                                                transform="translate(0 0.283203)"
                                            />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <span
                                    class="text-xs text-gray-200 font-medium mx-[5px]"
                                    v-else
                                    >-</span
                                >
                            </td>
                            <template v-if="service.three_tiers">
                                <td
                                    class="px-6 py-4 text-xs font-medium text-gray-200"
                                >
                                    <svg
                                        v-if="included.standard_enabled"
                                        width="16"
                                        height="17"
                                        viewBox="0 0 16 17"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g clip-path="url(#clip0_919_53985)">
                                            <path
                                                d="M3.33325 8.28353L6.66659 11.6169L13.3333 4.9502"
                                                stroke="#50CD89"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_919_53985">
                                                <rect
                                                    width="16"
                                                    height="16"
                                                    fill="white"
                                                    transform="translate(0 0.283203)"
                                                />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <span
                                        class="text-xs text-gray-200 font-medium mx-[5px]"
                                        v-else
                                        >-</span
                                    >
                                </td>
                                <td
                                    class="px-6 py-4 text-xs font-medium text-gray-200"
                                >
                                    <svg
                                        v-if="included.pro_enabled"
                                        width="16"
                                        height="17"
                                        viewBox="0 0 16 17"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g clip-path="url(#clip0_919_53985)">
                                            <path
                                                d="M3.33325 8.28353L6.66659 11.6169L13.3333 4.9502"
                                                stroke="#50CD89"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_919_53985">
                                                <rect
                                                    width="16"
                                                    height="16"
                                                    fill="white"
                                                    transform="translate(0 0.283203)"
                                                />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                    <span
                                        class="text-xs text-gray-200 font-medium mx-[5px]"
                                        v-else
                                        >-</span
                                    >
                                </td>
                            </template>
                        </tr>
                    </tbody>
                </table>
            </div>
        </Card>
    </section>
</template>

<script setup>
import Badge from "@/components/General/Badge.vue";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import { computed, onMounted } from "@vue/runtime-core";
import { Swiper, SwiperSlide } from "swiper/vue";
import ServiceCard from "./ServiceCard.vue";
import "swiper/css";

const props = defineProps({
    service: Object,
    preview: {
        type: Boolean,
        default: false,
    },
});

const statusColor = computed(() => {
    switch (props.service.status) {
        case "Published":
            return "green";
        case "Paused":
            return "red";
        case "Drafted":
            return "orange";
        default:
            return "blue";
    }
});

onMounted(() => {});
</script>
