@extends('layouts/home/temp')



@section('content')

<link href="{{URL::asset('assets/editor/css/editor.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/editor/css/designdialog.css')}}" rel="stylesheet">
<style type="text/css">
	body{background:#f7f7f7;}
    .diy-title-nav {
        background: #4d4d4d none repeat scroll 0 0;
        color: #fff;
        height: 38px;
    	line-height:38px;
        margin-bottom: 0%;
        padding: 0px 10px;
        width: 920px;
    	margin:0 auto;
    	font-size:20px
    }
    .diy-info{width: 920px;color:#fff;margin:0 auto;}
    .diy-info table tr td{height:25px}
.editor-area{display:inline-block;float:left;position:relative;z-index:301;cursor:pointer}
#editor-style td{height:30px}
.edit-h{font-weight:bold}
.stextCon{display:none}
#save{cursor: pointer;
    width:40%;
    padding:3px 30px;
    border-radius:50px;
    background-color: #4d4d4d;
    border: 1px solid #d9cebd;
    font-size: 14px;
    color: #fff;
    display:inline-block;
    line-height: 33px;
    text-align: center;}
    #close{  width:40%;
    padding:3px 30px;
    border-radius:50px;
    background-color: #4d4d4d;
    border: 1px solid #d9cebd;
    font-size: 14px;
    color: #fff;
      display:inline-block;
    line-height: 33px;
    text-align: center;}
