<fieldset id="payment" class="form-horizontal">
    <legend><?php echo $text_credit_card; ?></legend>

    <!-- 消除浏览器自动补全 -->
    <input name="hide-form-key1" type="text" style="display:none;">
    <input name="hide-form-key2" type="password" style="display:none;">


    <?php foreach($card_types as $card_type){ ?>
    <?php if('VISA' == $card_type){ ?>
    <img src="catalog/view/theme/default/image/useepay/<?php echo $card_type; ?>.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="height: 74px;width: 80px;margin:0px 0px 20px 10px"/>
    <?php }elseif('MasterCard' == $card_type){ ?>
    <img src="catalog/view/theme/default/image/useepay/<?php echo $card_type; ?>.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="height: 69px;width: 100px;margin:0px 0px 20px -10px"/>
    <?php }elseif('JCB' == $card_type){ ?>
    <img src="catalog/view/theme/default/image/useepay/<?php echo $card_type; ?>.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="width: 80px;margin:0px 0px 20px -10px"/>
    <?php }elseif('Discover' == $card_type){ ?>
    <img src="catalog/view/theme/default/image/useepay/Discover1.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="height: 45px;width: 80px;margin:0px 0px 20px 10px"/>
    <img src="catalog/view/theme/default/image/useepay/Discover2.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="height: 42px;width: 80px;margin:0px 0px 20px 10px"/>
    <?php }else{ ?>
    <img src="catalog/view/theme/default/image/useepay/<?php echo $card_type; ?>.png" alt="<?php echo $card_type; ?>"
         title="card type"
         style="width: 80px;margin:0px 0px 20px 10px"/>
    <?php } ?>
    <?php } ?>
    <div id="cardElement"></div>

    <div class="buttons">
        <div class="pull-right">
            <input type="button" value="<?php echo $button_confirm; ?>" id="button-confirm"
                   data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"/>
        </div>
    </div>

    <div class="challengePopup" style="
    display: none;
    z-index: 2147483647;
    position: fixed;
    top:0; right:0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%" >
        <div class="challengePopupContent" style="width:500px; color:white; margin: 300px calc((100% - 500px)/2)">
            <p style="float: left;" class="challengePopupTitle">Issuing Bank Verification</p>
            <iframe style="background-color:white; border:none; margin-top: 16px;" width="100%" height="400px" name="challengeIframe" class="challengeIframe"></iframe>
            <img style="position: absolute; left: calc((100% - 128px)/ 2); top: 500px; right: calc((100% - 128px)/ 2);" class="loading" src="catalog/view/theme/default/image/useepay/loading.gif">
        </div>
    </div>
    <!--</fieldset>-->

</fieldset>

<script type="text/javascript">
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://cashier.useepay.com/jssdk/1.0.5/useepay.min.js';
    document.body.append(s);
    s.onload = s.onreadystatechange = function() {
        window.useepay = window.UseePay({
            env: "<?php echo $env ?>",
            layout: 'multiLine',
            locale: window.navigator.language,
            merchantNo: '<?php echo $merchantNo ?>'
        });
        useepay.mount(document.getElementById('cardElement'));
    };


    $('#button-confirm').bind('click', function () {

        useepay.validate(function (valid, code, message) {
            if (valid) {
                // 信息提交
                $.ajax({
                    url: 'index.php?route=payment/useepay/payment',
                    type: 'post',
                    data: $('#payment :input'),
                    dataType: 'json',
                    beforeSend: function () {
                        $('#button-confirm').button('loading');
                    },
                    success: function (json) {
                        console.log(json);
                        if (json['result'] == 'success') {
                            useepay.confirm(json['token'], function (data) {
                                console.log(data);
                                if (data.success) {
                                    $.ajax({
                                            url: 'index.php?route=payment/useepay/syncResult',
                                            type: 'post',
                                            data: {
                                                'result': data.data
                                            },
                                            dataType: 'json',
                                            success: function (paymentResp) {
                                                console.log(paymentResp);
                                                if (paymentResp['result'] == 'success' || paymentResp['result'] == 'pending') {
                                                    window.location.href = paymentResp.redirectUrl;
                                                    $('#button-confirm').button('reset');
                                                } else {
                                                    alert(paymentResp['message']);
                                                    $('#button-confirm').button('reset');
                                                }
                                            },
                                            error: function (xhr, ajaxOptions, thrownError) {
                                                $('#button-confirm').button('reset');
                                                console.log(xhr.responseText);
                                                if (200 == xhr.status && 4 == xhr.readyState) {
                                                    var resp = xhr.responseText;
                                                    var bs = resp.indexOf('"success":');
                                                    var be = resp.indexOf('"error":');
                                                    var bp = resp.indexOf('"pending":');
                                                    var e = resp.lastIndexOf("}");
                                                    var json;
                                                    if (bs >= 0) {
                                                        json = eval('(' + resp.substring(bs, e + 1) + ')');
                                                        alert(json.success);
                                                        location = json.success;
                                                    } else if (be >= 0) {
                                                        json = eval('(' + resp.substring(be, e + 1) + ')');
                                                        alert(json.error);
                                                        location = 'index.php?route=payment/useepay/failure';
                                                    } else if (bp >= 0) {
                                                        json = eval('(' + resp.substring(bp, e + 1) + ')');
                                                        alert(json.pending);
                                                        location = 'index.php?route=payment/useepay/pending';
                                                    } else {
                                                        alert(ajaxOptions + ":\r\n" + xhr.responseText);
                                                    }
                                                } else {
                                                    alert(ajaxOptions + ":\r\n" + xhr.responseText);
                                                }
                                            }
                                        }
                                    );
                                } else {
                                    alert(data.message);
                                    $('#button-confirm').button('reset');
                                }
                            });
                        } else {
                            alert(json['message']);
                            $('#button-confirm').button('reset');
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $('#button-confirm').button('reset');
                        console.log(xhr.responseText);
                        if (200 == xhr.status && 4 == xhr.readyState) {
                            var resp = xhr.responseText;
                            var bs = resp.indexOf('"success":');
                            var be = resp.indexOf('"error":');
                            var bp = resp.indexOf('"pending":');
                            var e = resp.lastIndexOf("}");
                            var json;
                            if (bs >= 0) {
                                json = eval('(' + resp.substring(bs, e + 1) + ')');
                                alert(json.success);
                                location = json.success;
                            } else if (be >= 0) {
                                json = eval('(' + resp.substring(be, e + 1) + ')');
                                alert(json.error);
                                location = 'index.php?route=payment/useepay/failure';
                            } else if (bp >= 0) {
                                json = eval('(' + resp.substring(bp, e + 1) + ')');
                                alert(json.pending);
                                location = 'index.php?route=payment/useepay/pending';
                            } else {
                                alert(ajaxOptions + ":\r\n" + xhr.responseText);
                            }
                        } else {
                            alert(ajaxOptions + ":\r\n" + xhr.responseText);
                        }
                    }
                });
            } else {
                alert(message);
                $('#button-confirm').button('reset');
            }
        });
    });


</script>