<template>
    <AppLayout title="My Wallet">
        <div class="container pt-10 pb-20 overflow-y-auto max-w-7xl">
            <Breadcrumbs class="pb-8" :breadcrumbs="breadcrumbs" />
            <div
                class="flex flex-col-reverse flex-1 w-full gap-5 mb-10 lg:flex-row"
            >
                <div class="flex-1">
                    <Card
                        :title="'Payment #' + payment.id"
                        titleStyle="text-gray-300 font-medium"
                    >
                        <template #actions>
                            <Badge :color="badgeColor">{{
                                payment.status
                            }}</Badge>
                        </template>
                        <div v-if="payment.milestone?.accepted_at" class="mb-5">
                            <h4 class="text-xs font-normal text-gray-200">
                                {{ $t("Register.end_date") }}
                            </h4>
                            <h4 class="text-sm font-medium text-blue-300">
                                {{
                                    moment(
                                        payment.milestone.accepted_at
                                    ).format("DD MMM YYYY")
                                }}
                            </h4>
                        </div>
                        <div>
                            <h4 class="text-xs font-normal text-gray-200">
                                {{ $t("Register.payment_type") }}
                            </h4>
                            <h4 class="text-sm font-medium text-blue-300">
                                {{ $t("Register." + payment.type) }}
                            </h4>
                        </div>
                        <div
                            v-if="payment.milestone"
                            class="p-3 mt-5 bg-blue-100 rounded-lg millestoneCard"
                        >
                            <div
                                class="grid justify-between mb-5 sm:gird sm:grid-cols-2 md:grid md:grid-cols-3 gap-y-2"
                            >
                                <div class="milestoneName">
                                    <h4
                                        class="text-xs font-normal text-gray-200"
                                    >
                                        {{ $t("Register.milestone_name") }}
                                    </h4>
                                    <h4
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ payment.milestone.name }}
                                    </h4>
                                </div>
                                <div class="milestoneDuration">
                                    <h4
                                        class="text-xs font-normal text-gray-200"
                                    >
                                        {{ $t("Register.duration") }}
                                    </h4>
                                    <h4
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ payment.milestone.duration }} Days
                                    </h4>
                                </div>
                                <div class="milestonePrice">
                                    <h4
                                        class="text-xs font-normal text-gray-200"
                                    >
                                        {{ $t("Register.price") }}
                                    </h4>
                                    <h4
                                        class="text-sm font-medium text-gray-300"
                                    >
                                        {{ currency(payment.milestone.amount) }}
                                    </h4>
                                </div>
                            </div>
                            <div v-if="payment.milestone.deliverables">
                                <h4
                                    class="mb-1 text-xs font-normal text-gray-200"
                                >
                                    {{ $t("Register.deliverable") }}
                                </h4>
                                <div
                                    v-for="deliverable in payment.milestone
                                        .deliverables"
                                    :key="deliverable.id"
                                    class=""
                                >
                                    <span
                                        class="flex text-sm font-medium text-gray-300"
                                    >
                                        <svg
                                            width="20"
                                            height="15"
                                            viewBox="0 -5 18 15"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M1.3335 4.49935L4.66683 7.83268L11.3335 1.16602"
                                                stroke="#50CD89"
                                                stroke-width="1.5"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                        {{ deliverable.name }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </Card>
                </div>
                <div class="flex flex-col flex-1 w-full gap-5 lg:max-w-xs">
                    <PaidForm :user="payment?.from_wallet?.owner" />
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button.vue";
import Badge from "@/components/General/Badge";
import PaidForm from "@/components/wallet/PaidForm.vue";
export default {
    props: ["payment"],
    data() {
        return {
            breadcrumbs: [
                {
                    name: "footer.home",
                    url: "/",
                },
                {
                    name: "bread.wallet",
                    url: route("user.wallet"),
                },
                {
                    name: "Payment #" + this.payment.id,
                    url: null,
                },
            ],
        };
    },
    methods: {
        //
    },
    components: {
        AppLayout,
        Breadcrumbs,
        Card,
        Button,
        Badge,
        PaidForm,
    },
    computed: {
        badgeColor() {
            switch (this.payment.status.toLowerCase()) {
                case "pending":
                    return "orange";
                case "paid":
                    return "green";
                case "unpaid":
                    return "red";
                default:
                    return "gray";
            }
        },
    },
    mounted() {},
};
</script>

<style>
.muh-form-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.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>
