<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 w-full gap-5 mb-10 lg:flex lg:flex-row">
                <div class="flex flex-col flex-1 gap-5">
                    <ul class="grid w-full grid-cols-1 gap-5 md:grid-cols-3">
                        <li class="grow">
                            <Card
                                class="h-full"
                                :title="$t('Register.total_spent')"
                                titleStyle="text-gray-300 font-medium text-sm"
                            >
                                <template #actions>
                                    <Button
                                        class="!text-xs text-blue-300 opacity-0 cursor-default"
                                        buttonStyle="transparent"
                                        size="xs"
                                    >
                                        <span
                                            class="flex items-center justify-center gap-1.5 flex-1"
                                        >
                                        </span>
                                    </Button>
                                </template>
                                <div class="text-sm font-medium text-blue-300">
                                    {{ currency(wallet.total_spent, "USD") }}
                                </div>
                            </Card>
                        </li>
                        <li class="grow">
                            <Modal
                                ref="withdraw_modal"
                                size="lg"
                                @closed="closeWithdrawModal"
                            >
                                <WithdrawForm
                                    :balance="Math.abs(wallet.available_funds)"
                                    :billingData="accounts"
                                    :walletId="wallet?.id"
                                />
                            </Modal>
                            <Card
                                class="h-full"
                                :title="$t('Register.my_balance')"
                                titleStyle="text-gray-300 font-medium text-sm"
                            >
                                <template #actions>
                                    <Button
                                        class="!text-xs text-blue-300"
                                        buttonStyle="transparent"
                                        size="xs"
                                        @click="openWithdrawModal"
                                    >
                                        <span
                                            class="flex items-center justify-center gap-1.5 flex-1"
                                        >
                                            <span>
                                                {{ $t("Register.withdraw") }}
                                            </span>

                                            <svg
                                                class="rtl:rotate-180"
                                                width="13"
                                                height="13"
                                                viewBox="0 0 13 13"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                            >
                                                <g
                                                    clip-path="url(#clip0_1100_49594)"
                                                >
                                                    <path
                                                        d="M9.83398 6.5H2.83398"
                                                        stroke="#29419B"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M9.83398 6.5L6.83398 9.5"
                                                        stroke="#29419B"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                    <path
                                                        d="M9.83398 6.5L6.83398 3.5"
                                                        stroke="#29419B"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    />
                                                </g>
                                                <defs>
                                                    <clipPath
                                                        id="clip0_1100_49594"
                                                    >
                                                        <rect
                                                            width="12"
                                                            height="12"
                                                            fill="white"
                                                            transform="matrix(-1 0 0 1 12.334 0.5)"
                                                        />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </span>
                                    </Button>
                                </template>
                                <div class="text-sm font-medium text-blue-300">
                                    {{
                                        currency(
                                            Math.abs(wallet.available_funds),
                                            "USD"
                                        )
                                    }}
                                </div>
                            </Card>
                        </li>
                        <li class="grow">
                            <Card
                                class="h-full"
                                :title="
                                    $t(
                                        wallet.owner_type ===
                                            'App\\Models\\User'
                                            ? 'Register.reserved_funds'
                                            : 'Register.upcoming_payments'
                                    )
                                "
                                titleStyle="text-gray-300 font-medium text-sm"
                            >
                                <div class="text-sm font-medium text-blue-300">
                                    {{
                                        currency(
                                            wallet.owner_type ===
                                                "App\\Models\\User"
                                                ? wallet.reserved_funds
                                                : wallet.upcoming_payments,
                                            "USD"
                                        )
                                    }}
                                </div>
                            </Card>
                        </li>
                    </ul>
                    <ul class="flex-1 muh-form-group">
                        <li>
                            <WalletActivities :activities="activities" />
                        </li>
                        <li>
                            <PaymentTable
                                :payments="transactions"
                                :wallet="wallet"
                            />
                        </li>
                    </ul>
                </div>
                <div class="flex flex-col w-full lg:max-w-xs">
                    <BillingInfo :owner="wallet.owner" :accounts="accounts" />
                </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 PaymentTable from "@/components/wallet/PaymentTable.vue";
import WalletActivities from "@/components/wallet/WalletActivities.vue";
import BillingInfo from "@/components/wallet/billingInfo.vue";
import Modal from "../../components/General/Modal.vue";
import WithdrawForm from "../../components/wallet/WithdrawForm.vue";
export default {
    props: {
        user: Object,
        wallet: Object,
        activities: Array,
        transactions: Array,
        accounts: Array,
    },
    data() {
        return {
            breadcrumbs: [
                {
                    name: "footer.home",
                    url: "/",
                },
                {
                    name: "bread.wallet",
                    url: null,
                },
            ],
        };
    },
    methods: {
        openWithdrawModal() {
            this.$refs["withdraw_modal"].open();
        },
        closeWithdrawModal() {
            this.$refs["withdraw_modal"].close();
        },
    },
    components: {
        AppLayout,
        Breadcrumbs,
        Card,
        Button,
        PaymentTable,
        WalletActivities,
        BillingInfo,
        Modal,
        WithdrawForm,
    },
    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>
