<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="/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="/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': index+1 !== data.services.length}]" v-for="(service, index) in data.services" v-bind: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="/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 data.services" v-bind: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>
                                                                            </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">Recipient will receive the transfer on the <span class="text-success bold">next working day</span>. Check out our three-day transfer option to get 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">three working days</span>.</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 :data="serviceType" :section="section" :id="data.id" v-on: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)) || ($store.getters.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"></booking-confirmation-component>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import formHandler from "../../../general/mixins/formHandler";
    export default {
        data(){
            return {
                paymentType: 1,
                serviceType: {
                    status: false,
                    name: '',
                    id: '',
                    currencies: [],
                    selectedCurrency: {}
                },
                summary: {
                    calculation: {},
                    amount: 0,
                    type: 0,
                    bankAccount: {},
                    recipientBanks: [],
                    company: {}
                },
                parameters: {}
            }
        },
        created(){
            this.serviceType = {
                id: this.data.services[0].id,
                name: this.data.services[0].name,
                currencies: this.data.services[0].currencies,
                selectedCurrency: this.data.services[0].currencies[0],
                status: false
            };

            this.summary.bankAccount = {};
            this.summary.recipientBanks = this.data.recipient_banks.accounts;

        },
        methods: {
            updateServiceType(service){
                this.serviceType.id = service.id;
                this.serviceType.name = service.name;
                this.serviceType.currencies = service.currencies;
                this.serviceType.selectedCurrency = service.currencies[0];
                this.serviceType.status = false;
            },
            updateCalculation(conversion){
                this.summary = {
                    calculation: conversion.calculation,
                    amount: conversion.amount,
                    serviceType: conversion.serviceType,
                    type: conversion.type,
                    bankAccount: this.summary.bankAccount,
                    recipientBanks: this.data.recipient_banks.accounts,
                    company: this.data,
                }

            }
        },
        mixins: [formHandler]
    }
</script>
