<template>
    <div class="row parentContainer">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0 m-b-20" v-if="!data.services.length">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <img :src="asset('images/3568950.png')" class="w-100">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col text-center">
                                    <div class="font-heading fs-11 all-caps text-danger bold">Service Is Currently Unavailable!</div>
                                    <div class="font-heading fs-10 muted">We apologise for any inconvenience. In the mean time feel free to manage your existing transfers as usual, We will be back soon.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row no-margin">
                        <div class="col bg-white p-t-15 p-b-10 p-l-25 p-r-25">
                            <div class="absolute w-100 h-100 bg-white hint-text" style="top: 0; left: 0; z-index: 1;" v-if="!data.services.length"></div>
                            <img :src="asset('images/order_form.png')" class="w-100" v-if="!data.services.length">
                            <div class="row" v-if="data.services.length">
                                <div class="col">
                                    <div class="row p-t-5 p-b-20">
                                        <div class="col">
                                            <div class="row" v-if="data.services.length > 1">
                                                <div class="col">
                                                    <div class="row m-l-0 m-r-0 m-b-5">
                                                        <div class="col-auto p-l-0">
                                                            <div class="row align-items-center justify-content-center">
                                                                <div class="col-auto">
                                                                    <div class="fs-10 all-caps">Service Type</div>
                                                                </div>
                                                                <div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
                                                                    <i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row no-margin h-100" v-if="data.services.length <= 3">
                                                        <div class="col no-padding m-b-10" :class="[{'p-l-5': index !== 0}, {'p-r-5': Number(index)+1 !== data.services.length}]" v-for="(service, index) in data.services" :key="service.id" >
                                                            <div class="btn btn-xs b-rad-none padding-25 btn-block" :class="[{'btn-success': serviceType.id === service.id}, {'bg-master-lighter': serviceType.id !== service.id}]" @click="updateServiceType(service)">
                                                                {{service.name}}
                                                                <span class="absolute" style="right: -10px;top: -15px;width: 30px;" v-if="index !==0">
                                                                    <img :src="asset('images/new-icon.png')" class="w-100">
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row" v-if="data.services.length > 3">
                                                        <div class="col-8">
                                                            <div class="row">
                                                                <div class="col p-r-0">
                                                                    <div class="btn btn-xs btn-success btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="serviceType.status = !serviceType.status">
                                                                        <div class="row">
                                                                            <div class="col p-t-5 p-b-5">
                                                                                {{serviceType.name}}
                                                                            </div>
                                                                            <div class="col-auto bg-success-dark ">
                                                                                <div class="row h-100 align-items-center">
                                                                                    <div class="col">
                                                                                        <i class="fa text-white" :class="[{'fa-angle-down': !serviceType.status}, {'fa-angle-up': serviceType.status}]"></i>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="relative w-100">
                                                                        <div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !serviceType.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" v-for="service in standardServices" :key="service.id">
                                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" @click="updateServiceType(service)">
                                                                                            <div class="row align-items-center justify-content-center">
                                                                                                <div class="col">
                                                                                                    <div class="font-heading fs-10">{{service.name}}</div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="row no-margin" v-if="bankingInvoiceServices.length">
                                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': [14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'text-white': [14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'hover-success': ![14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'pointer': ![14, 15, 16, 17, 18, 19].includes(serviceType.id)}]">
                                                                                            <div class="dropdown w-100" @mouseleave="closeDropdown">
                                                                                                <button
                                                                                                class="font-heading fs-10 w-100"
                                                                                                @click="innerDropdown.main = !innerDropdown.main" style="background: inherit; border: none; text-align: left;"
                                                                                                >
                                                                                                {{ displaySelection }}
                                                                                                <i class="fa" :class="innerDropdown.main ? 'fa-angle-up' : 'fa-angle-down'"></i>
                                                                                                </button>
                                                                                                <div
                                                                                                v-if="innerDropdown.main"
                                                                                                class="dropdown-menu show p-0 border border-success w-100"
                                                                                                style="max-height: 400px; overflow-y: auto;"
                                                                                                >
                                                                                                    <ul class="menu-level w-100">
                                                                                                        <li
                                                                                                        v-for="svc in hardcodeBankingInvoiceServices.services"
                                                                                                        :key="svc.id"
                                                                                                        class="menu-item w-100 p-l-0"
                                                                                                        >
                                                                                                        <div
                                                                                                            class="level-title w-100 font-heading fs-10"
                                                                                                            @click="selectService(svc)"
                                                                                                            :class="{ 'bg-success-light text-white': innerDropdownSelected.service && innerDropdownSelected.service.id === svc.id }"
                                                                                                        >
                                                                                                            {{ svc.name }}
                                                                                                        </div>
                                                                                                            <ul v-if="innerDropdownHovered.service && innerDropdownHovered.service.id === svc.id" class="menu-level submenu w-100">
                                                                                                                <li v-for="sub in svc.subservices" :key="'sub-'+sub.id" class="menu-item w-100">
                                                                                                                <div
                                                                                                                    class="level-title w-100 sub-level font-heading fs-10"
                                                                                                                    @click="selectSubservice(svc, sub)"
                                                                                                                    :class="{ 'bg-success-light text-white': innerDropdownSelected.subservice && innerDropdownSelected.subservice.id === sub.id }"
                                                                                                                >
                                                                                                                    {{ sub.name }}
                                                                                                                </div>
                                                                                                                </li>
                                                                                                            </ul>
                                                                                                        </li>
                                                                                                    </ul>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m-b-20">
                                                <div class="col">
                                                    <p class="no-margin" v-if="serviceType.id === 1">The recipient can expect to receive the transfer within <span class="text-success bold">3-5 working days</span>. Explore our BANK TRANSFER (SAVER) option for a better rate!</p>
                                                    <p class="no-margin" v-if="serviceType.id === 3">Enjoy a <span class="bold text-underline">better rate</span> with this option! The recipient will receive the transfer after <span class="text-success bold">5-7 working days</span>.</p>
                                                    <p class="no-margin" v-if="serviceType.id === 12">You can request Pay-on-Behalf via Alipay for platforms like Taobao, 1688, Pinduoduo, or any Alipay-supported platform. <br><span class="text-danger">Please use Alipay account "2766384544@QQ.com" to apply for Daifu. This account may change, so always confirm the latest Alipay account before placing an order.</span></p>
                                                    <p class="no-margin" v-if="serviceType.id === 14 || serviceType.id === 17 || serviceType.id === 18">The customer may request an <span class="bold">official invoice first</span> for Bank submission (e.g. BA Trade Line). <br> <br>
                                                        The <span class="bold">2% service fee is already included</span> in each product unit price, so it will not appear separately.<br>
                                                        🕓 Transfer will be processed once bank payment is received.<br>
                                                    </p>
                                                    <p class="no-margin" v-if="serviceType.id === 15 || serviceType.id === 16 || serviceType.id === 19">The customer may request an <span class="bold">official invoice first</span> for Bank submission (e.g. BA Trade Line). <br> <br>
                                                        Invoice will show a <span class="bold">2% service fee</span> as a separate item.<br>
                                                        🕓 Transfer will be processed once bank payment is received. <br>
                                                    </p>
                                                    <p class="no-margin text-danger" v-if="[1, 3].includes(serviceType.id) && serviceType.selectedCurrency.id !== 3">Please ensure is a PERSONAL bank account details. Company bank account details only allow to use as E2E service.</p>
                                                    <p class="no-margin text-danger" v-if="serviceType.id === 5">Cancellation of E2E service are strictly NO refund on the 2% transfer fee charge.</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="row m-l-0 m-r-0 m-b-5">
                                                        <div class="col-auto p-l-0">
                                                            <div class="row align-items-center justify-content-center">
                                                                <div class="col-auto">
                                                                    <div class="fs-10 all-caps">Payment Type</div>
                                                                </div>
                                                                <div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
                                                                    <i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row m-b-10">
                                                        <div class="col">
                                                            <div class="btn btn-xs b-rad-none p-l-25 p-r-25 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 1}, {'btn-default': paymentType !== 1}, {'bg-master-lighter': paymentType !== 1}]" @click="paymentType = 1">Full Payment</div>
                                                            <div class="btn btn-xs  b-rad-none p-l-25 p-r-25 m-r-5 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 0}, {'btn-default': paymentType !== 0}, {'bg-master-lighter': paymentType !== 0}]" @click="paymentType = 0">Deposit</div>
                                                        </div>
                                                    </div>
                                                    <div class="row" v-if="paymentType === 0">
                                                        <div class="col">
                                                            <div class="fs-12">** If you like to create <span class="text-danger">a single invoice</span> for your purchase order, please key in the <span class="text-danger">full amount of your purchase order</span> in the form below. You will still be able to make <span class="text-success">partial payment</span> for the transfer request with your deposit amount when making payment.</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row p-t-5">
                                        <div class="col">
                                            <currency-converter-component :companySegment="data.segments" :data="serviceType" :section="section" :id="data.id" @newCalculation="updateCalculation($event)"></currency-converter-component>
                                        </div>
                                    </div>
                                    <div class="row p-b-15" v-if="(summary.calculation.total > 0 && (data.status === 1 || data.status === 2)) || (authStore.isAdmin && summary.calculation.total > 0)">
                                        <div class="col">
                                            <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">Transfer Now</div>
                                        </div>
                                    </div>
                                    <div class="row"  v-if="summary.calculation.total > 0 && data.status === 0">
                                        <div class="col">
                                            <div class="alert alert-warning padding-15" role="alert">
                                                <div class="font-heading fs-12 all-caps bold m-b-15">Create a transfer order</div>
                                                <div class="row m-b-15">
                                                    <div class="col">
                                                        <div class="font-heading fs-10">You are unable to create a new transfer order until you upload your identification document for verification. You can verify your identity by clicking on the button below</div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-xs all-caps b-rad-none btn-warning requestModal" data-type="identificationVerificationModal">Upload identification Document</button>
                                            </div>
                                            <modal-component type="identificationVerificationModal">
                                                <identification-verification-form-component section="customerProfileSection" :data="data"></identification-verification-form-component>
                                            </modal-component>
                                        </div>
                                    </div>
                                    <modal-component id="select-account-modal" v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
                                        <booking-confirmation-component :data="summary" :section="section" @bankSelected="summary.bankAccount = $event"></booking-confirmation-component>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useAuthStore } from '@/stores/auth';

