<template>
    <div
        class="bg-blue-100 p-2.5 flex flex-col gap-5 items-start justify-start w-full rounded-lg"
    >
        <div
            class="bg-blue-100 p-2.5 flex flex-col gap-5 items-start justify-start w-full rounded-lg"
        >
            <Badge :color="badgeColor">{{ badgeText }}</Badge>
            <div v-if="milestone.name">
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.milestone_name") }}:
                </p>
                <p class="text-sm font-medium text-gray-300">
                    {{ milestone.name }}
                </p>
            </div>
            <div>
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.milestone_dates") }}:
                </p>
                <template v-if="paidAt">
                    <p class="text-sm font-medium text-gray-300 mb-1.5">
                        {{ $t("Register.start_date") }}:
                        {{ moment(milestone.start_date).format("DD MMM, YYYY") }}
                    </p>
                    <p
                        v-if="milestone.accepted_at"
                        class="text-sm font-medium text-gray-300"
                    >
                        {{ $t("Register.end_date") }}:
                        {{
                            moment(milestone.accepted_at).format("DD MMM, YYYY")
                        }}
                    </p>
                    <p
                        v-if="milestone.due_date"
                        class="text-sm font-medium text-gray-300"
                    >
                        {{ $t("Register.due_date") }}:
                        {{ moment(milestone.due_date).format("DD MMM, YYYY") }}
                    </p>
                    <p v-else class="text-sm font-medium text-gray-300">
                        No due date
                    </p>
                </template>
                <template v-else>
                    <p class="text-sm font-medium text-gray-300 mb-1.5">
                        {{ $t("Register.hasnot_started") }}
                        <span class="text-xs font-normal text-gray-200">
                            ({{ $t("Register.will_take") }}
                            {{ milestone.duration }}
                            {{ $t("Register.milestone_duration") }})
                        </span>
                    </p>
                </template>
            </div>
            <div>
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.milestone_pric") }}:
                </p>
                <p class="text-sm font-medium text-gray-300 mb-1.5">
                    {{ currency(milestone.amount) }}
                </p>
            </div>
            <div v-if="milestone.deliverables.length > 0">
                <p class="text-gray-200 mb-1.5 text-xs">
                    {{ $t("Register.deliverable") }}:
                </p>
                <p
                    v-for="(deliverable, idx) in milestone.deliverables"
                    :key="idx"
                    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-start w-full">
                <FormKit
                    v-if="milestone.start_date && milestone.status === 'paid'"
                    :actions="false"
                    name="add_milestone_deliverables"
                    type="form"
                    @submit="submitDeliverables"
                >
                    <FormKit name="categories" type="group">
                        <template #default="{ state: { valid } }">
                            <AttachementsPreview
                                class="w-full max-w-[1000px] flex-1"
                                v-if="milestone.files.length > 0"
                                :attachments="milestone.files"
                            />

                            <Attachements
                                class="w-full max-w-[1000px] flex-1"
                                v-model:value="deliverablesForm.attachements"
                                :maxFiles="10"
                                accept=".jpeg, .png, .jpg, .gif, .bmp, .pdf"
                                name="proposal_files"
                                :uploadInSlider="false"
                                required
                                :label="
                                    milestone.files.length > 0
                                        ? null
                                        : $t('Register.attachements')
                                "
                                :slidesPerView="4.5"
                            >
                                <template #upload>
                                    <span class="formkit-no-files">
                                        <label
                                            class="!cursor-pointer min-w-[250px] max-w-[250px] items-center justify-start gap-2.5 flex p-[5px] rounded-[4px] border border-dashed border-gray-200 hover:brigtness-105"
                                            for="proposal_files"
                                        >
                                            <span
                                                class="h-8 flex text-xs items-center border rounded-[4px] border-gray-200 justify-center px-4 py-1.5 gap-2 text-gray-300 bg-white hover:brightness-95"
                                            >
                                                <svg
                                                    fill="none"
                                                    height="16"
                                                    viewBox="0 0 14 16"
                                                    width="14"
                                                    xmlns="http://www.w3.org/2000/svg"
                                                >
                                                    <path
                                                        d="M4.24992 12.1667H9.74992V6.66667H13.4166L6.99992 0.25L0.583252 6.66667H4.24992V12.1667ZM6.99992 2.84417L8.98908 4.83333H7.91658V10.3333H6.08325V4.83333H5.01075L6.99992 2.84417ZM0.583252 14H13.4166V15.8333H0.583252V14Z"
                                                        fill="#AAAAAA"
                                                    />
                                                </svg>
                                                {{ $t("proposal.upload_file") }}
                                            </span>
                                            <span
                                                class="flex-1 text-xs text-gray-200 truncate whitespace-nowrap"
                                                >{{
                                                    $t("proposal.drop_file")
                                                }}</span
                                            >
                                        </label>
                                    </span>
                                </template>
                            </Attachements>
                            <Button
                                v-if="valid"
                                type="submit"
                                size="md"
                                :disabled="
                                    !valid || deliverablesForm.processing
                                "
                                :loading="deliverablesForm.processing"
                            >
                                {{ $t("proposal.submit_deliverable") }}
                            </Button>
                        </template>
                    </FormKit>
                </FormKit>
            </div>
            <div v-else class="flex justify-end w-full">
                <div
                    v-if="milestone.status !== 'refunded'"
                    class="flex flex-col items-start justify-start w-full gap-2"
                >
                    <AttachementsPreview
                        class="w-full"
                        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_and_release") }}
                            </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
                                v-if="canPay"
                                @click="openPaymentModal"
                                size="md"
                                >{{ $t("Register.pay") }}</Button
                            >
                            <PaymentModal
                                :milestone="milestone"
                                ref="payment_modal"
                            />
                        </template>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import AttachementsPreview from "@/components/Projects/Client/Proposals/AttachmentsPreview.vue";
