<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="credit-recharge"> <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link back">
                            <i class="icon icon-back"></i>
                        </a>
                    </div>
                    <div class="title sliding">{{@global.LANGUAGE.MENU_MSG01}}</div>
                    <div class="right">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->
                    </div>

                </div>
            </div>

            <!-- Scrollable page content-->
            <div class="page-content">

                <div class="block-title text-color-darkgray">{{@global.LANGUAGE.CREDIT_RECHARGE_MSG00}}</div>
                <div class="block">
                    <p>{{@global.LANGUAGE.PROMPT_MSG007}}</p>
                </div>

                {{#Cards}}
                <div class="card card-recharge-credit elevation-6 elevation-hover-9 elevation-transition">
                    <div class="card-content card-content-padding {{BgColor}} text-color-white text-align-center">
                        <p class="margin-bottom-8">{{Amount}}</p>
                        <div class="card-content-divider"></div>
                        <p class="size-16 margin-top-8">{{Price}}</p>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <a href="{{Link}}" target="_blank" class="col button button-fill color-green external elevation-2">{{@global.LANGUAGE.COM_MSG15}}</a>
                        </div>
                    </div>
                </div>
                {{/Cards}}

            </div>
        </div>
</template>


<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {};

            var userInfo = self.$app.methods.getFromStorage('userInfo');
            var MinorToken = userInfo.MinorToken;
            var CountryCode = userInfo.UserInfo.CountryCode;


            if (app.data.CustomerType == 2 || app.data.CustomerType == 6) {
                let buttons = {
                    button100: 'CZ3NVD89LSBBW',
                    button500: 'EKWPMLLMKUTV8',
                    button1000: '9R2RY5C5GDFY8',
                    currency: 'USD'
                };
                switch (CountryCode){
                    case 'AUS':
                        buttons.button100 = 'MAA5PL592FVTY';
                        buttons.button500 = 'U6NVCJVTPUTV2';
                        buttons.button1000 = 'HCVHBFK7R5PN4';
                        buttons.currency = 'AUD';
                        break;
                }
                ret.Cards = [
                    {
                        BgColor: 'bg-color-darkgray',
                        Amount: '100 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'10.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button100+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                    {
                        BgColor: 'bg-color-green',
                        Amount: '500 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'45.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button500+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                    {
                        BgColor: 'bg-color-red',
                        Amount: '1000 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'80.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button1000+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                ];
            }else{
                let buttons = {
                    button10: 'XTKUPGEYWZ3T4',
                    button50: 'KWC3YWFGZTW28',
                    button100: 'QTULPNEWWN6CN',
                    currency: 'USD'
                };

                ret.Cards = [
                    {
                        BgColor: 'bg-color-darkgray',
                        Amount: '10 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'3.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button10+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                    {
                        BgColor: 'bg-color-green',
                        Amount: '50 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'10.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button50+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                    {
                        BgColor: 'bg-color-red',
                        Amount: '100 ' + LANGUAGE.COM_MSG03,
                        Price: '$ '+'18.00 ' + buttons.currency,
                        Link: 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id='+buttons.button100+'&on0=KEY&os0='+MinorToken+'&on1=dn&os1='+self.$root.AppDetails.code+'&on2=other&os2='+self.$root.AppDetails.name+'',
                    },
                ];
            }


            return ret;
        },
        methods: {
            questionModal: function(){
                var self = this;

                var dialog = app.dialog.create({
                       title: '<div class="custom-modal-logo-wrapper"><img class="custom-modal-logo" src="'+ self.$app.data.AppDetails.logoModal +'" alt=""/></div>',
                        text: '<div class="custom-modal-text">'+ LANGUAGE.PROMPT_MSG030 +'</div>',
                     buttons: [
                                {
                                    text: LANGUAGE.COM_MSG13,
                                    onClick: function() {
                                        self.$app.methods.checkBalance(true);
                                    }
                                },
                                {
                                    text: LANGUAGE.COM_MSG14,
                                    onClick: function() {
                                    }
                                },
                            ]
                });
                dialog.open();

            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;

                var buttons = page.$el.find('.card-footer a');

                $$(buttons).on('click', function(){
                    setTimeout(self.questionModal, 3000);
                });
            },
        }
    };
</script>