@extends('admin.master')

@section('style')
<link href="{{ asset('data/assets/css/bootstrap-datetimepicker.css') }}" rel="stylesheet">
<link href="{{ asset('data/assets/css/selectize.bootstrap3.css') }}" rel="stylesheet">
@endsection

@section('top')
<div class="top-breadcrumb">
    <h5>添加产品</h5>
    <a href="{{ url('admin/product') }}" class="btn btn-xs btn-default goback">
		<i class="iconfont icon-back-copy"></i><span>返回列表</span>
    </a>
</div>
@endsection

@section('ordersearch')
<div class="entry-rule">
 <i class="iconfont icon-xinxi2"></i> 想了解外贸易产品的具体录入规则可以点击<a href="{{ url('admin/train-news/6') }}">详细</a>，查看更多信息。
</div>
<div class="nav-tabs-box">
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">常规信息</a></li>
		<li role="presentation"><a href="#senior" aria-controls="senior" role="tab" data-toggle="tab">基本信息</a></li>
		<li role="presentation"><a href="#attrs" aria-controls="attrs" role="tab" data-toggle="tab">属性</a></li>
    <li role="presentation"><a href="#intros" aria-controls="intros" role="tab" data-toggle="tab">描述</a></li>
	</ul>
</div>
@endsection