import Button from "@/Jetstream/Button.vue";
import PaymentModal from "@/components/Projects/Client/Contracts/PaymentModal";
import { useForm } from "@inertiajs/inertia-vue3";
import Deliverables from "@/components/Deliverables";
import Attachements from "@/components/Inputs/FileUploads/Slider";

export default {
    props: {
        milestone: {
            type: Object,
            required: true,
        },
        accepted: {
            type: Boolean,
            required: false,
        },
        worker: {
            type: Boolean,
            default: false,
        },
        canPay: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        //images only
        images() {
            return this.milestone.files.filter((file) => {
                return file.type == "image";
            });
        },
        files() {
            return this.milestone.files.filter((file) => {
                return file.type != "image";
            });
        },
        badgeColor() {
            switch (this.milestone.status) {
                case "paid":
                    return "green";
                case "refunded":
                    return "gray";
                case "unpaid":
                    return "orange";
                default:
                    return "red";
            }
        },
        badgeText() {
            switch (this.milestone.status) {
                case "paid":
                    return "Paid";
                case "refunded":
                    return "Refunded";
                default:
                    return "Unpaid";
            }
        },
        paidAt() {
            if (this.milestone.transaction) {
                return this.moment(
                    this.milestone.transaction.created_at
                ).format("DD MMM, YYYY");
            }
        },
    },
    components: {
        Badge,
        Button,
        PaymentModal,
        AttachementsPreview,
        Deliverables,
        Attachements,
    },
    methods: {
        openPaymentModal() {
            this.$refs.payment_modal.open();
        },
        approve() {
            this.form.post(
                route("client.projects.milestones.approve", this.milestone.id),
                {
                    preserveScroll: true,
                    onSuccess: () => {},
                }
            );
        },
        submitDeliverables() {
            this.deliverablesForm.post(
                route("worker.projects.milestones.add.deliverables"),
                {
                    preserveScroll: true,
                    onSuccess: () => {
                        this.deliverablesForm.reset();
                    },
                }
            );
        },
    },
    data() {
        return {
            form: useForm({}),
            deliverablesForm: useForm({
                attachements: [],
                milestone_id: this.milestone.id,
            }),
        };
    },
    mounted() {},
};
</script>
