@extends('layouts/home/logined')

@section('title')
上传图片
@endsection

@section('content')

<link href="{{URL::asset('assets/css/home/viewer.min.css')}}" rel="stylesheet">
<script src='/ueditor/ueditor.config.js'></script>
<script src='/ueditor/ueditor.all.js'></script>
<script src="{{URL::asset('assets/js/home/viewer.min.js')}}"></script>
<script type="text/javascript">
$(function(){
	$('#print').click(function(){
		location.href="{{URL('print/info')}}/{{$p_info['id']}}";
	})
	var viewer = new Viewer(document.getElementById('dowebok'), {
		url: 'data-original'
	});	
})

</script>	
<style>
.step{font-size:18px}
.yl{width:115px;height:90px;border:1px solid #eaeaea;cursor:pointer}
#yl{border-top:1px solid #ededed;border-bottom:1px solid #ededed;padding:12px 0}
.yc{display:none}
.btn-primary{background:#5fabf7}
#dowebok{padding:0px;width:750px}
#dowebok li { display: inline-block; }
.fx-left,.fx-right,.fx-left1,.fx-right1{width:40px;max-width:100%;cursor:pointer}
.share-ico{width:30px;max-width:100%}
</style>
<div id='main'  style=''>
	<div class='container n' style=''>
		<div class='content' style=''>
			<div class='title-nav'>
				<span class='step'>step2:</span>上传图片({{$p_info['name']}})

			</div>
			
			<div class='but-upload' style='margin-top:10px;margin-bottom:10px;text-align:right	'>
			
				<input type='radio' name='special_type' value=1 checked style='position:relative;top:2px'>平面图
				<input type='radio' name='special_type' value=2 style='position:relative;top:2px'>结构图
				&nbsp;&nbsp;
				<button  id='upload' type="button" class="btn btn-default " onclick='upImages()'>
  					<span class="glyphicon glyphicon-upload"></span> upload
				</button>
			</div>
			<div id='yl' style='text-align:center;height:130px'>
			<!-- <div style='cursor:pointer;float:left;height:120;line-height:120px'>
      	  	 <span style='margin-top:55px' class="glyphicon glyphicon-chevron-left" ></span> 
     		</div> -->
			@if(!empty($img_info))
				@if(count($img_info)>6)
				<div >
					<img id='but-left' style='margin-left:0px;margin-right:10px;margin-top:3%;float:left' class='fx-left' src='/images/home/left49.png	'>
				</div>
				@endif
			@endif
				
				@if(!empty($img_info))
				<ul id="dowebok" style='float:left;padding:0px'>
					@foreach($img_info as $k=>$v)
							<li>	
								<img data-original="{{$v['web_url']}}" alt='' class="yl @if($k>5) yc @endif yf{{$k}}" src="{{$v['thumb_url']}}" >
							</li>
						
					@endforeach
					</ul>
				@else
					<img class="yl " src="/images/home/nopic.jpg" >
					<img class="yl " src="/images/home/nopic.jpg" >
					<img class="yl " src="/images/home/nopic.jpg" >
					<img class="yl " src="/images/home/nopic.jpg" >
					<img class="yl " src="/images/home/nopic.jpg" >
					<img class="yl " src="/images/home/nopic.jpg" >
				@endif
				
				@if(!empty($img_info))
				@if(count($img_info)>6)
				<div >
					<img id='but-right' style='margin-left:10px;margin-right:5px;margin-top:3%;float:left' class='fx-left' src='/images/home/right59.png	'>
				</div>
				@endif
			@endif
			<!-- 	<div style='cursor:pointer;float:right;height:120;line-height:120px'>
			 		<span style='margin-bottom: 55px' class="glyphicon glyphicon-chevron-right" style='cursor:pointer;float:right'></span> 	
				</div>  -->
			</div>
			
						
<!-- 分享功能 -->
			@if(!empty($img_info))
				<div id = 'share' style='text-align:right;margin-top:5px;clear:both'>
					<a href='javascript:'><span style='font-weight:bold'>share this gallery in social media</span></a>
					
					<a target="_blank" href="http://www.facebook.com/share.php?u=http://{{$_SERVER['HTTP_HOST']}}/share-images-{{$p_info['id']}}.html">
					<img title="" class='share-ico' src='/images/home/facebook.png' /></a>
					
					<a target="_blank" href="http://twitter.com/home/?status=http://{{$_SERVER['HTTP_HOST']}}/share-images-{{$p_info['id']}}.html">
					<img class='share-ico' src='/images/home/timg.jpg' /></a>
					
					    <a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://{{$_SERVER['HTTP_HOST']}}/share-images-{{$p_info['id']}}.html&title=TOUCHMEDIA&source=TOUCHMEDIA
						"><img class='share-ico' src='/images/home/linkedin.png'></a>
					
				</div>
			@endif
			<!-- 分享功能end -->
			
			<div style='margin-top:2%'>
					<form role="form" name='form-msg' id='form-msg'>
					  <div class="form-group">
					    <label for="name">feedback:</label>
			<div id='msg-err' class="alert alert-danger alert-dismissable" style='display:none'>
			   <button type="button" class="close" data-dismiss="alert" 
			      aria-hidden="true">
			      &times;
			   </button>
			   <span id='msg-notify'></span>
			</div>
			
			<div id='msg-success' class="alert alert-success alert-dismissable" style='display:none'>
   				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
     			 &times;
   				</button>
  				<span id='succ-notify'></span>
			</div>
					    <textarea class="form-control" rows="3" id='text-msg'></textarea>
					    <button id='btn-msg' type="button" class="btn btn-primary" style='margin-top:10px;float:right'>send</button>
					  </div>
					</form>
				</div>
			</div>
			
<!-- 文件下载  -->	
			@if(isset($download) && $download)
			<div id='download' style='margin-top:10%;text-align:center'>
			
				<button data-toggle="tooltip" data-placement="top" 
   				title="点击下载"  type="submit" class="btn btn-primary download" @if(!isset($download['webVersion']))  disabled='true' @else data="{{$download['webVersion']}}" @endif> Download Web Version</button>
			
			
			
				<button data-toggle="tooltip" data-placement="top" 
  				 title="点击下载"  type="submit" class="btn btn-primary download" @if(!isset($download['watermarkVersion']))  disabled='true'  @else data="{{$download['watermarkVersion']}}" @endif>Download Web Version with watermark</button>
			
			
				<button data-toggle="tooltip" data-placement="top" 
   				title="点击下载"  type="submit" class="btn btn-primary download"  @if(!isset($download['printVersion']))  disabled='true'  @else data="{{$download['printVersion']}}" @endif>Download Print Version</button>
			
			
				<button data-toggle="tooltip" data-placement="top" 
   				title="点击下载"  type="submit" class="btn btn-primary download" @if(!isset($download['floorPlan']))  disabled='true'  @else data="{{$download['floorPlan']}}" @endif>Download Floorplans</button>
			
			</div>	
			@endif
			<div id='next' style='margin-top:4%;margin-bottom:2%;text-align:center'>
					<button id='print'  type="submit" class="btn btn-primary download" >Continue to PRING SERVICES</button>		
			<!-- 		<button  type="submit" class="btn btn-primary download" >Finish This Campaign</button>	 -->	
			
			</div>
						
		</div>
		</div>
		</div>
		
<div style='height:12.1%;background:#f7f7f7'>

</div>
	<div id='zz' style='display:none;position: absolute;width:100%;height:100%;opacity:0.6;background:black;z-index:20000;left:0px;top:0px'>
		<img style='margin-left:50%;margin-top:20%;' src='/images/home/loding.gif'>
	</div>
		
				<!--上传excel组件-->
<div style="display:none">
    <textarea id="file-editor" name="file-editor" ></textarea>
</div>

<script>
	$(function(){


		
		var start=0;
		var end = 6;
		$('#but-right').click(function(){
			$('#but-left').show();
			$('.yf'+start).hide('500');
			$('.yf'+end).show('500');
			start++;
			end++;
			if(end+1>{{count($img_info)}})
			{
				$('#but-right').hide();
			}
		});


		start = end-6
		$('#but-left').click(function(){
			start--
			end--;
			$('#but-right').show();
			$('.yf'+end).hide('500');
			$('.yf'+start).show('500');

			if(start<1)
			{
				$('#but-left').hide();
			}
		});

		$('#btn-msg').click(function(){
			var post_str = {'_token':"{{csrf_token()}}","member_id":"{{$p_info['member_id']}}","project_id":"{{$p_info['id']}}","message":$('#text-msg').val()};
			$.ajax({	
				 url:"{{URL('message/save')}}",
                 data:post_str,
                 dataType:"JSON",
                 type:"POST",
                 success:function(data){
					if(data.success)
					{
						$('#msg-err').hide();
						$('#msg-success').show();
						$('#succ-notify').append(data.msg);
						$('#msg-success').hide(5000);
					}
					else
					{
						$('#msg-err').show();
						 $('#msg-notify').append(data.msg);
					}
                 },
                 error:function(data){

                	 $.each(data.responseJSON, function (key, value) {
                		 $('#msg-err').show();
                         $('#msg-notify').append(value);
                     });
                 }
			});
		});

	})
	
			//图片上传
		var editor_a = new baidu.editor.ui.Editor();
		editor_a.render('editor');
		var fileEditor = new UE.ui.Editor({PHPSESSID:'{{Session::getId()}}'});
		fileEditor.render("file-editor");
		fileEditor.ready(function () {
		    //设置编辑器不可用
		    fileEditor.setDisabled();
		    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
		    fileEditor.hide();
		   //侦听文件上传，取上传文件列表中的文件的路径
		   var info = '';
		   var info = '';
		   fileEditor.addListener('beforeInsertImage', function (t, arg) {
			   $('#zz').show();
			   for(var i in arg)
		   	   {
		   		   info+=arg[i].src+',';
		   	   }
			   sid = $('input[name="special_type"]:checked').val();
			   $("button").attr("disabled","true");
				//将图片信息插入数据库
				$.ajax({
						 url:"{{URL('image/save')}}",
		                 data:'pic_info='+info+'&_token={{csrf_token()}}&project_id={{$p_info["id"]}}&special_type='+sid,
		                 dataType:"JSON",
		                 type:"POST",
		                 success:function(data){
		                	 $('#zz').hide();
		                	 $("button").attr("disabled","false");
		                	 location.href='';
		                 },
				});
		   	   
			  // $('.empty').eq(0).attr('src','/upload/image/tcm/20160331/1459395733986.jpg')
			  	 	
		   });

		  
		});

		function upImages()
		{
		      var myFiles = fileEditor.getDialog("insertimage");
		      myFiles.render();
		      myFiles.open();
		}
</script>
@endsection