<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改活动</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/js/bootstrap/bootstrap.min.css">
    <link rel="stylesheet"
          href="<?php echo base_url(); ?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/css/jquery.timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/js/vendor/select2/select2.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css">
    <script src="<?php echo base_url(); ?>public/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

    <style type="text/css">
        .thumbnail {
            margin: 10px;
        }

        .lang-name {
            margin-left: 42px;
        }

        .upimg {
            cursor: pointer;
        }

    </style>
</head>

<body>
<div class="content_wrapper">
    <div class="container-fluid">
        <aside>
            <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" id="configForm"
                  action="#" style="margin-top: 20px">
                <header><i class="fa fa-fw fa-file"></i>限时卡组主题配置</header>
                <section>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-success" onclick="addOneLineConf()">增加
                                </button>
                                <button type="button" class="btn btn-success" id="goodsSubmitBtn">提交</button>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div id="limitGroupTheme"></div>
                    </div>
                </section>
            </form>
        </aside>
    </div>
</div>
</body>

<script>
    $(function () {
        $('#goodsSubmitBtn').click(function () {
            var data = new FormData(document.getElementById("configForm"));

            $.ajax({
                url: rootPath + 'card/limitGroupThemeUpdate',
                type: 'POST',
                data: data,
                dataType: 'json',
                contentType: false, //必须
                processData: false, //必须
                success: function (data) {
                    alert(data.msg);
                    // confirm(data.msg);
                    window.location.reload();
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
        });

    });

    var cgidList = (<?php echo json_encode($cgidList);?>)
    var cgidOptions = ''
    cgidList.forEach((item, index) => {
        cgidOptions += `<option value="${item['cgid']}"> ${item['cg_name_zh']}(${item['cgid']})</option>`
    })

    var list = (<?php echo json_encode($list);?>)
    var curId = 0
    if (list) {
        list.forEach((item, index) => {
            var html3 = configLineHtml(item);
            $("#limitGroupTheme").append(html3);
            $('#cgidSelect' + item['id']).selectpicker('val', JSON.parse(item['cgids']));
            curId=item['id'];
        });
    }
    console.log(curId)

    //添加bet行
    function addOneLineConf() {
        curId++;
        var data = {"id": curId, "theme_res": '', "cgids": []};
        var html = configLineHtml(data);
        $("#limitGroupTheme").append(html);

        $('#cgidSelect' + data['id']).selectpicker('val', data['cgids']);
    }

    //超级bet配置行html
    function configLineHtml(data) {
        var html = '';
        const id = data["id"];
        html += '<div class="row AllTypeControl" style="border: 1px solid #CCC;margin:10px 5px;padding: 5px 0;"><div class="form-group">';
        html += '<label class="col-sm-1 control-label">ID*: </label><div class="col-sm-1"><input type="text" class="form-control" readonly name="config[' + id + '][id]" value="' + data["id"] + '"></div>';
        html += '<label class="col-sm-1 control-label">主题资源*: </label><div class="col-sm-1"><input type="text" class="form-control" name="config[' + id + '][theme_res]" value="' + data["theme_res"] + '"></div>';
        html += '<label class="col-sm-2 control-label">限时卡组ID集合*: </label>' + createCGIdsSelect(id);

        html += '</div></div>';
        return html;
    }

    function createCGIdsSelect(id) {
        var html = '';

        html += '<div class="col-sm-2"><label class="select-inline">';
        html += '<select id="cgidSelect' + id + '" name="config[' + id + '][cgids][]" class="selectpicker show-tick form-control" multiple data-live-search="false">';
        html += cgidOptions;
        html += '</label></div>';

        return html;
    }

</script>