{extend name="Hustbe/common/base" /}
{block name="title"}{:__('虚拟主机销售页面')}{/block}
{block name="banner"}
<!-- 模版特殊处理，其他模版不参考此方法 -->
<div class="container-fluid" id="top-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title">
                    <div class="title-with-icon">
                        <span class="icon"><img src="{$TemplateStatic}/images/server1.svg" alt=""></span><span
                            class="text">{:__('主机续费')}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="main"}
<style>
    .button-group button {
        background: white;
        border: 1px solid red;
        border: 0;
        color: rgb(0, 0, 0);
        margin-bottom: 12px;
        line-height: 30px;
        font-size: 14px;
        width: 32.3%;
        border: 1px solid #d6d6d6;
    }

    .button-group .active {
        background: #00bfde;
        color: white;
    }

    .sub-pricing {
        text-align: left;
        background: #f5f5f6;
    }

    .sub-pricing .panel-body {
        color: #73777a;
    }

    .sub-pricing .panel-heading {
        background-color: white;
    }


    .sub-pricing label {
        color: #73777a;
        font-size: inherit;
    }

    .wareInfo {
        padding: 15px;
    }

    .shoppingInfo ul,
    .wareInfo ul {
        padding: 0px;
    }

    .shoppingInfo li,
    .wareInfo li {
        list-style: none;
    }

    .total-price,
    .new-money {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 24px;
        color: #ff8a00;
        line-height: 1;
        clear: both;
    }

    .new-money {
        font-size: xx-large;
        display: inline-block;
    }

    .total-price span {
        font-size: 12px;
        color: #35b34a;
        /* margin-left: 8px; */
        vertical-align: middle;
    }

    .description {
        font-size: 12px;
        color: #ff8a00;
        margin: 8px 0;
    }

    .description a {
        padding: 0px 6px;
        font-size: 15px;
    }

    .description a:hover {
        color: cadetblue;
    }

    .shoppingInfo {
        color: #999;
    }

    .shoppingInfo button {
        background: #ff8a00;
        font-size: 14px;
        color: #fff;
        padding: 0 30px;
        height: 45px;
        line-height: 40px;
        border-color: transparent;
    }

    .shoppingInfo .disabled {
        background: #c1c1c1;
    }

    .panel {
        border-radius: 0px;
        border: unset;
    }

    .presell_desc {
        color: red;
    }

    .promotion_desc {
        color: #ff8a00;
    }

    @media screen and (min-width:500px) {
        .content {
            /* width: 50%; */
            padding: 0 10%;
        }

        .button-group button {
            width: 120px;
        }
    }
</style>
<div class="sub-pricing container-fluid">
    <div class="ware-content">
        <div class="row content">
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">主机信息</h3>
                    </div>
                    <div class="panel-body">
                        <!-- 当前主机信息 -->
                        <p>
                            <spa>主机名</spa>：{$hostName}
                        </p>
                        <p><span>主机类型</span>：{:__($wareInfo.type)}</p>
                        <!-- 地区 -->
                        <!-- 商品信息 -->
                        <p><span>主机描述</span>：{$wareInfo.describe}</p>
                        <!-- 到期时间 -->
                        <p><span>到期时间</span>：{$endtime|date="Y-m-d H:i",###} <span class="text-warning">
                                [剩余{$syts}天]</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">当前费用</h3>
                    </div>
                    <div class="panel-body">
                        <div class="shoppingInfo">
                            <ul>
                                <li>
                                    <span class="vhost-info-key">主机类型：</span>
                                    <span class="vhost-info-value">{$wareInfo.type}</span>
                                </li>
                                <li>
                                    <span class="number-info-key">时长：</span>
                                    <span class="number-info-value"></span>
                                </li>
                                {notempty name="$wareInfo.presell_desc"}
                                <!-- 预售说明 -->
                                <li>
                                    <span class="presell-info-value">{$wareInfo.presell_desc}</span>
                                </li>
                                {/notempty}
                            </ul>
                            <hr>
                            <!-- 主机其他说明 -->
                            <div class="price-info">
                                <div class="price-title">总续费费用：</div>
                                <!-- 总计费用及优惠价格 -->
                                <div class="total-price">
                                    ￥<b class="new-money">0</b>
                                    <span class="price-save">节省￥<span class="price-money">0</span></span>
                                </div>
                            </div>
                            <!-- 最终商品的信息 -->
                            <form id="orderInfo">
                                <input type="hidden" value="" id="buyTime" name="time">
                                {:token()}
                            </form>

                            <div class="build-button">
                                <button id="buildOrder"> 立即续费 </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">续费时长</h3>
                    </div>
                    <div class="panel-body default-button">
                        <div class="row">
                            <div class="col-xs-2 col-sm-12 col-md-2">
                                <label for="">时长：</label>
                            </div>
                            <div class="col-xs-10 col-sm-12 col-md-10">
                                <!-- 最小、最大可购买份数 -->
                                <div class="button-group" id="numberBtn">
                                    <!-- 如果数量大于13则使用下拉列表呈现，否则使用按钮呈现 -->
                                    {if $wareInfo['max_num']>13}
                                    <select name="numberBtn_select" id="numberBtn_select" class="form-control">
                                        <option value="0">请选择时长</option>
                                        {for start="0" end="$wareInfo['max_num']"}
                                        <option data-val="{$i+1}" data-price="{$wareInfo['price_money']*($i+1)}"
                                            data-money="{$wareInfo['renew_money']*($i+1)}">{$i+1}{$unit}</option>
                                        {/for}
                                    </select>
                                    {else/}
                                    {for start="0" end="$wareInfo['max_num']"}
                                    <button data-val="{$i+1}" data-price="{$wareInfo['price_money']*($i+1)}"
                                        data-money="{$wareInfo['renew_money']*($i+1)}">{$i+1}{$unit}</button>
                                    {/for}
                                    {/if}
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}