<template>
    <Modal
        ref="modal"
        size="lg"
        @closed="null"
        title="Payment Details"
        color="blue"
    >
        <div class="container flex flex-col gap-5 p-5">
            <ul class="muh-form-group">
                <li>
                    <FormKit
                        v-model="milestone.amount"
                        :classes="{
                            outer: 'mb-0',
                        }"
                        :label="$t('Register.amount_to_pay')"
                        name="rates[daily]"
                        type="number"
                        disabled
                    >
                        <template #suffix>
                            <span
                                class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                            >
                                {{ activeCurrency() }}
                            </span>
                        </template>
                    </FormKit>
                </li>
            </ul>
            <div
                v-if="contract"
                class="flex justify-start items-center gap-2.5 w-full"
            >
                <div
                    class="flex-1 p-2.5 flex-col flex gap-1 bg-gradient-to-br from-[#414141] to-[#222222] rounded-lg"
                >
                    <span class="text-xs text-gray-200">{{ $t('Register.agreed') }}:</span>
                    <span class="text-sm text-blue-100 line-clamp-1">{{
                        currency(contract.amount)
                    }}</span>
                </div>
                <div
                    class="flex-1 p-2.5 flex-col flex gap-1 bg-gradient-to-br from-[#414141] to-[#222222] rounded-lg"
                >
                    <span class="text-xs text-gray-200">Paid:</span>
                    <span class="text-sm text-blue-100 line-clamp-1">{{
                        currency(contract.paid_amount)
                    }}</span>
                </div>
                <div
                    class="flex-1 p-2.5 flex-col flex gap-1 bg-gradient-to-br from-[#414141] to-[#222222] rounded-lg"
                >
                    <span class="text-xs text-gray-200">{{ $t('Register.remaining') }}:</span>
                    <span class="text-sm text-blue-100 line-clamp-1">{{
                        currency(contract.amount - contract.paid_amount)
                    }}</span>
                </div>
            </div>
            <div class="flex justify-end w-full">
                <Button
                    :disabled="form.processing"
                    :loading="form.processing"
                    @click="submit"
                    size="md"
                    >{{ $t('Register.pay_securely') }}</Button
                >
            </div>
        </div>
    </Modal>
</template>

<script>
import Modal from "@/components/General/FormModal";
import Card from "@/components/Containers/ContentCard";
import { Link } from "@inertiajs/inertia-vue3";
import Button from "@/Jetstream/Button";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
    props: {
        milestone: {
            type: Object,
            required: true,
        },
        contract: {
            type: Object,
        },
    },
    data() {
        return {
            form: useForm({
                use_wallet: false,
            }),
        };
    },
    methods: {
        open() {
            this.$refs.modal.open();
        },
        close() {
            this.$refs.modal.close();
        },
        submit() {
            this.form.post(
                route("payment.milestone.payment-form.show", this.milestone.id),
                {
                    preserveScroll: true,
                    onSuccess: () => {
                        this.close();
                    },
                }
            );
        },
    },
    components: {
        Modal,
        Card,
        Button,
        Link,
    },
};
</script>

<style>
.muh-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.muh-form-group > li {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.muh-form-group > li:focus-within {
    @apply border border-blue-100;
}

.formkit-form {
    width: 100%;
    flex: 1 1 0%;
}
</style>
