{extend name='user/layout_sidebar'/}

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

{block name='content'}
    <div class="wntheme-cont-right">
        <div class="wntheme-rb-head wntheme-hidden-xs clearfix">
            <h2 class="wntheme-rb-title">{:lang('upgrade_member_group')}</h2>
        </div>
        <div class="wntheme-cont-list">
            <div class="wntheme-list-wrap">
                <p><span>{:lang('current_member_group')}</span>{if condition="$obj.group_id lt 3"}{$user.group.group_name}{else}<i class="wn-iconfont wntheme-icon-zuanshi"></i> {$obj.group.group_name}{/if}</p>
                <p><span>{:lang('remaining_points')}</span>{$obj.user_points}</p>
                <p><span>{:lang('membership_duration')}</span>{if condition="$obj.group_id lt 3"}{:lang('permanent')}{else}{$obj.user_end_time|mac_day}{/if}</p>
                <p class="wntheme-text-muted tip">{:lang('click_to_purchase')}</p>
            </div>
            <div class="row">
                <ul class="wntheme-upgrade-list clearfix">
                    {volist name="group_list" id="vo"}
                        {if condition="$vo.group_id gt 2 && $vo.group_status eq 1"}
                            <li class="wntheme-col-xs-6 wntheme-col-md-3">
                                <a class="grade day" data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_day}" data-long="day">
                                    {:lang('day_package')}-{$vo.group_name}<span>{$vo.group_points_day} {:lang('points')}</span>
                                </a>
                            </li>
                            <li class="wntheme-col-xs-6 wntheme-col-md-3">
                                <a class="grade week" data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_week}" data-long="week">
                                    {:lang('week_package')}-{$vo.group_name}<span>{$vo.group_points_week} {:lang('points')}</span>
                                </a>
                            </li>
                            <li class="wntheme-col-xs-6 wntheme-col-md-3">
                                <a class="grade month" data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_month}" data-long="month">
                                    {:lang('month_package')}-{$vo.group_name}<span>{$vo.group_points_month} {:lang('points')}</span>
                                </a>
                            </li>
                            <li class="wntheme-col-xs-6 wntheme-col-md-3">
                                <a class="grade year" data-id="{$vo.group_id}" data-name="{$vo.group_name}" data-points="{$vo.group_points_year}" data-long="year">
                                    {:lang('year_package')}-{$vo.group_name}<span>{$vo.group_points_year} {:lang('points')}</span>
                                </a>
                            </li>
                        {/if}
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
{/block}

{block name='footer_scripts'}
    <script>
        $('.grade').click(function () {
            var that = $(this);
            var group_id = that.attr('data-id');
            var group_name = that.attr('data-name');
            var long = that.attr('data-long');
            var points = that.attr('data-points');

            if (confirm("{:lang('confirm_upgrade')}【" + group_name + "】{:lang('require_points')}【" + points + "】{:lang('points')}")) {
                $.ajax({
                    url: "{:url('user/upgrade')}",
                    type: "post",
                    dataType: "json",
                    data: {group_id: group_id, long: long},
                    beforeSend: function () {
                        $("#btn_submit").css("background", "#fd6a6a").val("{:lang('loading')}");
                    },
                    success: function (r) {
                        alert(r.msg);
                        if (r.code == 1) {
                            location.reload();
                        }else{
                            location.href = "{:url('user/buy')}";
                        }
                    },
                    complete: function () {
                        $("#btn_submit").css("background", "#fa4646").val("{:lang('submit')}");
                    }
                });
            }
        });
    </script>
{/block}