{% load i18n %}


<script type="text/javascript">
    $(document).ready(function () {

    });
    function productChoose(e,id,name){
        if(e.checked){
            $("#ac").append(createCheckBoxHtml(id,name));
        }
        else{
            $("#ac-"+id).remove();
        }
        $("#btn_save").show();
    }
    function productHadChoose(e,id){
        if(e.checked){

        }
        else{

        }
        $("#btn_save").show();
    }
    function createCheckBoxHtml(id,name){
        return '<label class="checkbox-inline" id="ac-'+id+'">' +
            '<input type="checkbox" value="'+id+'" name="product" onchange="productHadChoose(this,\''+id+'\');" checked="checked">'+name+'</label>';
    }
    $("#btn_save").click(function (){
        var checkID = [];//定义一个空数组
        $("#ac input[name='product']:checked").each(function(i){//把所有被选中的复选框的值存入数组
            checkID[i] =$(this).val();
        });
        $("#h_pc").val(JSON.stringify(checkID));


        $.SubmitForm('#form_product', '{{request.path}}',function (){

        });
    })
</script>


<ol class="breadcrumb">
    <li>{{subtt.0}}</li>
    <li>{{subtt.1}}</li>
</ol>


{% if perms.company.sys_admin %}

<div>
    <div class="panel panel-default">
        <div class="panel-body">
            <p>要绑定的品牌名称：{{brand_name}}</p>
            <p>已绑定的产品：</p>
            <div id="ac">
                {% for p in products_bind %}
                <label class="checkbox-inline" id="ac-{{p.pk}}">
                    <input type="checkbox" value="{{p.pk}}" name="product" onchange="productHadChoose(this,'{{p.pk}}','{{p.fields.name}}');" checked="checked"> {{p.fields.name}}
                </label>
                {% endfor %}
            </div>
            <div>
                <form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_product">
                    {% csrf_token %}
                    <input type="hidden" id="h_pc" name="productChooses">
                    <a class="btn btn-default btn-sm" id="btn_save" style="display: none;margin-top: 20px;">保存</a>
                </form>
            </div>
        </div>
    </div>

    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">产品选择</h3>
        </div>
        <div class="panel-body">

            {% for p in products %}
            <label class="checkbox-inline" id="pc-{{p.pk}}">
                <input type="checkbox" value="{{p.pk}}" onchange="productChoose(this,'{{p.pk}}','{{p.fields.name}}');"> {{p.fields.name}}
            </label>
            {% endfor %}
            {% if not products %}
                无
            {% endif %}
        </div>
    </div>
<!--    <div class="alert alert-warning">同个产品只能绑定一个品牌</div>-->
</div>

{% endif%}