</style>
<script type="text/javascript">
    var web_url = '{{ $root_url  }}';
    var templateid = 32346;
    var ratio = 2.71749997138977;
    var convexCodeID = 0;
    var Format = 'V';
    var drawTextImageUrl = web_url + '/diy/font';
    var upload_frm_url = web_url + '/diy/bgupload?pid={{$data['project_id']}}&flag=home&type=';
    var modelWidth = '700px';
    var modelHeight = '450px';
    var locked = '{{$data['locked']}}';
    var TextJson = JSON.parse('{!! $data['textJson'] !!}');
    var logoJson = JSON.parse('{!! $data['logoJson'] !!}');
    var TemplateTransactionJson = JSON.parse('{!! $data['TemplateTransactionJson'] !!}');
    var project_id = @if(isset($data['project_id'])) {{$data['project_id']}} @else 0  @endif;

	var flag = 'home';
	var boxs = "{{ $data['box_name'] }}".split(',');
	var is_show = "{{ $data['box_is_show'] }}".split(',');
	function eidt_n(){

	    if("{{$data['wh_ratio']}}" != '')
	    {

	    	var wh_ratio = "{{$data['wh_ratio']}}";
	    	if(wh_ratio>1.4)
			{
				var height = $('.editor-main-area').height();
				var width = parseInt(height/wh_ratio);
				$('.editor-main-area').css('width',width);
				var m_left = (494-width)/2;	
				$('.editor-main-area').css('margin-left',m_left);
			}
			else
			{
		        var width = $('.editor-main-area').width();
		        var height = parseInt(width*wh_ratio);
		        $('.editor-main-area').css('height',height);
			}
	    }
		if("{{$data['style']}}" != '')
	    {
			if("{{$data['style_f']}}" == '1')
	    {
	    	 makeEdit([1]);

	    }
	    else
	    {
			if("{{$data['style_f']}}" != '')
			{
				var style = "{{$data['style_f']}}";
				var row_bl = "{{$data['row_bl_f']}}";
				var col_bl = "{{$data['col_bl_f']}}";

				arr_style = style.split('-');
				arr_row_bl = row_bl.split('-');
				var arr_col_bl = new Array();
				col_bl_new = col_bl.split(',');

				for(i=0;i<col_bl_new.length;i++)
				{
					val = col_bl_new[i].split('-');
					col_bl_new[i] = val;
				}
				//  console.log(col_bl_new);



				makeEditfm(arr_style,arr_row_bl,col_bl_new);
			}

		
	    }
		    if("{{$data['style']}}" == '1')
		    {
		    	makeEdit([1]);
			 	$('.styleContainer').hide();
				$('#tab0').hide();
				$('#tab1').addClass('ccc');
		    }
		    else
		    {
		        var style = "{{$data['style']}}";
		        var row_bl = "{{$data['row_bl']}}";
		        var col_bl = "{{$data['col_bl']}}";
		
		        arr_style = style.split('-');
		        arr_row_bl = row_bl.split('-');
				var arr_col_bl = new Array();
		        col_bl_new = col_bl.split(',');
		
		        for(i=0;i<col_bl_new.length;i++)
		        {
		        	val = col_bl_new[i].split('-');
		        	col_bl_new[i] = val;
		        }
		        console.log(col_bl_new);
		
		        makeEdit(arr_style,arr_row_bl,col_bl_new);

			
		    }

	    }

	    var style = [1];
		function makeEditfm(style,row_bl,col_bl)
	{
if(style.length == 1)
	    	{
	    		var lock_1 = '';
				var lock_2 = '';
	        	if(locked !='')
	        	{
	            	if(locked.indexOf('1001') != -1)
	            	{
		            	lock_1 = 'locked';
		            }
	            	if(locked.indexOf('2001') != -1)
	            	{
		            	lock_2 = 'locked';
		            }
	            }
	    		css = 'style="width:100%;height:100%;"';
	    		//var edit_area = '<div '+css+' transid="1001" title="tab1" class="editor-area topContainer '+lock_1+'"></div>';

				//edit_area+='<div style="clear:both"></div>';

	    		//$('aaa').appendTo('.editor-main-area');
	    		//$(edit_area).appendTo('.zm .editor-main-area');

	    		var edit_area1 = '<div '+css+' transid="2001" title="tab2" class="editor-area '+lock_2+'"></div>';
				edit_area1+='<div style="clear:both"></div>';
	    		$(edit_area1).appendTo('.fm .editor-main-area');

	    		time = 1;
	    	}
	    	else
	    	{
	    		var sum = eval(style.join('+'));
	    		var count = style.length;
	    	
	    		//var height = 100/count;
	    		 
	    		console.log(style);
	    		//按所选生成可编辑区

	    		//初始化row_heigh
	    		row_height = 100/sum;
	    	
	    		var time = 0;
	    		for(i=0;i<count;i++)
	    		{
	    			var val = style[i];
	    			row_height = row_bl[i]?row_bl[i]:100/sum;
	    			if(val>1)
	    			{
	    				
	    				
	    				//edit_area = '<div style="width:100%;height:'+row_height+'%;">';
	    				edit_area1 = '<div style="width:100%;height:'+row_height+'%;">';
	    				for(var j=0;j<val;j++)
	    				{
	    					width = col_bl[i][j];
	    					css = 'style="width:'+width+'%;height:100%;"';
	    					time++;
	    					time1 = time+count;
	    					var lock_1 = '';
	        				var lock_2 = '';
	    		        	if(locked !='')
	    		        	{
	    		            	if(locked.indexOf('100'+time) != -1)
	    		            	{
	        		            	lock_1 = 'locked';
	        		            }
	    		            	if(locked.indexOf('200'+time) != -1)
	    		            	{
	        		            	lock_2 = 'locked';
	        		            }
	    		            }
	    					//edit_area+= '<div '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area topContainer '+lock_1+'" ></div>';	
	    					edit_area1+= '<div '+css+' transid="200'+time+'" title="tab'+time1+'" class="editor-area '+lock_2+'"></div>';	
							
		    			}
	    				//edit_area+= '</div>';
	    				edit_area1+= '</div>';
	    				//edit_area+='<div style="clear:both"></div>';
	    				edit_area1+='<div style="clear:both"></div>';
	    				//$(edit_area).appendTo('.zm .editor-main-area');
	    				$(edit_area1).appendTo('.fm .editor-main-area');
	    			}
	    			else
	    			{
	    				time++;
	    				time1 = time+count;
	    				var lock_1 = '';
	    				var lock_2 = '';
	    				if(locked !='')
			        	{
	    		        	//alert(locked.indexOf('100'+time))
			            	if(locked.indexOf('100'+time) != -1)
			            	{
	    		            	lock_1 = 'locked';
	    		            }
			            	if(locked.indexOf('200'+time) != -1)
			            	{
	    		            	lock_2 = 'locked';
	    		            }
			            }
	    				
	    				css = 'style="width:100%;height:'+row_height+'%;"';
	    				//var edit_area = '<div  '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area topContainer  '+lock_1+'"></div>';
	    				var edit_area1 = '<div  '+css+' transid="200'+time+'" title="tab'+time1+'" class="editor-area '+lock_2+'"></div>';

	    				edit_area1+='<div style="clear:both"></div>'; 
	    				//edit_area+='<div style="clear:both"></div>'; 
	    				//$(edit_area).appendTo('.zm .editor-main-area');
	    				$(edit_area1).appendTo('.fm .editor-main-area');
	    			}
	    	
	    		}
	    	}
			$('.styleContainer').hide();
			$('#tab0').hide();
			$('#tab1').addClass('ccc');
	    	for(k=1;k<=time;k++)
	    	{
	    		if(k>=5)
	    		{
	    			$('.PlusContainer-contexR-nav1').css('height','79');
	    		}
	    		if(k == 1)
	    		{
	    			active = 'ccc';
	    		}
	    		else
	    		{
	    			active = '';
	    		}
				var box_title='';
				if(typeof(boxs[count+k-1]) == 'undefined' || boxs[count+k-1]==''){
					box_title = 'box'+k
				}else{
					box_title = boxs[count+k-1]
				}

				var is_show_s = 'Y';
				if(typeof(boxs[count+k-1]) == 'undefined'){
					is_show_s = 'Y';
				}else{
					is_show_s = is_show[count+k-1];
				}
	    		$('<div id="tab'+k+'" transid="200'+k+'" class="tabs ">'+box_title+'</div>').appendTo('#nav-editor');
			}
	}


	    function makeEdit(style,row_bl,col_bl){
	    	if(style.length == 1)
	    	{
	    		var lock_1 = '';
				var lock_2 = '';
	        	if(locked !='')
	        	{
	            	if(locked.indexOf('1001') != -1)
	            	{
		            	lock_1 = 'locked';
		            }
	            	if(locked.indexOf('2001') != -1)
	            	{
		            	lock_2 = 'locked';
		            }
	            }
	    		css = 'style="width:100%;height:100%;"';
	    		var edit_area = '<div '+css+' transid="1001" title="tab1" class="editor-area topContainer '+lock_1+'"></div>';

				edit_area+='<div style="clear:both"></div>';

	    		//$('aaa').appendTo('.editor-main-area');
	    		$(edit_area).appendTo('.zm .editor-main-area');

	    		var edit_area1 = '<div '+css+' transid="2001" title="tab2" class="editor-area '+lock_2+'"></div>';
				//edit_area1+='<div style="clear:both"></div>';
	    		//$(edit_area1).appendTo('.fm .editor-main-area');

	    		time = 1;
	    	}
	    	else
	    	{
	    		var sum = eval(style.join('+'));
	    		var count = style.length;
	    	
	    		//var height = 100/count;
	    		 
	    		console.log(style);
	    		//按所选生成可编辑区

	    		//初始化row_heigh
	    		row_height = 100/sum;
	    	
	    		var time = 0;
	    		for(i=0;i<count;i++)
	    		{
	    			var val = style[i];
	    			row_height = row_bl[i]?row_bl[i]:100/sum;
	    			if(val>1)
	    			{
	    				
	    				
	    				edit_area = '<div style="width:100%;height:'+row_height+'%;">';
	    				edit_area1 = '<div style="width:100%;height:'+row_height+'%;">';
	    				for(var j=0;j<val;j++)
	    				{
	    					width = col_bl[i][j];
	    					css = 'style="width:'+width+'%;height:100%;"';
	    					time++;
	    					time1 = time+count;
	    					var lock_1 = '';
	        				var lock_2 = '';
	    		        	if(locked !='')
	    		        	{
	    		            	if(locked.indexOf('100'+time) != -1)
	    		            	{
	        		            	lock_1 = 'locked';
	        		            }
	    		            	if(locked.indexOf('200'+time) != -1)
	    		            	{
	        		            	lock_2 = 'locked';
	        		            }
	    		            }
	    					edit_area+= '<div '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area topContainer '+lock_1+'" ></div>';	
	    					//edit_area1+= '<div '+css+' transid="200'+time+'" title="tab'+time1+'" class="editor-area '+lock_2+'"></div>';	
							
		    			}
	    				edit_area+= '</div>';
	    				//edit_area1+= '</div>';
	    				edit_area+='<div style="clear:both"></div>';
	    				//edit_area1+='<div style="clear:both"></div>';
	    				$(edit_area).appendTo('.zm .editor-main-area');
	    				//$(edit_area1).appendTo('.fm .editor-main-area');
	    			}
	    			else
	    			{
	    				time++;
	    				time1 = time+count;
	    				var lock_1 = '';
	    				var lock_2 = '';
	    				if(locked !='')
			        	{
	    		        	//alert(locked.indexOf('100'+time))
			            	if(locked.indexOf('100'+time) != -1)
			            	{
	    		            	lock_1 = 'locked';
	    		            }
			            	if(locked.indexOf('200'+time) != -1)
			            	{
	    		            	lock_2 = 'locked';
	    		            }
			            }
	    				
	    				css = 'style="width:100%;height:'+row_height+'%;"';
	    				var edit_area = '<div  '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area topContainer  '+lock_1+'"></div>';
	    				//var edit_area1 = '<div  '+css+' transid="200'+time+'" title="tab'+time1+'" class="editor-area '+lock_2+'"></div>';

	    				//edit_area1+='<div style="clear:both"></div>'; 
	    				edit_area+='<div style="clear:both"></div>'; 
	    				$(edit_area).appendTo('.zm .editor-main-area');
	    				//$(edit_area1).appendTo('.fm .editor-main-area');
	    			}
	    	
	    		}
	    	}
			$('.styleContainer').hide();
			$('#tab0').hide();
			$('#tab1').addClass('ccc');
	    	for(k=1;k<=time;k++)
	    	{
	    		if(k>=5)
	    		{
	    			$('.PlusContainer-contexR-nav1').css('height','79');
	    		}
	    		if(k == 1)
	    		{
	    			active = 'ccc';
	    		}
	    		else
	    		{
	    			active = '';
	    		}
				var box_title='';
				if(typeof(boxs[k-1]) == 'undefined' || boxs[k-1]==''){
					box_title = 'box'+k
				}else{
					box_title = boxs[k-1]
				}
				var is_show_s = 'Y';
				if(typeof(boxs[k-1]) == 'undefined'){
					is_show_s = 'Y';
				}else{
					is_show_s = is_show[k-1];
				}
				if(is_show_s == 'Y')
	    			$('<div id="tab'+k+'" transid="100'+k+'" class="tabs ">'+box_title+'</div>').appendTo('#nav-editor');
	    		//$('.PlusContainer-contexR-nav1').css('height','79');
	    	}
		/*	if("{{$data['dsm']}}" !=1)
			{
		    	for(k=1;k<=time;k++)
		    	{
		    		if(k == count+1)
		    		{
		    			active = 'ccc';
		    		}
		    		else
		    		{
		    			active = '';
		    		}
		    		if(time == 1)
			    		count =1;
		    		$('<div id="tab'+k+'" transid="200'+k+'" class="tabs">Box'+(k+count)+'</div>').appendTo('#nav-editor');
		    		//$('.PlusContainer-contexR-nav1').css('height','79');
		    	}
			}*/
	    		
	    }
	        
	}
