<template>
    <div class="row parentContainer" v-if="item && item.status === 2">
        <div class="col">
            <div class="row m-b-20 parentContainer" v-if="item.id === 9">
                <div class="col-auto">
                    <img :src="asset('images/first_topup_badge.png')" class="pointer requestModal" data-type="badgeModal" style="width: 50px;">
                </div>
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="badgeModal" size="extra-large">
                    <div class="row">
                        <div class="col text-center">
                            <div class="row m-b-50">
                                <div class="col bg-white padding-15">
                                    <h5 class="text-center text-success bold">Congratulation! You've earned an achievement</h5>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-8">
                                    <img :src="asset('images/first_topup_badge.png')" class="animate__animated animate__infinite animate__tada w-100">
                                </div>
                            </div>
                        </div>
                    </div>
                </modal-component>
            </div>
            <div class="row" v-if="!reload">
                <div class="col">
                    <div class="bg-complete" :class="[{'padding-25': !mini}, {'padding-15': mini}]">
                        <div class="row align-items-end">
                            <div class="col-auto">
                                <div class="text-primary-lighter fs-10 text-uppercase">Wallet Balance</div>
                                <h5 class="text-white no-margin bold">MYR {{ item.wallet ? (Math.round((item.wallet.amount + Number.EPSILON) * 100) / 100).toFixed(2) : '0.00'}}</h5>
                            </div>
                        </div>
                        <div class="row m-t-10 d-flex align-items-center">
                            <div class="col-auto">
                                <div class="btn btn-xs p-l-15 p-r-20 b-rad-none font-heading btn-rounded bg-white" @click="reload = true"><i class="fa fa-plus fs-8 m-r-5"></i> Reload</div>
                            </div>
                            <div class="col-auto p-l-0" v-if="!mini && item.wallet">
                                <a class="text-white fs-10" :href="route('wallet.details', item.reference)" target="_blank">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin" v-if="reload">
                <div class="col rounded bg-white p-b-15">
                    <div class="row m-b-15">
                        <div class="col p-t-15 p-b-15 bg-complete">
                            <label class="fs-10 text-white m-b-0 text-uppercase cursor" @click="reload = false"><i class="fa fa-angle-left p-r-15"></i>Top Up Wallet</label>
                        </div>
                    </div>
                    <wallet-top-up-form-component :data="item" :amount="(!item.wallet ? amount : (Math.round((((parseFloat(amount) - item.wallet.amount) < 0 ? 0 : (parseFloat(amount) - item.wallet.amount)) + Number.EPSILON) * 100) / 100).toFixed(2))" :creditable="creditable" />
                </div>
            </div>
            <div class="row m-t-10" v-if="authStore.isAdmin">
                <div class="col">
                    <div class="row m-t-10" v-if="authStore.isSuperAdmin">
                        <div class="col">
                            <a :href="route('account.statment', item.reference)">View Account Statement<i class="fa fa-angle-right p-l-5"></i></a>
                        </div>
                    </div>
                    <div class="row m-t-10">
                        <div class="col">
                            <a :href="downloadInvoiceUrl()">Download All Invoices<i class="fa fa-angle-right p-l-5"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useAuthStore } from '@/stores/auth';
import route from '@/general/functions/router';

interface Props {
    mini?: boolean;
    amount?: string;
    creditable?: boolean;
    data?: any;
}

const props = withDefaults(defineProps<Props>(), {
    mini: false,
    amount: '0.00',
    creditable: false
});

const { item } = useComponentHandler(props);
const authStore = useAuthStore();

const reload = ref(false);

const asset = (path: string) => (window as any).Vapor.asset(path);

const downloadInvoiceUrl = () => {
    return route('customers.invoices') + '?marking=' + item.value.reference;
};
</script>
