<template>
    <Modal
        ref="modal"
        size="xl"
        @closed="null"
        title="Payment Details"
        color="blue"
    >
        <FormKit
            :actions="false"
            name="pay_service"
            type="form"
            @submit="submit"
        >
            <div class="container flex flex-col gap-5 p-5">
                <ul class="flex flex-col w-full gap-4">
                    <li class="flex flex-col w-full gap-4">
                        <p class="font-semibold">
                            {{ $t("Register.payment_details") }}
                        </p>
                        <span
                            class="flex items-center justify-between w-full text-sm font-medium text-gray-200"
                        >
                            <span
                                >{{ $t("Register.project_amount_in") }}
                                {{ activeCurrency() }}:</span
                            >
                            <span
                                >{{ currency(price) }} ({{
                                    $t("Register.you_will_be_billed")
                                }})</span
                            >
                        </span>
                        <span
                            class="flex items-center justify-between w-full text-sm font-medium text-gray-200"
                        >
                            <span
                                >{{
                                    $t("Register.project_amount_in")
                                }}
                                USD:</span
                            >
                            <span>{{ currency(price, "USD") }}</span>
                        </span>
                    </li>
                    <li class="border-b border-b-blue-200"></li>
                    <li class="flex items-center justify-between">
                        <Switch
                            :label="`Muhandisin wallet (Balance: ${currency(
                                $page.props.current_user.wallet.available_funds,
                                'USD'
                            )})`"
                            v-model:enabled="form.use_wallet"
                        />
                    </li>
                    <li
                        class="flex flex-col w-full gap-4 p-4 bg-gray-300 rounded-lg"
                    >
                        <p class="font-semibold text-white">
                            {{ $t("Register.order_details") }}
                        </p>
                        <span
                            class="flex items-center justify-between w-full text-sm font-medium text-gray-200"
                        >
                            <span>{{ $t("Register.pay_by_card") }}</span>
                            <span>{{ currency(price, "USD") }}</span>
                        </span>
                        <span
                            v-if="form.use_wallet"
                            class="flex items-center justify-between w-full text-sm font-medium text-gray-200"
                        >
                            <span>{{ $t("Register.muhandisin_wallet") }}</span>
                            <span
                                >-{{ currency(muhandisinWallet, "USD") }}</span
                            >
                        </span>
                        <span
                            class="flex items-center justify-between w-full text-xs font-medium text-gray-200"
                        >
                            <span>{{ $t("Register.vat") }}</span>
                            <span>({{ $t("Register.included") }})</span>
                        </span>
                        <span class="border-b border-b-white"></span>
                        <span
                            class="flex items-center justify-between w-full text-sm font-medium text-white"
                        >
                            <span>{{ $t("Register.total") }}:</span>
                            <span>{{ currency(calculatedTotal, "USD") }}</span>
                        </span>
                    </li>
                    <li>
                        <FormKit
                            name="accepted_terms"
                            :classes="{
                                label:
                                    'text-xs ' +
                                    (form.accepted
                                        ? 'text-blue-300'
                                        : 'text-gray-200'),
                            }"
                            :label="$t('Register.by_continuing')"
                            type="checkbox"
                            v-model="form.accepted"
                        ></FormKit>
                    </li>
                </ul>

                <div class="flex justify-end w-full">
                    <Button
                        :disabled="form.processing || !form.accepted"
                        :loading="form.processing"
                        @click="openConfirm"
                        size="md"
                        >{{ $t("Register.confirm") }}</Button
                    >
                </div>
            </div>
        </FormKit>
    </Modal>
    <Modal
        ref="signature_modal"
        size="lg"
        @closed="null"
        :title="$t('Register.confirm_payment')"
        color="blue"
    >
        <FormKit :actions="false" name="payment" type="form" @submit="submit">
            <FormKit name="proposal_payment" type="group">
                <template #default="{ state: { valid } }">
                    <div class="container flex flex-col gap-5 p-5">
                        <div
                            id="proposal-payment-confirm"
                            class="flex flex-col gap-5 p-1 bg-blue-100"
                        >
                            <ul class="muh-form-group">
                                <li>
                                    <FormKit
                                        v-model="price"
                                        :classes="{
                                            outer: 'mb-0',
                                            inner: 'bg-blue-100 opacity-50 cursor-not-allowed',
                                            input: 'bg-blue-100',
                                            help: 'text-2xs',
                                        }"
                                        :help="
                                            $t('Register.amount_to_pay_help')
                                        "
                                        :label="$t('Register.amount_to_pay')"
                                        name="milestone_amount"
                                        type="number"
                                        disabled
                                    >
                                        <template #suffix>
                                            <span
                                                class="text-[10px] text-gray-200 select-none px-0.5"
                                            >
                                                USD
                                            </span>
                                        </template>
                                    </FormKit>
                                </li>
                                <li>
                                    <FormKit
                                        v-model="form.client_signature"
                                        :classes="{
                                            outer: 'mb-0',
                                            help: 'text-2xs',
                                        }"
                                        :label="$t('Register.signture')"
                                        :help="$t('Register.signture_help')"
                                        name="client_signature"
                                        type="text"
                                        validation="required|string|length:3,255"
                                        required
                                    >
                                    </FormKit>
                                </li>
                            </ul>
                            <div
                                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(price, "USD") }}</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.to_be_paid_now")
                                        }}:</span
                                    >
                                    <span
                                        class="text-sm text-blue-100 line-clamp-1"
                                        >{{ currency(price, "USD") }}</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(0, "USD") }}</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-end w-full">
                            <Button
                                :disabled="form.processing || !valid"
                                :loading="form.processing"
                                size="md"
                                @click="submit"
                                >{{ $t("Register.pay_securely") }}</Button
                            >
                        </div>
                    </div>
                </template>
            </FormKit>
        </FormKit>
    </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";
import Switch from "@/components/Inputs/Switch.vue";

export default {
    props: {
        serviceType: Number | String,
        serviceId: Number | String,
        packageType: String,
        price: Number,
        deliveryDays: Number,
        options: Array,
        isUser: Boolean,
    },
    data() {
        return {
            form: useForm({
                service_id: this.serviceId,
                tier: this.serviceType,
                accepted: false,
                use_wallet: false,
                client_signature: "",
            }),
        };
    },
    methods: {
        open() {
            this.$refs.modal?.open();
        },
        close() {
            this.$refs.modal?.close();
        },
        submit() {
            let signature = null;
            this.domtoimage
                .toPng(document.getElementById("proposal-payment-confirm"))
                .then(function (dataUrl) {
                    // turn blob into image

                    signature = dataUrl;
                })
                .finally(() => {
                    this.form
                        .transform((data) => ({
                            ...data,
                            client_signature: signature,
                        }))
                        .post(route("create.serviceOrder"), {
                            preserveScroll: true,
                            onSuccess: () => {
                                this.close();
                            },
                        });
                });
        },
        openConfirm() {
            this.$refs.signature_modal.open();
        },
        closeConfirm() {
            this.$refs.signature_modal.close();
        },
    },
    components: {
        Modal,
        Card,
        Button,
        Link,
        Switch,
    },
    computed: {
        muhandisinWallet() {
            if (
                this.$page.props.current_user.wallet.available_funds >=
                this.price
            )
                return this.price;
            else return this.$page.props.current_user.wallet.available_funds;
        },
        calculatedTotal() {
            if (this.form.use_wallet) return this.price - this.muhandisinWallet;
            return this.price;
        },
    },
};
</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>
