{layout name="layout" /}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <h1>产品</h1>
            <ul class="breadcrumb">
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> 编辑产品</h3>
            </div>
            <div class="panel-body">
                <form action="{:url('product/add')}" method="post" enctype="multipart/form-data"
                      class="form-horizontal" id="form-product">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-general" data-toggle="tab">基本</a>
                        </li>
                        <li><a href="#tab-data" data-toggle="tab">数据</a></li>
                        <li><a href="#tab-option" data-toggle="tab">属性</a></li>
                        <li><a href="#tab-image" data-toggle="tab">图片</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-general">
                            <div class="form-group required">
                                <label class="col-sm-2 control-label" for="input-name1">产品名</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" value="{$data.name}" placeholder="产品名"
                                           id="input-name1" class="form-control">
                                </div>
                            </div>
                            <div class="form-group required">
                                <label class="col-sm-2 control-label" for="input-name2">文件名</label>
                                <div class="col-sm-10">
                                    <input type="text" name="static_url_name" value="{$data.static_url_name}" placeholder="生成静态文件的名字,省略.html"
                                           id="input-name2" class="form-control">
                                </div>
                            </div>
                            <div class="form-group required">
                                <label class="col-sm-2 control-label" for="input-name3">面包屑名</label>
                                <div class="col-sm-10">
                                    <input type="text" name="bread_name" value="{$data.bread_name}"
                                           placeholder=""
                                           id="input-name3" class="form-control">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-description">描述</label>
                                <div class="col-sm-10">
                                    <textarea name="description" id="input-description"
                                              data-toggle="summernote"
                                              data-lang="zh-CN"
                                              class="form-control">{$data.description}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-meta-title1">T</label>
                                <div class="col-sm-10">
                                    <input type="text" name="t" value="{$data.t}" placeholder=""
                                           id="input-meta-title1" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-meta-keyword1">K</label>
                                <div class="col-sm-10">
                                    <textarea name="k" rows="5" placeholder=""
                                              id="input-meta-keyword1" class="form-control">{$data.k}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-meta-description1">d</label>
                                <div class="col-sm-10">
                                    <textarea name="d" rows="5" placeholder="Meta Tag Description"
                                              id="input-meta-description1" class="form-control">{$data.d}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab-data">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-sku1">
                                    分类
                                </label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="category_id">
                                        <option value="0">请选择</option>
                                        {foreach $categorys as $category}
                                        <option value="{$category.id}"
                                            {if $category.id == $data.category_id}
                                                selected
                                            {/if}
                                        >{$category.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-sku">
                                    sku
                                </label>
                                <div class="col-sm-10">
                                    <input type="text" name="sku" value="{$data.sku}" placeholder="每个产品要唯一SKU"
                                           id="input-sku"
                                           class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-price">原价</label>
                                <div class="col-sm-10">
                                    <input type="text" name="price" value="{$data.price}" placeholder="原价"
                                           id="input-price"
                                           class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-price1">特价</label>
                                <div class="col-sm-10">
                                    <input type="text" name="special_price" value="{$data.special_price}" placeholder="有特价都显示，没特价显示原价"
                                           id="input-price1" class="form-control">
                                </div>
                            </div>
                        </div>
    
                        <div class="tab-pane" id="tab-option">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="nav nav-pills nav-stacked" id="option">
    
                                        {php}$option_row = 0;{/php}
                                        {foreach $product_options as $product_option}
                                        <li><a href="#tab-option{$option_row}" data-toggle="tab">
                                            <i class="fa fa-minus-circle"
                                                onclick="$('a[href=\'#tab-option{$option_row}\']').parent().remove();
                                                $('#tab-option{$option_row}').remove();
                                                $('#option a:first').tab('show');"></i>
                                            {$product_option.option_name}</a></li>
                                            {php}$option_row++;{/php}
                                        {/foreach}
                                        <li>
                                            <input type="text" name="option" value="" placeholder="属性"
                                                   id="input-option" class="form-control" />
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-sm-10">
                                    <div class="tab-content">
                                        {php}$option_row = 0;{/php}
                                        {php}$option_value_row = 0;{/php}
                                        {foreach $product_options as $product_option}
                                        <div class="tab-pane" id="tab-option{$option_row}">
                                            <input type="hidden" name="product_option[{$option_row}][name]"
                                                   value="{$product_option.option_name}" />
                                            <input type="hidden" name="product_option[{$option_row}][option_id]"
                                                   value="{$product_option.option_id}" />
                                            
                                            <div class="table-responsive">
                                                <table id="option-value{$option_row}" class="table table-striped table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <td class="text-left">属性值</td>
                                                        <td class="text-right">价格</td>
                                                        <td></td>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                
                                                    {foreach $product_option['product_option_value'] as
                                                    $product_option_value}
                                                    <tr id="option-value-row{$option_value_row}">
                                                        <td class="text-left">
                                                            <select name="product_option[{$option_row}][product_option_value][{$option_value_row}][option_value_id]" class="form-control">
                                                            
                                                            {foreach
                                                            $all_product_options_value[$product_option['option_id']] as
                                                            $option_value}
                                                            {if $product_option_value.option_value_id == $option_value.option_value_id}
                                                            <option value="{$option_value.option_value_id}"
                                                                    selected="selected">{$option_value.name}</option>
                                                            {else /}
                                                            <option value="{$option_value.option_value_id}">
                                                                {$option_value.name}
                                                            </option>
                                                            {/if}
                                                            {/foreach}
                                                        </select>
                                                            <input type="hidden"
                                                                   name="product_option[{$option_row}][product_option_value][{$option_value_row}][product_option_value_id]" value="{$product_option_value.option_value_id}" /></td>
                                                        <td class="text-right"><select
                                                                name="product_option[{$option_row}][product_option_value][{$option_value_row}][price_prefix]" class="form-control">
                                        
                                        
                                                            {if $product_option_value.price_prefix == '+'}
                                                            <option value="+" selected="selected">+</option>
                                                            {else /}
                                        
                                                            <option value="+">+</option>
                                        
                                                            {/if}
                                                            
                                                            {if $product_option_value.price_prefix == '-'}
                                                            <option value="-" selected="selected">-</option>
    
                                                            {else /}
                                                            <option value="-">-</option>
                                                            {/if}
                                    
                                    
                                                        </select>
                                                            <input type="text"
                                                                   name="product_option[{$option_row}][product_option_value][{$option_value_row}][price]" value="{$product_option_value.price}" placeholder="价格" class="form-control" /></td>
                                                        <td class="text-right"><button type="button" onclick="$(this).tooltip('destroy');$('#option-value-row{{ option_value_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                                                    </tr>
                                                    {php}$option_value_row ++ ;{/php}
                                                    {/foreach}
                                                    </tbody>
                                
                                                    <tfoot>
                                                    <tr>
                                                        <td colspan="2"></td>
                                                        <td class="text-left"><button type="button"
                                                                                      onclick="addOptionValue('{$option_row}');" data-toggle="tooltip" " class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                                                    </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <select id="option-values{$option_row}" style="display: none;">
                            
                            
                                                {foreach
                                                $all_product_options_value[$product_option['option_id']] as
                                                $option_value}
                            
                            
                                                <option value="{$option_value.option_value_id}">{$option_value.name}</option>
                            
                            
                                                {/foreach}
                        
                        
                                            </select>
                                        </div>
                                        {php}$option_row++;{/php}
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        <div class="tab-pane" id="tab-image">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="text-left">产品主图（一张）</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="text-left"><a href="" id="thumb-image" data-toggle="image"
                                                                 class="img-thumbnail"><img
                                                src="/image/{$data.image ?? 'no-image.png'}" alt=""
                                                                                            title=""
                                                data-placeholder="/image/no-image.png" width="100" /></a>
                                            <input type="hidden" name="image" value="{$data.image}" id="input-image" /></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive">
                                <table id="images" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="text-left">产品附图</td>
                                        <td class="text-left">ALT</td>
                                        <td class="text-right">排序</td>
                                        <td></td>
                                    </tr>
                                    </thead>
                                    <tbody>
                
                                    {php} $image_row = 0; {/php}
                                    {foreach $product_images as $product_image}
                                    <tr id="image-row{$image_row}">
                                        <td class="text-left"><a href="" id="thumb-image{$image_row}"
                                                                 data-toggle="image" class="img-thumbnail"><img
                                                src="/image/{$product_image.image}"width="100" /></a>
                                            <input type="hidden" name="product_image[{$image_row}][image]"
                                                   value="{$product_image.image}" id="input-image{$image_row}" /></td>
                                        <td class="text-right"><input type="text"
                                                                      name="product_image[{$image_row}][alt]"
                                                                      value="{$product_image.alt}"
                                                                      placeholder="ALT" class="form-control" /></td>
                                        <td class="text-right"><input type="text"
                                                                      name="product_image[{$image_row}][sort_order]"
                                                                      value="{$product_image.sort_order}"
                                                                      placeholder="排序（默认0，可以不填）" class="form-control"
                                        /></td>
                                        <td class="text-left"><button type="button"
                                                                      onclick="$('#image-row{$image_row}').remove();"
                                                                      data-toggle="tooltip" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
                                    </tr>
                                    {php} $image_row ++; {/php}
                                    {/foreach}
                                    </tbody>
                
                                    <tfoot>
                                    <tr>
                                        <td colspan="2"></td>
                                        <td class="text-left"><button type="button" onclick="addImage();"
                                                                      data-toggle="tooltip" title="增加"
                                                                      class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
            </div>
            
            <div class="form-group ">
                <div class="col-sm-offset-2">
                    <button type="submit" class="btn btn-success">提交</button>
                    <a href="{:url('product/lists')}" class="btn btn-default">返回</a>
                    <input type="hidden" name='id' value="{$data.product_id??''}">
                </div>
            </div>
            </form>
        </div>
    </div>
    
</div>

<link href="__STATIC__/javascript/codemirror/lib/codemirror.css" rel="stylesheet"/>
<link href="__STATIC__/javascript/codemirror/theme/monokai.css" rel="stylesheet"/>
<script type="text/javascript" src="__STATIC__/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="__STATIC__/javascript/codemirror/lib/xml.js"></script>
<script type="text/javascript" src="__STATIC__/javascript/codemirror/lib/formatting.js"></script>
<script type="text/javascript" src="__STATIC__/javascript/summernote/summernote.js"></script>
<link href="__STATIC__/javascript/summernote/summernote.css" rel="stylesheet"/>
<script type="text/javascript" src="__STATIC__/javascript/summernote/summernote-image-attributes.js"></script>
<script type="text/javascript" src="__STATIC__/javascript/summernote/opencart.js"></script>

<script type="text/javascript"><!--
var option_row = {$option_row ?? 0} + 1;

$('input[name=\'option\']').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: '{:url("option/autocomplete")}?filter_name=' +  encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {
                response($.map(json, function(item) {
                    return {
                        category: item['category'],
                        label: item['name'],
                        value: item['option_id'],
                        type: item['type'],
                        option_value: item['options_values']
                    }
                }));
            }
        });
    },
    'select': function(item) {
        html  = '<div class="tab-pane" id="tab-option' + option_row + '">';
        html += '	<input type="hidden" name="product_option[' + option_row + '][product_option_id]" value="" />';
        html += '	<input type="hidden" name="product_option[' + option_row + '][name]" value="' + item['label'] + '" />';
        html += '	<input type="hidden" name="product_option[' + option_row + '][option_id]" value="' + item['value'] + '" />';
        html += '	<input type="hidden" name="product_option[' + option_row + '][type]" value="' + item['type'] + '" />';




            html += '<div class="table-responsive">';
            html += '  <table id="option-value' + option_row + '" class="table table-striped table-bordered table-hover">';
            html += '  	 <thead>';
            html += '      <tr>';
            html += '        <td class="text-left">属性值</td>';
            html += '        <td class="text-right">价格</td>';
            html += '        <td></td>';
            html += '      </tr>';
            html += '  	 </thead>';
            html += '  	 <tbody>';
            html += '    </tbody>';
            html += '    <tfoot>';
            html += '      <tr>';
            html += '        <td colspan="2"></td>';
            html += '        <td class="text-left"><button type="button" onclick="addOptionValue(' + option_row + ');" data-toggle="tooltip"  class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>';
            html += '      </tr>';
            html += '    </tfoot>';
            html += '  </table>';
            html += '</div>';

            html += '  <select id="option-values' + option_row + '" style="display: none;">';

            for (i = 0; i < item['option_value'].length; i++) {
                html += '  <option value="' + item['option_value'][i]['option_value_id'] + '">' + item['option_value'][i]['name'] + '</option>';
            }

            html += '  </select>';
            html += '</div>';
        

        $('#tab-option .tab-content').append(html);

        $('#option > li:last-child').before('<li><a href="#tab-option' + option_row + '" data-toggle="tab"><i class="fa fa-minus-circle" onclick=" $(\'#option a:first\').tab(\'show\');$(\'a[href=\\\'#tab-option' + option_row + '\\\']\').parent().remove(); $(\'#tab-option' + option_row + '\').remove();"></i>' + item['label'] + '</li>');

        $('#option a[href=\'#tab-option' + option_row + '\']').tab('show');

        $('[data-toggle=\'tooltip\']').tooltip({
            container: 'body',
            html: true
        });

        console.log(option_row);
        option_row++;
    }
});
//--></script>
<script type="text/javascript"><!--
var option_value_row = {$option_value_row ?? 0} + 1;

function addOptionValue(option_row) {
    html  = '<tr id="option-value-row' + option_value_row + '">';
    html += '  <td class="text-left"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][option_value_id]" class="form-control">';
    html += $('#option-values' + option_row).html();
    html += '  </select><input type="hidden" name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][product_option_value_id]" value="" /></td>';
    html += '  <td class="text-right"><select name="product_option[' + option_row + '][product_option_value][' + option_value_row + '][price_prefix]" class="form-control">';
    html += '    <option value="+">+</option>';
    html += '    <option value="-">-</option>';
    html += '  </select>';
    html += '  <input type="text" name="product_option[' + option_row + '][product_option_value][' + option_value_row
        + '][price]" value="" placeholder="价格" class="form-control" /></td>';
    html +=
        '  <td class="text-left"><button type="button" onclick="$(this).tooltip(\'destroy\');$(\'#option-value-row' +
        option_value_row + '\').remove();" data-toggle="tooltip" rel="tooltip" title="删除" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#option-value' + option_row + ' tbody').append(html);
    $('[rel=tooltip]').tooltip();

    option_value_row++;
}
//--></script>

<script type="text/javascript"><!--
var image_row = {$image_row};

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

    $('#images tbody').append(html);

    image_row++;
}
//--></script>