interface Props {
    data: any;
    section: string;
}

interface Service {
    id: number;
    name: string;
    currencies?: any[];
    [key: string]: any;
}

const props = defineProps<Props>();

const authStore = useAuthStore();

const paymentType = ref(1);

const serviceType = reactive({
    status: false,
    name: props.data.services.length ? props.data.services[0].name : '',
    id: props.data.services.length ? props.data.services[0].id : null,
    currencies: props.data.services.length ? props.data.services[0].currencies : [],
    selectedCurrency: props.data.services.length ? props.data.services[0].currencies[0] : {}
});

const summary = reactive({
    calculation: { total: 0 } as any,
    amount: 0,
    type: 0,
    bankAccount: {},
    recipientBanks: props.data.recipient_banks?.accounts || [],
    company: props.data,
    serviceType: null as any
});

const innerDropdown = reactive({ main: false });
const innerDropdownHovered = reactive({
    service: null as any,
    subservice: null as any
});

const innerDropdownSelected = reactive({
    service: null as any,
    subservice: null as any,
    option: null as any
});

const hardcodeBankingInvoiceServices = reactive({
    services: [
        {
            id: 1,
            name: "BANK TRANSFER",
            subservices: [
                { id: 14, name: "(IN) BANK TRANSFER (CNY/USD) - BA" },
                { id: 15, name: "(EX) BANK TRANSFER (CNY/USD) - BA" },
            ]
        },
        {
            id: 2,
            name: "ALIPAY TRANSFER",
            subservices: [
                { id: 17, name: "(IN) ALIPAY - BA" },
                { id: 16, name: "(EX) ALIPAY - BA" },
            ]
        },
        {
            id: 3,
            name: "ENTERPRISE TO ENTERPRISE 公打公",
            subservices: [
                { id: 18, name: "(IN) ENTERPRISE TO ENTERPRISE - BA" },
                { id: 19, name: "(EX) ENTERPRISE TO ENTERPRISE - BA" },
            ]
        },
    ]
});

