<div class="portlet" id="template1">
	<form method="POST" name="fTemplate" id="fTemplate" onsubmit="return(false);">
		<input type="hidden" name="fid" id="fid" value="{$fid}">
		<div class="custom_template">
			<div class="h6 font-weight-bold text-secondary">
			{$field_variable1}
			</div>
			<div class="h6 font-weight-bold text-secondary">
			{$field_variable2}
			</div>
			<div class="h6 font-weight-bold text-secondary">
			{$field_variable3}
			</div>
			<div class="h6 font-weight-bold text-secondary">
			{$field_variable4}
			</div>
			<div class="h6 font-weight-bold text-secondary">
			{$field_variable5}
			</div>
		</div>
		<div class="btn btn-sm btn-outline-success font-weight-bold mt-4" onclick="saveTemplate('template1')"><i class="fa fa-floppy-o mr-1"></i>Save Template</div>
	</form>
</div>
<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">
	var arr = [], arrVal = JSON.parse('{$temp_value}'), prefix = '{$prefix}', d = "template1";
	$("#"+d+" select").on("change", function(e) {
		var name_id = $(this).attr("id");
		if($(this).val() != "") {
			$("#"+d+" select[id!='"+name_id+"'] option[value='"+$(this).val()+"']").remove();
		}
		
		if(typeof arrVal[name_id] != 'undefined' && arrVal[name_id] != '' && arrVal[name_id] != '0|||') {
			var optionText 	= $("#"+d+" #" + name_id + " option[value='" + arrVal[name_id] + "']").text();
			$("#"+d+" 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] != '') {
			$("#"+d+" select").append(arr[name_id]);
		}

		$.each($("#"+d+" select"), function(key, val){
			var elId = $(val).attr("id");

			var optionValue = $(val).val();
			var optionText 	= $("#"+d+" #" + elId + " option[value='" + $(val).val() + "']").text();
			var option 		= "";
			if(optionValue != '' && optionValue != null) {
				var option 		= "<option value='"+optionValue+"'>"+optionText+"</option>";
				arrVal[elId]    = optionValue;
			}else{
				arrVal[elId]    = "";
			}
			arr[elId] 		= option;
		});
	});
	
	function saveTemplate(d) {
		//======= Save Template ==============
			{literal}
			//$("#saveTemplate_"+d).on("click", function() {
				// Create Temporary Template
				$("body").append("<div class='custom_temp_"+d+"' style='display:none'>");
				$(".custom_temp_"+d).html($("#"+d+" .custom_template").html());
				$.each($(".custom_temp_"+d+" select"), function(key, val) {
					var id_temp = $(val).attr("id");
					var name = id_temp + "_temp_"+d;
					$(val).parent().html("<div id='"+name+"'>");
				});
				// ========================

				// Set Variable In Temporary Template
				$.each($("#"+d+" .custom_template select"), function(key, val) {
					var id = $(val).attr("id");
					var value = $(val).val();
					var pecah = value.split('|');
					var variable = pecah[1];
					if(typeof pecah[1] != 'undefined') {
						$("#"+id+"_temp_"+d).parent().html("{$e_var."+pecah[1]+"}");
					}else{
						$("#"+id+"_temp_"+d).parent().html("");
					}
				});

				// == FOR TITLE & IMAGE DEFAULT == 
				$(".custom_temp_"+d+" .defcust_title").html("{$e_var."+prefix+"Name}");
				$(".custom_temp_"+d+" .defcust_title").removeClass("defcust_title");
				$(".custom_temp_"+d+" .devcust_url").attr("href", "{$e_var."+prefix+"Url}");
				$(".custom_temp_"+d+" .devcust_url").removeClass("devcust_url");
				$(".custom_temp_"+d+" img").attr("src", "{$path}/Assets/Img/{$e_var."+prefix+"Image}");
				$(".custom_temp_"+d+" img").attr("title", "{$e_var."+prefix+"Name}");
				// ===== END Set Variable In Temporary Template =======
				console.log("aa", $(".custom_temp_"+d).length);
				// Ajax nya jalan disini
				$.ajax({
					url:custom_path+"/generate",
					type:"POST",
					dataType:"JSON",
					data:{
						"themes" : d + "_" + $("#"+d+" #fid").val(),
						"form" : $("#"+d+" #fTemplate").serialize(),
						"content" : $(".custom_temp_"+d).html()
					},
					success:function(obj) {
						if (obj.status != 'ok') {

							Lobibox.notify('error', {
								msg		: obj.error,
								width       : '100%',
								size		: 'mini',
								delay       : 3500,
								showClass   : 'bounceIn',
								hideClass   : 'bounceOut'
							});

						} else {
							Lobibox.notify('success', {
								msg		: 'Save Successfully',
								width       : '100%',
								size		: 'mini',
								delay       : 3500,
								showClass   : 'bounceIn',
								hideClass   : 'bounceOut'
							});
							
							$("div[class^='template'] .addForm").removeClass("btn-outline-danger").addClass("btn-outline-primary").html('<i class="fa fa-paint-brush mr-1"></i>Use');
							$("."+d+" .addForm").removeClass("btn-outline-primary").addClass("btn-outline-danger").html('<i class="fa fa-paint-brush mr-1"></i> Edit');
							$(".active").removeClass("active");
							$("."+d).addClass("active");
							gr.show();
							fr.hide();

						}
					}
				});
				// =====================

				// Remove temporary Template
				$(".custom_temp_"+d).remove();
				// ====================
			//});
			{/literal}
			//====================================
	}
</script>