<template>
    <div class="w-full">
        <ul class="w-full mb-4 space-y-3">
            <li v-if="deliveryDays" class="flex justify-between">
                <p class="text-xs font-medium text-gray-200">
                    {{ $t("Register.delivery_days") }}
                </p>
                <p class="text-xs font-medium text-gray-200">
                    {{ deliveryDays }}
                </p>
            </li>
            <li
                v-for="option in options"
                :key="option.id"
                class="flex justify-between"
            >
                <p class="text-xs font-medium text-gray-200">
                    {{ option.title }}
                </p>
                <svg
                    v-if="checkEnabled(option)"
                    width="16"
                    height="17"
                    viewBox="0 0 16 17"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_919_53985)">
                        <path
                            d="M3.33325 8.28353L6.66659 11.6169L13.3333 4.9502"
                            stroke="#50CD89"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </g>
                    <defs>
                        <clipPath id="clip0_919_53985">
                            <rect
                                width="16"
                                height="16"
                                fill="white"
                                transform="translate(0 0.283203)"
                            />
                        </clipPath>
                    </defs>
                </svg>
                <span class="text-xs text-gray-200 font-medium mx-[5px]" v-else
                    >-</span
                >
            </li>
        </ul>
        <button
            v-if="!isUser"
            disabled
            class="w-full py-3 mb-4 text-sm font-medium text-blue-100 capitalize bg-blue-300 rounded-lg"
        >
            {{ $t("Register.escrow_amount") }} ({{ currency(price) }})
        </button>
        <div class="mb-3" v-else>
            <Button
                v-if="refunded"
                size="full-sm"
                disabled
                buttonStyle="warning"
            >
                {{ $t("Register.refunded") }}
            </Button>
            <Button
                size="full-sm"
                buttonStyle="green"
                v-else-if="paid"
                disabled
            >
                {{ $t("Register.paid") }}
            </Button>
            <Button v-else-if="!paid" size="full-sm" @click="openPaymentModal">
                {{ $t("Register.continue") }} ({{ currency(price) }})
            </Button>
        </div>
        <PaymentModal
            :serviceType="serviceType"
            :serviceId="serviceId"
            :price="price"
            :packageType="packageType"
            :deliveryDays="deliveryDays"
            ref="payment_modal"
        />
    </div>
    <p class="text-xs font-medium text-gray-200">
        <span class="text-red-300">{{ $t("Register.note_2") }}:</span>
        {{ !isUser ? $t("Register.will_paid") : $t("Register.engineer_paid") }}
    </p>
</template>

<script>
import PaymentModal from "@/components/Services/PaymentModal.vue";
import { useForm } from "@inertiajs/inertia-vue3";
import Button from "@/Jetstream/Button";
import { Inertia } from "@inertiajs/inertia";
export default {
    props: {
        serviceType: Number | String,
        serviceId: Number | String,
        packageType: String,
        price: Number,
        deliveryDays: Number,
        options: Array,
        isUser: Boolean,
        paid: Boolean,
        isOrdered: Boolean,
        refunded: Boolean,
    },
    methods: {
        checkEnabled(option) {
            if (this.packageType == "basic") {
                return option.basic_enabled;
            }
            if (this.packageType == "standard") {
                return option.standard_enabled;
            }
            if (this.packageType == "pro") {
                return option.pro_enabled;
            }
        },
        openPaymentModal() {
            if (!this.$page.props.current_user) {
                Inertia.visit(route("login"));
                return;
            }
            this.$refs.payment_modal.open();
        },
        createServiceOrder() {
            this.form.post(route("create.serviceOrder"), {
                onSuccess: (res) => {},
            });
        },
    },
    data() {
        return {
            form: useForm({
                service_id: this.serviceId,
                tier: this.serviceType,
            }),
        };
    },
    components: {
        PaymentModal,
        Button,
        Inertia,
    },
    computed: {
        getTier() {},
    },
    mounted() {},
};
</script>

<style></style>