/*
		if("{{$data['style']}}" != '')
	    {
		    if("{{$data['style']}}" == '1')
		    {
		    	makeEdit([1]);
			 	$('.styleContainer').hide();
				$('#tab0').hide();
				$('#tab1').addClass('ccc');
		    }
		    else
		    {
		        var style = "{{$data['style']}}";
		        var row_bl = "{{$data['row_bl']}}";
		        var col_bl = "{{$data['col_bl']}}";
		
		        arr_style = style.split('-');
		        arr_row_bl = row_bl.split('-');
				var arr_col_bl = new Array();
		        col_bl_new = col_bl.split(',');
		
		        for(i=0;i<col_bl_new.length;i++)
		        {
		        	val = col_bl_new[i].split('-');
		        	col_bl_new[i] = val;
		        }
		        console.log(col_bl_new);
		
		        makeEdit(arr_style,arr_row_bl,col_bl_new);

			
		    }

	    }

	    var style = [1];

	    function makeEdit(style,row_bl,col_bl){
	    	if(style.length == 1)
	    	{
	    		css = 'style="width:100%;height:100%;"';
	    		var edit_area = '<div id="topContainer" '+css+' transid="1001" title="tab1" class="editor-area"></div>';

	    		//$('aaa').appendTo('.editor-main-area');
	    		$(edit_area).appendTo('.editor-main-area');

	    		time = 1;
	    	}
	    	else
	    	{
	    		var sum = eval(style.join('+'));
	    		var count = style.length;
	    	
	    		//var height = 100/count;
	    		 
	    		console.log(style);
	    		//按所选生成可编辑区

	    		//初始化row_heigh
	    		row_height = 100/sum;
	    	
	    		var time = 0;
	    		for(i=0;i<count;i++)
	    		{
	    			var val = style[i];
	    	
	    			if(val>1)
	    			{
	    				row_height = row_bl[i]?row_bl[i]:100/sum;
	    				
	    				edit_area = '<div style="width:100%;height:'+row_height+'%;">';
	    				for(var j=0;j<val;j++)
	    				{
	    					width = col_bl[i][j];
	    					css = 'style="width:'+width+'%;height:100%;"';
	    					time++;
	    					edit_area+= '<div id="topContainer" '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area"></div>';	
	    				}
	    				edit_area+= '</div>';
	    	
	    				$(edit_area).appendTo('.editor-main-area');
	    			}
	    			else
	    			{
	    				time++;
	    				css = 'style="width:100%;height:'+row_height+'%;"';
	    				var edit_area = '<div id="topContainer" '+css+' transid="100'+time+'" title="tab'+time+'" class="editor-area"></div>';
	    				$(edit_area).appendTo('.editor-main-area');
	    			}
	    	
	    		}
	    	}
			$('.styleContainer').hide();
			$('#tab0').hide();
			$('#tab1').addClass('ccc');
	    	for(k=1;k<=time;k++)
	    	{
	    		if(k>=5)
	    		{
	    			$('.PlusContainer-contexR-nav1').css('height','79');
	    		}
	    		if(k == 1)
	    		{
	    			active = 'ccc';
	    		}
	    		else
	    		{
	    			active = '';
	    		}
	    		$('<div id="tab'+k+'" transid="100'+k+'" class="tabs ">Tab'+k+'</div>').appendTo('#nav-editor');
	    		//$('.PlusContainer-contexR-nav1').css('height','79');
	    	}
	    		
	    }
	        
	})*/
    
