{extend name='user/layout_sidebar'/}

{block name='page_title'}{:lang('recharge_center')}{/block}

{block name='content'}
    <div class="wntheme-cont-right wntheme-tabs-item">
        <div class="wntheme-rb-head wntheme-hidden-xs clearfix">
            <h2 class="wntheme-rb-title">{:lang('recharge_center')}</h2>
        </div>
        <div class="wntheme-rb-head wntheme-head-page clearfix">
            <div class="wntheme-rb-title wntheme-site-tabs wntheme-site-tits wntheme-text-site wntheme-tabs">
                <a class="wntheme-tabs-btn active" href="javascript:void(0)">{:lang('online_recharge')}</a>
                <a class="wntheme-tabs-btn" href="javascript:void(0)">{:lang('recharge_card')}</a>
            </div>
        </div>
        <div class="wntheme-cont-list wntheme-tabs-box" style="display:block">
            <div class="wntheme-list-wrap">
                <form id="fm2" name="fm" method="post" action="">
                    <p><span>{:lang('remaining_points')}</span>{$obj.user_points}</p>
                    <p><span>{:lang('recharge_amount')}</span><input type="text" name="price" value="{$config.min}"></p>
                    <p class="wntheme-text-muted tip">{:lang('tip_min_recharge_amount')}{$config.min}{:lang('yuan')}{:lang('exchange')}{$config.scale}{:lang('points')}</p>
                    <input type="button" id="btn_submit_pay" class="wntheme-btn-submit wntheme-bg-wntheme" value="{:lang('confirm')}">
                </form>
            </div>
        </div>
        <div class="wntheme-cont-list wntheme-tabs-box" style="display:none">
            <div class="wntheme-list-wrap">
                <form id="fm2" name="fm" method="post" action="">
                    <p><span>{:lang('recharge_card_number')}</span><input type="text" name="card_no" value="" placeholder="{:lang('enter_recharge_card_number')}" class="wntheme-input-w3">
                        {if condition="$GLOBALS['config']['pay']['card']['url'] neq ''"}
                        <a class="wntheme-text-wntheme" target="_blank" href="{$GLOBALS['config']['pay']['card']['url']}">{:lang('buy_card_secret')}</a>
                        {/if}
                    </p>
                    <p><span>{:lang('recharge_password')}</span><input type="text" name="card_pwd" value="" placeholder="{:lang('enter_recharge_card_password')}"></p>
                    <p class="wntheme-text-muted tip">{:lang('tip_buy_card')}</p>
                    <input type="button" id="btn_submit_card" class="wntheme-btn-submit wntheme-bg-wntheme" value="{:lang('confirm')}">
                </form>
            </div>
        </div>
    </div>
{/block}

{block name='footer_scripts'}
    <script>
        $(".go-back").click(function () {
            var ref = document.referrer;
            location.href = ref;
        });
        $('#btn_submit_pay').click(function () {
            var that = $(this);
            var price = $("input[name='price']").val();
            if (Number(price) < 1) {
                return;
            }
            if (confirm("{:lang('confirm_online_recharge')}")) {
                $.ajax({
                    url: "{:url('user/buy')}",
                    type: "post",
                    dataType: "json",
                    data: {price: price, flag: 'pay'},
                    beforeSend: function () {
                        $("#btn_submit_pay").css("background", "#fd6a6a").val("{:lang('loading')}");
                    },
                    success: function (r) {
                        if (r.code == 1) {
                            location.href = "{:url('user/pay')}?order_code=" + r.data.order_code;
                        }
                        else {
                            alert(r.msg);
                            location.reload();
                        }
                    },
                    complete: function () {
                        $("#btn_submit_pay").css("background", "#fa4646").val("{:lang('submit')}");
                    }
                });
            }
        });

        $('#btn_submit_card').click(function () {
            var that = $(this);
            var no = $('input[name="card_no"]').val();
            var pwd = $('input[name="card_pwd"]').val();
            if (no == '' || pwd == '') {
                alert("{:lang('enter_card_number_and_password')}");
                return;
            }
            if (confirm("{:lang('confirm_card_recharge')}")) {
                $.ajax({
                    url: "{:url('user/buy')}",
                    type: "post",
                    dataType: "json",
                    data: {card_no: no, card_pwd: pwd, flag: 'card'},
                    beforeSend: function () {
                        $("#btn_submit_card").css("background", "#fd6a6a").val("{:lang('loading')}");
                    },
                    success: function (r) {
                        alert(r.msg);
                    },
                    complete: function () {
                        $("#btn_submit_card").css("background", "#fa4646").val("{:lang('submit')}");
                    }
                });
            }
        });

        $('.wntheme-site-tabs').each(function () {
            var $tabContainer = $(this);
    
            $tabContainer.find('.wntheme-tabs-btn').click(function () {
                
                $tabContainer.find('.wntheme-tabs-btn').removeClass('active');
    
                $(this).addClass('active');

                var $contentContainer = $tabContainer.closest('.wntheme-cont-right');
                $contentContainer.find('.wntheme-cont-list').hide();
                
                var index = $tabContainer.find('.wntheme-tabs-btn').index(this);
                $contentContainer.find('.wntheme-cont-list').eq(index).show();
            });
        });
    </script>
{/block}