<template>
    <section class="w-full p-5 bg-blue-100 rounded-lg">
        <div class="flex gap-2.5 w-full">
            <div class="flex-1 flex flex-col gap-2.5">
                <div class="text-xs">
                    <span class="text-gray-200">{{
                        $t("Register.service_id")
                    }}</span>

                    <span class="font-medium text-gray-300">
                        MH-{{
                            service.status != "Draft"
                                ? service.id
                                : "DR-" + service.draft.id
                        }}</span
                    >
                </div>
                <div class="flex">
                    <Badge :color="statusColor">
                        <span class="text-xs leading-6">
                            {{ service?.status }}
                        </span>
                    </Badge>
                </div>
                <div v-if="service.title" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_title") }}
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ service?.title }}
                    </p>
                </div>
                <div v-if="service.description" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_description") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300 line-clamp-3">
                        {{ service?.description }}
                    </p>
                </div>
                <div v-if="service?.skills?.length > 0" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_specialties") }}
                    </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 v-if="service?.images" class="w-80">
                <img
                    class="object-cover w-full max-h-40 h-full rounded-[10px] overflow-hidden"
                    :src="service?.images[0].url"
                    v-if="service?.images.length > 0"
                    :alt="`${service.title}-${service?.images[0].id}`"
                />
            </div>
        </div>
        <hr class="my-5 border-gray-200" />
        <div
            class="flex flex-col justify-between w-full gap-2 sm:items-center sm:flex-row"
        >
            <div class="flex items-center justify-start gap-7">
                <div v-if="service.basic_tier_price" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.starts_from") }}
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ currency(service.basic_tier_price) }}
                    </p>
                </div>
                <div v-if="service.basic_tier_days" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.delivery_days") }}
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ service.basic_tier_days }} {{ $t("Register.days") }}
                    </p>
                </div>
            </div>
            <div>
                <div
                    class="flex items-center justify-end gap-4"
                    v-if="service.status == 'Draft'"
                >
                    <Button
                        type="button"
                        @click="openDeleteModal"
                        buttonStyle="transparent"
                        size="md"
                    >
                        <span
                            class="flex items-center justify-center w-full gap-1 text-center text-red-300 underline"
                        >
                            {{ $t("Register.permanently_delete") }}
                        </span>
                    </Button>
                    <Button
                        type="link"
                        size="md"
                        :href="
                            type == 'engineer'
                                ? route(
                                      'engineer.services.update',
                                      service.slug
                                  )
                                : route('firm.services.update', service.slug)
                        "
                    >
                        {{ $t("Register.update_serv") }}</Button
                    >
                </div>
                <Button
                    v-else
                    type="link"
                    size="md"
                    :href="
                        type == 'engineer'
                            ? route('engineer.services.show', service.slug)
                            : route('firm.services.show', service.slug)
                    "
                >
                    {{ $t("Register.view_details") }}</Button
                >
            </div>
        </div>
    </section>
    <Modal ref="delete_modal" size="lg" @closed="null">
        <div class="flex flex-col items-center justify-center w-full">
            <svg
                class="mb-2.5"
                width="101"
                height="100"
                viewBox="0 0 101 100"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M16.5937 15.4688C13.1562 15.4688 10.5 18.2813 10.5 21.7188V67.6563H22.6875V21.7188C22.6875 18.2813 20.0312 15.4688 16.5937 15.4688ZM49.4062 67.6563H62.375V15.3125C62.375 11.875 59.4062 8.90625 55.9687 8.90625C52.375 8.90625 49.5625 11.875 49.5625 15.4688C49.4062 15.4688 49.4062 67.6563 49.4062 67.6563Z"
                    fill="#FFE1BD"
                />
                <path
                    d="M55.9688 8.90625C55.5 8.90625 55.1875 8.90625 54.875 9.0625C57.8437 9.53125 60.1875 12.1875 60.1875 15.3125V67.6563H62.5312V15.3125C62.375 11.7188 59.4062 8.90625 55.9688 8.90625Z"
                    fill="#E6B796"
                />
                <path
                    d="M22.6875 67.6562H35.9687V14.2188C35.9687 10.4688 33 7.5 29.25 7.5C25.5 7.5 22.5312 10.4688 22.5312 14.2188L22.6875 67.6562Z"
                    fill="#FFE1BD"
                />
                <path
                    d="M29.4063 7.5C28.9375 7.5 28.625 7.5 28.3125 7.65625C31.4375 8.28125 33.7812 10.9375 33.7812 14.375V47.6563L36.125 50.9375V14.2188C36.125 10.4688 33.1563 7.5 29.4063 7.5Z"
                    fill="#E6B796"
                />
                <path
                    d="M36.125 63.2812H49.4062V9.84375C49.4062 6.09375 46.4375 3.125 42.6875 3.125C38.9375 3.125 35.9688 6.09375 35.9688 9.84375L36.125 63.2812Z"
                    fill="#FFE1BD"
                />
                <path
                    d="M42.6875 3.125C42.2187 3.125 41.9062 3.125 41.5937 3.28125C44.7187 3.90625 47.0625 6.5625 47.0625 10V47.6562L49.4062 50.9375V9.84375C49.4062 6.09375 46.4375 3.125 42.6875 3.125ZM16.5937 15.4687C16.125 15.4687 15.8125 15.4688 15.5 15.625C18.3125 16.25 20.5 18.75 20.5 21.7188V49.0625L22.8437 52.3438V21.7188C22.6875 18.2812 20.0312 15.4687 16.5937 15.4687Z"
                    fill="#E6B796"
                />
                <path
                    d="M90.6562 45.7813C88.1562 40.9375 80.3437 41.25 72.375 50C66.75 56.0937 65.6562 58.125 60.0312 57.9687V51.5625C60.0312 51.5625 10.5 51.7187 10.5 55.625C10.5 55.625 8.15624 72.9687 13 83.9062C20.1875 100.156 53.9375 102.656 68.1562 76.25C76.4375 60.625 93.3125 50.9375 90.6562 45.7813Z"
                    fill="#FFE1BD"
                />
                <path
                    d="M90.6562 45.7812C90.1875 44.8437 89.5625 44.2187 88.7812 43.5938C88.9375 43.75 89.0938 43.9062 89.0938 44.2187C91.75 49.5312 83.7812 55 78.1563 60.625C73.625 65.1562 69.25 69.8437 67.0625 75.3125C57.0625 99.2187 28 99.2187 15.8125 88.2812C26.9062 100.781 58 101.875 68.625 76.875C70.9688 71.4062 75.0313 66.875 79.7188 62.1875C85.3438 56.4062 93.3125 50.9375 90.6562 45.7812ZM61.5938 57.9687C52.375 54.6875 33.3125 61.0937 35.8125 79.375C35.8125 62.3437 51.2813 58.125 59.7188 58.125C60.8125 57.9687 61.5938 57.9687 61.5938 57.9687Z"
                    fill="#E6B796"
                />
            </svg>

            <h2 class="text-2xl text-center text-red-300 font-medium mb-2.5">
                {{ $t("Register.are_you") }}
            </h2>
            <p class="mb-2.5 text-sm text-center text-gray-200 max-w-[410px]">
                {{ $t("Register.doyou") }}
            </p>
            <p class="mb-6 text-xs text-center text-gray-200">
                {{ $t("Register.note") }}
            </p>
            <div class="flex items-center justify-center w-full gap-2.5">
                <Button size="md" @click="closeDeleteModal" buttonStyle="white"
                    >{{ $t("Register.cancel") }}
                </Button>
                <Button
                    size="md"
                    @click="submitDelete"
                    buttonStyle="danger"
                    :disabled="deleteForm.processing"
                    :loading="deleteForm.processing"
                    >{{ $t("Register.delete") }}
                </Button>
            </div>
        </div>
    </Modal>
</template>

<script setup>
import Badge from "@/components/General/Badge.vue";
import Button from "@/Jetstream/Button.vue";
import { useForm } from "@inertiajs/inertia-vue3";

import { computed, ref } from "@vue/runtime-core";
import Modal from "@/components/General/Modal.vue";

const props = defineProps({
    service: Object,
    engineer: Object,
    type: {
        type: String,
        default: "engineer",
    },
});

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

const deleteForm = useForm();

const delete_modal = ref(null);

const submitDelete = () => {
    deleteForm.delete(
        route(
            props.type == "engineer"
                ? "engineer.services.destroy"
                : "firm.services.destroy",
            props.service.slug
        ),
        {
            preserveScroll: true,
        }
    );
};
const closeDeleteModal = () => {
    delete_modal.value.close();
};
const openDeleteModal = () => {
    delete_modal.value.open();
};
</script>
