<template>
    <div class="row mt-3 mt-md-0">
        <div class="col">
            <div class="row m-l-10 p-t-20 p-b-20 shadow bg-white rounded">
                <div class="col">
                    <div class="row align-items-end m-b-10 text-complete">
                        <div class="col">
                            <div class="font-heading all-caps fs-12">Transfer Total:</div>
                        </div>
                        <div class="col-auto text-right" v-if="selectedBillGroup.id">
                            <div class="font-heading fs-12">{{selectedBillGroup.original_currency.short_code}} {{formatAmount(selectedBillGroup.original_amount)}}</div>
                        </div>
                        <div class="col-auto text-right" v-else>
                            <div class="font-heading fs-12">CNY 0.00</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-10 text-complete">
                        <div class="col">
                            <div class="font-heading all-caps fs-12"></div>
                        </div>
                        <div class="col-auto text-right" v-if="selectedBillGroup.id">
                            <div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{formatAmount((selectedBillGroup.invoice_amount))}}</div>
                        </div>
                        <div class="col-auto text-right" v-else>
                            <div class="font-heading fs-12">MYR 0.00</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-10 text-complete">
                        <div class="col">
                            <div class="font-heading all-caps fs-12">Service Charge:</div>
                        </div>
                        <div class="col-auto text-right" v-if="selectedBillGroup.id">
                            <div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{formatAmount(selectedBillGroup.service_charge)}}</div>
                        </div>
                        <div class="col-auto text-right" v-else>
                            <div class="font-heading fs-12">MYR 0.00</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-10 text-danger">
                        <div class="col">
                            <div class="font-heading all-caps fs-12">Bill Refund Total:</div>
                        </div>
                        <div class="col-auto text-right" v-if="selectedBillGroup.id">
                            <div class="font-heading fs-12">- {{selectedBillGroup.currency.short_code}} {{formatAmount(selectedBillGroup.bill_refund_amount)}}</div>
                        </div>
                        <div class="col-auto text-right" v-else>
                            <div class="font-heading fs-12">MYR 0.00</div>
                        </div>
                    </div>
                    <div class="row align-items-end m-b-10 text-success">
                        <div class="col">
                            <div class="font-heading all-caps fs-12" :class="{'bold': section === 'paidBillGroupList'}">Paid Total:</div>
                        </div>
                        <div class="col-auto text-right" v-if="selectedBillGroup.id">
                            <div class="font-heading fs-12" :class="{'bold': section === 'paidBillGroupList'}">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.paid_amount) }}</div>
                        </div>
                        <div class="col-auto text-right" v-else>
                            <div class="font-heading fs-12" :class="{'bold': section === 'paidBillGroupList'}">MYR 0.00</div>
                        </div>
                    </div>
                    <div v-if="section !== 'paidBillGroupList'">
                        <div class="row align-items-end m-b-10">
                            <div class="col">
                                <div class="font-heading all-caps fs-12">Floating Amount:</div>
                            </div>
                            <div class="col-auto text-right" v-if="selectedBillGroup.id">
                                <div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.floating_amount) }}</div>
                            </div>
                            <div class="col-auto text-right" v-else>
                                <div class="font-heading fs-12">MYR 0.00</div>
                            </div>
                        </div>
                        <div class="row align-items-end bold text-danger">
                            <div class="col">
                                <div class="font-heading all-caps fs-12">OutStanding Total:</div>
                            </div>
                            <div class="col-auto text-right" v-if="selectedBillGroup.id">
                                <div class="font-heading fs-12">{{selectedBillGroup.currency.short_code}} {{ formatAmount(selectedBillGroup.outstanding_amount) }}</div>
                            </div>
                            <div class="col-auto text-right" v-else>
                                <div class="font-heading fs-12">MYR 0.00</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="section === 'paymentInProgressBillGroupList' && selectedBillGroup.status === 0 && (selectedBillGroup.outstanding_amount > 0 || (selectedBillGroup.bill_refund_amount === (selectedBillGroup.amount + selectedBillGroup.service_charge) && !selectedBillGroup.payment_history.some((item: any) => [0, 1, 2, 3].includes(item.status))))">
                        <div class="row p-r-15 m-t-20 m-b-10">
                            <div class="col p-r-0">
                                <validation-wrapper-component :validator="v$.payAmount">
                                    <label>Amount</label>
                                    <input class="form-control" v-model.lazy="parameters.payAmount" v-money3="{decimal: '.',thousands: ',', precision: 2}">
                                </validation-wrapper-component>
                            </div>
                            <div class="col-auto b-r b-t b-b b-grey">
                                <div class="row h-100 align-items-center">
                                    <div class="col">
                                        <div class="font-heading fs-10 muted">{{ selectedBillGroup.id ? selectedBillGroup.currency.short_code : "MYR" }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-t-20" v-if="selectedBillGroup.outstanding_amount > 0">
                            <div class="col">
                                <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="submitForm">Make Payment</button>
                            </div>
                        </div>
                        <div class="row m-t-20" v-if="(selectedBillGroup.bill_refund_amount === selectedBillGroup.amount + selectedBillGroup.service_charge)">
                            <div class="col">
                                <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="submitForm">Complete Order</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRequest } from '@/composables/useRequest';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import route from '@/general/functions/router';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';

const props = defineProps<{
    selectedBillGroup: any;
    refreshList: () => void;
    section: string;
}>();

const { submit } = useRequest();

const parameters = ref({
    payAmount: props.selectedBillGroup.outstanding_amount ? (Math.round((props.selectedBillGroup.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2) : '0.00'
});

const rules = {
    payAmount: { required }
};

const v$ = useVuelidate(rules, parameters);

const formatAmount = (amount: number) => {
    if (amount === undefined || amount === null) return '0.00';
    return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

const successHandler = () => {
    props.refreshList();
    parameters.value = {
        payAmount: (Math.round((props.selectedBillGroup.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2)
    };
};

const submitForm = () => {
    submit(route('api.transaction.group.bill.pay', props.selectedBillGroup.id), 'post', props.section, true, true, parameters.value, { successHandler });
};

watch(() => props.selectedBillGroup, (val) => {
    if (val && val.id) {
        parameters.value.payAmount = (Math.round((val.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2);
    }
}, { deep: true });
</script>
