{layout name="layout" /}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-option" data-toggle="tooltip" title="保存" class="btn btn-primary"><i
                        class="fa fa-save"></i></button>
                <a href="{:url('option/lists')}" data-toggle="tooltip" title="返回" class="btn btn-default"><i
                        class="fa fa-reply"></i></a></div>
            <h1>属性编辑</h1>
        </div>
    </div>
    <div class="container-fluid">
<!--        {% if error_warning %}
        <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        {% endif %}-->
        <div class="panel panel-default">
            <div class="panel-body">
                <form action="{:url('option/add')}" method="post" enctype="multipart/form-data" id="form-option"
                      class="form-horizontal">
                    <input type="hidden" name="option_id" value="{$data.option_id ?? ''}">
                    <fieldset>
                        <div class="form-group required">
                            <label class="col-sm-2 control-label">属性名</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input type="text" name="name"
                                           value="{$data['name'] ?? ''}"  class="form-control" />
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="input-sort-order">排序</label>
                            <div class="col-sm-10">
                                <input type="text" name="sort_order" value="{$data['sort_order'] ?? ''}"
                                       placeholder="排序" id="input-sort-order" class="form-control" />
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>属性值</legend>
                        <table id="option-value" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <td class="text-left required">名称</td>
                                <td class="text-center">图片</td>
                                <td class="text-right">排序</td>
                                <td></td>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="$optionsValues"}
                            {foreach $optionsValues as $option_value_row =>  $vo}
                            
                            <tr id="option-value-row{$option_value_row}">
                                <td class="text-center"><input type="hidden"
                                                               name="option_value[{$option_value_row}][option_value_id]"
                                                               value="{$vo.option_value_id}" />
                                    <div class="input-group">
                                        <input type="text"
                                               name="option_value[{$option_value_row}][option_value_description][name]"
                                               value="{$vo.name}"
                                               class="form-control" />
                                    </div>
                                </td>
                                <td class="text-left"><a href="" id="thumb-image{$option_value_row}"
                                                         data-toggle="image" class="img-thumbnail"><img
                                        src="/image/{$vo.image}" alt="" title="" width="100"
                                        data-placeholder="/image/no-image.png"
                                /></a>
                                    <input type="hidden" name="option_value[{$option_value_row}][image]"
                                           value="{$vo.image}" id="input-image{$option_value_row}" /></td>
                                <td class="text-right">
                                    <input type="text"
                                                              name="option_value[{$option_value_row}][sort_order]"
                                                              value="{$vo.sort_order}" class="form-control" /></td>
                                <td class="text-right">
                                    <button type="button"
                                            onclick="$('#option-value-row{$option_value_row}').remove();"
                                            data-toggle="tooltip" title="删除" class="btn btn-danger">
                                        <i class="fa fa-minus-circle"></i></button>
                                </td>
                            </tr>
                            {/foreach}
                            {/notempty}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="3"></td>
                                <td class="text-right"><button type="button" onclick="addOptionValue();"
                                                               data-toggle="tooltip" title="添加属性"
                                                               class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                            </tr>
                            </tfoot>
                        </table>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript"><!--
    $('select[name=\'type\']').on('change', function() {
        if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox' || this.value == 'image') {
            $('#option-value').parent().show();
        } else {
            $('#option-value').parent().hide();
        }
    });

    $('select[name=\'type\']').trigger('change');

    var option_value_row = {$option_value_row ?? 0} + 1;

    function addOptionValue() {
        html  = '<tr id="option-value-row' + option_value_row + '">';
        html += '  <td class="text-left"><input type="hidden" name="option_value[' + option_value_row + '][option_value_id]" value="" />';
        html += '    <div class="input-group">';
        html += '      <input type="text" name="option_value[' + option_value_row + '][option_value_description][name]" value="" placeholder="" class="form-control" />';
        html += '    </div>';
        html += '  </td>';
        html += '  <td class="text-center"><a href="" id="thumb-image' + option_value_row +
            '" data-toggle="image" class="img-thumbnail"><img src="/image/no-image.png" alt="" title=""  width="100" data-placeholder="/image/no-image.png" /></a><input type="hidden" name="option_value[' + option_value_row + '][image]" value="" id="input-image' + option_value_row + '" /></td>';
        html += '  <td class="text-right"><input type="text" name="option_value[' + option_value_row + '][sort_order]" value="" placeholder="" class="form-control" /></td>';
        html += '  <td class="text-right"><button type="button" onclick="$(\'#option-value-row' + option_value_row +
            '\').remove();" data-toggle="tooltip" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#option-value tbody').append(html);

        option_value_row++;
    }
    //--></script></div>
{{ footer }}