<template>
    <div class="row no-margin">
        <div class="col">
            <div class="row m-b-20 ">
                <div class="col b-a b-grey padding-15">
                    <div class="row align-items-center">
                        <div class="col-auto p-r-0" ><div class="icon-thumbnail icon-35 mr-0 btn-rounded text-white light animate__animated animate__infinite" :class="[{'bg-danger': data.outstanding_amount > 0}, {'animate__pulse': data.outstanding_amount > 0}, {'bg-success': !(data.outstanding_amount > 0)}]"><span v-if="data.status !==3">3</span><i class='fa fa-check' v-if="data.status ===3"></i></div></div>
                        <div class="col">
                            <div class="fs-14 bold all-caps" :class="[{'text-success': !(data.outstanding_amount > 0)}]">Make full payment</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-b-10 align-items-center">
                <div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
                    <div class="row">
                        <div class="col">
                            <span class="flag-icon fs-20" :class="'flag-icon-'+data.conversion_currency.country.short_code.toLowerCase()"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 bold">{{data.conversion_currency.short_code}}</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto no-padding" style="margin-left: -8px;margin-right: -8px;z-index: 1;">
                    <i class="fa fa-exchange text-master-lighter fs-20"></i>
                </div>
                <div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
                    <div class="row">
                        <div class="col">
                            <span class="flag-icon fs-20" :class="'flag-icon-'+data.convertible_currency.country.short_code.toLowerCase()"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 bold">{{data.convertible_currency.short_code}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10" v-if="false">
                <div class="col">
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="font-heading all-caps fs-10 muted">
                                {{ !item.purchase_order ? 'Please fill up purchase order to enjoy the cashback' : 'You have entitled to earn cashbback' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10">
                <div class="col">
                    <recipient-bank-details-component :data="item" :section="section"></recipient-bank-details-component>
                    <div class="row" style="margin-top: -20px" v-if="authStore.isAdmin">
                        <div class="col-auto">
                            <p class="text-complete text-underline m-b-0 fs-12 pointer" @click="toggleEditRecipientBankDetailsCollapsed">{{ isEditRecipientBankDetailsCollapsed ? '< Back' : 'Change recipient bank details' }}</p>
                        </div>
                    </div>
                    <div class="row" style="margin-top: -20px" v-if="!authStore.isAdmin && isAnyPaymentRecipientBankEdited">
                        <div class="col-auto">
                            <p class="text-complete text-underline m-b-0 fs-12 pointer" @click="toggleEditRecipientBankDetailsCollapsed">{{ isEditRecipientBankDetailsCollapsed ? '< Back' : 'Show edited recipient bank details on payment' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="collapse" :class="{ show: isEditRecipientBankDetailsCollapsed }" ref="collapseContent" v-if="authStore.isAdmin">
                <recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="false"></recipient-bank-details-component>
                <edit-payment-recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="false"></edit-payment-recipient-bank-details-component>
            </div>

            <div class="collapse" :class="{ show: isEditRecipientBankDetailsCollapsed }" ref="collapseContent" v-if="!authStore.isAdmin && isAnyPaymentRecipientBankEdited">
                <edit-payment-recipient-bank-details-component :data="item" :section="section" :isEditButtonHidden="true"></edit-payment-recipient-bank-details-component>
            </div>

            <div class="row">
                <div class="col bg-white padding-15">
                    <div class="row" v-if="!expandPayment">
                        <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">
                                    <div class="font-heading fs-12"><i class="fa fa-edit fs-12 pointer fa-fw requestModal" data-type="editBookingAmount" v-if="authStore.isSuperAdmin || (!authStore.isAdmin && authStore.getCompanyId === 199)"></i> {{data.fixed_currency.short_code}} {{(Math.round((data.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editBookingAmount">
                                    <edit-booking-amount-form-component :data="data" :section="section"></edit-booking-amount-form-component>
                                </modal-component>
                            </div>
                            <div class="row align-items-end m-b-10 text-success">
                                <div class="col">
                                    <div class="font-heading all-caps fs-12">Paid Total:</div>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="font-heading fs-12">{{data.fixed_currency.short_code}} {{(Math.round((data.paid_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                            </div>
                            <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">
                                    <div class="font-heading fs-12">{{data.fixed_currency.short_code}} {{(Math.round((data.floating_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                            </div>
                            <div class="row align-items-end bold text-danger" v-if="data.refunded_amount">
                                <div class="col">
                                    <div class="font-heading all-caps fs-12">OutStanding Total:</div>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="font-heading fs-12">{{data.fixed_currency.short_code}} {{(Math.round((data.outstanding_amount_with_refund + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                            </div>
                            <div class="row align-items-end bold m-t-10 text-danger" v-else>
                                <div class="col">
                                    <div class="font-heading all-caps fs-12">OutStanding Total:</div>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="font-heading fs-12">{{data.fixed_currency.short_code}} {{(Math.round((data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                            </div>
                            <div class="row align-items-end bold m-t-10 text-danger" v-if="data.refunded_amount">
                                <div class="col">
                                    <div class="font-heading all-caps fs-12">Refunded Total:</div>
                                </div>
                                <div class="col-auto text-right">
                                    <div class="font-heading fs-12">{{data.fixed_currency.short_code}} {{(Math.round((data.refunded_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                </div>
                            </div>
                            <div class="row m-t-20" v-if="data.company.employee.status === 2 && data.company.status === 2 && (Math.round((data.outstanding_amount_with_refund + Number.EPSILON) * 100) / 100) > 0">
                                <div class="col">
                                    <button id="payment-btn" class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button>
                                </div>
                            </div>

                            <!-- E-Invoice - start -->
                            <div class="row m-t-10"
                                v-if="(data.company.e_invoice !== null && data.company.e_invoice === 0) || showModalEInvoiceRequest">
                                <div class="col text-right">
                                    <a
                                        id="e-invoice-request-link"
                                        href="javascript:void(0);"
                                        class="fs-12 text-complete text-underline pointer requestModal"
                                        data-type="requestEInvoice2"
                                    >
                                        I need E-Invoice Now
                                    </a>
                                    <modal-component
                                        class="animate__animated animate__fast animate__fadeIn"
                                        styleType="fill-in" type="requestEInvoice2" size="large">
                                        <e-invoice-request-form-component
                                            class="text-center"
                                            :section="section"
                                            :company-id="data.company.id"
                                            @choice-made="handleEInvoiceRequestRespond"
                                        />
                                    </modal-component>
                                </div>
                            </div>
                            <!-- E-Invoice - end -->
                        </div>
                    </div>
                    <div class="row" v-if="expandPayment && !calculation">
                        <div class="col">
                            <div class="row m-b-10">
                                <div class="col">
                                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                                        <div class="col">
                                            <small class="bold fs-10 text-danger">{{error}}</small>
                                        </div>
                                    </div>
                                    <div class="row hide">
                                        <div class="col-8">
                                            <div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
                                                <div class="row">
                                                    <div class="col p-t-10 p-b-10">
                                                        {{paymentMethod.name}}
                                                    </div>
                                                    <div class="col-auto bg-complete-light">
                                                        <div class="row h-100 align-items-center">
                                                            <div class="col">
                                                                <i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="relative w-100">
                                                <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
                                                    <div class="row text-left no-margin bg-white">
                                                        <div class="col no-padding">
                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">Bank Transfer</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]"  @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">Cash Deposit</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">Cheque</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">Banker's Acceptance</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">Online Transfer</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-r-0 m-b-15">
                                        <div class="col p-r-0">
                                            <validation-wrapper-component :validator="v$.amount">
                                                <label>Amount</label>
                                                <input class="form-control" name="amount" v-model.lazy="amount" 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">{{data.fixed_currency.short_code}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-r-0 m-b-5" v-show="showApplyVoucher">
                                         <div class="col p-r-0">
                                             <validation-wrapper-component :validator="v$.amount">
                                                <div class="row" style="padding-bottom: 3px;">
                                                    <div class="col">
                                                        <label>Enter Voucher</label>
                                                        <input class="form-control" name="voucherCode" :value="voucherCode" @keyup="updateVoucherFlag($event)">
                                                    </div>
                                                    <div class="col-auto p-l-0 p-r-0">
                                                        <div class="col-auto p-0 h-100">
                                                            <button @click="applyVoucherCode()" class="h-100 btn btn-sm btn-primary b-rad-none all-caps p-l-30 p-r-30 rounded">
                                                                Apply
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-auto p-r-10 p-l-10">
                                                        <div @click="removeVoucher()" class="h-100 btn btn-sm btn-secondary b-rad-none all-caps rounded d-flex justify-content-center align-items-center">
                                                            <i class="fa fa-times muted"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                    <span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
                                    <div class="row m-l-0 m-r-0" v-show="showApplyVoucher" style="height: 20px">
                                        <i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
                                        <span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
                                        <span class="text-success" v-if="voucherCodeFailedReason === '' && voucherValidated">Voucher applied</span>
                                    </div>
                                    <div class="row m-l-0 m-r-0" v-show="showApplyVoucher">
                                        <div class="col">
                                            <available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
                                        </div>
                                    </div>
                                    <div class="row m-t-5">
                                        <div class="col">
                                            <div class="row p-l-15 p-r-15">
                                                <div class="col m-r-5 text-center">
                                                    <div class="row h-100">
                                                        <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Online Transfer', 'text-primary': paymentMethod.name === 'Online Transfer', 'b-grey': paymentMethod.name !== 'Online Transfer' }" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
                                                            <div class="m-b-15 m-t-10 text-center">
                                                            <img :src="asset('images/fpx-logo-vector-01.png')" alt="logo" height="25">
                                                            </div>
                                                            <p id="online-banking" class="no-margin bold all-caps">Online Banking</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col m-l-5 text-center">
                                                    <div class="row h-100">
                                                        <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Wallet', 'text-primary': paymentMethod.name === 'Wallet', 'b-grey': paymentMethod.name !== 'Wallet' }" @click="updatePaymentType({name: 'Wallet', id: 'wallet'})">
                                                            <div class="m-b-10 text-center">
                                                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                     width="40" height="40"
                                                                     viewBox="0 0 172 172"
                                                                     style=" fill:#000000;"><defs><linearGradient x1="47.41556" y1="114.21875" x2="47.41556" y2="136.68625" gradientUnits="userSpaceOnUse" id="color-1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="21.78488" x2="86" y2="154.10125" gradientUnits="userSpaceOnUse" id="color-2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="111.53125" y1="27.50388" x2="111.53125" y2="49.92569" gradientUnits="userSpaceOnUse" id="color-3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="54.32244" x2="63.15625" y2="64.45969" gradientUnits="userSpaceOnUse" id="color-4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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 id="Layer_2"><path d="M55.9,134.375h-15.5875c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-15.5875c0,-1.075 1.34375,-1.88125 2.41875,-1.075l16.93125,16.93125c0.80625,1.075 0,2.41875 -1.075,2.41875z" fill="url(#color-1)"></path><path d="M150.5,96.75v-37.625c0,-5.9125 -4.8375,-10.75 -10.75,-10.75h-7.525c1.34375,-2.95625 2.15,-6.18125 2.15,-9.40625c0,-12.63125 -10.2125,-22.84375 -22.84375,-22.84375c-12.63125,0 -22.84375,10.2125 -22.84375,22.84375c0,3.225 0.80625,6.45 2.15,9.40625h-12.9c-4.03125,-3.225 -9.1375,-5.375 -14.78125,-5.375c-5.64375,0 -10.75,2.15 -14.78125,5.375h-21.5c-2.95625,0 -5.64375,1.34375 -7.79375,3.225c-1.88125,2.15 -2.95625,4.8375 -2.95625,7.525v0v83.3125c0,7.525 5.9125,13.4375 13.4375,13.4375h107.5c7.525,0 13.4375,-5.9125 13.4375,-13.4375v-18.8125c2.95625,0 5.375,-2.41875 5.375,-5.375v-16.125c0,-2.95625 -2.41875,-5.375 -5.375,-5.375zM111.53125,21.5c9.675,0 17.46875,7.79375 17.46875,17.46875c0,9.675 -7.79375,17.46875 -17.46875,17.46875c-9.675,0 -17.46875,-7.79375 -17.46875,-17.46875c0,-9.675 7.79375,-17.46875 17.46875,-17.46875zM111.53125,61.8125c6.9875,0 13.16875,-3.225 17.46875,-8.0625h10.75c2.95625,0 5.375,2.41875 5.375,5.375v8.0625c-2.15,-1.6125 -5.10625,-2.6875 -8.0625,-2.6875h-51.0625c-0.26875,-4.03125 -1.34375,-7.525 -3.49375,-10.75h11.55625c4.3,4.8375 10.48125,8.0625 17.46875,8.0625zM80.625,64.5h-34.9375c0.80625,-9.1375 8.33125,-16.125 17.46875,-16.125c9.1375,0 16.6625,6.9875 17.46875,16.125zM23.1125,55.3625c0.80625,-1.075 2.15,-1.6125 3.7625,-1.6125h16.93125c-1.88125,3.225 -3.225,6.71875 -3.49375,10.75h-13.16875c-2.95625,0 -5.375,-2.15 -5.64375,-5.10625c0,-1.34375 0.5375,-2.95625 1.6125,-4.03125zM145.125,142.4375c0,4.56875 -3.49375,8.0625 -8.0625,8.0625h-107.5c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625v-74.175c1.6125,1.075 3.7625,1.6125 5.9125,1.6125h13.16875h42.73125h53.75c4.56875,0 8.0625,3.49375 8.0625,8.0625v18.8125h-5.375v-13.4375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v53.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-13.4375h5.375zM120.9375,96.75c-7.525,0 -13.4375,5.9125 -13.4375,13.4375c0,7.525 5.9125,13.4375 13.4375,13.4375h13.4375v13.4375c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-53.75c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v13.4375zM129,110.1875c0,4.56875 -3.49375,8.0625 -8.0625,8.0625c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625c0,-4.56875 3.49375,-8.0625 8.0625,-8.0625c4.56875,0 8.0625,3.49375 8.0625,8.0625zM131.6875,118.25c1.6125,-2.15 2.6875,-5.10625 2.6875,-8.0625c0,-2.95625 -1.075,-5.9125 -2.6875,-8.0625h18.8125v16.125z" fill="url(#color-2)"></path><circle cx="41.5" cy="14.5" transform="scale(2.6875,2.6875)" r="4.5" fill="url(#color-3)"></circle><path d="M74.98125,64.5c-0.80625,-5.9125 -5.64375,-10.75 -11.825,-10.75c-6.18125,0 -11.2875,4.8375 -11.825,10.75z" fill="url(#color-4)"></path></g></g></svg>
                                                            </div>
                                                            <p class="no-margin bold all-caps">Wallet Credit</p>
                                                            <p class="no-margin bold text-primary fs-10">(Better Rate)</p>
                                                        </div>
                                                        <span class="absolute hide" style="right: 45px;top: 5px;width: 25px;">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                width="35" height="35"
                                                                viewBox="0 0 172 172"
                                                                style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="85.484" x2="69.875" y2="94.92788" gradientUnits="userSpaceOnUse" id="color-w1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="102.125" y1="111.67369" x2="102.125" y2="121.85394" gradientUnits="userSpaceOnUse" id="color-w2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="15.38056" x2="86" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-w3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="15.38056" x2="86" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-w4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="15.38056" x2="69.875" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-w5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="102.125" y1="15.38056" x2="102.125" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-w6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" 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" fill-rule="nonzero"></path><g id="original-icon"><circle cx="26" cy="34" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-w1)" fill-rule="evenodd"></circle><circle cx="38" cy="44" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-w2)" fill-rule="evenodd"></circle><path d="M130.88125,42.19375c-1.88125,-2.41875 -4.56875,-4.03125 -7.525,-4.03125c-0.5375,0 -0.80625,0 -1.34375,0c-3.49375,0.5375 -6.45,2.6875 -7.525,5.9125l-2.95625,7.25625c-0.80625,1.88125 -2.15,2.15 -2.6875,2.15c0,0 0,0 -0.26875,0c-0.5375,0 -2.15,-0.26875 -2.95625,-2.15l-10.75,-29.025c-1.34375,-3.7625 -4.8375,-6.18125 -8.86875,-6.18125c-4.03125,0 -7.525,2.41875 -8.86875,6.45l-10.48125,29.29375c-0.80625,1.88125 -2.41875,2.41875 -2.95625,2.41875v0c-0.5375,0 -2.15,-0.26875 -2.95625,-2.15l-2.95625,-7.525c-1.34375,-3.225 -4.3,-5.64375 -7.525,-5.9125c-0.5375,0 -0.80625,0 -1.34375,0c-2.95625,0 -5.9125,1.34375 -7.525,4.03125c-15.5875,20.69375 -15.85625,49.9875 -15.85625,51.33125c0,34.13125 27.14375,61.8125 60.46875,61.8125c33.325,0 60.46875,-27.68125 60.46875,-61.8125c0,-1.34375 -0.26875,-30.6375 -15.5875,-51.86875zM86,150.5c-30.36875,0 -55.09375,-25.2625 -55.09375,-56.4375c0,-1.075 0.26875,-29.025 14.5125,-48.64375c0.80625,-1.075 1.88125,-1.6125 3.225,-1.6125c0.26875,0 0.26875,0 0.5375,0c1.6125,0.26875 2.6875,1.075 3.225,2.6875l2.95625,7.525c1.6125,4.03125 5.10625,5.64375 8.0625,5.64375c2.6875,0 6.45,-1.88125 8.0625,-5.9125l10.48125,-29.29375c0.80625,-1.88125 2.15,-2.95625 4.03125,-2.95625c1.88125,0 3.225,1.075 3.7625,2.6875l10.48125,29.29375c1.34375,4.03125 5.10625,5.64375 7.79375,5.64375h0.26875c2.6875,0 6.18125,-1.34375 7.79375,-5.375l2.95625,-7.25625c0.5375,-1.6125 1.88125,-2.41875 3.225,-2.6875c0.26875,0 0.26875,0 0.5375,0c1.34375,0 2.41875,0.5375 3.225,1.6125c14.24375,19.61875 14.5125,47.56875 14.5125,48.64375c0.5375,31.175 -24.1875,56.4375 -54.55625,56.4375z" fill="url(#color-w3)" fill-rule="nonzero"></path><path d="M105.35,76.325l-43,53.75l4.3,3.225l43,-53.75z" fill="url(#color-w4)" fill-rule="nonzero"></path><path d="M80.625,91.375c0,-5.9125 -4.8375,-10.75 -10.75,-10.75c-5.9125,0 -10.75,4.8375 -10.75,10.75c0,5.9125 4.8375,10.75 10.75,10.75c5.9125,0 10.75,-4.8375 10.75,-10.75zM64.5,91.375c0,-2.95625 2.41875,-5.375 5.375,-5.375c2.95625,0 5.375,2.41875 5.375,5.375c0,2.95625 -2.41875,5.375 -5.375,5.375c-2.95625,0 -5.375,-2.41875 -5.375,-5.375z" fill="url(#color-w5)" fill-rule="nonzero"></path><path d="M102.125,107.5c-5.9125,0 -10.75,4.8375 -10.75,10.75c0,5.9125 4.8375,10.75 10.75,10.75c5.9125,0 10.75,-4.8375 10.75,-10.75c0,-5.9125 -4.8375,-10.75 -10.75,-10.75zM102.125,123.625c-2.95625,0 -5.375,-2.41875 -5.375,-5.375c0,-2.95625 2.41875,-5.375 5.375,-5.375c2.95625,0 5.375,2.41875 5.375,5.375c0,2.95625 -2.41875,5.375 -5.375,5.375z" fill="url(#color-w6)" fill-rule="nonzero"></path></g></g></svg>
                                                        </span>
                                                        <span class="absolute hide" style="right: 15px;top: 5px;width: 25px;">
                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                width="35" height="35"
                                                                viewBox="0 0 172 172"
                                                                style=" fill:#000000;"><defs><linearGradient x1="57.68181" y1="83.3125" x2="57.68181" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-n1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="81.24581" y1="83.3125" x2="81.24581" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-n2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="108.2955" y1="83.3125" x2="108.2955" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-n3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="92.74562" y1="11.42456" x2="80.64919" y2="156.54956" gradientUnits="userSpaceOnUse" id="color-n4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="98.427" y1="11.89756" x2="86.33325" y2="157.02256" gradientUnits="userSpaceOnUse" id="color-n5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></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="M48.375,92.53331c0,-2.408 -0.06987,-3.84581 -0.19888,-6.53331h4.64669l0.258,2.6875h0.129c0.903,0 3.1175,-3.23844 6.60319,-3.23844c3.655,0 7.37719,2.74125 7.37719,9.36594v12.685h-5.375v-12.083c0,-3.01269 -1.0105,-5.29169 -3.89419,-5.29169c-2.107,0 -3.483,1.505 -4.042,3.096c-0.17469,0.47569 -0.129,1.12069 -0.129,1.72269v12.556h-5.375z" fill="url(#color-n1)"></path><path d="M76.68781,99.4375c0.129,2.6875 3.096,4.82944 6.45269,4.82944c2.451,0 4.214,-0.63963 5.80769,-1.24163l0.774,3.50719c-1.806,0.731 -4.30269,1.21744 -7.31269,1.21744c-6.79669,0 -10.79838,-4.20862 -10.79838,-10.61831c0,-5.80769 3.52869,-11.29019 10.23937,-11.29019c6.79669,0 9.03269,6.17319 9.03269,10.77688c0,0.989 -0.086,0.13169 -0.172,2.81919zM85.8925,96.75c0.043,-5.375 -0.817,-7.80719 -4.34569,-7.80719c-3.27069,0 -4.64669,2.43219 -4.86169,7.80719z" fill="url(#color-n2)"></path><path d="M98.18513,86l2.193,9.417c0.47569,2.236 0.94869,4.0205 1.33569,6.708h0.086c0.43,-2.6875 1.118,-4.515 1.72,-6.665l2.709,-9.46h4.30269l2.623,9.202c0.64769,2.451 1.20669,4.2355 1.67969,6.923h0.086c0.344,-2.6875 0.817,-4.472 1.376,-6.923l2.322,-9.202h5.20569l-6.58169,21.5h-4.90469l-2.494,-8.9655c-0.645,-2.19569 -1.118,-4.472 -1.591,-7.1595h-0.086c-0.43,2.6875 -0.989,5.0955 -1.591,7.1595l-2.66869,8.9655h-4.94769l-6.19469,-21.5z" fill="url(#color-n3)"></path><path d="M147.8125,92.35325c0,-4.15219 -2.82994,-8.16463 -7.71044,-11.11819c2.78156,-4.26775 3.53944,-8.557 2.05863,-12.08569c-1.60981,-3.83506 -5.77544,-6.46612 -11.43531,-7.34225c0.92181,-4.99606 -0.03762,-9.245 -2.76812,-11.94325c-2.58538,-2.55581 -6.66769,-3.54212 -11.47025,-2.8165c-1.22819,-4.32956 -3.60394,-7.3745 -6.84237,-8.69944c-4.3645,-1.77913 -10.07544,-0.16125 -15.26769,4.35375l3.52869,4.05813c3.51794,-3.05837 7.31806,-4.40212 9.70456,-3.43462c2.021,0.82775 3.57706,3.56094 4.16562,7.31806l0.46494,2.96431l2.89444,-0.78475c3.999,-1.07769 7.39331,-0.76325 9.04075,0.86537c1.74956,1.73075 1.98606,5.4395 0.61544,9.68306l-1.0965,3.39431l3.56363,0.11825c5.00144,0.16931 8.90369,1.87319 9.94375,4.35106c0.946,2.2575 -0.27681,5.77006 -3.19275,9.17244l-2.33544,2.72781l3.27875,1.47275c4.54725,2.03444 7.48469,5.07669 7.48469,7.74537c0,2.44562 -2.49669,5.23525 -6.51719,7.28581l-3.20081,1.62862l2.46981,2.61225c3.40237,3.59588 4.93156,7.50619 3.89956,9.96794c-1.11531,2.65525 -5.68944,4.48006 -11.03756,4.36719l-4.29194,-0.06719l1.81406,3.8915c1.978,4.24356 2.73587,9.77444 0.34669,12.13138c-1.8275,1.81137 -5.89906,1.98875 -10.37913,0.45687l-3.34056,-1.14219l-0.21231,3.52331c-0.2795,4.64131 -1.99681,8.26944 -4.38063,9.24231c-2.39187,0.98362 -6.22694,-0.387 -9.76906,-3.49375l-2.63644,-2.31125l-1.54531,3.14975c-2.06131,4.19519 -5.06594,6.90419 -7.65669,6.90419c-2.58806,0 -5.59269,-2.71169 -7.65669,-6.90419l-1.548,-3.14706l-2.63375,2.31125c-3.53944,3.10406 -7.37719,4.46931 -9.76906,3.49375c-3.27875,-1.33838 -4.57681,-6.82356 -4.39944,-11.352l0.16931,-4.25162l-3.91031,1.67431c-4.94231,2.10969 -9.84162,2.16881 -11.91369,0.12363c-1.91081,-1.88663 -2.01562,-6.08181 -0.26875,-10.68281l1.27119,-3.33787l-3.56094,-0.29563c-4.52038,-0.37356 -7.91469,-2.01294 -8.86875,-4.28387c-1.032,-2.46175 0.49988,-6.37206 3.89956,-9.96794l2.46981,-2.61225l-3.20081,-1.62863c-4.0205,-2.04787 -6.51719,-4.84019 -6.51719,-7.28581c0,-2.66869 2.93744,-5.71094 7.482,-7.75344l3.27875,-1.47275l-2.33544,-2.72781c-2.91594,-3.40237 -4.13606,-6.91494 -3.19275,-9.17244c0.88956,-2.11506 3.88075,-3.68456 8.00606,-4.20056l3.00194,-0.37356l-0.72831,-2.94013c-0.91106,-3.68456 -0.53481,-6.79131 1.00512,-8.31244c1.83287,-1.81406 5.90713,-1.98875 10.37644,-0.45688l3.34325,1.14487l0.20962,-3.52869c0.2795,-4.644 1.99681,-8.26944 4.38063,-9.24231c2.39994,-0.989 6.22962,0.38969 9.76906,3.49375l3.54213,-4.042c-5.20838,-4.57144 -10.95425,-6.22425 -15.34563,-4.42631c-3.68994,1.51038 -6.31025,5.38575 -7.31269,10.64519c-5.29169,-1.10187 -9.91688,-0.19888 -12.74413,2.59075c-2.48325,2.45369 -3.50181,6.16512 -2.96431,10.62369c-4.70312,1.15025 -8.09744,3.60394 -9.49763,6.9445c-1.4835,3.52869 -0.72562,7.81794 2.05863,12.08569c-4.87781,2.95625 -7.70775,6.96869 -7.70775,11.12088c0,3.81894 2.36231,7.49275 6.58169,10.37913c-3.36744,4.57681 -4.42362,9.35519 -2.8165,13.19294c1.47813,3.526 5.08475,6.02 10.105,7.08962c-1.34106,5.50669 -0.47031,10.32269 2.50475,13.25744c3.58244,3.54481 9.19394,3.60125 14.19,2.25213c0.55631,5.22181 2.73856,10.71238 7.60294,12.7065c3.69531,1.51037 8.31244,0.59394 12.77638,-2.43488c2.96162,4.48275 6.88,7.07888 10.86825,7.07888c3.99094,0 7.90931,-2.59613 10.86825,-7.08156c4.46662,3.02881 9.08912,3.94525 12.77638,2.43488c3.68994,-1.51306 6.30756,-5.38844 7.31,-10.64788c5.29169,1.10725 9.91956,0.19887 12.74412,-2.58537c3.72756,-3.68456 3.62275,-9.57556 2.11775,-14.61463c5.14119,-0.645 10.29044,-2.82994 12.22813,-7.45512c1.6125,-3.83775 0.55363,-8.61613 -2.81381,-13.19294c4.21938,-2.88637 6.58169,-6.56019 6.58169,-10.37912z" fill="url(#color-n4)"></path><path d="M75.25,61.8125c0,5.92862 4.82138,10.75 10.75,10.75c5.92863,0 10.75,-4.82138 10.75,-10.75c0,-4.99606 -3.44,-9.16706 -8.0625,-10.36837v-19.19412c0,-5.92862 4.82137,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75v2.6875h5.375v-2.6875c0,-8.89294 -7.23206,-16.125 -16.125,-16.125c-8.89294,0 -16.125,7.23206 -16.125,16.125v19.19413c-4.6225,1.20131 -8.0625,5.37231 -8.0625,10.36838zM86,56.4375c2.96431,0 5.375,2.41069 5.375,5.375c0,2.96431 -2.41069,5.375 -5.375,5.375c-2.96431,0 -5.375,-2.41069 -5.375,-5.375c0,-2.96431 2.41069,-5.375 5.375,-5.375z" fill="url(#color-n5)"></path></g></g></svg>
                                                        </span>
                                                        <span class="absolute" style="right: 5px;top: 5px;width: 25px;"><img :src="asset('images/hot.png')" class="w-100"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m-t-10 m-b-10">
                                                <div class="col text-center"><div id="expend-method" class="padding-10 bg-master-lightest pointer" @click="uiStore.toggleSection('otherPaymentMethods', !uiStore.isShowing('otherPaymentMethods'))"><i class="fa m-r-10" :class="[{'fa-angle-up': uiStore.isShowing('otherPaymentMethods')}, {'fa-angle-down': !uiStore.isShowing('otherPaymentMethods')}]"></i>{{uiStore.isShowing('otherPaymentMethods') ? 'Hide' : 'Show'}} Alternative Methods <i class="fa m-l-10" :class="[{'fa-angle-up': uiStore.isShowing('otherPaymentMethods')}, {'fa-angle-down': !uiStore.isShowing('otherPaymentMethods')}]"></i></div></div>
                                            </div>
                                            <div class="row" v-show="uiStore.isShowing('otherPaymentMethods')">
                                                <div class="col">
                                                    <div class="row m-b-10 p-l-15 p-r-15">
                                                        <div class="col text-center m-r-5">
                                                            <div class="row h-100">
                                                                <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Cash Deposit', 'text-primary': paymentMethod.name === 'Cash Deposit', 'b-grey': paymentMethod.name !== 'Cash Deposit' }" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
                                                                    <div class="m-b-5 text-center">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                             width="35" height="35"
                                                                             viewBox="0 0 172 172"
                                                                             style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.45313" x2="86" y2="157.24562" gradientUnits="userSpaceOnUse" id="color-alt-1"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="62.14844" x2="86" y2="87.68238" gradientUnits="userSpaceOnUse" id="color-alt-2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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="M142.4375,26.875h-18.8125v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-64.5c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375h-18.8125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v86c0,4.44512 3.61737,8.0625 8.0625,8.0625h40.3125v10.75h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v2.6875h-10.75v5.375h10.75h69.875h10.75v-5.375h-10.75v-2.6875c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-10.75v-10.75h40.3125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-86c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM123.625,96.75v-53.75h10.75v64.5h-96.75v-64.5h10.75v53.75zM107.5,91.375h-43v-48.64644c5.25675,-1.06962 9.40894,-5.22181 10.47856,-10.47856h22.04019c1.06963,5.25675 5.22181,9.40894 10.47856,10.47856v48.64644zM53.75,21.5h64.5v69.875h-5.375v-53.75h-2.6875c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-2.6875h-32.25v2.6875c0,4.44512 -3.61737,8.0625 -8.0625,8.0625h-2.6875v53.75h-5.375zM112.875,145.125c1.4835,0 2.6875,1.204 2.6875,2.6875v2.6875h-59.125v-2.6875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75h32.25zM96.75,139.75h-21.5v-10.75h21.5zM145.125,120.9375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-40.3125h-32.25h-40.3125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-86c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h18.8125v5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375v64.5c0,2.96431 2.41069,5.375 5.375,5.375h96.75c2.96431,0 5.375,-2.41069 5.375,-5.375v-64.5c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75v-5.375h18.8125c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-alt-1)"></path><path d="M86,64.5c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-alt-2)"></path></g></g></svg>
                                                                    </div>
                                                                    <p id="manual-transfer" class="no-margin bold">Manual Transfer</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col text-center m-l-5">
                                                            <div class="row h-100">
                                                                <div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Cheque', 'text-primary': paymentMethod.name === 'Cheque', 'b-grey': paymentMethod.name !== 'Cheque' }" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
                                                                    <div class="m-b-5 text-center">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                                             width="35" height="35"
                                                                             viewBox="0 0 172 172"
                                                                             style=" fill:#000000;"><defs><linearGradient x1="43" y1="68.19531" x2="43" y2="82.97656" gradientUnits="userSpaceOnUse" id="color-ch-1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="31.91406" x2="86" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="31.91406" x2="45.6875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="43" y1="31.91406" x2="43" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="31.91406" x2="59.125" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="26.875" y1="31.91406" x2="26.875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="37.625" y1="31.91406" x2="37.625" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="31.91406" x2="48.375" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="104.8125" y1="31.91406" x2="104.8125" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="31.91406" x2="69.875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-10"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="118.25" y1="31.91406" x2="118.25" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-ch-11"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></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="M61.8125,80.625h-37.625v-8.1055c0,-1.45931 1.18519,-2.6445 2.6445,-2.6445h32.33331c1.462,0 2.64719,1.18519 2.64719,2.6445z" fill="url(#color-ch-1)"></path><path d="M155.875,59.125h-18.8125v-18.8125c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-112.875c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v64.5c0,4.44512 3.61738,8.0625 8.0625,8.0625h18.8125v18.8125c0,4.44512 3.61738,8.0625 8.0625,8.0625h112.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-64.5c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625zM13.4375,104.8125v-64.5c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h112.875c1.48081,0 2.6875,1.20669 2.6875,2.6875v64.5c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-112.875c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875zM158.5625,131.6875c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-112.875c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-18.8125h88.6875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-40.3125h18.8125c1.48081,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-ch-2)"></path><path d="M24.1875,48.375h43v5.375h-43z" fill="url(#color-ch-3)"></path><path d="M24.1875,59.125h37.625v5.375h-37.625z" fill="url(#color-ch-4)"></path><path d="M56.4375,86h5.375v10.75h-5.375z" fill="url(#color-ch-5)"></path><path d="M24.1875,86h5.375v10.75h-5.375z" fill="url(#color-ch-6)"></path><path d="M34.9375,86h5.375v10.75h-5.375z" fill="url(#color-ch-7)"></path><path d="M45.6875,86h5.375v10.75h-5.375z" fill="url(#color-ch-8)"></path><path d="M107.5,48.375h-5.375v5.375h-5.375c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v5.375c0,4.44513 3.61738,8.0625 8.0625,8.0625h16.125c1.48081,0 2.6875,1.20669 2.6875,2.6875v5.375c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-24.1875v5.375h13.4375v5.375h5.375v-5.375h5.375c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-5.375c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-16.125c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-5.375c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h24.1875v-5.375h-13.4375z" fill="url(#color-ch-9)"></path><path d="M51.0625,120.9375h37.625v5.375h-37.625z" fill="url(#color-ch-10)"></path><path d="M99.4375,120.9375h37.625v5.375h-37.625z" fill="url(#color-ch-11)"></path></g></g></svg>
                                                                    </div>
                                                                    <p class="no-margin bold">Cheque</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4 p-r-0">
                                    <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
                                </div>
                                <div class="col p-l-0">
                                    <button id="create-booking" class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': ((paymentMethod.name === '' && !voucherValidated) || (paymentMethod.name !== '' && (!voucherValidated && voucherCode !== '')) || (paymentMethod.name === '' && voucherValidated)) }]" @click="submitForm()">Create Booking</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="calculation">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row m-b-15 m-l-0 m-r-0" v-if="calculation.date">
                                        <div class="col padding-15 bg-master-lightest text-center">
                                            <div class="fs-14 muted" >The recipient will receive the transfer amount by <br><span class="bold text-success">{{ calculation.receive_date }}</span></div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-20 text-danger" v-if="(data.amount - parseFloat(amount.replace(',', '')))">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-10">Outstanding</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-10">{{data.fixed_currency.short_code}} {{(Math.round(((data.outstanding_amount - parseFloat(amount.replace(',', '')))+ Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 text-success bold">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Recipient Gets</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">{{data.convertible_currency.short_code}} {{(Math.round((calculation.foreign_total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end bold m-b-10 text-primary">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Rate</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12 ">{{(Math.round((calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 hint-text">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">You are sending</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((calculation.local_total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 hint-text">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Transfer Charges</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-20 ">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Sub Total</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 hint-text">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Voucher</div>
                                        </div>
                                        <div class="col-auto text-right" v-if="calculation.voucher_discount_amount">
                                            <div class="font-heading fs-12">- MYR {{(Math.round((calculation.voucher_discount_amount + Number.EPSILON) * 100) / 100).toFixed(2)}}</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-5 hint-text">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">Tax {{(Math.round((calculation.tax + Number.EPSILON) * 10) / 10).toFixed(1)}}%</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-12">MYR {{(Math.round((calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                                        </div>
                                    </div>
                                    <div class="row align-items-end m-b-10 bold text-success">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-12">You are paying</div>
                                        </div>
                                        <div class="col-auto text-right">
                                            <div class="font-heading fs-14">MYR {{(Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                        </div>
                                    </div>
                                    <div class="row" v-if="paymentMethod.id === 'wallet'">
                                        <div class="col">
                                            <div class="row m-b-10 m-l-0 m-r-0" v-if="paymentMethod.id === 'wallet' && walletOutstanding < 0">
                                                <div class="col bg-danger-lighter">
                                                    <h6 class="text-danger fs-14 bold">You don't have sufficient credit in your wallet to complete this transaction. Please Reload your wallet.</h6>
                                                    <p class="text-complete fs-12 text-underline pointer" @click="calculation = null">change the payment method?</p>
                                                </div>
                                            </div>
                                            <div class="row m-b-20" v-if="paymentMethod.id === 'wallet' && walletOutstanding < 0">
                                                <div class="col">
                                                    <wallet-top-up-form-component :data="data.company" :amount="(Math.round(((walletOutstanding * -1)+ Number.EPSILON) * 100) / 100).toFixed(2)"></wallet-top-up-form-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row parentContainer" >
                                <div class="col-4 p-r-0">
                                    <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="cancelQuotation()">Cancel</button>
                                </div>
                                <div class="col p-l-0" >
                                    <!-- E-Invoice -->
                                    <button id="lock-booking" class="btn btn-sm all-caps b-rad-none btn-success btn-block"
                                    v-if="paymentMethod.id !== 'wallet' || walletOutstanding >= 0"
                                    @click.prevent="checkEInvoiceAmountLimitRule">Lock Booking</button>
                                </div>
                                <modal-component id="confirm-booking-modal" v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
                                    <confirm-quotation-form-component v-on:cancelQuotation="cancelQuotation()" :calculation="calculation" :section="section" :id="item.id" :payment_method="paymentMethod.id" :bank_code="onlinePayment.id" :amount="amount"  :company-id="item.company.id"></confirm-quotation-form-component>
                                </modal-component>
                            </div>
                        </div>
                    </div>
                    <!-- E-Invoice - start -->
                    <modal-component
                        id="modal-einvoice-request"
                        class="animate__animated animate__fast animate__fadeIn"
                        styleType="fill-in" type="requestEInvoiceA" size="large">
                        <e-invoice-request-form-component
                            class="text-center"
                            :section="section"
                            :company-id="data.company.id"
                            @choice-made="handleEInvoiceRequestRespond"
                        />
                    </modal-component>
                    <modal-component
                        id="modal-einvoice-info"
                        class="animate__animated animate__fast animate__fadeIn"
                        styleType="fill-in" type="requestEInvoiceB" size="large">
                        <e-invoice-info-form-component
                            :section="section"
                            :company-id="data.company.id"
                            :company-type="data.company.type"
                            v-on:eInvoiceInfoUpdated="updatedEInvoiceInfo($event)"
                            v-on:eInvoiceChangeOfMindRequest="changeOfMindEInvoiceRequest()">
                        </e-invoice-info-form-component>
                    </modal-component>
                    <!-- E-Invoice - end -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useRequest } from '@/composables/useRequest';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';
import { useQueueStore } from '@/stores/queue';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';

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

const authStore = useAuthStore();
const uiStore = useUiStore();
const queueStore = useQueueStore();

const { item } = useComponentHandler(props);
const { submit } = useRequest();

const error = ref('');
const expandPayment = ref(false);
const paymentMethod = reactive({
    name: '',
    id: '',
    status: false
});
const onlinePayment = reactive({
    id: '',
    status: false
});
const amount = ref((Math.round((props.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2));
const calculation = ref<any>(null);
const voucherCode = ref('');
const voucherCodeFailedReason = ref('');
const voucherValidated = ref(false);
const voucherIsChecking = ref(false);
const showApplyVoucher = ref(false);
const isEditRecipientBankDetailsCollapsed = ref(false);
const isAnyPaymentRecipientBankEdited = ref(props.data.payment_history?.some((payment: any) => payment.bank_recipient_edited !== null && payment.bank_recipient_edited) || false);
const showModalConfirmBooking = ref(false);
const showModalEInvoiceRequest = ref(false);

const walletOutstanding = computed(() => {
    let walletBalance = props.data.company.wallet ? props.data.company.wallet.amount : 0;
    const calcTotal = calculation.value?.total || 0;
    return Number((walletBalance - calcTotal).toFixed(2));
});

const rules = {
    amount: { required }
};

const v$ = useVuelidate(rules, { amount });

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

const updatePaymentType = (payment: { name: string; id: string }) => {
    paymentMethod.name = payment.name;
    paymentMethod.id = payment.id;
    paymentMethod.status = false;
    error.value = '';
};

const selectOnlinePaymentBank = (bankCode: string) => {
    onlinePayment.id = bankCode;
    onlinePayment.status = true;
};

const submitForm = () => {
    const params = {
        payment_method: paymentMethod.id,
        voucherCode: voucherCode.value,
        amount: amount.value
    };
    submit(route('api.booking.payment.quotation', item.value.id), 'post', props.section, false, false, params, {
        successHandler: (response: any, section?: string) => {
            calculation.value = response.payload.data;
        },
        errorHandler: (err: any, statusCode: number, sectionName?: string) => {
            error.value = err.message;
        }
    });
    calculation.value = null;
};

const cancelQuotation = () => {
    calculation.value = null;
    expandPayment.value = false;
};

const removeVoucher = () => {
    voucherCodeFailedReason.value = '';
    voucherCode.value = '';
    showApplyVoucher.value = false;
};

const applyVoucherCode = () => {
    voucherIsChecking.value = true;
    voucherCodeFailedReason.value = '';
    voucherValidated.value = false;

    if (voucherCode.value.trim() !== '') {
        const params = {
            voucherCode: voucherCode.value,
            amount: amount.value,
            itemId: item.value.id,
            payment_method: paymentMethod.id,
        };
        submit(route('api.voucher.validate'), 'post', props.section + 'ValidateVoucher', false, false, params, {
            successHandler: (response: any) => {
                const data = response.payload.data;
                if (!data) {
                    voucherValidated.value = false;
                    voucherIsChecking.value = false;
                    voucherCodeFailedReason.value = 'Something went wrong. Please contact customer service.';
                } else if (data.valid !== undefined && data.code) {
                    voucherValidated.value = true;
                    if (data.reason) {
                        voucherCodeFailedReason.value = data.reason;
                        voucherValidated.value = false;
                    }
                    voucherIsChecking.value = false;
                }
            },
            errorHandler: (err: any) => {
                voucherIsChecking.value = false;
                // voucherCodeFailedReason.value = err.message;
            }
        });
    } else {
        voucherCodeFailedReason.value = 'Please enter voucher code';
        voucherValidated.value = true;
        voucherIsChecking.value = false;
    }
};

const updateVoucherFlag = (event: any) => {
    voucherCodeFailedReason.value = '';
    voucherValidated.value = false;
    voucherCode.value = event.target.value;
};

const handleSelectedVoucher = (value: string) => {
    voucherCode.value = value;
};

const toggleEditRecipientBankDetailsCollapsed = () => {
    isEditRecipientBankDetailsCollapsed.value = !isEditRecipientBankDetailsCollapsed.value;
    const $ = (window as any).$;
    if ($) {
        if (isEditRecipientBankDetailsCollapsed.value) {
            $('.collapse').collapse('show');
        } else {
            $('.collapse').collapse('hide');
        }
    }
};

const checkTransferRule = () => {
    error.value = '';
    const params = {
        booking_id: props.data.id,
        company_id: props.data.company.id,
    };
    submit(route('api.rule.check.transfer'), 'post', props.section + 'CheckTransferRule', false, true, params, {
        successHandler: () => {
            checkEInvoiceRule();
        }
    });
};

const checkEInvoiceRule = () => {
    error.value = '';
    const params = {
        company_id: props.data.company.id,
    };
    submit(route('api.rule.check.einvoice'), 'post', props.section + 'CheckEInvoiceRule', false, true, params, {
        successHandler: (response: any) => {
            if (response.payload.data.isPassed) {
                amount.value = (Math.round((props.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2);
                expandPayment.value = true;
            }
        },
        errorHandler: (err: any, statusCode: number, sectionName?: string) => {
            const $ = (window as any).$;
            if (statusCode === 422 && $) {
                $('#modal-einvoice-info').modal('show');
            }
            error.value = err.message;
        }
    });
};

const checkEInvoiceAmountLimitRule = () => {
    error.value = '';
    const params = {
        booking_id: props.data.id,
        company_id: props.data.company.id,
        payment_method: paymentMethod.id,
        voucherCode: voucherCode.value,
        amount: amount.value
    };
    submit(route('api.rule.check.einvoice.amount-limit'), 'post', props.section + 'CheckEInvoiceAmountLimitRule', false, true, params, {
        successHandler: () => {
            checkPurchaseOrderRule();
        },
        errorHandler: (err: any, statusCode: number, sectionName?: string) => {
            const $ = (window as any).$;
            if (statusCode === 422 && $) {
                if (!props.data.company.e_invoice) {
                    $('#modal-einvoice-request').modal('show');
                } else if (!props.data.company.tin) {
                    $('#modal-einvoice-info').modal('show');
                }
            }
            error.value = err.message;
        }
    });
};

const checkPurchaseOrderRule = () => {
    error.value = '';
    const params = {
        booking_id: props.data.id,
        company_id: props.data.company.id,
    };
    submit(route('api.rule.check.purchase.order'), 'post', props.section + 'CheckPurchaseOrderRule', false, true, params, {
        successHandler: (response: any) => {
            if (response.payload.data.isPassed) {
                showModalConfirmBooking.value = true;
                const $ = (window as any).$;
                if ($) $('#confirm-booking-modal').modal('show');
            }
        }
    });
};

const updatedEInvoiceInfo = (info: any) => {
    queueStore.reloadList({ name: "bookingDetailSection" });
};

const handleEInvoiceRequestRespond = ({ choice }: { choice: any }) => {
    showModalEInvoiceRequest.value = false;
    if (!choice) {
        showModalEInvoiceRequest.value = true;
    }
};

const changeOfMindEInvoiceRequest = () => {
    const params = {
        booking_id: props.data.id,
        company_id: props.data.company.id,
        e_invoice_request: false
    };
    submit(route('api.company.einvoice.request.change'), 'post', props.section + 'ChangeOfMind', true, true, params, {
        successHandler: () => {
            queueStore.reloadList({ name: "bookingDetailSection" });
        }
    });
};

const makePayment = () => {
    if (props.data.company.e_invoice === null) {
        const $ = (window as any).$;
        if ($) $('#modal-einvoice-request').modal('show');
    } else {
        checkTransferRule();
    }
};
</script>
