<template>
    <section class="flex flex-col w-full gap-6">
        <Card>
            <div class="flex flex-col gap-2.5 w-full">
                <div class="w-full">
                    <template v-if="service?.images.length > 0">
                        <img
                            class="object-cover w-full max-h-64 h-full rounded-[10px] overflow-hidden"
                            :src="service.images[0]?.url"
                            :alt="`${service.title}-${service.images[0]?.id}`"
                        />
                    </template>

                    <ul class="flex w-full flex-wrap gap-2.5 mt-1.5">
                        <swiper
                            class="w-full"
                            :slides-per-view="3.5"
                            :space-between="10"
                        >
                            <SwiperSlide
                                v-for="image in restOfImages"
                                :alt="`${service.title}-${image.id}`"
                                :key="`portfolio_project_image_${image.id}`"
                            >
                                <img
                                    :src="image.url"
                                    class="w-[215px] h-[110px] rounded-[10px] overflow-hidden object-cover"
                                />
                            </SwiperSlide>
                        </swiper>
                    </ul>
                </div>
                <div class="flex flex-col flex-1 gap-5 pt-8">
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">Service title:</p>
                        <p class="text-sm font-medium text-gray-300">
                            {{ service.title }}
                        </p>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">Service description:</p>
                        <p
                            class="text-sm font-medium text-gray-300 line-clamp-3"
                        >
                            {{ service.description }}
                        </p>
                    </div>
                    <div class="flex items-center justify-start gap-7">
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                Service category:
                            </p>
                            <p class="text-sm font-medium text-gray-300">
                                {{
                                    service.hierarchicalCategories?.category
                                        ?.name
                                }}
                            </p>
                        </div>
                        <div class="text-xs">
                            <p class="text-gray-200 mb-1.5">
                                Service Location:
                            </p>
                            <p
                                class="text-sm font-medium text-gray-300 line-clamp-1"
                            >
                                {{ service.location.address }}
                            </p>
                        </div>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">Service specialties:</p>
                        <div
                            class="flex items-start justify-start gap-2.5 flex-wrap"
                        >
                            <Badge
                                v-for="sub_category in service.categories"
                                :key="sub_category.id"
                                class="text-xs"
                            >
                                <span class="text-xs leading-6">
                                    {{ sub_category.name }}
                                </span>
                            </Badge>
                        </div>
                    </div>
                    <div class="text-xs">
                        <p class="text-gray-200 mb-1.5">
                            Service skills & tools:
                        </p>
                        <div
                            class="flex items-start justify-start gap-2.5 flex-wrap"
                        >
                            <Badge
                                v-for="skill in service.skills"
                                :key="skill.id"
                                class="text-xs"
                            >
                                <span class="text-xs leading-6">
                                    {{ skill[`name_${$i18n.locale}`] }}
                                </span>
                            </Badge>
                        </div>
                    </div>
                </div>
            </div>
        </Card>
        <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"
                            >
                                {{ $t("Register.service_tiers") }}
                            </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"
                                    >
                                        Basic
                                    </p>
                                    <p class="text-gray-200 font-medium mb-1.5">
                                        {{ basicTierPrice }}
                                    </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"
                                    >
                                        Standard
                                    </p>
                                    <p class="text-gray-200 font-medium mb-1.5">
                                        {{ standardTierPrice }}
                                    </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"
                                    >
                                        Pro
                                    </p>
                                    <p class="text-gray-200 font-medium mb-1.5">
                                        {{ proTierPrice }}
                                    </p>
                                </div>
                            </th>
                        </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>
                            <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>
                        </tr>
                        <tr
                            v-for="included in includedFeatures"
                            :key="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.name }}
                            </th>
                            <td
                                class="px-6 py-4 text-xs font-medium text-gray-200"
                            >
                                <svg
                                    v-if="included.basic"
                                    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.standard"
                                    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"
                                    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>
                        </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 "swiper/css";

const props = defineProps({
    service: Object,
});

const statusColor = computed(() => {
    switch (props.service.status) {
        case "Published":
            return "green";
        case "Paused":
            return "red";
        case "Drafted":
            return "orange";
        default:
            return "blue";
    }
});
const basicTierPrice = computed(() => {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        currencyDisplay: "narrowSymbol",
        maximumFractionDigits: 0,
        minimumFractionDigits: 0,
    }).format(props.service.basic_tier_price);
});

const standardTierPrice = computed(() => {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        currencyDisplay: "narrowSymbol",
        maximumFractionDigits: 0,
        minimumFractionDigits: 0,
    }).format(props.service.standard_tier_price);
});

const proTierPrice = computed(() => {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        currencyDisplay: "narrowSymbol",
        maximumFractionDigits: 0,
        minimumFractionDigits: 0,
    }).format(props.service.pro_tier_price);
});

const includedFeatures = [
    {
        id: 1,
        name: "1 shot views",
        description: "1 shot views",
        basic: true,
        standard: true,
        pro: true,
    },
    {
        id: 4,
        name: "3 shot views",
        description: "3 shot views",
        basic: true,
        standard: true,
        pro: true,
    },
    {
        id: 2,
        name: "3D max file",
        description: "3D max file",
        basic: false,
        standard: true,
        pro: true,
    },
    {
        id: 3,
        name: "Photoshop edits",
        description: "Photoshop edits",
        basic: false,
        standard: false,
        pro: true,
    },
];

const restOfImages = computed(() => {
    return props.service.images.slice(1);
});

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