const bankingInvoiceServiceIds = [14, 15, 16, 17, 18, 19];
const standardServices = computed(() => props.data.services.filter((service: Service) => !bankingInvoiceServiceIds.includes(service.id)));
const bankingInvoiceServices = computed(() => props.data.services.filter((service: Service) => bankingInvoiceServiceIds.includes(service.id)));

const displaySelection = computed(() => {
    const defaultName = "BANKING INVOICE";
    const service = innerDropdownSelected.service;
    const sub = innerDropdownSelected.subservice;
    const opt = innerDropdownSelected.option;
    if (service && sub && opt) return `${defaultName} → ${service.name} → ${sub.name} → ${opt.name}`;
    if (service && sub) return `${defaultName} → ${service.name} → ${sub.name}`;
    if (service) return `${defaultName} → ${service.name}`;
    return defaultName;
});

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

const updateServiceType = (service: any) => {
    serviceType.id = service.id;
    serviceType.name = service.name;
    serviceType.currencies = service.currencies;
    serviceType.selectedCurrency = service.currencies[0];
    serviceType.status = false;
};

const updateCalculation = (conversion: any) => {
    summary.calculation = conversion.calculation;
    summary.amount = conversion.amount;
    summary.serviceType = conversion.serviceType;
    summary.type = conversion.type;
    summary.bankAccount = summary.bankAccount;
    summary.recipientBanks = props.data.recipient_banks?.accounts || [];
    summary.company = props.data;

    innerDropdownSelected.service = null;
    innerDropdownSelected.subservice = null;
};

