<template>
    <div class="row" :class="{'bg-danger-lighter': authStore.isAdmin && companySegmentIds.includes(24)}">
        <div class="col">
            <div class="row no-margin">
                <div class="col p-b-15 p-l-0 p-r-0">
                    <div class="row align-items-center m-b-10">
                        <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': !submitted}, {'animate__pulse': !submitted}, {'bg-success': submitted}]"><span v-if="data.status !==3">2</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': submitted}]">Purchase Order</div>
                            <p class="m-b-0 fs-12" v-if="!submitted">In order for us to process your order, you will need to provide us with your purchase order information.</p>
                        </div>
                    </div>
                    <div class="row" v-if="!submitted">
                        <div class="col-auto">
                            <div class="bg-danger p-l-15 p-r-15 p-t-5 p-b-5 m-b-10">
                                <p class="m-b-0 text-white fs-12" >Ensure PO details are fill in correctly — NO changes allowed after submission.</p>
                            </div>
                            <div class="bg-danger p-l-15 p-r-15 p-t-5 p-b-5" v-if="authStore.isAdmin && companySegmentIds.includes(24)">
                                <p class="m-b-0 text-white fs-12" >Please note that this customer request to manual fill up the PO.</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row" v-for="(productItem, index) in products" :key="productItem.id">
                                <div class="col p-b-10 p-t-10 " :class="[{'b-grey' : index !== Object.keys(products).length - 1}, {'b-b' : index !== Object.keys(products).length - 1}]">
                                    <purchase-order-item-form-component :data="productItem" :index="index" :currency="data.fixed_currency.short_code" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
                                </div>
                            </div>
                            <div class="row m-t-20" v-if="!submitted">
                                <div class="col">
                                    <div class="row" v-if="authStore.isAdmin">
                                        <div class="col">
                                            <span class="pointer text-complete fs-11 text-upper text-underline" @click="useUploadPdfPo = !useUploadPdfPo; useUploadCsvPo = false;">{{ useUploadPdfPo ? '< Back to Manual Enter Purchase Order' : 'Click here to Upload PURCHASE ORDER PDF' }}</span>
                                        </div>
                                    </div>
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <span class="pointer text-complete fs-11 text-upper text-underline" @click="useUploadCsvPo = !useUploadCsvPo; useUploadPdfPo = false;">{{ useUploadCsvPo ? '< Back to Manual Enter Purchase Order' : 'Click here to Upload PURCHASE ORDER CSV' }}</span>
                                        </div>
                                    </div>
                                    <div class="row" v-if="!useUploadCsvPo && !useUploadPdfPo">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-4 pr-md-1">
                                                    <div class="form-group form-group-default b-rad-none">
                                                        <label>Stock Code</label>
                                                        <input id="stock_code" name="stock_code" type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md pl-md-1">
                                                    <div class="form-group form-group-default b-rad-none required">
                                                        <label>description</label>
                                                        <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish" v-model="product.description">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row align-items-center">
                                                <div class="col-sm-12 col-md-6 pr-md-1">
                                                    <div class="form-group form-group-default b-rad-none required">
                                                        <label>Unit Price</label>
                                                        <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money3="productPrice" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 pl-md-1">
                                                    <div class="form-group form-group-default b-rad-none no-padding no-border">
                                                        <div class="row no-margin">
                                                            <div  id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity()" @mouseleave="clearInt" @mouseup="clearInt" @touchstart="updateQuantity()" @touchend="clearInt" @touchcancel="clearInt">
                                                                <div class="row h-100 align-items-center">
                                                                    <div class="col">
                                                                        <i class="fa fa-minus"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col no-padding">
                                                                <label class="p-t-5 p-l-5 text-center">Quantity</label>
                                                                <input  id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-maska data-maska="#########" />
                                                            </div>
                                                            <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInt" @mouseup="clearInt" @touchstart="updateQuantity('add')" @touchend="clearInt" @touchcancel="clearInt">
                                                                <div class="row h-100 align-items-center">
                                                                    <div class="col">
                                                                        <i class="fa fa-plus"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-12 col-md-4 p-b-15 pb-md-0">
                                                    <p class="m-b-0 small">Total</p>
                                                    <h6 class="no-margin bold text-complete">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</h6>
                                                </div>
                                                <div class="col-sm-12 col-md">
                                                    <button id="add-product" name="add-product" class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" v-if="useUploadCsvPo">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col p-b-15 pb-md-0">
                                                    <file-input-component :validator="v$.files" v-model="files">
                                                        <template #label>
                                                            <div class="font-heading fs-11 text-primary all-caps">Import PURCHASE ORDER CSV</div>
                                                            <div class="font-heading fs-9 all-caps muted text-underline"><a :href="asset('template/import-po-template.xlsx')" class="muted" download>Click here to download the template</a></div>
                                                        </template>
                                                    </file-input-component>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="uploadProducts">Upload</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" v-if="useUploadPdfPo">
                                        <div class="col">
                                            <upload-purchase-order-pdf-v2-form-component :booking-id="data.id" :section="section + 'PDFUpload1'"></upload-purchase-order-pdf-v2-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) > (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)">
                        <div class="col">
                            <div class="alert alert-warning padding-15" role="alert" v-if="false">
                                <div class="font-heading fs-12 all-caps bold m-b-15">Can't Complete Your Purchase Order ?</div>
                                <div class="row m-b-15">
                                    <div class="col">
                                        <div class="font-heading fs-10 m-b-10">If your Purchase Order total amount doesn't match your transfer total amount we are unable to confirm your purchase order and generate the invoice for you, this usually happen when you pay for your purchase order with multiple transfer orders.</div>
                                        <div class="font-heading fs-10">But don't worry you can always merge your transfer orders into one to complete your purchase order successfully and generate your invoice.</div>
                                    </div>
                                </div>
                                <a class="btn btn-xs all-caps b-rad-none btn-warning" href="#">Merge Transfer Orders</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-8" v-if="data.company.address">
                    <div class="row align-items-end m-r-0 p-b-20">
                        <div class="col"></div>
                        <div class="col-auto b-t b-grey p-t-10 p-l-0">
                            <h6 class="font-heading all-caps bold">Total:</h6>
                        </div>
                        <div class="col-auto b-t b-grey p-t-10  p-r-0">
                            <h6>
                                <span
                                    v-if="!submitted"
                                    class="bold m-r-5"
                                    :class="totalAmountClass"
                                >
                                    {{ totalFormattedPoTotal }}/
                                </span>
                                <span class="text-primary bold m-l-5">
                                    {{ totalFormattedDataAmount }} {{ data.fixed_currency.short_code }}
                                </span>
                            </h6>
                        </div>
                    </div>
                    <div class="row" v-if="poTotal > 0 && !submitted">
                        <div class="col">
                            <div class="row m-b-10">
                                <div class="col">
                                    <button id="save-purchase-order" name="save-purchase-order" class="btn btn-xs all-caps b-rad-none btn-primary btn-block requestModal" data-type="submitPOConfirmation">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
                                </div>
                                <modal-component
                                    id="modal-submit-po"
                                    class="animate__animated animate__fast animate__fadeIn"
                                    styleType="fill-in" type="submitPOConfirmation" size="large">
                                    <purchase-order-submit-confirmation-component class="text-center" v-on:confirm-submit="handleConfirmed" :section="section">
                                    </purchase-order-submit-confirmation-component>
                                </modal-component>
                            </div>
                            <div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== data.amount">
                                <div class="col">
                                    <div class="fs-10">** you purchase order will be saved but wont be approved until your <span class="text-danger bold all-caps">purchase order's total</span> matches your <span class="text-success bold all-caps">transfer order's total</span>.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Approve and Edit Purchase Order -->
            <div class="row" v-if="submitted">
                <div class="col-12 col-md-5 pr-md-0" v-if="submitted">
                    <div class="row m-b-15" v-if="(authStore.isAdmin && data.purchase_order.status === 1) || (!authStore.isAdmin && data.purchase_order && data.purchase_order.status === 1 && authStore.getCompanyId === 199)" >
                        <div class="col">
                            <button class="btn btn-sm btn-block btn-success b-rad-none" :disabled="poProcessing" @click="handleRepprove()">Approve Purchase Order</button>
                        </div>
                    </div>
                    <div class="row m-b-15" v-if="authStore.isAdmin && data.purchase_order.status === 2" >
                        <div class="col">
                            <button class="btn btn-sm btn-block btn-success b-rad-none" :disabled="poProcessing" @click="handleRepprove()">
                                Reapprove Purchase Order
                                <!-- <span class="badge badge-danger position-absolute" style="top:-5px; right:-5px;"
                                    data-toggle="tooltip"
                                    data-placement="right"
                                    data-html="true"
                                    data-custom-class="tooltip-report-export"
                                    title="Allow admin to rerun of 'Approve Purchase Order' to generate invoices, conditions apply">ADMIN</span> -->
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="alert alert-success padding-15" role="alert" v-if="submitted && data.status !== 3">
                        <div class="font-heading fs-12 all-caps bold m-b-15">Your Purchase Order {{data.purchase_order.status === 1 ? 'is Being Processed for Verification' : 'has been Approved' }}</div>
                        <div class="row m-b-15" v-if="allowPOEditing">
                            <div class="col">
                                <div class="font-heading fs-10">If you would like to still edit your Purchase Order you can do that by clicking on the edit button below, but your purchase order verification request will be reset.</div>
                            </div>
                        </div>
                        <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lightest w-100" @click="submitted = false" v-if="allowPOEditing">Edit Purchase Order</button>
                    </div>
                </div>
            </div>

            <!-- Generate Banking Invoice -->
            <div class="row" v-if="[14, 15, 16, 17, 18, 19].includes(data.service.id)">
                <div class="col-12 col-md-5 pr-md-0" v-if="submitted">
                    <div class="row">
                        <div class="col-12">
                            <button class="btn btn-xs all-caps b-rad-none btn-complete w-100 m-t-5" v-if="!data.documents.banking_invoice && data.outstanding_amount != 0" @click="handleGenerateBankingInvoice">Generate Banking Invoice</button>
                            <button class="btn btn-sm btn-danger b-rad-none btn-block" v-if="data.documents.banking_invoice" @click="submit(route('api.booking.banking.create', data.id), 'post', section, true, true)">Regenerate Banking Invoice</button>
                        </div>
                    </div>
                </div>
                <div class="col" v-if="submitted">
                    <div class="alert alert-success padding-15" role="alert" v-if="submitted && [14, 15, 16, 17, 18, 19].includes(data.service.id) && (data.documents.banking_invoice || data.documents.delivery_order_banking )">
                        <document-file-viewer-component :file="data.documents.banking_invoice.files[0]" v-if="data.documents.banking_invoice">
                            <template #button>
                                <div class="text-center bg-master-lightest padding-20 pointer m-b-10">
                                    <div class="m-b-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="45" height="45" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_gr9"><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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
                                    </div>
                                    <p class="no-margin fs-12">Banking Invoice</p>
                                </div>
                            </template>
                        </document-file-viewer-component>
                        <document-file-viewer-component :file="data.documents.delivery_order_banking.files[0]" v-if="data.documents.delivery_order_banking">
                            <template #button>
                                <div class="text-center bg-master-lightest padding-20 pointer">
                                    <div class="m-b-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                            width="45" height="45"
                                            viewBox="0 0 172 172"
                                            style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="39.05475" x2="69.875" y2="54.29019" gradientUnits="userSpaceOnUse" id="color-1_L06xtIstZ632_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-2_L06xtIstZ632_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-3_L06xtIstZ632_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-4_L06xtIstZ632_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="17.09788" x2="48.375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-5_L06xtIstZ632_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="17.09788" x2="59.125" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-6_L06xtIstZ632_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-7_L06xtIstZ632_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.09788" x2="86" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-8_L06xtIstZ632_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="130.34375" y1="17.09788" x2="130.34375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-9_L06xtIstZ632_gr9"><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.23794,53.75h43.27681c1.40556,0 2.54775,-1.14219 2.54775,-2.55044v-5.65181c0,-1.40556 -1.14219,-2.54775 -2.55044,-2.54775h-43.27412c-1.40825,0 -2.55044,1.14219 -2.55044,2.55044v5.65181c0,1.40556 1.14219,2.54775 2.55044,2.54775z" fill="url(#color-1_L06xtIstZ632_gr1)"></path><rect x="17" y="23" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-2_L06xtIstZ632_gr2)"></rect><rect x="17" y="28" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-3_L06xtIstZ632_gr3)"></rect><rect x="17" y="33" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-4_L06xtIstZ632_gr4)"></rect><rect x="17" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-5_L06xtIstZ632_gr5)"></rect><rect x="21" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-6_L06xtIstZ632_gr6)"></rect><rect x="25" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-7_L06xtIstZ632_gr7)"></rect><path d="M155.875,86c0,-12.01044 -7.92006,-22.20413 -18.8125,-25.63606v-35.7545c0,-2.18494 -1.30075,-4.14144 -3.31369,-4.97456c-1.99681,-0.83044 -4.28387,-0.38431 -5.82381,1.15025l-4.02587,4.0205l-6.78325,-4.95306c-1.892,-1.38675 -4.43706,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43438,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.05469,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-6.77519,4.95306l-4.042,-4.01781c-1.54263,-1.53456 -3.82969,-1.98606 -5.82381,-1.15025c-2.01294,0.83312 -3.31369,2.78962 -3.31369,4.97456v101.70575h-13.4375v13.4375c0,7.40944 6.03075,13.4375 13.4375,13.4375h94.05981c7.40944,-0.00269 13.44019,-6.03075 13.44019,-13.44019v-28.11394c10.89244,-3.43194 18.8125,-13.62562 18.8125,-25.63606zM29.5625,147.8125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-8.0625h88.6875v8.0625c0,3.02344 1.00244,5.375 2.69019,8.0625zM131.6875,139.75c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-80.625v-24.1875h-0.00269l-0.02419,-77.53169l4.03663,4.01781c1.88125,1.8705 4.79988,2.09356 6.94987,0.53213l6.7725,-4.95575l7.05469,5.15194c1.89737,1.38406 4.43438,1.37869 6.32637,0l7.04125,-5.15194l7.05738,5.15194c1.89469,1.38137 4.429,1.38137 6.32369,0l7.04394,-5.15194l7.05469,5.15194c1.89737,1.38406 4.43437,1.37869 6.32637,0l7.04125,-5.15194l6.78862,4.95575c2.14194,1.56413 5.06594,1.34106 6.94719,-0.53213l4.01244,-4.00169v34.65263c-0.88419,-0.08869 -1.77912,-0.13706 -2.6875,-0.13706c-14.81888,0 -26.875,12.05613 -26.875,26.875c0,14.81887 12.05612,26.875 26.875,26.875c0.90838,0 1.80331,-0.04838 2.6875,-0.13706zM129,107.5c-11.85456,0 -21.5,-9.64544 -21.5,-21.5c0,-11.85456 9.64544,-21.5 21.5,-21.5c11.85456,0 21.5,9.64544 21.5,21.5c0,11.85456 -9.64544,21.5 -21.5,21.5z" fill="url(#color-8_L06xtIstZ632_gr8)"></path><path d="M140.53744,75.25l-14.22763,14.79469l-6.15975,-6.407l-3.80013,3.95331l6.15975,6.407c1.04812,1.09113 2.42413,1.634 3.80281,1.634c1.37869,0 2.75469,-0.54287 3.80281,-1.634l14.22225,-14.79469z" fill="url(#color-9_L06xtIstZ632_gr9)"></path></g></g>
                                        </svg>
                                    </div>
                                    <p class="no-margin fs-12">Banking Delivery Order</p>
                                </div>
                            </template>
                        </document-file-viewer-component>
                    </div>
                </div>
            </div>

            <!-- Generate Proforma Invoice -->
            <div class="row" v-else>
                <div class="col-12 col-md-5 pr-md-0" v-if="submitted && data.status !== 3">
                    <div class="row">
                        <div class="col-12">
                            <button class="btn btn-xs all-caps b-rad-none btn-complete w-100 m-t-5" v-if="!data.documents.proforma_invoice && data.outstanding_amount != 0" @click="handleGenerateProformaInvoice">Generate Proforma Invoice</button>
                            <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"
                                    v-on:eInvoiceChangeOfMindRequest="changeOfMindEInvoiceRequest()">
                                </e-invoice-info-form-component>
                            </modal-component>
                            <button class="btn btn-sm btn-danger b-rad-none btn-block" v-if="data.documents.proforma_invoice" @click="submit(route('api.booking.proforma.create', data.id), 'post', section, true, true)">Regenerate Proforma Invoice</button>
                        </div>
                    </div>
                </div>
                <div class="col" v-if="submitted && data.status !== 3">
                    <div class="alert alert-success padding-15" role="alert" v-if="data.documents.proforma_invoice">
                        <document-file-viewer-component :file="data.documents.proforma_invoice.files[0]" v-if="data.documents.proforma_invoice">
                            <template #button>
                                <div class="text-center bg-master-lightest padding-20 pointer">
                                    <div class="m-b-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="45" height="45" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_gr9"><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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
                                    </div>
                                    <p class="no-margin fs-12">Proforma Invoice</p>
                                </div>
                            </template>
                        </document-file-viewer-component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { vMaska } from 'maska/vue';
