<form method="POST" name="fTemplate" id="fTemplate" onsubmit="return(false);">
	<input type="hidden" name="fid" id="fid" value="{$fid}">
	<div class="custom_template">
		<h1>Contoh Template</h1>
		<div class="col-lg-3 col-md-3">{$field_variable1}</div>	
		<div class="col-lg-3 col-md-3">{$field_variable2}</div>	
		<div class="col-lg-3 col-md-3">{$field_variable3}</div>	
		<div class="col-lg-3 col-md-3">{$field_variable4}</div>	
	</div>
	<div class="btn">Save</div>
</form>		


<script type="text/javascript">{if isset($pathcustom)}var custom_path = '{$pathcustom}';{else}var custom_path = '{$path}';{/if}var menuAccess = '{$menu}', livepath = '{$livepath}', ajaxFile = "{$path}", ajaxParam = "{$param}", device = "{$device}", pathupload = "{if isset($pathupload)}{$pathupload}{/if}", addFilterTable = '{if isset($addFilter)}{$addFilter}{/if}{$slFilter}';</script>
<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/tinymce/tinymce.min.js"></script>
<!--<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/createTable.js"></script>-->
<!--<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/clickAction.js"></script>-->
<script type="text/javascript" src="{$livepath}/Assets/plugins_admin/form.js"></script>
{if isset($addJs)}<script>{$addJs}</script>{/if}
<script>
	/* =========== For Change Field ================== */
	var arr = [];
	var arrVal = JSON.parse('{$temp_value}');
		
	$("select").on("change", function(e) {
			var name_id = $(this).attr("id");
			$("select[id!='"+name_id+"'] option[value='"+$(this).val()+"']").remove();
			if(typeof arrVal[name_id] != 'undefined' && arrVal[name_id] != '') {
				var optionText 	= $("#" + name_id + " option[value='" + arrVal[name_id] + "']").text();
				$("select[id='"+name_id+"'] option[value='"+arrVal[name_id]+"']").remove();
				var optionTemp 		= "<option value='"+arrVal[name_id]+"'>"+optionText+"</option>";
				arr[name_id] = optionTemp;
			}
			if(arr[name_id] != 'undefined' && arr[name_id] != '') {
				$("select").append(arr[name_id]);	
			}
			
			$.each($("select"), function(key, val){
				var elId = $(val).attr("id");

				var optionValue = $(val).val();
				var optionText 	= $("#" + elId + " option[value='" + $(val).val() + "']").text();
				var option 		= "";
				if(optionValue != '' && optionValue != null) {
					var option 		= "<option value='"+optionValue+"'>"+optionText+"</option>";
					arrVal[elId]    = optionValue;
				}
				arr[elId] 		= option;
			});		
	});
	
	
	
	{literal}
	$(".btn").on("click", function() {
		// Create Temporary Template	
		$("body").append("<div class='custom_temp' style='display:none'>");
		$(".custom_temp").html($(".custom_template").html());
		$.each($(".custom_temp select"), function(key, val) {
			var id_temp = $(val).attr("id");
			var name = id_temp + "_temp";
			$(val).parent().html("<div id='"+name+"'>");
		});
		// ========================
		
		// Set Variable In Temporary Template
		$.each($(".custom_template select"), function(key, val) {
			var id = $(val).attr("id");
			var value = $(val).val();
			var pecah = value.split('|');
			var variable = pecah[1];
			$("#"+id+"_temp").parent().html("{$"+pecah[1]+"}");
		});
		// ===============================
		
		// Ajax nya jalan disini
		console.log($(".custom_temp").html());
		$.ajax({
			url:custom_path+"/generate",
			type:"POST",
			dataType:"JSON",
			data:{
				"form" : $("#fTemplate").serialize(),
				"content" : $(".custom_temp").html()
			},
			success:function(obj) {
				
			}
		})
		// =====================
		
		// Remove temporary Template
		$(".custom_temp").remove();
		// ====================
	});
	{/literal}
</script>