const selectService = (service: any) => {
    innerDropdownSelected.service = service;
    innerDropdownSelected.subservice = null;
    innerDropdownSelected.option = null;
    innerDropdownHovered.service = service;
    innerDropdownHovered.subservice = null;
};

const selectSubservice = (svc: any, sub: any) => {
    updateServiceType(sub);
    innerDropdownSelected.service = svc;
    innerDropdownSelected.subservice = sub;
    innerDropdownSelected.option = null;
    innerDropdownHovered.subservice = sub;
    innerDropdown.main = false;
    innerDropdownHovered.service = null;
};

const closeDropdown = () => {
    innerDropdownHovered.service = null;
    innerDropdownHovered.subservice = null;
    innerDropdown.main = false;
};

onMounted(() => {
    hardcodeBankingInvoiceServices.services.forEach(service => {
        service.subservices = service.subservices.map(sub => {
            const match = props.data.services.find((s: any) => s.id === sub.id);
            return match
                ? { ...sub, name: match.name, currencies: match.currencies }
                : sub;
        });
    });
});
</script>

<style scoped>
    .menu-level {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .menu-item {
        width: 100%;
    }

    .level-title {
        padding: 4px 8px;
        width: 100%;
        cursor: pointer;
    }

    .level-title.sub-level {
        padding-left: 20px;
    }

    .level-title.option-level {
        padding-left: 35px;
    }

    .menu-item:hover > .level-title {
        background-color: #8fd19e;
        color: white;
    }

    .bg-success-light {
        background-color: #8fd19e !important;
    }
</style>

<style scoped>
    .menu-level {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .menu-item {
        width: 100%;
    }

    .level-title {
        padding: 4px 8px;
        width: 100%;
        cursor: pointer;
    }

    .level-title.sub-level {
        padding-left: 20px;
    }

    .level-title.option-level {
        padding-left: 35px;
    }

    .menu-item:hover > .level-title {
        background-color: #8fd19e;
        color: white;
    }

    .bg-success-light {
        background-color: #8fd19e !important;
    }
</style>
