<template>
    <section class="w-full p-5 bg-blue-100 rounded-lg">
        <div class="flex items-start justify-between gap-1">
            <div class="flex flex-1 items-center justify-start gap-2.5">
                <div class="border-2 border-white rounded-full">
                    <img
                        class="object-cover aspect-square w-[100px] h-[100px] rounded-full overflow-hidden no-magnify"
                        :src="order.user.profile_photo_url"
                        alt="profile image"
                    />
                </div>
                <div class="flex flex-1 h-full justify-center flex-col gap-1.5">
                    <p class="text-sm font-medium text-gray-300">
                        {{ order.user.name }}
                    </p>
                    <p
                        v-if="order.user.tag_line"
                        class="text-xs font-medium text-gray-200 overflow-ellipsis"
                    >
                        {{ order.user.tag_line }}
                    </p>
                    <p
                        v-if="order.user.location"
                        class="text-xs font-medium text-gray-200 overflow-ellipsis flex items-center gap-1.5 justify-start"
                    >
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 16 16"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_922_58896)">
                                <path
                                    d="M8 9.3335C9.10457 9.3335 10 8.43807 10 7.3335C10 6.22893 9.10457 5.3335 8 5.3335C6.89543 5.3335 6 6.22893 6 7.3335C6 8.43807 6.89543 9.3335 8 9.3335Z"
                                    stroke="#AAAAAA"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                                <path
                                    d="M11.7717 11.1045L8.94299 13.9331C8.69298 14.1829 8.35405 14.3232 8.00066 14.3232C7.64727 14.3232 7.30834 14.1829 7.05833 13.9331L4.22899 11.1045C3.48314 10.3586 2.97522 9.40827 2.76945 8.37371C2.56369 7.33916 2.66932 6.26681 3.073 5.29229C3.47667 4.31777 4.16026 3.48483 5.03732 2.89881C5.91437 2.31279 6.94551 2 8.00033 2C9.05515 2 10.0863 2.31279 10.9633 2.89881C11.8404 3.48483 12.524 4.31777 12.9277 5.29229C13.3313 6.26681 13.437 7.33916 13.2312 8.37371C13.0254 9.40827 12.5175 10.3586 11.7717 11.1045V11.1045Z"
                                    stroke="#AAAAAA"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_922_58896">
                                    <rect width="16" height="16" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        <span>
                            {{ order.user.location.address }}
                        </span>
                    </p>
                    <p
                        class="text-xs font-medium text-gray-200 overflow-ellipsis flex items-center gap-1.5 justify-start"
                    >
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 16 16"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <g clip-path="url(#clip0_922_58902)">
                                <path
                                    d="M3.33301 7.99984L6.66634 11.3332L13.333 4.6665"
                                    stroke="#50CD89"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </g>
                            <defs>
                                <clipPath id="clip0_922_58902">
                                    <rect width="16" height="16" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>

                        <span>
                            {{ order.user.deals || 0 }}
                            {{ $t("Register.successful_deals") }}
                        </span>
                    </p>
                </div>
            </div>
            <div class="text-xs max-w-[100px] w-full">
                <p class="text-gray-200 mb-1.5">{{ $t("Register.sent") }}</p>
                <p class="text-sm font-medium text-gray-300">
                    {{ moment(order.created_at).format("DD MMM, YYYY") }}
                </p>
            </div>
        </div>
        <hr class="my-5 border-gray-200" />
        <div class="flex gap-2.5 w-full mb-5">
            <div class="flex-1 flex flex-col gap-2.5 w-72">
                <div class="text-xs">
                    <span class="text-gray-200"
                        >{{ $t("Register.service_id") }}:</span
                    >

                    <span class="font-medium text-gray-300">
                        MH-{{ order.service.id }}</span
                    >
                </div>
                <div class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_title2") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ order.service.title }}
                    </p>
                </div>
                <div 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">
                        {{
                            !checkstate
                                ? order.service.description.substr(0, 70)
                                : order.service.description
                        }}
                        <button
                            v-if="order.service.description.length > 70"
                            @click="checkstate = !checkstate"
                            style="font-size: 10px"
                            class="text-xs italic font-medium leading-4 text-blue-300 serMore ml-[4px] text-[12px] normal font-Inter"
                        >
                            {{ checkstate ? "See less" : "See more" }}
                        </button>
                    </p>
                </div>
            </div>
            <div>
                <img
                    class="object-cover w-full max-h-40 h-full rounded-[10px] overflow-hidden"
                    :src="order.service.images[0].url"
                    v-if="order.service?.images.length > 0"
                    :alt="`${order.service.title}-${order.service.images[0].id}`"
                />
            </div>
        </div>
        <div
            class="flex flex-col items-center justify-between w-full gap-3 lg:flex-row"
        >
            <div class="flex items-center justify-start gap-7">
                <div class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.service_price") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{ currency(order.tier.price) }}
                    </p>
                </div>
                <div 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">
                        {{ order.tier.duration }} {{ $t("Register.days") }}
                    </p>
                </div>
                <div v-if="order?.milestones" class="text-xs">
                    <p class="text-gray-200 mb-1.5">
                        {{ $t("Register.paid_by_client") }}:
                    </p>
                    <p class="text-sm font-medium text-gray-300">
                        {{
                            currency(
                                order?.milestones[0]?.transaction?.amount || 0
                            )
                        }}
                    </p>
                </div>
            </div>
            <div class="flex flex-row gap-1.5">
                <template v-if="order.status == 'pending'">
                    <Button
                        type="link"
                        size="md"
                        buttonStyle="white"
                        :href="
                            route('engineer.services.order.decline', order.id)
                        "
                    >
                        {{ $t("Register.decline") }}</Button
                    >
                    <Button
                        type="link"
                        size="md"
                        :href="
                            route('engineer.services.order.accept', order.id)
                        "
                    >
                        {{ $t("Register.accept") }}</Button
                    >
                </template>

                <template v-else-if="order.status == 'in progress'">
                    <Button
                        type="link"
                        size="md"
                        buttonStyle="warning"
                        :href="route('service.orders.show', order.id)"
                        >{{ $t("Register.progress") }}</Button
                    >
                </template>

                <template v-else-if="order.status == 'accepted'">
                    <Button size="md" buttonStyle="green" disabled>
                        {{ $t("Register.client_accepted") }}
                    </Button>
                </template>

                <template v-else-if="order.status == 'declined'">
                    <Button
                        type="link"
                        size="md"
                        buttonStyle="white"
                        :href="route('service.orders.show', order.id)"
                        >{{ $t("Register.declined") }}</Button
                    >
                </template>

                <template v-else-if="order.status == 'closed'">
                    <Button
                        type="link"
                        size="md"
                        buttonStyle="white"
                        :href="route('service.orders.show', order.id)"
                    >
                        {{ $t("Register.closed") }}
                    </Button>
                </template>
            </div>
        </div>
    </section>
</template>

<script setup>
import Badge from "@/components/General/Badge.vue";
import Button from "@/Jetstream/Button.vue";

import { computed, onMounted } from "@vue/runtime-core";
import { ref } from "vue";
const props = defineProps({
    order: Object,
    engineer: Object,
});
let checkstate = ref(false);
const statusColor = computed(() => {
    switch (props.order.service.status) {
        case "Published":
            return "green";
        case "Paused":
            return "red";
        case "Drafted":
            return "orange";
        default:
            return "blue";
    }
});

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