<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                <div class="col">
                    <small class="bold fs-10 text-danger">{{error}}</small>
                </div>
            </div>
            <div class="row m-b-15" v-show="calculation.date && !error">
                <div class="col padding-15 bg-master-lightest text-center m-l-15 m-r-15">
                    <div class="fs-14 muted" >The recipient will receive the transfer amount by <br><span class="bold text-success">{{ this.calculation.receive_date }}</span></div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0">
                        <div class="col no-padding">
                            <div class="form-group form-group-default m-b-0">
                                <label>Recipient Gets</label>
                                <input id="cc_get" name="cc_get" type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
                            </div>
                        </div>
                        <div class="col-auto bg-primary text-white">
                            <div class="row h-100 align-items-center">
                                <div class="col-auto p-r-0">
                                    <span class="flag-icon fs-14" :class="'flag-icon-'+serviceType.selectedCurrency.country.short_code.toLowerCase()"></span>
                                </div>
                                <div class="col p-l-5 p-r-20">
                                    {{serviceType.selectedCurrency.short_code}}
                                </div>
                                <div class="col-auto h-100 pointer"  @click="recipientMenu = !recipientMenu">
                                    <div class="row align-items-center bg-primary-light h-100">
                                        <div class="col ">
                                            <i class="fa fa-angle-down fs-14 m-t-5" :class="[{'fa-angle-down': !recipientMenu}, {'fa-angle-up': recipientMenu}]"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative w-100 text-master">
                                    <div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !recipientMenu}]" 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="currency in serviceType.currencies" v-bind:key="currency.id" >
                                                    <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 " :class="[{'bg-primary-light': serviceType.selectedCurrency.id === currency.id}, {'text-white': serviceType.selectedCurrency.id === currency.id}, {'hover-primary': serviceType.selectedCurrency.id !== currency.id}, {'pointer': serviceType.selectedCurrency.id !== currency.id}]" @click="UpdateCurrency(currency)">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col">
                                                                <div class="row align-items-center justify-content-center">
                                                                    <div class="col-auto p-r-5 p-l-0">
                                                                        <span class="flag-icon fs-14" :class="'flag-icon-'+currency.country.short_code.toLowerCase()"></span>
                                                                    </div>
                                                                    <div class="col-auto p-l-5">
                                                                        <div class="font-heading fs-12">
                                                                            {{currency.short_code}}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0 relative p-b-15 p-t-15">
                        <div class="absolute bullet-connector hint-text"></div>
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-1 p-r-25">
                                    <div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
                                </div>
                                <div class="col-4 p-l-0 fs-12 bold lh-20 hide">MYR {{(Math.round((this.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                                <div class="col-auto all-caps fs-10 hide">Transfer Fee</div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-l-0 m-r-0 relative p-b-15">
                        <div class="absolute bullet-connector hint-text"></div>
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-1 p-r-25">
                                    <div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
                                </div>
                                <div class="col-4 p-l-0 fs-12 bold lh-20 hide">MYR {{(Math.round((this.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                                <div class="col-auto all-caps fs-10 hide">Payable Amount</div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-l-0 m-r-0 relative p-b-15" v-if="calculation.rate > 0">
                        <div class="absolute bullet-connector hint-text"></div>
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-1 p-r-25" >
                                    <i class="fa fa-exchange bg-white text-complete fs-16 p-t-5 p-b-5" style="margin-left: -4px;"></i>
                                </div>
                                <div class="col p-l-0 fs-14 bold lh-20 text-complete">1 MYR = {{(Math.round((this.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}} RMB</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-b-10 ">
                <div class="col">
                    <div class="row m-l-0 m-r-0">
                        <div class="col no-padding">
                            <div class="form-group form-group-default m-b-0">
                                <label>You'r Sending</label>
                                <input id="cc_sending" name="cc_sending" type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control"  @keyup="updateAmount($event, 0)"  v-money="money">
                            </div>
                        </div>
                        <div class="col-auto bg-primary text-white">
                            <div class="row h-100 align-items-center">
                                <div class="col-auto p-r-0">
                                    <span class="flag-icon fs-14 flag-icon-my"></span>
                                </div>
                                <div class="col p-l-5 p-r-20">
                                    MYR
                                </div>
                                <div class="col-auto h-100 pointer"  @click="senderMenu = !senderMenu">
                                    <div class="row align-items-center bg-primary-light h-100">
                                        <div class="col ">
                                            <i class="fa fa-angle-down fs-14 m-t-5" :class="[{'fa-angle-down': !senderMenu}, {'fa-angle-up': senderMenu}]"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative w-100 text-master">
                                    <div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !senderMenu}]" 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" >
                                                    <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 bg-primary-light text-white" @click="senderMenu = !senderMenu">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col">
                                                                <div class="row align-items-center justify-content-center">
                                                                    <div class="col-auto p-r-5 p-l-0">
                                                                        <span class="flag-icon fs-14 flag-icon-my"></span>
                                                                    </div>
                                                                    <div class="col-auto p-l-5">
                                                                        <div class="font-heading fs-12">
                                                                            MYR
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="calculation.date">
                <div class="col text-right">
                    <div class="fs-9">These are the rates as of {{calculation.date}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { debounce } from 'vue-debounce'
    import formHandler from "../../../general/mixins/formHandler";
    export default {
        props: {
            data: {
                required: true,
                type: Object
            },
            id: {
                required: true,
                type: Number
            }
        },
        data(){
            return {
                recipientMenu: false,
                senderMenu: false,
                senderInput: 0,
                recipientInput: 0,
                serviceType: {},
                calculation: {
                    rate: 0,
                    conversion_amount: 0,
                    date: '',
                    service_charge: 0,
                    sub_total: 0,
                    tax: 0,
                    tax_total: 0,
                    total: 0
                },
                parameters: {
                    type: 1,
                    amount: '',
                    service_id: '',
                    currency_id: '',
                }
            }
        },
        created(){
            this.serviceType = this.data;
        },
        watch: {
            data: {
                handler: function (val) {
                    this.serviceType = this.data;
                    if(val.id !== this.parameters.service_id) {
                        this.parameters.service_id = this.data.id;
                        this.parameters.currency_id = this.data.selectedCurrency.id;
                        this.submitForm();
                    }
                },
                deep: true
            }

        },
        methods: {
            UpdateCurrency(currency){
                this.serviceType.selectedCurrency = currency;
                this.recipientMenu = false;
                this.parameters.currency_id = currency.id;
                this.submitForm();
            },
            updateAmount(event, type){
                if(event.target !== null){
                    if(parseFloat(event.target.value) > 0 && event.target.value !== this.parameters.amount){

                        this.parameters = {
                            type: type,
                            amount: event.target.value,
                            service_id: this.serviceType.id,
                            currency_id: this.serviceType.selectedCurrency.id,
                        };

                        this.fetchCalculations(event.target.value, type)

                        this.calculation = {
                            rate: 0,
                            conversion_amount: 0,
                            date: '',
                            service_charge: 0,
                            sub_total: 0,
                            tax: 0,
                            tax_total: 0,
                            total: 0
                        };
                    }
                }
            },
            fetchCalculations: debounce(function() {
                this.submitForm();
            }, 700),
            submitForm(){
                if(parseFloat(this.parameters.amount) > 0){
                    this.submit(route('api.company.currency.convert', this.id), 'post', 'bookingFormSection', false, false);
                }

            },
            successHandler(response){
                this.$emit('newCalculation', {
                    calculation: response.payload.data,
                    amount: this.parameters.amount,
                    serviceType: this.serviceType,
                    type: this.parameters.type,
                });
                this.error = '';
                this.calculation = response.payload.data;
                (this.parameters.type === 1) ? this.senderInput = (Math.round((this.calculation.conversion_amount + Number.EPSILON) * 100) / 100).toFixed(2): this.recipientInput = (Math.round((this.calculation.conversion_amount + Number.EPSILON) * 100) / 100).toFixed(2)
                this.isloading = false;
            },
            errorHandler(error){
                this.$emit('newCalculation', {
                    calculation: -1
                });
                this.error = error.message;
                this.loading = false;
            }
        },
        mixins: [formHandler]
    }
</script>
