@extends('admin.master')

@section('top')
	<div class="top-breadcrumb pull-left">
        <h5>图片配置</h5>
    </div>
@endsection

@section('content')
{!! Form::model($config, ['route' => ['admin.setting.update'], 'method'=>'post', 'class'=>'form-horizontal form-detail']) !!}
	<div class="form-group">
		<label class="col-sm-2 control-label label-width">是否开启</label>
		<div class="col-sm-5">
			<label class="radio-inline">
				{!! Form::radio('watermark_open', 1, null) !!} 开启
			</label>
			<label class="radio-inline">
				{!! Form::radio('watermark_open', 0, null) !!}  关闭
			</label>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label label-width">水印位置</label>
		<div class="col-sm-5">
			<div class="watermark_pos">
				{!! Form::hidden('watermark_pos', null, ['id'=>'watermark_pos']) !!}
				<ul class="clearfix">
					<li><a href="javascript:;" data-value="1"></a></li>
					<li><a href="javascript:;" data-value="2"></a></li>
					<li><a href="javascript:;" data-value="3"></a></li>
					<li><a href="javascript:;" data-value="4"></a></li>
					<li class="on"><a href="javascript:;" data-value="5"></a></li>
					<li><a href="javascript:;" data-value="6"></a></li>
					<li><a href="javascript:;" data-value="7"></a></li>
					<li><a href="javascript:;" data-value="8"></a></li>
					<li><a href="javascript:;" data-value="9"></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label label-width">水印类型</label>
		<div class="col-sm-5">
			<label class="radio-inline">
				{!! Form::radio('watermark_type', 1, null, ['class'=>'watermark_type', 'data-target'=>'watermark_text']) !!} 文字水印
			</label>
			<label class="radio-inline">
				{!! Form::radio('watermark_type', 2, null, ['class'=>'watermark_type', 'data-target'=>'watermark_img']) !!}  图片水印
			</label>
		</div>
	</div>
	<div class="form-group watermark_text @if ($config['watermark_type'] == 2)display-none @endif">
		<label class="col-sm-2 control-label label-width">水印文本：</label>
		<div class="col-sm-5">
			{!! Form::text('fonts_text', null, ['class'=>'form-control']) !!}
		</div>
	</div>
	<div class="form-group watermark_text @if ($config['watermark_type'] == 2)display-none @endif">
		<label class="col-sm-2 control-label label-width">水印字体：</label>
		<div class="col-sm-5">
			{!! Form::select('watermark_font', $fonts, null, ['class'=>'form-control']) !!}
		</div>
	</div>
	<div class="form-group watermark_text @if ($config['watermark_type'] == 2)display-none @endif">
		<label class="col-sm-2 control-label label-width">字体属性：</label>
		<div class="col-sm-5">
			<label class="pr-10 font-normal">颜色：</label>
			{!! Form::hidden('watermark_color', null, ['id'=>'watermark_color']) !!}
			<span class="color_pick" data-hidden="watermark_color"><em class="color_bg" @if(!empty($config['watermark_color'])) style="background:{{ $config['watermark_color'] }}" @endif></em></span>
			<label class="pl-10 pr-10 font-normal">大小：</label>{!! Form::text('watermark_fontsize', null, ['class'=>'form-control len50 inline-block']) !!}
			<label class="pl-10 pr-10 font-normal">透明度：</label>{!! Form::text('watermark_opacity', null, ['class'=>'form-control len50 inline-block']) !!}
		</div>
	</div>
	<div class="form-group watermark_img @if ($config['watermark_type'] == 1)display-none @endif">
		<label class="col-sm-2 control-label label-width">水印图片：</label>
		<div class="col-sm-5">
      <div class="upload-wrap" data-name="filepath">
        <div class="upload-wrap-btn {{ $config['filepath'] ? 'display-none' : ''}}">
          <span class="btn btn-default" data-toggle="modal" data-target="#media-dialog-modal">媒体上传</span>
          <span class="text-muted pl-10">(允许上传的媒体类型：jpg、gif、png)</span>
        </div>
        <ul id="picfram" class="upload-wrap-lists attachments clearfix">
          @if($config['filepath'])
            <li class="thumbnail" data-img="{{ $config['filepath'] }}">
              <input name="filepath" value="{{ $config['filepath'] }}" type="hidden">
              <a class="thumbnail-img"><img src="{{ $config['filepath'] }}"></a>
              <a class="thumbnail-remove" data-id='fileupload' data-name="filepath" href="javascript:;">删除</a>
            </li>
          @endif
        </ul>
      </div>
		</div>
	</div>
    <div class="form-group">
        <label class="col-sm-3 control-label label-width"></label>
        <div class="col-sm-5">
            {!! Form::submit('提交', ['class'=>'btn btn-primary']) !!}
        </div>
    </div>
{!! Form::close() !!}
@endsection

@section('notice')
<!-- Modal -->
<div class="modal fade" id="dialog-common" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">水印效果预览</h4>
        </div>
        <div class="modal-body clearfix">
            <div class='breakall'><p class="common">请选择要删除的内容!</p></div>
        </div>
    </div>
  </div>
</div>
<!-- Modal End -->
@endsection

@section('foot')
<script type="text/javascript">
	//水印位置选择
	$('.watermark_pos li').eq($('#watermark_pos').val() - 1).addClass('on').siblings().removeClass('on');

	$('.watermark_pos').on('click', 'li', function(e) {
		e.preventDefault();
		$(this).addClass('on').siblings().removeClass('on');
		$('#watermark_pos').val($(this).children('a').data('value'));
	});

    //水印类型选择
    $('.watermark_type').on('change', function(){
        var tragets = $(this).data('target');
        if(tragets == 'watermark_text') {
            $('.watermark_text').show().siblings('.watermark_img').hide();
        }else {
            $('.watermark_img').show().siblings('.watermark_text').hide();
        }
    });

	$('body').on('click', '.btn-modal-ok', function() {
		$(this).parents('#dialog').modal('hide');
		$.ajax({
		   type: "DELETE",
		   url: url,
		   success: function(data) {
		        if (data.code == 200) {
		            location.reload();
		        } else {
		        	$('.delete-error').html(data.error);
		            $('#dialog-tip').modal('show');
		        }
		   }
		});
	});

	//水印预览
	$('#watermark_preview').on('click', function() {
		var imgSrc = "{{ url('admin/setting/index/watermark-preview?') }}" + Math.random();
		var img = "<img src='" + imgSrc + "' width='560' height='358'>";
		$('.common').html(img);
		$('#dialog-common').modal('show');
	});

</script>
{{--媒体库 start--}}
@include('admin.common.media', ['type' => 'jpg,gif,png'])
{{--媒体库 end--}}
@endsection