</script>

<div id="main">
    <div class="container n">
        <div class="content" style='margin-top:1%'>
            <div class="diy-title-nav">
                <span class="step">Artwork Generator</span>
            </div>
			<div class='diy-info' style='background:#586a73;padding:10px'>
			<table style='color:#fff;'>
			<tr><td style='font-weight: bold'>Campaign Name</td><td style='font-size: 14px'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$data['prj_name']}}</td></tr>
			<tr><td style='font-weight: bold'>Template</td><td style='font-size: 14px'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$data['template']}}</td></tr>
			</table>
			</div>
			<div style='height:10px;background: #f7f7f7;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;width:920px;margin:0 auto'></div>
            <div style="background-color:#f7f7f7;">
                <div id="PlusContainer" style='height:707px;'>
                    <div id="overAll"></div>
					<div style="position:absolute;height: 707px;width:496px;z-index:9999">

					</div>
 					<div class="PlusContainer-contexL zm" id="editor_main" ><div class="editor-main-area " style="width:99%;height:99%;margin:0.5%" >
                    </div></div>
					<div class="PlusContainer-contexL fm" id="editor_main1" style='display:none'><div class="editor-main-area" style="width:494px;height:99%;margin:0.5%" >
					</div></div>

    <div class="PlusContainer-contexR" style='background:#f1eee9'>
        <div class="PlusContainer-contexR-1" style=" overflow:hidden;height:66px" >

            <div class="r1" style=" width:50%;">
                <div id="charuxiang" class="r2">Insert</div>
                <div class="r3" style='padding-left:25px'>
                    <div class="t1 gt_fl" id="t1" style="margin-left:70px">
                        <div id="cpic1" class="cpic"></div>
                        <!-- <span>Image</span> -->
                    </div>
					<!-- <div class="t2 gt_fl" id="t2">
                         <div id="cfont1" class="cfont"></div>
                           <span>Text</span>
                    </div>-->
                   <!--  <div class="t3 gt_fl" id="t3">
                        <div id="cewm1" class="cewm"></div>
                        <span>QR Code</span>
                    </div> -->

                </div>
            </div>

            <div class="r1" style=" width:50%;">
                <div id="r2" class="r2">Tools</div>
                <div class="r3 nike" style=" height:56px; padding-top:3px;padding-left:30px">
                    <div id="g4" class="g4 gege">BG</div>
                   <!-- <div id="g2" class="g2 gege">Reset</div>  --> 
                    <div id="g3" class="g3 gege">Delete</div>
                </div>
            </div>

            <div class="gt_clear0"></div>
        </div>

        <div class="PlusContainer-contexR-nav1">
            <div class="f1">
                <div class="RgbCon gt_hidden" style=''>
                    <div class="Rgbcolor2-content">
                        <div style="background-color: #251E1C" cmyk="0,0,0,100" data-color="#251E1C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #403D3C" cmyk="0,0,0,90" data-color="#403D3C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #595858" cmyk="0,0,0,80" data-color="#595858" class="Rgbcolor2Square"></div>
                        <div style="background-color: #717071" cmyk="0,0,0,70" data-color="#717071" class="Rgbcolor2Square"></div>
                        <div style="background-color: #878788" cmyk="0,0,0,60" data-color="#878788" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9E9E9F" cmyk="0,0,0,50" data-color="#9E9E9F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B4B4B4" cmyk="0,0,0,40" data-color="#B4B4B4" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C8C8C9" cmyk="0,0,0,30" data-color="#C8C8C9" class="Rgbcolor2Square"></div>
                        <div style="background-color: #DCDCDC" cmyk="0,0,0,20" data-color="#DCDCDC" class="Rgbcolor2Square"></div>
                        <div style="background-color: #EEEFEF" cmyk="0,0,0,10" data-color="#EEEFEF" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFFFFF" cmyk="0,0,0,0" data-color="#FFFFFF" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFFCD5" cmyk="0,0,20,0" data-color="#FFFCD5" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFF9AE" cmyk="0,0,40,0" data-color="#FFF9AE" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFF684" cmyk="0,0,60,0" data-color="#FFF684" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFF200" cmyk="0,0,100,0" data-color="#FFF200" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FFCB03" cmyk="0,20,100,0" data-color="#FFCB03" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F2D9C7" cmyk="0,20,20,0" data-color="#F2D9C7" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FED09E" cmyk="0,20,40,0" data-color="#FED09E" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F6ADCD" cmyk="0,40,0,0" data-color="#F6ADCD" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F8ABAD" cmyk="0,40,20,0" data-color="#F8ABAD" class="Rgbcolor2Square"></div>
                        <div style="background-color: #FAA74A" cmyk="0,40,80,0" data-color="#FAA74A" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F9AA8F" cmyk="0,40,40,0" data-color="#F9AA8F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F9A870" cmyk="0,40,60,0" data-color="#F9A870" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F48480" cmyk="0,60,40,0" data-color="#F48480" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F58465" cmyk="0,60,60,0" data-color="#F58465" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F58345" cmyk="0,60,80,0" data-color="#F58345" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F5821F" cmyk="0,60,100,0" data-color="#F5821F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #F05A72" cmyk="0,80,40,0" data-color="#F05A72" class="Rgbcolor2Square"></div>
                        <div style="background-color: #EC008C" cmyk="0,100,0,0" data-color="#EC008C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #ED1551" cmyk="0,100,60,0" data-color="#ED1551" class="Rgbcolor2Square"></div>
                        <div style="background-color: #ED1B23" cmyk="0,100,100,0" data-color="#ED1B23" class="Rgbcolor2Square"></div>
                        <div style="background-color: #DBD374" cmyk="0,0,60,20" data-color="#DBD374" class="Rgbcolor2Square"></div>
                        <div style="background-color: #D0BDC9" cmyk="0,20,0,20" data-color="#D0BDC9" class="Rgbcolor2Square"></div>
                        <div style="background-color: #CFB66A" cmyk="0,20,60,20" data-color="#CFB66A" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C4999A" cmyk="0,40,20,20" data-color="#C4999A" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C49AB2" cmyk="0,40,0,20" data-color="#C49AB2" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C4955F" cmyk="0,40,60,20" data-color="#C4955F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C7C4E2" cmyk="20,20,0,0" data-color="#C7C4E2" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C7A0CA" cmyk="20,40,0,0" data-color="#C7A0CA" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C77DB5" cmyk="20,60,0,0" data-color="#C77DB5" class="Rgbcolor2Square"></div>
                        <div style="background-color: #D2E288" cmyk="20,0,60,0" data-color="#D2E288" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B97385" cmyk="0,60,20,20" data-color="#B97385" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B9726D" cmyk="0,60,40,20" data-color="#B9726D" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B97136" cmyk="0,60,80,20" data-color="#B97136" class="Rgbcolor2Square"></div>
                        <div style="background-color: #C656A0" cmyk="20,80,0,0" data-color="#C656A0" class="Rgbcolor2Square"></div>
                        <div style="background-color: #CCE7D3" cmyk="20,0,20,0" data-color="#CCE7D3" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A98FAF" cmyk="20,40,0,20" data-color="#A98FAF" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9AA15F" cmyk="20,0,60,20" data-color="#9AA15F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A06C97" cmyk="20,60,0,20" data-color="#A06C97" class="Rgbcolor2Square"></div>
                        <div style="background-color: #BDC799" cmyk="20,0,40,20" data-color="#BDC799" class="Rgbcolor2Square"></div>
                        <div style="background-color: #BCCABB" cmyk="20,0,20,20" data-color="#BCCABB" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B3B19C" cmyk="0,0,20,40" data-color="#B3B19C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #B2AF7F" cmyk="0,0,40,40" data-color="#B2AF7F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #984481" cmyk="20,80,0,20" data-color="#984481" class="Rgbcolor2Square"></div>
                        <div style="background-color: #BCCCD8" cmyk="20,0,0,20" data-color="#BCCCD8" class="Rgbcolor2Square"></div>
                        <div style="background-color: #AA9BA5" cmyk="0,20,0,40" data-color="#AA9BA5" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A99774" cmyk="0,20,40,40" data-color="#A99774" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A17D7F" cmyk="0,40,20,40" data-color="#A17D7F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9E76B4" cmyk="40,60,0,0" data-color="#9E76B4" class="Rgbcolor2Square"></div>
                        <div style="background-color: #985E7F" cmyk="0,60,0,40" data-color="#985E7F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A2228E" cmyk="40,100,0,0" data-color="#A2228E" class="Rgbcolor2Square"></div>
                        <div style="background-color: #985C43" cmyk="0,60,60,40" data-color="#985C43" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9B95C9" cmyk="40,40,0,0" data-color="#9B95C9" class="Rgbcolor2Square"></div>
                        <div style="background-color: #A6CE38" cmyk="40,0,100,0" data-color="#A6CE38" class="Rgbcolor2Square"></div>
                        <div style="background-color: #8B7690" cmyk="20,40,0,40" data-color="#8B7690" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9BD3AE" cmyk="40,0,40,0" data-color="#9BD3AE" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9AA599" cmyk="20,0,20,40" data-color="#9AA599" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9AA37E" cmyk="20,0,40,40" data-color="#9AA37E" class="Rgbcolor2Square"></div>
                        <div style="background-color: #7F4081" cmyk="40,80,0,20" data-color="#7F4081" class="Rgbcolor2Square"></div>
                        <div style="background-color: #9AA7B1" cmyk="20,0,0,40" data-color="#9AA7B1" class="Rgbcolor2Square"></div>
                        <div style="background-color: #8B84AC" cmyk="40,40,0,20" data-color="#8B84AC" class="Rgbcolor2Square"></div>
                        <div style="background-color: #8DD8F8" cmyk="40,0,0,0" data-color="#8DD8F8" class="Rgbcolor2Square"></div>
                        <div style="background-color: #878575" cmyk="0,0,20,60" data-color="#878575" class="Rgbcolor2Square"></div>
                        <div style="background-color: #81736B" cmyk="0,20,20,60" data-color="#81736B" class="Rgbcolor2Square"></div>
                        <div style="background-color: #807157" cmyk="0,20,40,60" data-color="#807157" class="Rgbcolor2Square"></div>
                        <div style="background-color: #7A5F6E" cmyk="0,40,0,60" data-color="#7A5F6E" class="Rgbcolor2Square"></div>
                        <div style="background-color: #704894" cmyk="60,80,0,0" data-color="#704894" class="Rgbcolor2Square"></div>
                        <div style="background-color: #746BAB" cmyk="60,60,0,0" data-color="#746BAB" class="Rgbcolor2Square"></div>
                        <div style="background-color: #6C8CC7" cmyk="60,40,0,0" data-color="#6C8CC7" class="Rgbcolor2Square"></div>
                        <div style="background-color: #6D527C" cmyk="40,60,0,40" data-color="#6D527C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #78859F" cmyk="40,20,0,40" data-color="#78859F" class="Rgbcolor2Square"></div>
                        <div style="background-color: #69586D" cmyk="20,40,0,60" data-color="#69586D" class="Rgbcolor2Square"></div>
                        <div style="background-color: #623D81" cmyk="60,80,0,20" data-color="#623D81" class="Rgbcolor2Square"></div>
                        <div style="background-color: #747E86" cmyk="20,0,0,60" data-color="#747E86" class="Rgbcolor2Square"></div>
                        <div style="background-color: #7E9897" cmyk="40,0,20,40" data-color="#7E9897" class="Rgbcolor2Square"></div>
                        <div style="background-color: #57516C" cmyk="40,40,0,60" data-color="#57516C" class="Rgbcolor2Square"></div>
                        <div style="background-color: #59574B" cmyk="0,0,20,80" data-color="#59574B" class="Rgbcolor2Square"></div>
                        <div style="background-color: #5F7372" cmyk="40,0,20,60" data-color="#5F7372" class="Rgbcolor2Square"></div>
                        <div style="background-color: #56638D" cmyk="60,40,0,40" data-color="#56638D" class="Rgbcolor2Square"></div>
                        <div style="background-color: #74A694" cmyk="60,0,40,20" data-color="#74A694" class="Rgbcolor2Square"></div>
                        <div style="background-color: #75A374" cmyk="60,0,60,20" data-color="#75A374" class="Rgbcolor2Square"></div>
                        <div style="background-color: #72A7B3" cmyk="60,0,20,20" data-color="#72A7B3" class="Rgbcolor2Square"></div>
                        <div style="background-color: #4C5257" cmyk="20,0,0,80" data-color="#4C5257" class="Rgbcolor2Square"></div>
                        <div style="background-color: #5E897B" cmyk="60,0,40,40" data-color="#5E897B" class="Rgbcolor2Square"></div>
                        <div style="background-color: #55C5D0" cmyk="60,0,20,0" data-color="#55C5D0" class="Rgbcolor2Square"></div>
                        <div style="background-color: #2E3092" cmyk="100,100,0,0" data-color="#2E3092" class="Rgbcolor2Square"></div>
                        <div style="background-color: #009FE6" cmyk="100,0,0,0" data-color="#009FE6" class="Rgbcolor2Square"></div>
                        <div style="background-color: #00A650" cmyk="100,0,100,0" data-color="#00A650" class="Rgbcolor2Square"></div>
                        <div style="background-color: #0095DA" cmyk="100,20,0,0" data-color="#0095DA" class="Rgbcolor2Square"></div>
                    </div>
                    <div class="Rgbcolor2-cmyk">
                        <div class="Rgbcolor2-select" style="background-color: rgb(37, 30, 28);">
                        </div>
                      <!--  <div class="Rgbcolor2input">C：<input type="text" data-type="c" class="Rgbcolor2-c"></div>
                        <div class="Rgbcolor2input">M：<input type="text" data-type="m" class="Rgbcolor2-m"></div>
                        <div class="Rgbcolor2input">Y：<input type="text" data-type="y" class="Rgbcolor2-y"></div>
                        <div class="Rgbcolor2input">K：<input type="text" data-type="k" class="Rgbcolor2-k"></div> -->
                    </div>
                </div>
                <!--文字项-->
                <div class="sss gt_hidden" style='top:-12px'>
                    <a data-v="14">Default</a>

                    <a data-v="8">8</a>

                    <a data-v="9">9</a>

                    <a data-v="10">10</a>

                    <a data-v="11">11</a>

                    <a data-v="12">12</a>

                    <a data-v="13">13</a>

                    <a data-v="14">14</a>

                    <a data-v="15">15</a>

                    <a data-v="16">16</a>

                    <a data-v="17">17</a>

                    <a data-v="18">18</a>

                    <a data-v="19">19</a>

                    <a data-v="20">20</a>

                    <a data-v="21">21</a>

                    <a data-v="22">22</a>

                    <a data-v="23">23</a>

                    <a data-v="24">24</a>

                    <a data-v="25">25</a>

                    <a data-v="26">26</a>

                    <a data-v="27">27</a>

                    <a data-v="28">28</a>

                    <a data-v="29">29</a>

                    <a data-v="30">30</a>

                    <a data-v="31">31</a>

                    <a data-v="32">32</a>

                    <a data-v="33">33</a>

                    <a data-v="34">34</a>

                    <a data-v="35">35</a>

                    <a data-v="36">36</a>

                    <a data-v="37">37</a>

                    <a data-v="38">38</a>

                    <a data-v="39">39</a>

                    <a data-v="40">40</a>

                    <a data-v="41">41</a>

                    <a data-v="42">42</a>

                    <a data-v="43">43</a>

                    <a data-v="44">44</a>

                    <a data-v="45">45</a>

                    <a data-v="46">46</a>

                    <a data-v="47">47</a>

                    <a data-v="48">48</a>

                    <a data-v="49">49</a>

                </div>
                <div class="fontFamily gt_hidden" style='top:-12px;width:200px'>
                	@foreach($font_file as $k=>$v)
                    <a data-value="{{$font_full[$k]}}" style="background-position:-3px 0px;">{{$v}}</a>
                    @endforeach
                </div>
                <div class="logoLayer gt_hidden">
                    <div id="backgroundImage" class="backgroundImage">BG-image</div>
                    <div id="uploadLogo" class="uploadLogo">Image</div>
                </div>
            </div>
            <div id='nav-editor'>
             	<div id="tab0" transid="1000" class="tabs ccc">Style</div>
	            <!-- <div id="tab1" transid="1001" class="tabs ccc">Tab1</div>
	            <div id="tab2" transid="1002" class="tabs">Tab2</div>
	            <div id="tab3" transid="1003" class="tabs">Tab3</div>
	            <div id="tab4" transid="1004" class="tabs">Tab4</div>
	            <div id="tab5" transid="1005" class="tabs">Tab5</div> 
	            <div id="tab5" transid="1005" class="tabs">Tab5</div> -->
            </div>
        </div>
        <div class="PlusContainer-contexR-nav2">
        <p style='text-align:center;@if($data['dsm']==2) display:block @else display:none @endif' id='zfm'>
                 	<button id='zm' style='cursor:pointer;'>front</button> 
                 	&nbsp;&nbsp;<button id='fm' style='cursor:pointer'>back</button></p>
         	<div class="styleContainer" id="sstyleContainer">
         	<p style='font-size: 14px;font-weight:bold'>STYLE SETTING:</p>
         		<table id='editor-style'>
         		<tr>
         			<td class='edit-h'>rows：</td><td><input class='style-rows' type='text' size=6 value=1></td>
         		</tr>
         <!--  	<tr>
         		<td>first rows：</td><td><input type='text' size=4> cols;</td>
         		<td>proportion：</td><td><input type='text' size=2> : <input type='text' size=2> : <input type='text' size=2></td>
         		</tr>
         		<tr>
         		<td>second rows：</td><td><input type='text' size=4> cols;</td>
         		         		<td>proportion：</td><td><input type='text' size=2> : <input type='text' size=2> </td>
         		
         		</tr>
         		<tr>
         		<td>third rows：</td><td><input type='text' size=4> 	cols;</td>
         		</tr>-->	
         		</table>
         		<div style='text-align:center;margin-top:10px'>
         			<button id='edit-view'>submit</button>
         		</div>
         	</div>
            <div class="slogoContainer" id="slogoContainer"></div>
            <div class="stextContainer" id="stextContainer"></div>
        </div>
        <div class="PlusContainer-contexR-2">
            <div class="" style='margin-left:5px'>
             
             <div class='work-btn' style='margin-top:10px'>
             	<div id="save" name="save_mp" class="">Save Design</div>
             	<div id="close" name="save_mp" class="" style='cursor:pointer'>Close</div>
             	<p style='text-align: right;margin-top:10px;margin-right:30px'>Power by <span style='font-weight: bold'>Touchln Media</span></p>
             </div>
            <!--  	<div id="save-pdf" name="save-pdf" class="printf gt_fl" style='width:80px'>预览</div>--> 
             	
              <!-- <div id="publish" name="print_mp" class="printf gt_fl" style='width:80px'>发布</div> -->  
               
            </div>
        </div>
    </div>

    {!! csrf_field() !!}
    <input type="hidden" id="template_id" value="" />
