<template>
    <div
        class="flex flex-col w-full bg-[#ffffff] gap-5 p-5 mb-3 rounded-lg cont-main"
    >
        <div v-if="!workerProfile" class="flex justify-between flex-1 gap-2">
            <div class="flex items-start justify-between flex-1 gap-2">
                <div class="relative flex flex-1 gap-2">
                    <div>
                        <img
                            :src="service.serviceable.user.profile_photo_url"
                            class="imgs rounded-[50%] w-[30px] h-[30px] mt-[6px] object-cover no-magnify"
                        />
                    </div>
                    <div>
                        <span
                            class="text-xs font-medium text-gray-300 normal font-Inter"
                        >
                            <a
                                :href="
                                    route(
                                        service.serviceable_type ===
                                            'App\\Models\\Engineer'
                                            ? 'engineer.profile.slugged'
                                            : 'firm.profile.slugged',
                                        service.serviceable.slug
                                    )
                                "
                                class="text-sm font-medium grey-200"
                            >
                                {{ service.serviceable.name }}
                            </a>
                        </span>
                        <br />

                        <span
                            class="flex gap-1 text-xs font-medium leading-4 text-gray-200 cont_spans normal font-Inter"
                            ><svg
                                width="14"
                                height="14"
                                viewBox="0 0 14 14"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M7.00015 10.8543L3.39982 12.7472L4.08757 8.73797L1.1709 5.89889L5.1959 5.31555L6.99606 1.66797L8.79623 5.31555L12.8212 5.89889L9.90456 8.73797L10.5923 12.7472L7.00015 10.8543Z"
                                    stroke="#FA8C16"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </svg>
                            {{ service.averageRating }}</span
                        >
                    </div>
                    <br />
                </div>
                <span
                    class="pt-2 text-xs font-medium text-gray-200 normal font-Inter"
                >
                    {{
                        moment(service.created_at).format("ddd, MMM Do YYYY")
                    }}</span
                >
            </div>

            <Badge
                v-if="statusDisplayed"
                :color="statusColor"
                class="py-1 text-center h-7"
            >
                <span class="text-xs leading-6">
                    {{ status }}
                </span>
            </Badge>
        </div>

        <hr v-if="!workerProfile" class="w-full" />

        <div class="flex flex-col pt-2 lg:flex-row gap-y-2">
            <div class="flex-1 span-imgs">
                <span
                    class="ml-1 text-sm font-medium leading-4 text-gray-300 normal font-Inter"
                    >{{ service.title }}
                </span>
                <h6
                    class="pt-3 ml-1 text-xs font-medium leading-4 text-gray-200 normal font-Inter"
                >
                    {{
                        !checkstate
                            ? service.description.substr(0, 85)
                            : service.description
                    }}
                    <button
                        v-if="service.description.length > 85"
                        @click="checkstate = !checkstate"
                        style="font-size: 10px"
                        class="text-xs italic font-medium leading-4 text-blue-300 text-[12px] ml-[4px] serMore normal font-Inter"
                    >
                        {{
                            checkstate
                                ? $t("Register.see_less")
                                : $t("Register.see_more")
                        }}
                    </button>
                </h6>

                <div class="flex flex-wrap gap-2 mt-3 ml-1">
                    <Badge
                        v-for="itemB in service.skills"
                        :key="itemB.id"
                        size="fits"
                    >
                        {{ itemB[`name_${$i18n.locale}`] }}
                    </Badge>
                </div>
            </div>
            <template v-if="service?.images?.length > 0">
                <img
                    class="object-cover w-full h-full max-w-xs mt-2 ml-2 overflow-x-auto rounded-lg max-h-40"
                    :src="service.images[0]?.url"
                    alt=""
                />
            </template>
        </div>
        <div class="flex flex-col my-auto ml-2 lg:flex-row lg">
            <div
                class="flex justify-between w-full text-center lg:justify-start sm:text-start"
            >
                <span
                    class="text-sm font-medium text-gray-200 leading-[26px] normal font-Inter"
                    >{{ $t("Register.starts_from") }} <br /><span
                        class="sar font-Inter"
                    >
                        {{ currency(service.basic_tier_price) }}
                    </span></span
                >
                <span
                    class="text-sm font-medium text-gray-200 ml-11 leading-[26px] normal font-Inter"
                    >{{ $t("Register.delivery_days") }} <br /><span
                        class="sar font-Inter"
                        >{{ service.basic_tier_days }}
                        {{ $t("Register.days") }}
                    </span></span
                >
            </div>
            <div class="flex gap-2 btn-last mx-auto mt-2.5">
                <Button
                    v-if="!order && !workerProfile"
                    :class="
                        this.service.isLikedByUser?.isLiked ? 'span-divs' : ''
                    "
                    @click="saveService"
                    :disabled="form.processing"
                    buttonStyle="white_save"
                    size="fit_4"
                >
                    <svg
                        width="18"
                        height="16"
                        viewBox="0 0 18 16"
                        :fill="
                            this.service.isLikedByUser?.isLiked
                                ? color_svg
                                : 'none'
                        "
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M15.2501 8.81007L9.00009 15.0001L2.75009 8.81007M2.75009 8.81007C2.33784 8.40891 2.01312 7.92674 1.79638 7.39393C1.57963 6.86111 1.47556 6.28919 1.4907 5.71418C1.50585 5.13916 1.63989 4.57351 1.88439 4.05285C2.12888 3.53218 2.47853 3.06778 2.91133 2.68888C3.34412 2.30999 3.85068 2.02481 4.3991 1.8513C4.94752 1.67779 5.52593 1.61972 6.09789 1.68073C6.66986 1.74175 7.223 1.92053 7.72248 2.20582C8.22196 2.49111 8.65696 2.87673 9.00009 3.3384C9.3447 2.88008 9.7802 2.49783 10.2793 2.21557C10.7785 1.93331 11.3305 1.75711 11.9009 1.698C12.4712 1.63889 13.0477 1.69815 13.5941 1.87206C14.1405 2.04597 14.6451 2.33079 15.0764 2.7087C15.5077 3.08661 15.8563 3.54947 16.1004 4.06831C16.3446 4.58715 16.479 5.1508 16.4953 5.72399C16.5117 6.29718 16.4095 6.86756 16.1952 7.39944C15.9809 7.93132 15.6592 8.41325 15.2501 8.81507"
                            :stroke="
                                this.service.isLikedByUser?.isLiked
                                    ? '#F1416C'
                                    : '#29419B'
                            "
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>
                    {{
                        this.service.isLikedByUser?.isLiked
                            ? $t("Register.saved")
                            : $t("Register.save")
                    }}
                </Button>
                <Button
                    class="block text-center btn-view"
                    buttonStyle="blue_view"
                    size="fit_2"
                    :href="
                        order
                            ? route(
                                  'service.orders.show',
                                  service.active_order_id
                              )
                            : route('service.show', service.slug)
                    "
                >
                    {{ $t("Register.view_details") }}
                </Button>
            </div>
        </div>
    </div>
