<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.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
                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">
            <template v-if="accepted">
                <template
                    v-if="milestone.transaction && status === 'in progress'"
                >
                    <FormKit
                        :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>
                </template>
                <template
                    v-else-if="milestone.transaction && status === 'accepted'"
                >
                    <Button disabled buttonStyle="green" size="md">
                        {{ $t("Register.approved_and_paid") }}
                    </Button>
                </template>
                <template
                    v-else-if="milestone.transaction && status === 'closed'"
                >
                    <Button disabled buttonStyle="gray" size="md">
                        {{ $t('Register.closed') }}
                    </Button>
                </template>
            </template>
        </div>
        <div v-else class="flex justify-start w-full">
            <div class="flex flex-col items-start 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">
                    <template
                        v-if="milestone.transaction && status === 'in progress'"
                    >
                        <Button
                            :loading="form.processing"
                            :disabled="form.processing"
                            @click="approve"
                            size="md"
                        >
                        {{ $t("Register.approve_and_release") }}
                        </Button>
                    </template>
                    <template
                        v-else-if="
                            milestone.transaction && status === 'accepted'
                        "
                    >
                        <Button disabled buttonStyle="green" size="md">
                            {{ $t("Register.approved_and_paid") }}
                        </Button>
                    </template>
                    <template
                        v-else-if="milestone.transaction && status === 'closed'"
                    >
                        <Button disabled buttonStyle="gray" size="md">
                            {{ $t('Register.closed') }}
                        </Button>
                    </template>
                </template>
                <template v-else-if="declined">
                    <Button disabled buttonStyle="danger" size="md"
                        >Declined by Engineer/Firm, refund issued</Button
                    >
                </template>
                <template v-else-if="status == 'refunded'">
                    <Button disabled buttonStyle="warning" size="md"
                        >Refunded</Button
                    >
                </template>
                <template v-else>
                    <Button disabled buttonStyle="warning" size="md"
                        >Waiting for Engineer/Firm approval</Button
                    >
                </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";
import Deliverables from "@/components/Deliverables";
import Attachements from "@/components/Inputs/FileUploads/Slider";

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,
        },
        status: {
            type: String,
            required: false,
        },
        declined: {
            type: Boolean,
            default: false,
        },
    },
    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>