import { useFormHandler } from '@/composables/useFormHandler';
import { useQueueStore } from '@/stores/queue';
import { useAuthStore } from '@/stores/auth';
import useVuelidate from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';
import route from '@/general/functions/router';

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

const { submit, isLoading, error, parameters } = useFormHandler(props);
const queueStore = useQueueStore();
const authStore = useAuthStore();

const interval = ref<any>(false);
const submitted = ref(false);
const useUploadCsvPo = ref(false);
const useUploadPdfPo = ref(false);
const product = reactive({
    stockCode: '',
    description: '',
    quantity: 1,
    unit_price: 0 as string | number,
});
const products = ref<any[]>([]);
const files = ref<any[]>([]);
const uploadFiles = ref(false);
const poProcessing = ref(false);

const rules = {
    files: {
        required: requiredIf(() => uploadFiles.value)
    }
};

const productPrice = { decimal: '.', thousands: ',', precision: 3 };

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

const productTotal = computed(() => {
    const priceStr = product.unit_price?.toString() || '0';
    return product.quantity * parseFloat(priceStr.replace(/,/g, ''));
});

const poTotal = computed(() => {
    return products.value.reduce((last, p) => last + (p.total || 0), 0);
});

const allowPOEditing = computed(() => {
    const noAmount = Math.round((props.data.amount + Number.EPSILON) * 100) / 100 === 0;
    const noPaymentsMade = Math.round((props.data.paid_amount + Number.EPSILON) * 100) / 100 === 0;
    const noPaymentPendingVerifications = props.data.payment_history.every((payment: any) => payment.status !== 1);

    const paymentsMade = Math.round((props.data.paid_amount + Number.EPSILON) * 100) / 100 > 0;
    const outstandingAmount = Math.round((props.data.outstanding_amount + Number.EPSILON) * 100) / 100 > 0;
    const allPaymentApproved = props.data.payment_history.every((payment: any) => [2, 3, 7].includes(payment.status));

    const adminBeforeApproval = authStore.isAdmin && props.data.purchase_order?.status !== 2;

    return (!noAmount && noPaymentsMade && noPaymentPendingVerifications) || (paymentsMade && outstandingAmount && allPaymentApproved) || adminBeforeApproval;
});