</template>

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

export default {
    props: {
        service: {
            type: Object,
            required: true,
        },
        order: {
            type: Boolean,
            default: false,
        },
        statusDisplayed: {
            type: Boolean,
            default: false,
        },
        workerProfile: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            value: [],
            checkstate: false,
            chech_svg: false,
            form: useForm({}),
            color_svg: "rgba(241, 65, 108, 0.2)",
        };
    },
    computed: {
        statusColor() {
            switch (this.status) {
                case "Drafted":
                case "Open":
                case "pending":
                case "accepted":
                    return "green";
                case "Cancelled":
                case "declined":
                case "declined":
                    return "red";
                case "Processing":
                case "in progress":
                case "refunded":
                    return "orange";
                default:
                    return "blue";
            }
        },
        status() {
            return this.service.active_order_status
                ? this.service.active_order_status
                : this.service.status;
        },
    },
    methods: {
        saveService() {
            this.form.post(
                route("toggle-save.service", this.service.slug),

                {
                    preserveState: true,
                    preserveScroll: true,
                    onSuccess: () => {},
                }
            );
        },
    },
    components: {
        Badge,
        ContentCard,
        Button,
    },
};
</script>
<style scoped>
.sar {
    color: black !important;
    font-size: 14px;
    line-height: 16px;
}

.btn-last svg {
    margin-left: 1px;
}
.span-divs {
    background-color: rgba(241, 65, 108, 0.2) !important;
    color: #f1416c !important;
}
.spanone svg {
    margin-top: 1px;
}

.cont_spans {
    margin-top: 0px !important;
}
</style>