@section('content')
{!! Form::open(['route' => 'admin.product.store', 'class'=>'form-horizontal form-detail']) !!}
<input name="referer" type="hidden" value="{{ request()->header('referer') }}">
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="home">
		<div class="tab-content">
			<div class="form-group form-item-required">
				<label class="col-sm-2 control-label label-width">分类：</label>
				<div class="col-sm-5">
					{!! Form::select('pid', ['' => '请选择'] + $nests, $pid, ['class'=>'form-control']) !!}
				</div>
			</div>
			<div class="form-group {{ $managerLang == config('setting.lang') ? 'form-item-required' : ''}}">
				<label class="col-sm-2 control-label label-width">名称：</label>
				<div class="col-sm-5">
					{!! Form::text("description[{$managerLang}][title]", '', ['class'=>'form-control']) !!}
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label label-width">媒体：</label>
				<div class="col-sm-5">
					<div class="upload-wrap" data-name="description[{{ $managerLang }}][imgs][]">
						<div class="upload-wrap-btn">
							<span class="btn btn-default" data-toggle="modal" data-target="#media-dialog-modal">媒体上传</span>
							<span class="text-muted pl-10">(允许上传的媒体类型：jpg、gif、png、ogg、mp4、webm)</span>
						</div>
						<ul id="picfram" class="upload-wrap-lists attachments clearfix"></ul>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label label-width">页面路径：</label>
				<div class="col-sm-5">
					<div class="input-group">
						<div class="input-group-addon">/product/</div>
						{!! Form::text('slug', '', ['class'=>'form-control', 'placeholder'=>'建议不要手动修改，默认以名称生成']) !!}
						<div class="input-group-addon">.html</div>
					</div>
				</div>
			</div>
			<div id="tags-content" class="form-group">
				<label class="col-sm-2 control-label label-width">标签：</label>
				<div class="col-sm-5 form-select-multiple">
					{!! Form::select('tags[]', $tags, null, ['multiple', 'class'=>'form-control multiple-select', 'placeholder'=>'您最多可以选择3个标签！']) !!}
				</div>
				@if(config('managerLang') == config('setting.lang'))
					<div class="col-sm-5 form-tag-add">
						<a href="javascript:void(0)" class="pt-5" @click="addTag()">
							<i class="iconfont icon-plus"></i>
							添加新标签
						</a>
					</div>
					@include('admin.common.notice')
				@endif
			</div>
			<div role="tabpanel" class="tab-pane active">
				<div class="form-group">
					<label class="col-sm-2 control-label label-width">摘要：</label>
					<div class="col-sm-5">
						{!! Form::textarea("description[{$managerLang}][summary]", '', ['class'=>'form-control', 'rows'=>3]) !!}
            <div class="text-muted mt-7 mb-7">(建议填写，不填写默认显示详细内容前300个字符左右)</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label label-width">详细内容：</label>
					<div class="col-sm-10">
            <button type="button" id="ai-icon" class="ai-icon btn btn-primary">
              <img src="{{ asset('data/assets/images/ai.png') }}">
              AI帮写
            </button>
						{!! Form::textarea("description[{$managerLang}][content]", '', ['id'=>"editor-{$managerLang}", 'class'=>'len-full']) !!}
					</div>
				</div>
        <div class="form-group">
          <label class="col-sm-2 control-label label-width">产品百科：</label>
          <div class="col-sm-10">
            {!! Form::textarea("description[{$managerLang}][encyclopedia]", '', ['id'=>"editor1-{$managerLang}", 'class'=>'len-full']) !!}
          </div>
        </div>
				<div class="form-group">
					<label class="col-sm-2 control-label label-width">特殊属性：</label>
					<div class="col-sm-5">
						<div class="pretty-box">
							<div class="pretty p-default">
								{!! Form::checkbox('recom', 1, 0) !!}
								<div class="state p-success"><label>推荐</label></div>
							</div>
							<div class="pretty p-default">
								{!! Form::checkbox('top', 1, 0) !!}
								<div class="state p-success"><label>置顶</label></div>
							</div>
							<div class="pretty p-default">
								{!! Form::checkbox('headline', 1, 0) !!}
								<div class="state p-success"><label>头条</label></div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label label-width">发布状态：</label>
					<div class="col-sm-5">
						<div class="pretty-box">
							<div class="pretty p-default p-round p-smooth">
								{!! Form::radio('flag', 1, true) !!}
								<div class="state p-success-o"><label>发布</label></div>
							</div>
							<div class="pretty p-default p-round p-smooth">
								{!! Form::radio('flag', 0, false) !!}
								<div class="state p-success-o"><label>不发布</label></div>
							</div>
						</div>
					</div>
				</div>
        <div class="form-group">
          <label class="col-sm-2 control-label label-width">产品详情模板：</label>
          <div class="col-sm-5">
            <div class="pretty-box" style="padding-top: 0">
              @if(!$pages->isEmpty())
                @foreach($pages as $page)
                  <div class="pretty p-default p-smooth mt-10 mb-10">
                    <input name="page_ids[]" class="platform-id" type="checkbox" value="{{ $page->id }}" onclick="checkItem(this, 'checkPageIdAll')">
                    <div class="state p-success"><label style="text-indent: 1.5em;">{{ $page->description->title }}</label></div>
                  </div>
                @endforeach
              @endif
                <div class="text-muted mt-7 mb-7">(注：选中后将会在产品详情里出现)</div>
            </div>
          </div>
        </div>
				@include('admin.common.meta_setting', ['model' => 'product_seo', 'type' => 'product'])
        @if(inject('setting')->config('product_og'))
        <div class="form-group form-group-line"></div>
        <div class="meta-setting">
          <div class="meta-setting-header">
            <h3>OG 设置</h3>
          </div>
          <div class="meta-setting-from">
            <div class="meta-setting-from-input">
              <span>标题</span>
              {!! Form::text("description[{$managerLang}][og_title]", isset($descriptions[$managerLang]) ? $descriptions[$managerLang][0]->og_title : '', ['class'=>'form-control']) !!}
            </div>
            <div class="meta-setting-from-input">
              <span>描述</span>
              {!! Form::textarea("description[{$managerLang}][og_description]", isset($descriptions[$managerLang]) ? $descriptions[$managerLang][0]->og_description : '', ['class'=>'form-control', 'rows'=>3]) !!}
            </div>
            <div class="meta-setting-from-input">
              <span>图片</span>
              <div class="upload-wrap" data-name="description[{{ $managerLang }}][og_img]">
                <div class="upload-wrap-btn">
                  <span class="btn btn-default" data-toggle="modal" data-target="#media-dialog-modal" id="og-img">媒体上传</span>


                  <span class="text-muted pl-10">(允许上传的媒体类型：jpg、gif、png)</span>
                </div>
                <ul id="picfram" class="upload-wrap-lists attachments clearfix"></ul>
              </div>
            </div>

          </div>
        </div>
          @endif
			</div>
		</div>
	</div>
    <div role="tabpanel" class="tab-pane" id="senior">
    	<div class="form-group">
			<label class="col-sm-2 control-label label-width">制造商/品牌：</label>
			<div class="col-sm-5">
				{!! Form::select('manufacturer_id', ['0' => '--无--'] + $manufacturer, null, ['class'=>'form-control']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label label-width">编号：</label>
			<div class="col-sm-5">
				{!! Form::text('number', '', ['class'=>'form-control']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label label-width">价格：</label>
			<div class="col-sm-5">
				{!! Form::text('price', '', ['class'=>'form-control']) !!}
        <span class="mt-5 text-muted inline-block">（单位人民币：￥）</span>
			</div>
		</div>
    <div class="form-group">
      <label class="col-sm-2 control-label label-width">库存：</label>
      <div class="col-sm-5">
        {!! Form::text('stock', 0, ['class'=>'form-control']) !!}
      </div>
    </div>
		<div class="form-group form-label-prompt">
			<label class="col-sm-2 control-label label-width"><span data-toggle="tooltip" title="(输入时自动筛选结果)">下载文件</span></label>
			<div class="col-sm-5">
				<input type="text" id="input-download" placeholder="下载文件" class="form-control">
				<ul class="dropdown-menu"></ul>
				<div id="product-download" class="well well-sm overflow-auto-120"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label label-width">发布时间：</label>
			<div class="col-sm-5">
				<div class="form-datetime len200">
					{!! Form::text('created_at', date('Y-m-d H:i:s'), ['class'=>'form-control datetimepicker len200']) !!}
					<i class="iconfont icon-calendar date-picker-icon"></i>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label label-width">排序：</label>
			<div class="col-sm-5">
				{!! Form::number('orders', maxValue(), ['class'=>'form-control']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label label-width">外部链接：</label>
			<div class="col-sm-5">
				{!! Form::text('linkurl', '', ['class'=>'form-control']) !!}
			</div>
		</div>
	</div>
	<div role="tabpanel" class="tab-pane" id="attrs">
		<table class="table table-hover menu-content">
            <thead>
                <tr>
                    <th class="col-sm-3">属性</th>
                    <th class="col-sm-8">内容</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr id="attr-list">
                	<td colspan="2"></td>
                    <td>
						@if(config('managerLang') == config('setting.lang'))
							<button type="button" onclick="addAttribute();" data-toggle="tooltip" title="添加属性" class="btn btn-primary" id="add-attr">
								<i class="fa fa-plus-circle"></i>
							</button>
						@endif
                    </td>
                </tr>
           </tbody>
        </table>
	</div>
  <div role="tabpanel" class="tab-pane" id="intros">
    <table class="table table-hover menu-content">
      <thead>
      <tr>
        <th class="col-sm-3">标题</th>
        <th class="col-sm-8">内容</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr id="intro-list">
        <td colspan="2"></td>
        <td>
          @if(config('managerLang') == config('setting.lang'))
            <button type="button" onclick="addIntro();" data-toggle="tooltip" title="添加描述" class="btn btn-primary" id="add-intro">
              <i class="fa fa-plus-circle"></i>
            </button>
          @endif
        </td>
      </tr>
      </tbody>
    </table>
  </div>
	<div class="form-send-height">
		<div class="form-send-box">
			<div class="form-group">
				<label class="col-sm-3 control-label label-width"></label>
				<div class="col-sm-5">
          {!! Form::submit(inject('setting')->config('auto_translate') == 1 ? '提交并翻译' : '提交', ['class'=>'btn btn-primary']) !!}
				</div>
			</div>
		</div>
	</div>
{!! Form::close() !!}
@endsection

@section('foot')
<script src="{{ asset('data/assets/js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ asset('data/assets/js/ueditor/ueditor.config.js') }}"></script>
<script src="{{ asset('data/assets/js/ueditor/ueditor.all.min.js') }}"></script>
<script src="{{ asset('data/assets/js/ueditor/addCustomizeButton.js') }}"></script>
<script src="{{ asset('data/assets/js/selectize.js') }}"></script>
<script type="text/javascript">
var langs = {!! inject('lang')->lists() !!};
var attributes = {!! $attributes !!};
var attribute_row = 1;
function addAttribute() {
	var html = "<tr id='attribute-row" + attribute_row + "'>";
	html += "<td>" + selectList(attribute_row) + "</td><td>";
	for (var i = 0; i < langs.length; i ++ ) {
    	html += "<div class='form-group mb-10'><div class='col-sm-8'><input type='text' name='attrs[" + attribute_row + "][description][" + langs[i].slug + "][value]' class='form-control' placeholder='请输入内容'></div></div>";
    }
    html += '</td><td><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="移除" class="btn btn-danger btn-remove"><i class="fa fa-minus-circle"></i></button></td></tr>';
	$('#attr-list').before(html);
	attribute_row ++ ;
	$('#add-attr').tooltip('hide');
    $('[data-toggle="tooltip"]').tooltip();
}

function selectList(attribute_row) {
	var html = "<select name='attrs[" + attribute_row + "][attribute_id]' class='form-control'>";
	html += "<option value=''>请选择属性</option>";
	for (var i = 0; i < attributes.length; i ++ ) {
    	html += "<option value='" + attributes[i]['attribute_id'] + "'>" + attributes[i]['title'] + "</option>";
    }
    html += "</select>";
    return html;
}

var intro_row = 1;
function addIntro() {
    var html = "<tr id='intro-row" + intro_row + "'>";
    for (var i = 0; i < langs.length; i ++ ) {
        html += "<td><div class='form-group mb-10'><div class='col-sm-12'><input type='text' name='intros[" + intro_row + "][description][" + langs[i].slug + "][title]' class='form-control' placeholder='请输入标题'></div></div></td><td>";
        html += "<div class='form-group mb-10'><div class='col-sm-11'><textarea name='intros[" + intro_row + "][description][" + langs[i].slug + "][content]' class='len-full' id='introEditor-" + intro_row + "' placeholder='请输入内容'></textarea></div></div>";

    }
    html += '</td><td><button type="button" onclick="$(\'#intro-row' + intro_row + '\').remove();" data-toggle="tooltip" title="移除" class="btn btn-danger btn-remove"><i class="fa fa-minus-circle"></i></button></td></tr>';
    $('#intro-list').before(html);
    UE.getEditor('introEditor-' + intro_row);
    intro_row ++ ;
    $('#add-intro').tooltip('hide');
    $('[data-toggle="tooltip"]').tooltip();
}

$(function(){
	window.UEEditor = UE.getEditor('editor-' + '{{ config('managerLang')  }}');
    window.UEEditor1 = UE.getEditor('editor1-' + '{{ config('managerLang')  }}');
	var list = document.getElementById("picfram");
	new Sortable(list, {
		animation: 150,
	});
	$('.datetimepicker').datetimepicker({
		format: 'yyyy-mm-dd hh:ii:ss',
        language: 'zh-CN', 
        autoclose: true,
        orientation:'right',
        minView: 2,
    });
    $select = $('.multiple-select').selectize({
		plugins: ['remove_button'],
		maxItems: 3
	});
	control = $select[0].selectize;
    addAttribute();

    $('#input-download').autocomplete({
		'source': function(request, response) {
			$.ajax({
				url: HOME_URL + '/admin/ajax/download?action=downloads&title=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json.data.data, function(item) {
						return {
							label: item['title'],
							value: item['id']
						}
					}));
				}
			});
		},
		'select': function(item) {
			$('#input-download').val('');
			$('#product-download' + item['value']).remove();
			$('#product-download').append('<div id="product-download' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="download_id[]" value="' + item['value'] + '" /></div>');
		}
	});

	$('#product-download').delegate('.fa-minus-circle', 'click', function() {
		$(this).parent().remove();
	});

});

new Vue({
	el: '#tags-content',
	data: {
		tags: {},
		urlLoad: "{{ url('/admin/tag/ajax-update') }}",
	},
	methods: {
		addTag: function() {
			$("#dialog-common").modal('show');
		},
		submitTag: function() {
			var _this = this;
			_this.tags['description'] = {};
			if ($("#tag-en").val() == '') {
				swal({
					title: "", 
					text: "英文标签不能为空！",
					type: "warning",
					showConfirmButton: false,
					timer: 1500,
				});
				return false;
			} else {
				$(".tag-input").each(function() {
					var lang   = $(this).data('lang');
					_this.tags['description'][lang] = {};
					_this.tags['description'][lang]['name'] = $(this).val();
				});
				
				$.ajax({
					type: "POST",
					headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					url: _this.urlLoad,
					data: _this.tags,
					success: function(json) {
						if (json.status == 'sucess') {
							$("#dialog-common").modal('hide');
							$(".tag-input").val('');
							swal({
								title: "", 
								text: "标签添加成功！",
								type: "success",
								showConfirmButton: false,
								timer: 1500,
							});
							control.addOption({value: json.name, text: json.name + '(0)'});
							control.addItem(json.name)
						} else {
                swal({
                    title: "",
                    text: json.message || "添加标签失败，请重新添加！",
                    type: "error",
                    showConfirmButton: false,
                    timer: 1500,
                });
						}
					}
				});
			}
		}
	},
});

$(function () {
    $("#og-img").click(function () {
        window.mediaType = 'image'
        window.single_upload = 1
    })
})
</script>
{{--录入助手 start--}}
@include('admin.common.input_assistant', ['model' => 'product', 'title'=> '产品', 'tag' => true])
{{--录入助手 end--}}
{{--媒体库 start--}}
@include('admin.common.media', ['type' => 'jpg,gif,png,ogg,mp4,webm', 'multi' => true])
{{--媒体库 end--}}
{{--AI智能文案 start--}}
@include('admin.common.chatgpt')
{{--AI智能文案 end--}}
@endsection