const totalFormattedPoTotal = computed(() => (Math.round((poTotal.value + Number.EPSILON) * 1000) / 1000).toFixed(3));
const totalFormattedDataAmount = computed(() => {
    if (props.data.amount === 0 && props.data.outstanding_amount === 0 && props.data.floating_amount === 0 && props.data.paid_amount === 0) {
        return (Math.round((poTotal.value + Number.EPSILON) * 1000) / 1000).toFixed(3);
    }
    return (Math.round((props.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3);
});

const totalAmountClass = computed(() => ({
    'text-danger': totalFormattedPoTotal.value !== totalFormattedDataAmount.value,
    'text-success': totalFormattedPoTotal.value === totalFormattedDataAmount.value,
}));

onMounted(() => {
    products.value = props.data.purchase_order ? JSON.parse(JSON.stringify(props.data.purchase_order.details)) : [];
    submitted.value = !!props.data.purchase_order;
});

watch(() => props.data, () => {
    if (props.data?.purchase_order?.details) {
        products.value = JSON.parse(JSON.stringify(props.data.purchase_order.details));
        submitted.value = true;
    } else {
        products.value = [];
        submitted.value = false;
    }
}, { deep: true });

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

const updateQuantity = (type?: string) => {
    if (!interval.value) {
        interval.value = setInterval(() => {
            if (type === 'add') {
                product.quantity++;
            } else if (product.quantity > 1) {
                product.quantity--;
            }
        }, 80);
    }
};

const clearInt = () => {
    clearInterval(interval.value);
    interval.value = false;
};

const onlyEnglish = (event: any) => {
    let value = event.target.value;
    const regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
    if (regex.test(value)) {
        product.description = value.replace(regex, '');
    }
};

const handleConfirmed = () => {
    uploadFiles.value = false;
    parameters.value = {
        products: products.value,
        booking_id: props.data.id,
        company_id: props.data.company.id,
    };
    submit(route('api.transaction.po.create', props.data.id), 'post', props.section, true, true, parameters.value, {
        successHandler: (response: any, section?: string) => {
             if ((Math.round((poTotal.value + Number.EPSILON) * 1000) / 1000).toFixed(3) === (Math.round((props.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)) {
                submitted.value = true;
            }
            queueStore.reloadList({ name: "bookingDetailSection" });
        }
    });
};

const uploadProducts = () => {
    uploadFiles.value = true;
    parameters.value = {
        files: files.value
    };
    submit(route('api.transaction.po.import', props.data.id), 'post', props.section, true, true, parameters.value, {
        successHandler: () => {
            if ((Math.round((poTotal.value + Number.EPSILON) * 1000) / 1000).toFixed(3) === (Math.round((props.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)) {
                submitted.value = true;
            }
            queueStore.reloadList({ name: "bookingDetailSection" });
        }
    });
};

const addProduct = () => {
    const priceStr = product.unit_price?.toString() || '0';
    const price = parseFloat(priceStr.replace(/,/g, ''));
    products.value.push({
        stockCode: product.stockCode,
        description: product.description,
        quantity: product.quantity,
        unit_price: price,
        total: product.quantity * price
    });
    product.stockCode = '';
    product.description = '';
    product.quantity = 1;
    product.unit_price = 0;
};

const updateProduct = (p: any, index: number) => {
    const priceStr = p.unit_price?.toString() || '0';
    const price = parseFloat(priceStr.replace(/,/g, ''));
    products.value[index] = {
        stockCode: p.stockCode,
        description: p.description,
        quantity: p.quantity,
        unit_price: price,
        total: p.quantity * price
    };
};

const removeProduct = (index: number) => {
    products.value.splice(index, 1);
};

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

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

const handleEInvoiceRequestRespond = () => {
    // Legacy logic was empty/commented
};

const checkTransferRule = () => {
    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: (response: any, section?: string) => checkEInvoiceRule()
    });
};

const checkEInvoiceRule = () => {
    const params = { company_id: props.data.company.id };
    submit(route('api.rule.check.einvoice'), 'post', props.section + 'CheckEInvoiceRule', false, true, params, {
        successHandler: (response: any, section?: string) => checkEInvoiceAmountLimitRule(),
        errorHandler: (response: any, statusCode: number, sectionName?: string) => {
            if (statusCode === 422) {
                const $ = (window as any).$;
                if ($) $('#modal-einvoice-info').modal('show');
            }
        }
    });
};

const checkEInvoiceAmountLimitRule = () => {
    const params = {
        booking_id: props.data.id,
        company_id: props.data.company.id,
    };
    submit(route('api.rule.check.einvoice.amount-limit'), 'post', props.section + 'CheckEInvoiceAmountLimitRule', false, true, params, {
        successHandler: (response: any, section?: string) => {
            if (response.payload.data.isPassed) {
                if ([14, 15, 16, 17, 18, 19].includes(props.data.service.id)) {
                    submit(route('api.booking.banking.create', props.data.id), 'post', props.section, true, true);
                } else {
                    submit(route('api.booking.proforma.create', props.data.id), 'post', props.section, true, true);
                }
            }
        },
        errorHandler: (response: any, statusCode: number, sectionName?: string) => {
            if (statusCode === 422) {
                const $ = (window as any).$;
                if (!props.data.company.e_invoice) {
                    if ($) $('#modal-einvoice-request').modal('show');
                } else if (!props.data.company.tin) {
                    if ($) $('#modal-einvoice-info').modal('show');
                }
            }
        }
    });
};

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

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);
};

const handleRepprove = () => {
    if (poProcessing.value) return;
    poProcessing.value = true;
    submit(route('api.booking.po.approval', props.data.id), 'post', props.section, true, true, null, {
        successHandler: (response: any, section?: string) => {
            poProcessing.value = false;
            if ((Math.round((poTotal.value + Number.EPSILON) * 1000) / 1000).toFixed(3) === (Math.round((props.data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3)) {
                submitted.value = true;
            }
            queueStore.reloadList({ name: props.section });
        },
        errorHandler: () => {
            poProcessing.value = false;
            queueStore.reloadList({ name: props.section });
        }
    });
};
</script>
