<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row parentContainer m-b-10">
                        <div class="col p-l-0">
                            <div class="row m-l-15 p-t-10 b-a align-items-center pointer shadow bg-white rounded" :class="{'b-white': !(selectedBillGroup.id === item.id), 'b-primary': selectedBillGroup.id === item.id}" @click="select()">
                                <div class="col-12">
                                    <div class="row m-b-10">
                                        <div class="col-auto">
                                            <div class="font-heading fs-12 muted all-caps">Date</div>
                                            <div class="font-heading fs-12">
                                                {{item.updated_at}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-12 muted all-caps">Reference</div>
                                            <div class="font-heading fs-12">
                                                {{item.reference}}
                                            </div>
                                        </div>
                                        <div class="col-auto" v-if="authStore.isAdmin">
                                            <div class="font-heading fs-12 muted all-caps">Supplier</div>
                                            <div class="font-heading fs-12">
                                                {{item.issuer_name}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-12 muted all-caps">Amount</div>
                                            <div class="font-heading fs-12">
                                                {{ item.currency.short_code }} {{formatAmount(item.amount)}}
                                            </div>
                                        </div>
                                        <div class="col parentContainer position-static">
                                            <div class="row align-items-center justify-content-end">
                                                <div class="col-auto position-static no-padding requestModal" data-type="deleteBillGroup" v-if="section !== 'paidBillGroupList'">
                                                    <div class="btn bg-grey no-border">
                                                        <i class="fa fa-times text-danger"></i>
                                                    </div>
                                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteBillGroup">
                                                        <general-confirmation-form-component
                                                            contentText="Are you sure you want to delete this Bill Group?"
                                                            modalType="delete"
                                                            class="text-center"
                                                            :apiRoute="route('api.transaction.group.bill.delete', item.id)"
                                                            apiMethod="delete"
                                                            :section="section"
                                                        >
                                                        </general-confirmation-form-component>
                                                    </modal-component>
                                                </div>
                                                <div class="col-auto position-static no-padding requestModal" data-type="cancelBillGroup" v-if="section === 'paidBillGroupList'">
                                                    <div class="btn btn-xs btn-outline-danger">
                                                        Cancel
                                                    </div>
                                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="cancelBillGroup">
                                                        <general-confirmation-form-component
                                                            contentText="Are you sure you want to cancel this Bill Group?"
                                                            modalType="delete"
                                                            class="text-center"
                                                            :apiRoute="route('api.transaction.group.bill.cancel', item.id)"
                                                            apiMethod="put"
                                                            :section="section"
                                                        >
                                                        </general-confirmation-form-component>
                                                    </modal-component>
                                                </div>
                                                <div class="col-auto no-padding">
                                                    <div class="btn btn-sm btn-default b-rad-none no-border" @click="expanded = !expanded">
                                                        <i class="fa fa-fw" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
                                        <div class="row m-b-10">
                                            <div class="font-heading fs-12 all-caps text-underline">Bill Refunds</div>
                                        </div>
                                        <div class="row m-b-10" v-for="refund in item.bill_refunds">
                                            <div class="col-3">
                                                <div class="font-heading fs-12 muted all-caps">Date</div>
                                                <div class="font-heading fs-12">
                                                    {{refund.updated_at}}
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                <div class="font-heading fs-12 muted all-caps">Reference</div>
                                                <div class="font-heading fs-12">
                                                    {{refund.bill_no}}
                                                </div>
                                            </div>
                                            <div class="col-3" v-if="authStore.isAdmin">
                                                <div class="font-heading fs-12 muted all-caps">Amount</div>
                                                <div class="font-heading fs-12">
                                                    {{ refund.currency.short_code }} {{ formatAmount(refund.amount) }}
                                                </div>
                                            </div>
                                            <div class="col-3" v-if="authStore.isAdmin">
                                                <div class="font-heading fs-12 muted all-caps">Status</div>
                                                <div class="font-heading fs-12" :class="[{'text-danger': refund.status === 0 || refund.status === 4}, {'text-success': refund.status === 2 || refund.status === 3}, {'text-warning': refund.status === 1}]">
                                                    {{ refund.statusText }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row m-t-20 m-b-20" v-if="item.bill_refunds.length === 0">
                                            <div class="col">
                                                <div class="font-heading fs-12 text-center all-caps">No Selected Refunds</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
                                        <div class="row m-b-10">
                                            <div class="font-heading fs-12 all-caps text-underline">Payment History</div>
                                        </div>
                                        <div class="row m-b-10" v-for="payment in item.payment_history">
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">Date</div>
                                                <div class="font-heading fs-12">
                                                    {{payment.updated_at}}
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">Reference</div>
                                                <div class="font-heading fs-12">
                                                    {{payment.bill_no}}
                                                </div>
                                            </div>
                                            <div class="col-auto" v-if="authStore.isAdmin">
                                                <div class="font-heading fs-12 muted all-caps">Amount</div>
                                                <div class="font-heading fs-12">
                                                    {{ payment.currency.short_code }} {{ formatAmount(payment.amount) }}
                                                </div>
                                            </div>
                                            <div class="col-auto" v-if="authStore.isAdmin">
                                                <div class="font-heading fs-12 muted all-caps">Status</div>
                                                <div class="font-heading fs-12" :class="[{'text-danger': payment.status === 0 || payment.status === 4}, {'text-success': payment.status === 2 || payment.status === 3}, {'text-warning': payment.status === 1}]">
                                                    {{ payment.statusText }}
                                                </div>
                                            </div>
                                            <div class="col parentContainer position-static align-items-center">
                                                <div class="row align-items-center justify-content-end">
                                                    <div v-if="!payment.documents && section === 'paymentInProgressBillGroupList'">
                                                        <div class="btn no-border muted btn-success requestModal" data-type="paymentProofModal" @click="selectedTransactionID(payment.id)">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="86" y1="70.76994" x2="86" y2="116.46013" gradientUnits="userSpaceOnUse" id="color-1_52139_gr1"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="61.8125" y1="34.48869" x2="61.8125" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-2_52139_gr2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="130.34375" y1="34.48869" x2="130.34375" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-3_52139_gr3"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="86" y1="32.25" x2="86" y2="148.71013" gradientUnits="userSpaceOnUse" id="color-4_52139_gr4"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M102.45825,99.43213h-5.70825c-1.4835,0 -2.6875,1.16637 -2.6875,2.65256v8.10013c0,1.48081 -1.19862,2.68481 -2.67944,2.68481h-10.76612c-1.48081,0 -2.67944,-1.204 -2.67944,-2.68481v-8.10013c0,-1.48619 -1.204,-2.65256 -2.6875,-2.65256h-5.70825c-1.93769,0 -3.04225,-2.39188 -1.88125,-4.05275l14.577,-20.855c1.8275,-2.61494 5.69481,-2.61763 7.52231,-0.00538l14.577,20.86306c1.16369,1.66088 0.05644,4.05006 -1.87856,4.05006z" fill="url(#color-1_52139_gr1)"></path><path d="M51.0625,67.1875h5.375c0,-8.0625 7.23206,-16.12231 16.125,-16.12231v-5.375c-11.85456,0 -21.5,10.74731 -21.5,21.49731z" fill="url(#color-2_52139_gr2)"></path><path d="M139.75,80.625c0,-10.75 -8.44144,-18.80981 -18.8125,-18.80981v5.375c7.40944,0 13.4375,5.37231 13.4375,13.43481z" fill="url(#color-3_52139_gr3)"></path><path d="M148.09738,92.27263c1.59369,-3.68188 2.40263,-7.59219 2.40263,-11.64494c0,-16.29969 -13.26281,-29.5625 -29.5625,-29.5625c-6.5145,0 -12.68769,2.08819 -17.78588,5.96088c-4.30269,-13.03438 -16.52006,-22.08587 -30.58912,-22.08587c-17.78319,0 -32.25,14.46681 -32.25,32.25c0,4.14681 0.16662,8.05981 1.42437,10.74731h-1.42437c-13.33806,0 -24.1875,10.84944 -24.1875,24.1875c0,11.56431 8.16194,21.24737 19.0275,23.62044c1.02394,6.39894 6.53869,11.31706 13.2225,11.31706h56.4375h16.125h5.375c6.54944,0 12.00238,-4.71388 13.18488,-10.92469c9.2235,-1.20131 16.37762,-9.08913 16.37762,-18.63513c0,-6.09256 -2.924,-11.72019 -7.77762,-15.23006zM126.3125,131.6875h-5.375h-16.125h-56.4375c-3.49912,0 -6.45538,-2.6875 -7.568,-5.375h93.0735c-1.11263,2.6875 -4.06888,5.375 -7.568,5.375zM137.0625,120.9375h-96.75c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125h9.51375l-1.68506,-3.78131c-2.23063,-5.01488 -2.45369,-7.48737 -2.45369,-12.341c0,-14.81888 12.05613,-26.875 26.875,-26.875c13.01825,0 24.13106,9.29875 26.42619,22.11275l0.92719,5.17075l3.64962,-3.77325c4.60638,-4.76225 10.77687,-7.38525 17.372,-7.38525c13.33806,0 24.1875,10.84944 24.1875,24.1875c0,3.6765 -0.81431,7.21056 -2.37575,10.41944l-1.763,3.32713l2.37037,1.26044c4.40481,2.34081 7.14338,6.88806 7.14338,11.868c0,7.40944 -6.02806,13.43481 -13.4375,13.43481z" fill="url(#color-4_52139_gr4)"></path></g></g></svg>
                                                        </div>
                                                        <modal-component type="paymentProofModal">
                                                            <bill-group-payment-proof-form-component v-if="selected_transaction_id === payment.id" :section="section" :data="{item}" :id="payment.id"></bill-group-payment-proof-form-component>
                                                        </modal-component>
                                                    </div>
                                                    <div v-if="payment.documents">
                                                        <document-file-viewer-component :file="payment.documents.files[0]">
                                                            <template #button>
                                                                <div class="btn no-border muted btn-success">
                                                                    <i class="fa fa-file-pdf-o"></i>
                                                                </div>
                                                            </template>
                                                        </document-file-viewer-component>
                                                    </div>
                                                    <div v-if="section === 'paymentVerificationBillGroupList' && payment.status === 1">
                                                        <div class="col-auto">
                                                            <div class="row">
                                                                <div class="col-6 col-md-auto text-right">
                                                                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="rejectPayment">
                                                                        <i class="fa fa-times fa-fw"></i>
                                                                    </button>
                                                                    <button class="btn btn-xs btn-success b-rad-none requestModal" data-type="approvePayment">
                                                                        <i class="fa fa-check fa-fw"></i>
                                                                    </button>
                                                                    <modal-component small type="rejectPayment">
                                                                        <general-confirmation-form-component
                                                                            contentText="Are you sure you want to reject this payment?"
                                                                            modalType="delete"
                                                                            class="text-center"
                                                                            :apiRoute="route('api.transaction.group.bill.payment_proof.approval', payment.id, 'reject')"
                                                                            apiMethod="post"
                                                                            :section="section"
                                                                        >
                                                                        </general-confirmation-form-component>
                                                                    </modal-component>
                                                                    <modal-component small type="approvePayment">
                                                                        <general-confirmation-form-component
                                                                            contentText="Are you sure you want to approve this payment?"
                                                                            modalType="confirm"
                                                                            class="text-center"
                                                                            :apiRoute="route('api.transaction.group.bill.payment_proof.approval', payment.id, 'approve')"
                                                                            apiMethod="post"
                                                                            :section="section"
                                                                        >
                                                                        </general-confirmation-form-component>
                                                                    </modal-component>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row m-t-20 m-b-20" v-if="item.payment_history.length === 0">
                                            <div class="col">
                                                <div class="font-heading fs-12 text-center all-caps">No Payments</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
                                        <div class="row m-b-10">
                                            <div class="font-heading fs-12 all-caps text-underline">Currency Orders</div>
                                        </div>
                                        <div class="row m-t-10 m-b-20" v-for="group in item.groups">
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">Date</div>
                                                <div class="font-heading fs-12">
                                                    {{group.created_at}}
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">Currency Rate</div>
                                                <div class="font-heading fs-12">
                                                    {{group.currency_rate}}
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">Original Amount</div>
                                                <div class="font-heading fs-12">
                                                    {{ group.original_currency.short_code }} {{formatAmount(group.original_amount)}}
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="font-heading fs-12 muted all-caps">Amount</div>
                                                <div class="font-heading fs-12">
                                                    {{ group.currency.short_code }} {{formatAmount(group.amount)}}
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <div class="font-heading fs-12 muted all-caps">Transfer Fee</div>
                                                <div class="font-heading fs-12">
                                                    {{ group.original_currency.short_code }} {{formatAmount(group.transfer_fee)}}
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="font-heading fs-12 muted all-caps">PO Completion</div>
                                                <div class="col">
                                                    <p class="font-heading fs-12 bold text-success pointer"><span :class="[{'text-danger': group.complete_transactions.length !== group.transactions.length}]">{{group.complete_transactions.length}}</span>/{{group.transactions.length}}</p>
                                                </div>
                                            </div>
                                            <div class="col parentContainer position-static align-items-center">
                                                <div class="row align-items-center justify-content-end">
                                                    <div v-if="group.documents.currency_order">
                                                        <document-file-viewer-component :file="group.documents.currency_order.files[0]">
                                                            <template #button>
                                                                <div class="btn no-border muted btn-success">
                                                                    <i class="fa fa-file-pdf-o"></i>
                                                                </div>
                                                            </template>
                                                        </document-file-viewer-component>
                                                    </div>
                                                    <div v-else>
                                                        <div class="btn bg-grey no-border muted invisible">
                                                            <i class="fa fa-file-pdf-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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';

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

const emit = defineEmits<{
    (e: 'select', item: any): void;
}>();

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

const selected_id = ref('');
const selected = ref(false);
const expanded = ref(false);
const selected_transaction_id = ref<string | number>('');

const selectedTransactionID = (id: string | number) => {
    selected_transaction_id.value = id;
};

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

const select = () => {
    emit('select', item.value);
    selected.value = props.selectedBillGroup.id === item.value.id;
};
</script>
