<template>
    <div
        class="bg-blue-100 p-2.5 flex flex-col gap-5 items-start justify-start w-full rounded-lg"
    >
        <ul class="flex items-start justify-between gap-2 mb-1.5 w-full">
            <li v-if="milestone.name" class="flex-1">
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.milestone_name") }}
                </p>
                <p class="text-sm font-medium text-gray-300 line-clamp-1">
                    {{ milestone.name }}
                </p>
            </li>
            <li class="flex-1">
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.duration") }}
                </p>
                <p class="text-sm font-medium text-gray-300 line-clamp-1">
                    {{ milestone.duration }} {{ $t("Register.working_days") }}
                </p>
            </li>
            <li class="flex-1">
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.price") }}
                </p>
                <p class="text-sm font-medium text-gray-300 line-clamp-1">
                    {{ currency(milestone.amount) }}
                </p>
            </li>
        </ul>

        <div v-if="milestone.deliverables.length > 0">
            <p class="text-gray-200 mb-1.5 text-xs">
                {{ $t("Register.deliverable") }}
            </p>
            <p
                :key="deliverable.id"
                v-for="deliverable in milestone.deliverables"
                class="text-sm font-medium text-gray-300 mb-1.5 flex items-center justify-start gap-1.5"
            >
                <span>
                    <svg
                        width="16"
                        height="17"
                        viewBox="0 0 16 17"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <g opacity="0.5" clip-path="url(#clip0_1247_51020)">
                            <path
                                d="M3.33301 8.07259L6.66634 11.4059L13.333 4.73926"
                                stroke="#50CD89"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </g>
                        <defs>
                            <clipPath id="clip0_1247_51020">
                                <rect
                                    width="16"
                                    height="16"
                                    fill="white"
                                    transform="translate(0 0.0722656)"
                                />
                            </clipPath>
                        </defs>
                    </svg>
                </span>
                <span class="flex-1">
                    {{ deliverable.name }}
                </span>
            </p>
        </div>

        <div v-if="!worker" class="flex justify-end w-full">
            <div class="flex flex-col items-end justify-start w-full gap-2">
                <AttachementsPreview
                    :slidesPerView="slidesPerView"
                    class="flex-1"
                    v-if="milestone.files.length > 0"
                    :attachments="milestone.files"
                />
                <template
                    v-if="
                        accepted &&
                        (milestone.start_date || milestone.files.length > 0)
                    "
                >
                    <template
                        v-if="milestone.transaction && !milestone.accepted_at"
                    >
                        <Button
                            :loading="form.processing"
                            :disabled="form.processing"
                            @click="approve"
                            size="md"
                            >{{ $t("Register.approve_milestone") }}</Button
                        >
                    </template>
                    <template
                        v-else-if="
                            milestone.transaction && milestone.accepted_at
                        "
                    >
                        <Button disabled buttonStyle="green" size="md">{{
                            $t("Register.approved_and_paid")
                        }}</Button>
                    </template>
                    <template v-else>
                        <Button @click="openPaymentModal" size="md">{{
                            $t("Register.pay")
                        }}</Button>
                        <PaymentModal
                            :milestone="milestone"
                            ref="payment_modal"
                        />
                    </template>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import Button from "@/Jetstream/Button.vue";
import PaymentModal from "@/components/Projects/Client/Contracts/PaymentModal";
import AttachementsPreview from "@/components/Projects/Client/Proposals/AttachmentsPreview.vue";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
    props: {
        milestone: {
            type: Array,
            required: true,
        },
        contract: {
            type: Object,
            required: true,
        },
        accepted: {
            type: Boolean,
            required: false,
        },
        slidesPerView: {
            type: Number,
            default: 3.5,
        },
        worker: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Badge,
        Button,
        PaymentModal,
        AttachementsPreview,
    },
    methods: {
        openPaymentModal() {
            this.$refs.payment_modal.open();
        },
        approve() {
            this.form.post(
                route("client.projects.milestones.approve", this.milestone.id),
                {
                    preserveScroll: true,
                    onSuccess: () => {},
                }
            );
        },
    },
    data() {
        return {
            form: useForm({}),
        };
    },
};
</script>
