@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(){

})

</script>
<style>
.step{font-size:18px}
.inp-name{padding-right:10px;font-weight:bold;margin-left:20px;}
.input{background-color: rgb(250, 255, 189);border: 1px solid #ccc;	border-radius: 4px;}
.line{margin-top:2%}
.chc-name{padding-right:20px;font-weight:bold;position:relative;top:-2px;margin-left:2px}
.check{}
.ser-but{margin-left:15px}
.btn-primary{background:#5fabf7}
.yl{width:115;height:90px;border:1px solid #eaeaea;} 
#yl{border-top:1px solid #ededed;border-bottom:1px solid #eeeeee;padding:8px 0;margin-top:2%}
#yl{border-top:1px solid #ededed;border-bottom:1px solid #ededed;padding:8px 0;cursor:pointer}
.yc{display:none}
.download{margin-right:10px;margin-top:5px}
.share-ico{width:30px;max-width:100%}
#dowebok{width:750px;}
#dowebok li { display: inline-block; }
.fx-left,.fx-right,.fx-left1,.fx-right1{width:40px;max-width:100%;cursor:pointer}
</style>
<div id='main' >
	<div class='container n' style=''>
		<div class='content' style=''>
			<div class='title-nav'>
				<span class='step'>step2:</span>({{$info['name']}})
			</div>
			<div style='font-weight:bold;font-size:14px;margin-left:'>
			预约摄影&平面设计  
			<span class="glyphicon glyphicon-chevron-down" style='cursor:pointer' id='ss'></span>
			</div>
			<div id='yy-service' @if($s_info['status'] !=0) style=' background-color:#fff; opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);'@endif>
			<div class="alert alert-danger" style='margin-top:10px;display:none'></div>
			<form name='form1' id='form1' role="form1" >
			{!! csrf_field() !!}
			<input type='hidden' name='project_id' value="{{$info['id']}}">
			<input type='hidden' name='id' value="{{$s_info['id']}}">
			<div class='line'>
			<span class='inp-name'>Agent Name</span><input name='agent_name' id='agent_name' class='input' type='text' style='width:10%' value="{{$s_info['agent_name']}}">
			<span class='inp-name'>Contact Number</span>
			<input name='contact_number' id='contact_number' class='input' type='text' style='width:10%' value="{{$s_info['contact_number']}}">
			<span class='inp-name'>Email Address</span>
			<input name='email' id='email' class='input' type='text'  style='width:30%' value="{{$s_info['email']}}">
			</div>
				
			<div class='line'>
				<span class='inp-name'>Property Address</span>
				<input name='property_address' id='property_address' class='input' type='text' style='width:78%' value="{{$s_info['property_address']}}">
			</div>
							
			<div class='line'>
				<span class='inp-name'>Property Status</span>	
				<input type='radio' class='check' name='property_status' value=1 @if($s_info['property_status']==1) checked @endif><span class='chc-name'>Vacant</span>
				<input type='radio' class='check' name='property_status' value=2 @if($s_info['property_status']==2) checked @endif ><span class='chc-name'>Owner Occupied</span>
				<input type='radio' class='check' name='property_status' value=3 @if($s_info['property_status']==3) checked @endif><span class='chc-name'>Tenanted</span>
			</div>
			
			<div class='line' style='margin-left:20px'>
				<input type='radio' class='check' name='floor_plan' value=1 @if($s_info['floor_plan']==1) checked @endif><span class='chc-name'>B&W Floor Plan</span>
				<input type='radio' class='check' name='floor_plan' value=2 @if($s_info['floor_plan']==2) checked @endif><span class='chc-name'>Color Floor Plan</span>
				<input type='radio' class='check' name='floor_plan' value=3 @if($s_info['floor_plan']==3) checked @endif><span class='chc-name'>Texture Floor Plan</span>
				<input type='radio' class='check' name='floor_plan' value=4 @if($s_info['floor_plan']==4) checked @endif><span class='chc-name'>Interactive Floor Plan</span>
			</div>
			
			<div class='line' style='margin-left:20px'>
				<input type='checkbox' name='is_siteplan' class='check' value=1 @if($s_info['is_siteplan']==1) checked @endif><span class='chc-name'>Site Plan</span>
			</div>
			
			<div class='line'>
				<span class='inp-name'>Appointment time:</span>
				<input readonly='readonly' name='appointment_time' id='time'  type='text'  value='{{$s_info['appointment_time']}}' style='border:none;width:80%'>
			</div>
			@if($s_info['status'] ==0)
			<div style='margin:20px;font-size:14px;font-weight:bold'>
				Click <span style='font-size:18px;color:#5992c7;cursor:pointer' id='appoint-time'>HERE</span> to write 3 Expected time.Alternatively,please ring us at 8005 0086
			</div>
			@endif
			
			@if($s_info['status'] ==0)
			<div class='line'>
				<button id='sub-service' type="button" class="btn  btn-primary ser-but" >
      				@if(!$s_info['id']) 保存  @else 修改  @endif
   				</button>
   				
   				<button type="button" class="btn  btn-primary ser-but">
      				取消
   				</button>
   				
   				
			</div>
			@endif
			</form>
			@if($s_info['status'] ==1 || $s_info['status'] ==1 )
			<div class="alert alert-info alert-dismissable">
   				<button type="button" class="close" data-dismiss="alert" 
      				aria-hidden="true">
     			 &times;
   				</button>
   				你的预约已经成功受理，拍摄的照片处理后会在此处显示。
			</div>
			@endif
			@if(!$s_info['id'])
			<div class='line' style='text-align:center;font-weight:bold'>
				<hr>
				</hr>
				I already have photos(floor plans),clikc <span id='upload' style='font-size:18px;color:#5992c7;cursor:pointer'>HERE</span> to Upload
   				<hr>
				</hr>
			</div>
			@endif
			</div>
			
			@if($s_info['status'] >2)
			<!-- 图片展示 -->
			<div style='font-weight:bold;font-size:14px;margin-top:30px'>
			图片展示  
		<!--  	<span class="glyphicon glyphicon-chevron-down" style='cursor:pointer' id='ss'></span>-->
		<!--	 <button type="button" class="btn btn-primary btn-sm" style='float:right' onclick='upImages()'>
          		<span class="glyphicon glyphicon-upload"></span> Upload
        	</button>  -->
			</div>
			<div>
				<div id='yl' style='text-align:center;height:140px'>
				@if(!empty($img_info&&count($img_info)>5))
				<div >
					<img id='but-left' style='margin-left:10px;margin-right:15px;margin-top:3%;float:left' class='fx-left' src='/images/home/left49.png	'>
				</div>
	     		@endif
	     		<div >
				@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" >
				@endif
				</div>
				@if(!empty($img_info) &&count($img_info)>5)
				<div>
					<img id='but-right'  style='margin-left:0px;margin-top:3%;float:left' class='fx-right' src='/images/home/right59.png'>	
				</div>
					@endif
				</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-{{$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-{{$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-{{$info['id']}}.html&title=TOUCHMEDIA&source=TOUCHMEDIA
						"><img class='share-ico' src='/images/home/linkedin.png'></a>
					
				</div>
			@endif
			<!-- 分享功能end -->
			@endif
				<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>
			<!-- 图片展示end -->	
			
			<!-- 文件下载  -->	
			@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
			<!-- 文件下载end  -->	
			

			
			<!--进入下个步骤  -->
			<div id='next' style='margin-top:4%;margin-bottom:2%;text-align:center'>
					<button id='print'  type="submit" class="btn btn-primary download" >PRING SERVICES</button>		
	
			
			</div>
		</div>
		</div>
		</div>
		
		<div >
		
		</div>
		
		<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   		aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" 
	               aria-hidden="true">×
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	            		   添加预约时间
	            </h4>
	         </div>
	         <div class="modal-body">
	           预约时间1:	<input size="16"  type="date" value="{{date('Y-m-d')}}"  class="form_datetime1">
	                <select style='height:22px' class='t1'>
	                	<option value='am'>AM</option>
	                	<option value='pm'>PM</option>
	                </select>
	           <br><br>
	            预约时间2:	<input size="16"  type="date" value="{{date('Y-m-d')}}"  class="form_datetime1">
	                <select style='height:22px' class='t2'>
	                	<option value='am'>AM</option>
	                	<option value='pm'>PM</option>
	                </select  >
	            <br><br>
	             预约时间3:	<input size="16"  type="date" value="{{date('Y-m-d')}}"  class="form_datetime1">
	             	<select style='height:22px' class='t3'>
	                	<option value='am'>AM</option>
	                	<option value='pm'>PM</option>
	                </select>
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">关闭
	            </button>
	            <button type="button" id='sub-apptime' class="btn btn-primary">
	             		  提交
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
	   	</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		
		<!--上传excel组件-->
<div style="display:none">
    <textarea id="file-editor" name="file-editor" ></textarea>
</div>
<script type="text/plain" id="myEditor"></script>
<script type="text/plain" id="upload_ue"></script>
<script>
	$(function(){

		$('.download').click(function(){
			var url = $(this).attr('data');
			location.href = url;
		})
		$('#print').click(function(){
			location.href="{{URL('print/info')}}/"+"{{$info['id']}}";
		})
		
		 $(function () { $("[data-toggle='tooltip']").tooltip(); });
		
		$('#upload').click(function(){
			location.href="{{URL('service/uploadpic')}}/{{$info['id']}}";
		})
		$('#ss').click(function(){
			$("#yy-service").toggle(1000);
			if($(this).hasClass('glyphicon-chevron-down'))
			{
				$(this).removeClass('glyphicon-chevron-down')
				$(this).addClass('glyphicon-chevron-up')
			}
			else
			{
				if($(this).hasClass('glyphicon-chevron-up'))
				{
					$(this).removeClass('glyphicon-chevron-up')
					$(this).addClass('glyphicon-chevron-down')
				}
			}
		})

		//设置预约时间
		$('#appoint-time').click(function(){
			$('#myModal').modal({
			      keyboard: true
			   });
// 			$(".form_datetime1").datetimepicker({
// 		        format: "dd MM yyyy",

// 		    });

		    $('#sub-apptime').click(function(){
				var time1 = $('.form_datetime1').eq(0).val()+' '+$('.t1').val();
				var time2 = $('.form_datetime1').eq(1).val()+' '+$('.t2').val();
				var time3 = $('.form_datetime1').eq(2).val()+' '+$('.t3').val();

				if(time1==''&&time2==''&&time3=='')
				{
					alert('到少填写一个预约时间');
				}
				var str = time1+','+time2+','+time3;


				var reg=/(,)+$/gi; 
				str=str.replace(reg,"");
				
				$('#time').val(str);
				$('#myModal').modal('hide');
			})
		});

		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();
			}
		});

		//预约表单提交
		$('#sub-service').click(function(){
			$(".alert-danger").html('');	
			 $.ajax({
				 url:"{{URL('service/apptsave')}}",
                 data:$('form').serialize()+"&project_id={{$info['id']}}",
                 dataType:"JSON",
                 type:"POST",
                 success:function(data){
                	 $(".alert-danger").hide();
                	 location.href='';
                 },
                 error:function(data){
                	 $.each(data.responseJSON, function (key, value) {
                		 $(".alert-danger").show();
                         $(".alert-danger").append(value+'!<br>');
                     });
                 }
			});
		});

		$('#btn-msg').click(function(){
			var post_str = {'_token':"{{csrf_token()}}","member_id":"{{$info['member_id']}}","project_id":"{{$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 viewer = new Viewer(document.getElementById('dowebok'), {
			url: 'data-original'
		});	
})
	
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) {
	  	 	
   })
  
});

function upImages()
{
      var myFiles = fileEditor.getDialog("insertimage");
      myFiles.render();
      myFiles.open();
}

</script>
@endsection