<template>
    <div class="row parentContainer">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading" v-if="booking">
                <div class="col-9">
                    <div class="row">
                        <div class="col bg-white p-t-25 p-b-0">
                            <div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
                                <div @mouseover="bearShowing = true" style="width: 52px;height: 30px;margin-top: 75px;margin-left: 22px;"></div>
                            </div>
                            <div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
                            <!--<bear-component class="animate__animated animate__slow animate__fadeInDown" v-on:mouseover.native="bearShowing = true" v-on:mouseleave.native="bearShowing = false" v-if="bearShowing"></bear-component>-->
                            <div class="row align-items-center m-b-0">
                                <div class="col-auto p-r-0">
                                    <div class="icon-thumbnail icon-35 bg-transparent">
                                        <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="39.05475" x2="69.875" y2="54.29019" gradientUnits="userSpaceOnUse" id="color-1"><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"><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"><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"><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"><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"><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"><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"><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"><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)"></path><rect x="17" y="23" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-2)"></rect><rect x="17" y="28" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-3)"></rect><rect x="17" y="33" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-4)"></rect><rect x="17" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-5)"></rect><rect x="21" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-6)"></rect><rect x="25" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-7)"></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)"></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)"></path></g></g></svg>
                                    </div>
                                </div>
                                <div class="col-auto p-l-0">
                                    <div class="font-heading all-caps fs-12 bold hint-text">Merge Transfer</div>
                                </div>
                                <div class="col-12 p-3 p-b-0">
                                    <p>Merge multiple transfer orders to generate a single invoice for your purchase order</p>
                                </div>
                            </div>
                            <div class="row b-b b-dashed b-grey p-b-0" >
                                <div class="col-10">
                                    <div class="row m-b-15">
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Date</div>
                                            <div class="font-heading fs-10">
                                                {{booking.created_at}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Reference</div>
                                            <div class="font-heading fs-10">
                                                {{booking.marking}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">{{booking.company.type === 1 ? 'SSM Registration No.' : 'Identification Card No.'}}</div>
                                            <div class="font-heading fs-10 text-info">
                                                {{booking.company.identification.reference}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Purchase Order Amount</div>
                                            <div class="font-heading fs-10 text-info" v-if="booking.purchase_order!==null">
                                                {{formatAmount(booking.purchase_order.amount)}}
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="font-heading fs-10 muted all-caps">Booking Amount</div>
                                            <div class="font-heading fs-10 text-info">
                                                {{formatAmount(booking.amount)}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col bg-white padding-15">
                            <div class="row">
                                <p class="col-auto pull-left">Select Transfer Orders to merge with the order above</p>
                            </div>
                            <div class="b-b b-dashed b-grey p-b-25">
                                <div class="row align-items-center m-b-5 parentContainer">
                                    <div class="col-auto pl3">
                                        <div class="font-heading fs-12" style="line-height: 0px;">
                                            <input type="checkbox" class="hide"/>
                                        </div>
                                    </div>
                                    <div class="col-auto" :style="minWidth">
                                        <div class="font-heading fs-10 muted all-caps">Created At</div>
                                    </div>
                                    <div class="col-auto" :style="minWidth">
                                        <div class="font-heading fs-10 muted all-caps">Marking</div>
                                    </div>
                                    <div class="col-auto" :style="minWidth">
                                        <div class="font-heading fs-10 muted all-caps">Currency</div>
                                    </div>
                                    <div class="col-auto" :style="minWidth">
                                        <div class="font-heading fs-10 muted all-caps">Type</div>
                                    </div>
                                    <div class="col-auto" :style="minWidth150">
                                        <div class="font-heading fs-10 muted all-caps">P.O. Amount</div>
                                    </div>
                                    <div class="col-auto" :style="minWidth150">
                                        <div class="font-heading fs-10 muted all-caps">Booking Amount</div>
                                    </div>
                                </div>
                                <list-component key="2" section="transferSection" :endpoint="route('api.booking.list')" :options="{per_page: 25, id_not: booking.id, company_id: booking.company_id, status: 2,service_id:booking.service.id,convertible_currency_id:booking.convertible_currency.id,fixed_currency_id:booking.fixed_currency.id,with_transactions:true}">
                                    <template #list="{data}">
                                        <booking-mergeable-component :data="data"></booking-mergeable-component>
                                    </template>
                                </list-component>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="row m-l-0 m-r-0 m-b-15">
                        <div class="col bg-danger padding-15">
                            <div class="text-justify text-white fs-12">
                                Be cautious when merging multiple transfer orders, double check your reference numbers and the transfer amount before proceeding.
                                <br/><br/>
                                Please note that merged transfer orders can't be un-merged.
                            </div>
                        </div>
                    </div>
                    <div class="row no-margin">
                        <div class="col">
                            <div class="row">
                                <div class="col bg-white padding-15">
                                    <div class="row" >
                                        <div class="col">
                                            <div class="row align-items-end text-complete">
                                                <div class="col">
                                                    <div class="font-heading all-caps fs-10">Order Total Amount:</div>
                                                </div>
                                                <div class="col-12 text-left m-t-10 m-b-10">
                                                    <div class="font-heading fs-12">
                                                        <span class="bold text-success">{{totalOrderAmount}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <button class="btn btn-xs all-caps b-rad-none btn-success btn-block requestModal" data-type="mergeTransferModal" :class="[{'disabled':!validForSubmit}]">Merge Transfer Orders</button>
                                                </div>
                                            </div>
                                            <modal-component type="mergeTransferModal">
                                                <booking-merge-modal-component :section="section" :booking="booking" :bookingToMerge="bookings" ></booking-merge-modal-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
import { useQueueStore } from '@/stores/queue';
import route from '@/general/functions/router';
import BookingMergeModalComponent from "@/components/bookings/elements/BookingMergeModalComponent.vue";
import { useRequest } from '@/composables/useRequest';

const props = defineProps<{
    marking: number;
}>();

const { proxy } = getCurrentInstance() as any;
const { submit } = useRequest();
const queueStore = useQueueStore();

const section = 'bookingMergeSection';
const booking = ref<any>(null);
const bookings = ref<any[]>([]);
const bearShowing = ref(false);
const isLoading = ref(true);

const minWidth = { minWidth: '100px' };
const minWidth150 = { minWidth: '150px' };

const pendingQueue = computed(() => queueStore.isInCompleteQueue(section));

const totalOrderAmount = computed(() => {
    if (!booking.value) return '0.00';
    let total = booking.value.amount;
    bookings.value.forEach((b) => {
        total += b.amount;
    });
    return (Math.round((total + Number.EPSILON) * 100) / 100).toFixed(2);
});

const validForSubmit = computed(() => bookings.value.length > 0);

const fetchBooking = () => {
    isLoading.value = true;
    submit(route('api.booking.show', props.marking), 'get', section, false, false, undefined, {
        successHandler: (response: any) => {
            booking.value = response.payload.data;
            isLoading.value = false;
        },
        errorHandler: () => {
            isLoading.value = false;
            window.location.href = route('dashboard');
        }
    });
};

const formatAmount = (amount: number) => {
    return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
};

const getAmountClass = () => {
    // Legacy method but not used in template
    return 'text-success';
};

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        fetchBooking();
    }
});

onMounted(() => {
    queueStore.updateListQueue({ 'name': section });

    proxy.emitter.on('selectedBookings', (data: any) => {
        const { target, item } = data;
        if (target.checked) {
            bookings.value.push(item);
        } else {
            const index = bookings.value.findIndex(b => b.id == target.dataset.id);
            if (index > -1) {
                bookings.value.splice(index, 1);
            }
        }
    });

    proxy.emitter.on('setLoading', (loading: boolean) => {
        isLoading.value = loading;
    });
});

onUnmounted(() => {
    proxy.emitter.off('selectedBookings');
    proxy.emitter.off('setLoading');
});
</script>
