@extends('layouts/home/logined')

@section('title')
打印服务
@endsection

@section('content')

<link href="{{URL::asset('assets/css/home/viewer.min.css')}}" rel="stylesheet">

<script src="{{URL::asset('assets/js/home/viewer.min.js')}}"></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:120;height:100px;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,.xc{display:none}
.download{margin-right:10px;margin-top:5px}
.share-ico{width:30px;max-width:100%}
#dowebok{}
#dowebok li { display: inline-block;float:left;cursor:pointer }
#dowebok1 li { display: inline-block;float:left;cursor:pointer }
.tp{width:150px;max-width:100%;border:1px solid rgb(219, 219, 219);margin-left:25px}
.fx-left,.fx-right,.fx-left1,.fx-right1{width:40px;max-width:100%;cursor:pointer}
.order-u{    list-style-type:none;padding:5px}
#kx{padding-top:20px;background:#f7f7f7}
ul li{margin-top:5px}
.item td{padding:15px 0px}
.item{border-bottom:1px solid #eaeaea}
.address{text-align:right;font-size:14px;color:gray;}
</style>
<div id='main' >
	<div class='container n' style=''>
		<div class='content' style=''>
			<div class='title-nav'>
				<span class='step'>打印服务>>{{$ext['projects']['name']}}</span>
				<span id='hide-id' style='display:none'>{{$ext['projects']['id']}}</span>
			</div>
			
			<div class='title-nav' style='margin-bottom:0px'>
				<!-- Select A Brand:
				<select style='height:22px' id='brand_type'>
				<option value=''>---select---</option>
					<option value=1>franchise</option>
					<option value=2>independent</option>
				</select>
				
				<select style='height:22px' id='brand'>
					<option value=''>--select--</option>
					
				</select>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				 -->
				Select A Template:
				<input type='radio' name='type_id' id='type_id' style='position: relative;top:3px' value=1> <span style='font-weight: normal'>photo signboard</span>
				<input type='radio' name='type_id' id='type_id' style='position: relative;top:3px'value=2	> <span style='font-weight: normal'>print products</span>
				<button id='sub-temp' type="button" class="btn  btn-default btn-xs ser-but" >
      				 Search
   				</button>
				
			</div>
			
			<div style='background:#fff;height:350px;text-align:center'>
				<div class='temp' style='padding-top:50px;margin-left:2%'>
				@if(count($data)>5)
				<div >
					<img style='margin-left:0px;margin-top:10%;float:left' class='fx-left' src='/images/home/left49.png	'>
				</div>
				@endif
				<ul id="dowebok" style='float:left;padding:0px'>
					@foreach($data as $k=>$v)
						<li>
						
						<a href="{{URL('template/diy/')}}/{{$v['id']}}/{{$ext['projects']['id']}}"><img data-original="{{$v['thumb']}}" class="tp @if($k>3) yc @endif yf{{$k}}" src="{{$v['thumb']}}" ></a>
						</li>
					@endforeach
					
					
					
				</ul>
				@if(count($data)>4)
				<div>
					<img  style='margin-left:25px;margin-top:10%;float:left' class='fx-right' src='/images/home/right59.png'>	
					
				</div>
				@endif
				</div>
			</div>
			
			<div name='artwork' class='title-nav' style='margin-bottom:0px;margin-top:20px'>
			<span class='step' name=''>Artwork</span>
			</div>
			
			<div style='background:#fff;height:350px;text-align:center'>
						<div class='temp' style='padding-top:50px;margin-left:2%'>
				@if(count($ext['works'])>4)
				<div>
					<img style='margin-left:0px;margin-top:10%;float:left' class='fx-left1' src='/images/home/left49.png	'>
				</div>
				@endif
				<ul id="dowebok1" style='float:left;padding:0px'>
					@foreach($ext['works'] as $k=>$v)
						<li>
						<div>
						<img data-original="{{$v['thumb']}}" class="tp @if($k>3) xc @endif xf{{$k}}" src="{{$v['thumb']}}" >
						<p id='work-act' style='text-align:center;margin-left:20px;margin-top:5px' class=" @if($k>3) xc @endif xf{{$k}}">
						 <a href="{{URL('works')}}/{{$v['id']}}" style='text-decoration: underline' href=''>edit</a> &nbsp;&nbsp; 
						<a style='text-decoration: underline' data="{{$v['id']}}"  class='addOrder'>add to order</a>
						</p>
						</div>
						</li>
					@endforeach
					
					
					
				</ul>
				@if(count($ext['works'])>4)
				<div>
					<img  style='margin-left:25px;margin-top:10%;float:left' class='fx-right1' src='/images/home/right59.png'>	
				</div>
				@endif
				</div>
			</div>
			
			<div name='order' class='title-nav' style='margin-bottom:0px;margin-top:20px'>
			<span class='step'>Order</span>
			</div>
			
			<div style='background:#fff'>
				<div class='temp' style='padding-top:20px;margin-left:2%'>
					
					<table width="100%" >
					<tr style='height:40px;border-bottom:1px solid black'>
					<th>picture</th>
					<th>name</th>
					<th>works_type</th>
					<th>num</th>
					<th>handle </th>
					</tr>
					@foreach($ext['orders'] as $k=>$v)
					<tr class='item'>
					<td>
						<img style='width:80px;height:100px;border:1px solid #eaeaea' src='{{$v['thumb']}}'>
						
					</td>
					<td>{{$v['name']}}</td>
					<td>{{$v['works_type']==1?'photo signboard':'print products'}}
					@if($v['works_type']==1)
						<input class='temp_id' type='hidden' value="{{$v['works_type']}}" />
					@endif
					</td>
					<td>
					<input class='works_id' type='hidden' value="{{$v['works_id']}}" />
					<input class='num' type='text' value="{{$v['num']}}" size=1></td>
					<td>
						<a href="{{URL('works')}}/{{$v['works_id']}}">eidt</a> 
						|
						 <a id='remove' data='{{$v['works_id']}}' href='javascrpt:void()'>remove</a>
					</td>
					</tr>
					@endforeach
					</table>
				</div>
				
				<div id='order-note' style='margin-top:20px;padding:20px'>
				<span style='font-weight: bold;font-size:14px'>note:</span>
				<textarea id='note' rows="" cols="3" class="form-control">{{$ext['order_note']}}</textarea>
				<p style='text-align: right;margin-top:10px'>
				   <button id='send-order' type="button" class="btn btn-primary">
    				 send Order
   					</button>
				</p>
				</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">

	            
	            <form class="form-horizontal" role="form">
				   <div class="form-group">
				      <label for="ship_name" class="col-sm-2 control-label">收件人</label>
				      <div class="col-sm-10">
				         <input type="text" class="form-control" id="ship_name" 
				            placeholder="请输入收件人">
				      </div>
				   </div>
				   <div class="form-group">
				      <label for="zip" class="col-sm-2 control-label">邮编</label>
				      <div class="col-sm-10">
				         <input type="text" class="form-control" id="zip" 
				            placeholder="请输入邮编">
				      </div>
				   </div>
				   
				   	<div class="form-group">
				      <label for="mobile" class="col-sm-2 control-label">电话</label>
				      <div class="col-sm-10">
				         <input type="text" class="form-control" id="mobile" 
				            placeholder="请输入电话">
				      </div>
				   </div>
				   <div class="form-group">
				      <label for="address" class="col-sm-2 control-label">详细地址</label>
				      <div class="col-sm-10">
				       <!--  <input type="text" class="form-control" id="address" 
				            placeholder="请输入详细地址"> --> 
				            <textarea class="form-control" id="address" >
				            
				            </textarea>
				      </div>
				   </div>
				   
				   	<div class="form-group" style='display:none' id='pos-s'>
				      <label for="mobile" class="col-sm-2 control-label">广告牌位置：</label>
				      <div class="col-sm-10">
				         <label class="checkbox-inline">
      <input type="radio" name="position" id="position" 
         value="1" checked> 自行填写
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="position" id="position" 
         value="2"> 默认
   </label>
				      </div>
				   </div>
				   
				   <div class="form-group" style='display:none' id='disp-s'>
				      <label for="address" class="col-sm-2 control-label">安装位置</label>
				      <div class="col-sm-10">
				       <!--  <input type="text" class="form-control" id="address" 
				            placeholder="请输入详细地址"> --> 
				            <textarea class="form-control" id="display_address" >
				            
				            </textarea>
				      </div>
				   </div>
				   </form>
	             

	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">关闭
	            </button>
	            <button type="button" id='sub-order' class="btn btn-primary">
	             		  Send Order
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
	   	</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
<script>
$(function(){
	var project_id = $('#hide-id').html();
	//品牌选择
	$('#brand_type').change(function(){
		var type = $(this).val();
		var post_str = {'_token':"{{csrf_token()}}","type":type};
		 $.ajax({
	            type: 'POST',
	            url: '{{ url('/brand/list') }}',
	            data: post_str,
	            beforeSend: function () {
	                // loading...
	            },
	            success: function (json) {
					if(!json.error)
					{
						//location.href='';
						$('#brand').html('');

						var str = '';
						$.each(json.data,function(i,v){
							str+='<option value='+v.id+'>'+v.name+'</option>';
						})

						$(str).appendTo('#brand');
					}
	            }
	        });
		
	})
	
	//模板搜索
	$('#sub-temp').click(function(){
		var brand_type = $('#brand_type').val();
		var brand = $('#brand').val();
		var temp_type =  $('input[name="type_id"]:checked').val();
		var post_str = {'_token':"{{csrf_token()}}","brand_type":brand_type,"brand":brand,"temp_type":temp_type};

		 $.ajax({
	            type: 'POST',
	            url: '{{ url('/template/search') }}',
	            data: post_str,
	            beforeSend: function () {
	                // loading...
	            },
	            success: function (json) {
					if(!json.error)
					{
						//location.href='';
						$('#dowebok li').remove();
						var str = '';

						var yc = '';
						$.each(json.data,function(i,v){
							if(i>3)
								yc = 'yc';
							str+='<li><a href="http://tcm.com/template/diy/'+v.id+'/'+$('#hide_id').val()+'"><img data-original="'+v.thumb+'" class="tp '+yc+' yf'+i+'" src="'+v.thumb+'"></a></li>';
						})

						$(str).appendTo('#dowebok');

						if(json.data.length == 0)
						{
							$('<li><span style="color:red">NO TEMPLATES</span></li>').appendTo('#dowebok');
						}
						
					}

		            if(json.data.length<5)
					{
						$('.fx-right').hide();
						$('.fx-left').hide();
					}
		            else
		            {
		            	$('.fx-right').show();
						$('.fx-left').show();
			        }
	            }

	        });
			       
	})
	
	$('.addOrder').click(function(){
		var works_id = $(this).attr('data');
		var post_str = {'_token':"{{csrf_token()}}","project_id":project_id,'works_id':works_id};
		
		//打印订单信息
		 $.ajax({
	            type: 'PUT',
	            url: '{{ url('/print/order') }}/'+project_id,
	            data: post_str,
	            beforeSend: function () {
	                // loading...
	            },
	            success: function (json) {
					if(!json.error)
					{
						location.href='';
						
					}
	            }
	        });
	});


	$('#send-order').click(function(){

		$('#myModal').modal({
		      keyboard: true
		   });
		//alert($('.temp_id').val());
	    if($('.temp_id').val() == 1)
	    {	
			 $('#pos-s').show(); 
			 $('#disp-s').show();
			
			 $('#pos-s').find('input[name="position"]').click(function(){
				if($(this).val() == 2)
				{
					 $('#disp-s').hide();
				}
				else
				{
					$('#disp-s').show();
				}
		    })
		}

		 $.ajax({
	            type: 'get',
	            url: '{{ url('/print/getaddress') }}',
	            beforeSend: function () {
	                // loading...
	            },
	            success: function (json) {
					if(!json.error)
					{
						data = json.data;
						var name = data['first_name']+' '+data['last_name'];
						var zip = data['zip'];
						var mobile = data['mobile'];
						var position = data['position'];
						var detail_address = data['detail_address'];
						var address = data['state']+'/'+data['city']+':'+data['address'];
						//var position  = $('#pos-s').find('input[name="position"]:checked').val();
						$('#ship_name').val(name);
						$('#zip').val(zip);
						$('#mobile').val(mobile);
						$('#address').val(address);
						$('#display_address').val(detail_address);
						$('#position').val(position);
						//location.href='';
					}
	            }
	        });

	        $('#sub-order').click(function(){
	        	var work_info = '';
	    		$('.item').each(function(){
	    			work_id = $(this).children().find('.works_id').val();
	    			num = $(this).children().find('.num').val();
	    			work_info =work_info + work_id+','+num+'|';
	    		});
	    		
	    		var name = $('#ship_name').val();;
				var zip = $('#zip').val();;
				var mobile = $('#mobile').val();;
				var address = $('#address').val();
				var position  = $('#pos-s').find('input[name="position"]:checked').val();
				var detail_address  = $('#display_address').val();
	    		var note = $('#note').val();
	    		
	    		var post_str = {'_token':"{{csrf_token()}}","position":position,"detail_address":detail_address,"works_info":work_info,"note":note,"project_id":project_id,"ship_name":name,"ship_zip":zip,"ship_mobile":mobile,"ship_address":address};
	    		//打印订单信息
	    		 $.ajax({
	    	            type: 'PUT',
	    	            url: "{{ url('/print/sendorder') }}",
	    	            data: post_str,
	    	            beforeSend: function () {
	    	                // loading...
	    	            },
	    	            success: function (json) {
	    					if(!json.error)
	    					{
	    						location.href='';
	    					}
	    	            }
	    	        });
		     })
		//var post_str = {'_token':"{{csrf_token()}}","project_id":project_id,'works_id':works_id};
	/*	*/
	});

	//移除订单中作品
	$('#remove').click(function(){
		var work_id = $(this).attr('data');
	})
});



var start=0;
var end = 4;
$('.fx-right').click(function(){
	$('.fx-left').show();
	$('.yf'+start).hide('500');
	$('.yf'+end).show('500');
	start++;
	end++;

	if(end+1>{{count($data)}})
	{
		$('.fx-right').hide();
	}
});


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

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


var start1=0;
var end1 = 4;
$('.fx-right1').click(function(){
	$('.fx-left1').show();
	$('.xf'+start1).hide('500');
	$('.xf'+end1).show('500');
	start1++;
	end1++;

	if(end1+1>{{count($ext['works'])}})
	{
		$('.fx-right1').hide();
	}
});


start1 = end1-4
$('.fx-left1').click(function(){
	start1--
	end1--;
	$('.fx-right1').show();
	$('.xf'+end1).hide('500');
	$('.xf'+start1).show('500');

	if(start1<1)
	{
		$('.fx-left1').hide();
	}
});


/*var viewer = new Viewer(document.getElementById('dowebok'), {
	url: 'data-original'
});	*/

var viewer = new Viewer(document.getElementById('dowebok1'), {
	url: 'data-original'
});	


</script>
@endsection