{% extends '../layout.server.view.html' %} {% block cssFile %}
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

legend {
    font-size: 17px !important;
    margin-bottom: 10px !important;
}

.p-xs {
    padding: 5px !important;
}

.p-l-r-xs {
    padding: 0 5px !important;
}

.p-l-xs {
    padding-left: 5px !important;
}

.m-b-xs {
    margin-bottom: 5px !important;
}

.m-b-xxs {
    margin-bottom: 1px !important;
}

.m-t-xs {
    margin-top: 5px;
}

.m-t-xxs {
    margin-top: 1px;
}

.m-b-none {
    margin-bottom: 0 !important;
}

.limit-info:hover {
    background-color: #ddd !important;
    cursor: pointer;
}

.pos-abt {
    position: absolute !important;
}

.pos-rel {
    position: relative !important;
}

.w-full {
    width: 100% !important;
}

.b-all {
    border: 1px solid #ddd !important;
}

.b-t-none {
    border-top: 0 !important;
}
</style>
{% endblock %} {% block content %}
<div class="main" class="ng-cloak">
    <div class="container" ng-controller="moduleOptionsCtrl" ng-click="selecting=false;">
        <ul class="breadcrumb">
            <li><a href="/">Trang chủ</a></li>
            <li><a href="/bang-gia">Bảng giá</a></li>
            <li class="active">Tuỳ chọn</li>
        </ul>
        <!-- BEGIN CONTENT -->
        <div class="row margin-bottom-40">
            <!-- BEGIN CONTENT -->
            <div class="col-md-12 col-sm-12">
                <h1>Tuỳ chọn gói mô-đun</h1>
                <div class="col-md-9 col-sm-9 col-xs-12 p-l-r-xs">
                    <div class="col-md-6 col-sm-6 p-l-r-xs">
                        <div class="panel panel-default">
                            <div class="panel-heading">Danh sách mô-đun</div>
                            <div class="panel-body">
                                <fieldset ng-show="list.module.core.length>0">
                                    <legend>Nhóm mô-đun Cửa hàng</legend>
                                    <div class="jumbotron" ng-repeat="module in list.module.core" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px; cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <span class="text-primary" style="font-size:17px" ng-bind="module.name"></span>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-xs btn-primary" ng-click="add(module)">Thêm</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.module.product.length>0">
                                    <legend>Nhóm mô-đun Hàng hoá</legend>
                                    <div class="jumbotron" ng-repeat="module in list.module.product" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px; cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <span class="text-primary" style="font-size:17px" ng-bind="module.name"></span>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-xs btn-primary" ng-click="add(module)">Thêm</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.module.sale.length>0">
                                    <legend>Nhóm mô-đun Bán hàng</legend>
                                    <div class="jumbotron" ng-repeat="module in list.module.sale" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px; cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <span class="text-primary" style="font-size:17px" ng-bind="module.name"></span>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-xs btn-primary" ng-click="add(module)">Thêm</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.module.report.length>0">
                                    <legend>Nhóm mô-đun Báo cáo</legend>
                                    <div class="jumbotron" ng-repeat="module in list.module.report" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px; cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <span class="text-primary" style="font-size:17px" ng-bind="module.name"></span>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-xs btn-primary" ng-click="add(module)">Thêm</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.module.webstore.length>0">
                                    <legend>Nhóm mô-đun WebStore</legend>
                                    <div class="jumbotron" ng-repeat="module in list.module.webstore" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px; cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <span class="text-primary" style="font-size:17px" ng-bind="module.name"></span>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button class="btn btn-xs btn-primary" ng-click="add(module)">Thêm</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 p-l-r-xs">
                        <div class="panel panel-default">
                            <div class="panel-heading">Mô-đun đã chọn</div>
                            <div class="panel-body">
                                <fieldset ng-show="list.pick.core.length>0">
                                    <legend>Nhóm mô-đun Cửa hàng</legend>
                                    <div class="jumbotron" ng-repeat="module in list.pick.core" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px;cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <div class="display:inline-block"><span class="text-primary" style="font-size:17px" ng-bind="module.name"></span></div>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button ng-if="!module.required" class="btn btn-xs btn-danger" style="min-width: 45px" ng-click="remove(module)">Bỏ</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.pick.product.length>0">
                                    <legend>Nhóm mô-đun Hàng hoá</legend>
                                    <div class="jumbotron" ng-repeat="module in list.pick.product" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px;cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <div class="display:inline-block"><span class="text-primary" style="font-size:17px" ng-bind="module.name"></span></div>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button ng-if="!module.required" class="btn btn-xs btn-danger" style="min-width: 45px" ng-click="remove(module)">Bỏ</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.pick.sale.length>0">
                                    <legend>Nhóm mô-đun Bán hàng</legend>
                                    <div class="jumbotron" ng-repeat="module in list.pick.sale" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px;cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <div class="display:inline-block"><span class="text-primary" style="font-size:17px" ng-bind="module.name"></span></div>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button ng-if="!module.required" class="btn btn-xs btn-danger" style="min-width: 45px" ng-click="remove(module)">Bỏ</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset ng-show="list.pick.report.length>0">
                                    <legend>Nhóm mô-đun Báo cáo</legend>
                                    <div class="jumbotron" ng-repeat="module in list.pick.report" style="padding:7px !important;margin-bottom:5px !important;position:relative">
                                        <i title="Xem chi tiết" class="fa" ng-class="{'fa-chevron-up':module.expand, 'fa-chevron-down':!module.expand}" style="color:gray;position:absolute;top:7px;right:10px;cursor: pointer" ng-click="module.expand=!module.expand"></i>
                                        <div class="display:inline-block"><span class="text-primary" style="font-size:17px" ng-bind="module.name"></span></div>
                                        <p style="font-size:13px" ng-show="module.expand" ng-bind="module.description"></p>
                                        <div class="clearfix">
                                            <div class="pull-left">
                                                <span style="font-size:15px">
                                        <code ng-if="module.price > 0" ng-bind="module.price | number:0"></code>
                                        <code ng-if="module.price == 0">Miễn phí</code>
                                        </span>
                                            </div>
                                            <div class="pull-right">
                                                <button ng-if="!module.required" class="btn btn-xs btn-danger" style="min-width: 45px" ng-click="remove(module)">Bỏ</button>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 p-xs" style="border: 1px solid #ddd">
                    <div class="text-center">
                        <form action="/dang-ky" method="post">
                            <div class="text-left">
                                <label>Gói giới hạn cửa hàng:</label>
                            </div>
                            <div class="pos-rel w-full m-b-xs">
                                <div class="btn-default btn-block clearfix m-" style="border:1px solid #ddd; cursor: pointer" ng-click="selecting=!selecting;$event.stopPropagation()">
                                    <span class="pull-left" style="margin-left:10px" ng-bind="list.storeLimits[limit.index].name"></span>
                                    <i class="fa fa-caret-down pull-right" style="margin-right:10px;color:black"></i>
                                </div>
                                <div class="jumbotron p-xs m-t-xs m-b-none" ng-if="!selecting">
                                    <div class="clearfix">
                                        <h4 class="pull-left" style="margin-left:5px" ng-bind="list.storeLimits[limit.index].name">
                                        </h4>
                                        <code class="pull-right" ng-bind="list.storeLimits[limit.index].price == 0?'Miễn phí':(list.storeLimits[limit.index].price | number: 0)">
                                        </code>
                                    </div>
                                    <ul class="text-left" style="padding-left:20px">
                                        <li style="word-wrap: break-word" ng-repeat="d in list.storeLimits[limit.index].limits" ng-bind="d"></li>
                                    </ul>
                                </div>
                                <div ng-show="selecting" class="pos-abt w-full b-all b-t-none">
                                    <input type="hidden" ng-value="limit_code" name="limit" />
                                    <div class="jumbotron p-xs m-t-xxs m-b-none limit-info" ng-repeat="l in list.storeLimits" ng-click="selectSl($index)">
                                        <div class="clearfix">
                                            <h4 class="pull-left" style="margin-left:5px" ng-bind="l.name">
                                        </h4>
                                            <code class="pull-right" ng-bind="l.price == 0?'Miễn phí':(l.price | number: 0)">
                                        </code>
                                        </div>
                                        <ul class="text-left" style="padding-left:20px">
                                            <li style="word-wrap: break-word" ng-repeat="d in l.limits" ng-bind="d"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <p style="color: #67ab49; font-size:18px" ng-bind="(totalPrice|number:0) + ' vnđ/tháng'"></p>
                            <input type="hidden" ng-value="pickedString" name="module_options" />
                            <button type="submit" class="btn btn-primary btn-block m-b-xs" style="height:40px">
                                Tiếp theo <i class="m-icon-swapright m-icon-white"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- END CONTENT -->
    </div>
</div>
{% endblock %} {% block jsFile %}
<script type="text/javascript">
window.listModule = JSON.parse('{{listModule|safe}}');
window.storeLimits = JSON.parse('{{storeLimits|safe}}')
</script>
<script type="text/javascript" src="/assets/frontend/pages/scripts/module-options.js"></script>
{% endblock %}