</div>
</div>
</div>
</div>

<div style='height:1%;background:#f7f7f7'>

</div>
</div>


	<div id='zz' style='display:none;position: absolute;width:100%;height:120%;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>
<script type="text/javascript" src="{{URL::asset('assets/editor/js/sea.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('assets/editor/js/jquery.simplemodal.1.4.4.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('assets/editor/js/gtcommondialog.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('assets/editor/js/mpsheji.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('assets/js/html2canvas.min.js')}}"></script>
<script>
//保存操作: 弹出作品名称
$(function(){
	$('#zm').click(function(){
		var len = $('.tabs').length - 1;
		$('.zm').show();
		$('#zm').attr('data',1);
		//$('.tabs:gt('+ (len / 2) +')').hide();
		//$('.tabs:lt('+ ((len / 2)+1) +')').show()
		$('.tabs').each(function(){
			if($(this).attr('transid').indexOf('200') === 0)
			{
				$(this).hide();
			}
			else
			{
				$(this).show();
			}
		})
		$('.tabs:eq(0)').hide();
		$('#fm').attr('data',0);
		$('.fm').hide();
	})
	
	$('#fm').click(function(){
		var len = $('.tabs').length - 1;
		$('.fm').show();
		$('#fm').attr('data',1);
		//$('.tabs:lt('+ ((len / 2)+1) +')').hide()
		//$('.tabs:gt('+ (len / 2) +')').show();
		$('.tabs').each(function(){
			if($(this).attr('transid').indexOf('100') ===0)
			{
				$(this).hide();
			}
			else
			{
				$(this).show();
			}
		})
		$('#zm').attr('data',0);
		$('.zm').hide();
	})
	
	function getChild(id)
	{
		//alert($('#editor_main').children().length);
		if($(id).children().length>0)
		{
			var real_width ;
			$(id).children().each(function(){
				//console.log($(this)[0].getBoundingClientRect());
				real_width = $(this)[0].getBoundingClientRect();
				
				$(this).css('width',real_width.width);
				$(this).css('height',$(this).height());
				getChild(this)
				
			})
		}
	}
	
	$('#save-pdf').click(function(){
		getPdf('y',0);
	})
	
	function getPdf(is_download,work_id)
	{
		//$('*').css('border','none');
		$('.context-c').removeClass('context-c');
		//console.log('11' + $('.editor-main-area').html());
		$("body").click();
		//console.log('22'+$('.editor-main-area').html());

		getChild('#editor_main')
		//console.log('34' +$('.editor-main-area').html());
		getChild('#editor_main1')
	
	var wh_ratio = "{{$data['wh_ratio']}}";
		if(wh_ratio >1.4)
		{
			//data.r_width = $('.editor-main-area').width();
			$('.editor-main-area').css('margin-left','0.5%'); //修正舞台数据
		}
	var type_id = '{{$data['type_id']}}';
		//alert(type_id);return false;
		//获取所需数据
		if("{{$data['dsm']}}" ==2)
		{
			var pdf_data = $('#editor_main').html()+$('#editor_main1').html();
			if(type_id == '1') //双面广告牌做特殊处理
			{
				var fm = "<div style='height:10mm'></div>"+$('#editor_main1').find('.editor-main-area').html();
				//$('#editor_main').find('.editor-main-area').after(fm);
				$(fm).appendTo('#editor_main .editor-main-area');
				var pdf_data = $('#editor_main').html();
			}
			else
			{
				var fm = "<div style='height:3mm'></div>"+$('#editor_main1').find('.editor-main-area').html();
				//$('#editor_main').find('.editor-main-area').after(fm);
				$(fm).appendTo('#editor_main .editor-main-area');
				var pdf_data = $('#editor_main').html();
			}
		}
		else
		{
			var pdf_data = $('#editor_main').html();
		}



		//pdf_data = "<div class='PlusContainer-contexL'>" + pdf_data +"</div>"
		
		console.log(pdf_data);

		if(work_id == 0)
		{
			work_id = "{{$data['works_id']}}";
		}
		
		
		var data = {
				
	            _token: document.getElementsByName('_token')[0].value,
	            work_id:work_id,
	            type_id: {{$data['type_id']}},
	            wh_ratio:"{{$data['wh_ratio']}}",
	            pdf_data:pdf_data,
	            is_download:is_download
	        };
		var wh_ratio = "{{$data['wh_ratio']}}";
		if(wh_ratio >1.4)
		{
			data.r_width = $('.editor-main-area').width();
			$('.editor-main-area').css('margin-left','0.5%'); //修正舞台数据
		}
	    //生成预览
	    $.ajax({
	        type: 'POST',
	        url: '{{ url('works/savepdf') }}',
	        data: data,
	        beforeSend: function () {
	            // loading...
	        	if(is_download =='y')
	            {
	        	 	$('#zz').show();
	            }
	        },
	        success: function (json) {
	            //alert( json.error == 0 ? '保存成功' : json.msg );
	        	if(is_download =='y')
	            {
		        	 $('#zz').hide();
	
		            	window.open(json.url,'_blank')
	            }
	        	// $('#zz').hide();
			    location.href = "{{URL('project/detail')}}"+"/"+"{{$data['project_id']}}";

	        }


		});

	}

	$('#save').click(function(){
		var myid = "{{$data['works_id']}}";
		if(myid =='')
		{
		   var works_name = prompt("{{trans('common.temp_worksname_required')}}");
		}
		else
		{
			works_name = "{{$data['name']}}";
		}
			

		if(works_name)
		{
			  var id = parseInt($('#works_id').val());
			    var ajax_type = (id > 0) ? 'PUT' : 'POST';

			    // 先截图再进行保存
			    $('.topContainer').removeClass('context-c');
				
		        $('.zm').show();
		        $('.fm').hide();
			    html2canvas(document.getElementById('editor_main')).then(function (canvas) {
			        var thumb = canvas.toDataURL();
					if("{{$data['dsm']}}" ==2){
						$('#editor_main').css('display','none')
						$('#editor_main1').css('display','block')

						html2canvas(document.getElementById('editor_main1')).then(function (canvas) {
							var thumb_fm = canvas.toDataURL();
							$('.content').css('margin-top','-2%');
							var data = {
								id: myid,
								name: works_name,
								project_id: {{$data['project_id']}},
								type_id: {{$data['template_id']}},
								textJson: JSON.stringify(TextJson),
								logoJson: JSON.stringify(logoJson),
								TemplateTransactionJson: JSON.stringify(TemplateTransactionJson),
								thumb: thumb,
								thumb_fm: thumb_fm,
								_token: document.getElementsByName('_token')[0].value

							};



							$.ajax({
								type: ajax_type,
								url: '{{ url('/works/store') }}',
								data: data,
								dataType:'json',
								beforeSend: function () {
									// loading...
									$('#zz').show();
								},
								success: function (json) {
									//$('#zz').hide();
									if("{{$data['dsm']}}" ==2)
									{
										$('#editor_main1').css('display','block');
									}
									else
									{
										$('#editor_main1').remove();
									}
									$('#works_id').val(json.id);
									getPdf('n',json.id);

									//alert( json.error == 0 ? '保存成功' : json.msg );


								}
							});
						})
					}else{
						$('.content').css('margin-top','-2%');
						var data = {
							id: myid,
							name: works_name,
							project_id: {{$data['project_id']}},
							type_id: {{$data['template_id']}},
							textJson: JSON.stringify(TextJson),
							logoJson: JSON.stringify(logoJson),
							TemplateTransactionJson: JSON.stringify(TemplateTransactionJson),
							thumb: thumb,
							thumb_fm: '',
							_token: document.getElementsByName('_token')[0].value

						};



						$.ajax({
							type: ajax_type,
							url: '{{ url('/works/store') }}',
							data: data,
							dataType:'json',
							beforeSend: function () {
								// loading...
								$('#zz').show();
							},
							success: function (json) {
								//$('#zz').hide();
								if("{{$data['dsm']}}" ==2)
								{
									$('#editor_main1').css('display','block');
								}
								else
								{
									$('#editor_main1').remove();
								}
								$('#works_id').val(json.id);
								getPdf('n',json.id);

								//alert( json.error == 0 ? '保存成功' : json.msg );


							}
						});
					}

			    });
		}
		else
		{
			alert("{{trans('common.temp_worksname_required')}}");
			return false;
		}
	});
	$('#save1').click(function () {

	    var id = parseInt($('#works_id').val());
	    var ajax_type = (id > 0) ? 'PUT' : 'POST';

	    // 先截图再进行保存
	    $('#topContainer').removeClass('context-c');

	    html2canvas(document.getElementById('editor_main')).then(function (canvas) {
	        var thumb = canvas.toDataURL();
			if("{{$data['dsm']}}" ==2){
				$('#editor_main').css('display','none')
				$('#editor_main1').css('display','block')
			}

	        var data = {
	            id: '{{$data['works_id']}}',
	            title: "{{$data['title']}}",
	            type_id: {{$data['template_id']}},
	            textJson: JSON.stringify(TextJson),
	            logoJson: JSON.stringify(logoJson),
	            TemplateTransactionJson: JSON.stringify(TemplateTransactionJson),
	            thumb: thumb,
	            _token: document.getElementsByName('_token')[0].value

	        };
	      /*  if (!data.type_id) {
	            alert('请选择模板类型!');
	            return false;
	        }
	        if ( !data.brand_id ) {
	            alert('请输入品牌!');
	            return false;
	        }
	        if ( !data.style_id ) {
	            alert('请输入品牌风格!');
	            return false;
	        }
	        if (!data.title) {
	            alert('请输入模板名称!');
	            return false;
	        }
*/
	        getPdf('n');
	        $.ajax({
	            type: ajax_type,
	            url: '{{ url('/works/store') }}',
	            data: data,
	            beforeSend: function () {
	                // loading...
	            },
	            success: function (json) {
	                alert( json.error == 0 ? '{{trans('common.works_save_success')}}' : json.msg );

	                $('#works_id').val(json.id);
	            }
	        });
	    });
	});
})


$('#close').click(function(){
	var con = confirm("Your design is not saved, are you sure you want to close it?");
	if(con == true)
	{
		location.href = "{{URL('project/detail')}}"+"/"+"{{$data['project_id']}}";
	}
	else
	{
		return false;
	}
})
</script>
@endsection