<div class="page-content p-2">
	<div id="add-loading">
		<div class="loadingPage text-center"><span class="box"><img src="{$livepath}/Assets/Img/Facebook.svg"><span>Loading Page</span></span></div>
	</div>
	<div class="rows">
		<nav aria-label="breadcrumb" class="float-right">
			<ol class="breadcrumb mb-0">
				<li class="breadcrumb-item"><a href="{$livepath}/Modules/Dashboard/show" class="clearStorage"><i class="fa fa-home mr-1"></i>Dashboard</a></li>
				<li class="breadcrumb-item font-weight-bold" aria-current="page"><a href="{$livepath}/Modules/Admin/Master/Formbuilder/show" class="clearStorage">Formbuilder</a></li>
				<li class="breadcrumb-item font-weight-bold active" aria-current="page">Generate Template</li>
			</ol>
		</nav>
		<h2 class="h5 font-weight-bold px-2 pt-2 pb-3">Generate Template</h2>

		<!--formGridCustom-->
		<div class="cPanel col-md-12  rounded">
			<div class="portlet" id="template1">
				<div class="portlet-heading bg-darkgray font-weight-bold py-2 px-3 text-white">
					<span class="btn btn-link text-white font-weight-bold font-sm mtm-1 cancel float-right"><i class="fa fa-arrow-left mr-1"></i> Back to Choose Template</span>
					Template A
				</div>
				<div class="portlet-body pt-4 px-1">
					<a href="#" class="btn btn-sm btn-outline-primary font-weight-bold font-sm mr-2" data-toggle="modal" data-target="#templateDetail" data-title="Template A" data-list="{$livepath}/Assets/Img/template_peview_1.jpg" data-detail="{$livepath}/Assets/Img/template_peview_1_detail.jpg"><i class="fa fa-search-plus mr-1"></i>View Example</a>
					<form method="POST" name="fTemplate" id="fTemplate" onsubmit="return(false);">
						<input type="hidden" name="fid" id="fid" value="{$fid}">
						<p class="h6 text-primary font-weight-bold mt-4 mb-2">Info Credit Card</p>
						<div class="custom_template detailTemplate">
							<div class="card shadow-sm mb-3">
								<div class="d-flex">
									<figure class="figure card-header border-0 bg-transparent order-1 pl-3">
										<img class="" src="" alt="">
									</figure>
									<div class="card-body order-2 pr-3 pl-2">
										<h1 class="card-title h4 font-weight-bold mb-4">TITLE</h1>
										<div class="row">
											<div class="col"><strong class="h5 font-weight-bold text-secondary">{$field_variable1}</strong> <small class="d-block text-black-50">{$field_variable2}</small></div>
											<div class="col"><strong class="h5 font-weight-bold text-secondary">{$field_variable3}</strong> <small class="d-block text-black-50">{$field_variable4}</small></div>
											<div class="col"><strong class="h5 font-weight-bold text-secondary">{$field_variable5}</strong> <small class="d-block text-black-50">{$field_variable6}</small></div>
										</div>
										<p class="card-text pl-0 mt-3">
											{$field_variable7}
										</p>
									</div>
								</div>
								<div class="card-footer bg-white flex-wrap px-3">
									<a href="#" class="btn btn-primary btn-md font-weight-bold float-right"><i class="fa fa-credit-card mr-1"></i> Apply Now</a>
									<a href="{$path}" class="btn btn-link btn-sm mr-3 mt-1"><i class="fa fa-arrow-left"></i> See all credit cards</a>
								</div>
							</div>
							<div class="row">
								<div class="col-3 order-0">
									<div id="list-example" class="list-group sticky-top">
										<a class="staticLink list-group-item list-group-item-action font-weight-bold active" href="#list-item-1">Promotion</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-2">Key Features</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-3">Cash Back</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-4">Petrol</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-5">Grocery</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-6">Dining</a>
										<a class="staticLink list-group-item list-group-item-action font-weight-bold" href="#list-item-7">Terms and Conditions</a>
									</div>
								</div>
								<div class="col-9 order-1 pl-0">
									<div class="scrollspy-example bg-white border rounded shadow-sm p-3" data-spy="scroll" data-target="#list-example" data-offset="0">
										<div id="list-item-1" class="mb-5">
											<h4 class="font-weight-bold mb-2">Promotion</h4>
											<p><strong>MoneySmart Exclusive:</strong> Get S$150 NTUC Fairprice OR Takashimaya OR CapitaVouchers!</p>
											<ul class="list-unstyled mb-0">
												<li>Apply through MoneySmart between 1 Aug 2018 - 31 Aug 2018 and get a free S$150 NTUC FairPrice Or Takashimaya Or CapitaVouchers</li>
												<li>Cards applicable for this promotion are the Citi Cash Back Card, Citi PremierMiles Visa Card, Citi Rewards Card &amp; Citi SMRT Card</li>
												<li>You should receive an email from us 4 weeks after the promotion period ends with more details about redemption</li>
												<li>Only New-to-Card Customers will be eligible for the promotion. For the full T&amp;Cs, click <a href="http://get.moneysmart.sg/citi-aug-2018-exclusive-promo-tncs/" rel="nofollow">here</a></li>
											</ul>
										</div>
										<div id="list-item-2" class="mb-5">
											<h4 class="font-weight-bold mb-2">Key Features</h4>
											<ul class="list-unstyled mb-0">
												<li>8% cash back awarded on Dining, Grab, Petrol &amp; Groceries daily</li>
												<li>20% cash back on Deliveroo orders, valid from 20 Jun till 19 Aug 2018</li>
												<li>Up to 20.88% savings at Esso and Shell, and 8% Cash Back at other petrol stations</li>
												<li>8% cash back awarded with a minimum total retail spend of S$888 per statement month, cash back capped at S$25 per category, per month</li>
											</ul>
										</div>
										<div id="list-item-3" class="mb-5">
											<h4 class="font-weight-bold mb-2">Cash Back</h4>
											<ul class="list-unstyled mb-0">
												<li>8% cash back at food &amp; beverage outlets, supermarkets, food &amp; groceries delivery (including Deliveroo, honestbee, RedMart) and Grab globally</li>
												<li>Up to 20.88% at Esso and Shell, and 8% Cash Back at other petrol stations</li>
												<li>Total minimum retail spend of S$888/statement month, 8% cash back capped at S$25 per category (Dining, Groceries, Petrol and Grab (valid till 31 Dec 2018)).</li>
												<li>For retail spend less than S$888 and/or other retail spends, 0.25% cash back is awarded, no cap on 0.25% cash back earned</li>
											</ul>
										</div>
										<div id="list-item-4" class="mb-5">
											<h4 class="font-weight-bold mb-2">Petrol</h4>
											<p class="font-weight-bold">Best for: Petrol transactions at Esso & Shell</p>
											<ul class="list-unstyled mb-0">
												<li>Up to <b>20.88%</b> discount at Esso Stations: 5% Esso site discount + 5% Smiles card discount + 4% Citi Card discount + 8% Citi Cash Back Card cash back* (applies after Esso discount)</li>
												<li>Up to <b>20.88%</b> discount at Shell stations: 5% Shell site discount + 5% Shell Escape discount + 4% Citi Card discount + 8% Citi Cash Back Card cash back* (applies after Shell discount)</li>
												<li>*Additional 8% cash back on petrol worldwide applies with a minimum retail spend of S$888/statement month on the Citi Cash Back Card, 8% cash back capped at S$25 per category (Dining, Grab valid till 6 Apr 2018, Groceries, Petrol). For retail spend less than S$888 and/or other retail spends, 0.25% cash back is awarded, no cap on 0.25% cash back earned</li>
											</ul>
										</div>
										<div id="list-item-5" class="mb-5">
											<h4 class="font-weight-bold mb-2">Grocery</h4>
											<p class="font-weight-bold">Supports all retail grocery stores & selected online stores (Deliveroo, honestbee, RedMart)</p>
											<ul class="list-unstyled mb-0">
												<li>8% cash back at supermarkets &amp; grocery stores worldwide </li>
												<li>8% cash back also applicable for food &amp; groceries delivery (including Deliveroo, honestbee, RedMart)</li>
												<li>Total minimum retail spend of S$888/statement month, 8% cash back capped at S$25 per category (Dining, Groceries, Petrol).</li>
												<li>For retail spend less than S$888 and/or other retail spends, 0.25% cash back is awarded, no cap on 0.25% cash back earned</li>
											</ul>
										</div>
										<div id="list-item-6" class="mb-5">
											<h4 class="font-weight-bold mb-2">Dining</h4>
											<p class="font-weight-bold">Supports all restaurants, cafes, bars & food delivery services (Deliveroo, honestbee, RedMart)</p>
											<ul class="list-unstyled mb-0">
												<li>8% cash back on your dining spends globally</li>
												<li>8% cash back also applicable for food &amp; groceries delivery (including Deliveroo, honestbee, RedMart)</li>
												<li>Exclusive dining deals with Citi Gourmet Pleasures at top restaurants such as Kuro Restaurant &amp; Bar, Skyve Wine Bistro and more</li>
												<li>Total minimum retail spend of S$888/statement month, 8% cash back capped at S$25 per category (Dining, Grab valid till 6 Apr 2018, Groceries, Petrol).</li>
												<li>For retail spend less than S$888 and/or other retail spends, 0.25% cash back is awarded, no cap on 0.25% cash back earned</li>
											</ul>
										</div>
										<div id="list-item-7" class="mb-5">
											<h4 class="font-weight-bold mb-2">Terms and Conditions</h4>
											<p class="font-weight-bold">Interest Rate &amp; Late Payment Fees</p>
											<ul class="list-unstyled mb-0">
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Annual Principal Fee</label>
													<span class="text-right d-block">$193</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Supplementary Annual Fee</label>
													<span class="text-right d-block">96.3</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Fee Waiver</label>
													<span class="text-right d-block">First year fee waived for Principal and two (2) Supplementary cards</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Interest Free Period</label>
													<span class="text-right d-block">25 days</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Annual Interest Rate</label>
													<span class="text-right d-block">26.90%</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Late Payment Fees</label>
													<span class="text-right d-block">S$100</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Minimum Monthly Repayment</label>
													<span class="text-right d-block">1% or S$50, whichever is higher</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Foreign Currency Transaction Fee</label>
													<span class="text-right d-block"><b>2.80%</b></span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Foreign Check Fee</label>
													<span class="text-right d-block">N.A.</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Cash Advance Transaction Fee</label>
													<span class="text-right d-block">6% or $15, whichever is higher</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Overlimit Fee</label>
													<span class="text-right d-block">$40</span>
												</li>
											</ul>

											<p class="font-weight-bold mt-5">Eligibility</p>
											<ul class="list-unstyled mb-0">
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Singaporean Minimum Income</label>
													<span class="text-right d-block">$30,000</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Non-Singaporean Minimum Income</label>
													<span class="text-right d-block">$42,000</span>
												</li>
											</ul>

											<p class="font-weight-bold mt-5">Other</p>
											<ul class="list-unstyled mb-0">
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Card Association</label>
													<span class="text-right d-block">MasterCard, Visa</span>
												</li>
												<li class="listWraps">
													<label class="float-left mb-0 d-inline-block">Wireless Payment</label>
													<span class="text-right d-block">Visa payWave, MasterCard PayPass, Samsung Pay, Citi Pay</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="text-center border-top pt-1 mt-3">
							<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>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="temp_section" style="display:none">
	{foreach from=$all_section item=list key=s}
		<div id="i_{$s}">
			<div id="{$s}" class="sectionList mb-2 active">
				<div class="form-check pl-0 pt-2 float-right">
					<span class="switch switch-xs">
					  <input type="checkbox" name="option" value="" class="switch subStn" id="{$s}opt">
					  <label for="{$s}opt">Add Sub Section</label>
					</span>
				</div>
				<div class="h4 font-weight-bold">{$list}</div>
				<div class="subSection"></div>
			</div>
		</div>
	{/foreach}
</div>

<div id="temp_sub_section" style="display:none">
	{foreach from=$all_section item=list key=s}
		<div id="{$s}subSection">
			{foreach from=$all_sub_section item=l_sub key=s_sub}
			<div class="form-check pl-0">
				<span class="switch switch-xs">
				  <input type="checkbox" name="subSection[{$s}][]" value="{$s_sub}" class="switch sList" id="subSection{$s_sub}">
				  <label for="subSection{$s_sub}">{$l_sub}</label>
				</span>
			</div>
			{/foreach}
		</div>
	{/foreach}
</div>



<div class="modal fade" id="templateDetail" tabindex="-1" role="dialog" aria-labelledby="templateDetailTitle" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p class="font-weight-bold text-primary mb-2">More Details</p>
				<div class="imgCont mb-4 border over-hidden rounded"><img src="" id="imgDetail"></div>
			</div>
		</div>
	</div>
</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>
{if isset($addJs)}<script>{$addJs}</script>{/if}
<script type="text/javascript">
    //var d = "template1", arr = [], arrVal = JSON.parse('{$temp_value}');
	var d = "template1",
		fr = $(".formGridCustom"),
		gr = $(".Grid1"),
		prefix = '{$prefix}';



	$("document").ready(function() {
        removeWaiting();

        var arr = [], arrVal = JSON.parse('{$temp_value}');
        gr.hide();
        fr.show().find('#'+d).show().siblings('.portlet').hide();


        var elm = $('#sectionCont'),
            lists = $(".sectionList"),
            sc = $(".sList"),
			swtc = $(".subStn");


        sc.on("change", function(e) {
            var name_id = $(this).attr("id"),
                rel = $(this).attr("value");
            if($(this).is(":checked")){
				elm.addClass('active');
                elm.find('#'+rel).addClass('active');
				$("#sectionCont").append($("#temp_section #i_"+rel).html());
				//$("#"+rel+" .subSection").html($("#"+rel+"subSection").html());
				swtc.on("change", function(e) {
					alert(2);
				})
			}else {
				$("#sectionCont #"+rel).remove();
                elm.find('#'+rel).removeClass('active');
            }
        });
		
		
        /*elm.sortable({
            stop : function(event, ui){
                alert($(this).sortable('serialize'));
            }
        });
        elm.disableSelection();*/



        $(".cancel").on('click', function() {
            gr.show();
            fr.hide();
        });
    });
	
	//======= Change Variable Content ===========
	$("#"+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 waiting() {
        $("#add-loading").html('<div class="loadingPage text-center"><span class="box"><img src="'+livepath+'/assets/img/Facebook.svg"><span>Loading Page</span></span></div>');
        $('.breads').hide();
        $('.ftr').hide();
    }

    function removeWaiting() {
        setTimeout(function() {
            $("#add-loading").empty();
            $('.breads').show();
            $('.ftr').show();
        }, 1000);
    }
	
	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 =======
				
				// 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>

<script type="text/javascript">
    /* =========== For Change Field ================== */
    /*var arr = [];
    var arrVal = JSON.parse('{$temp_value}');*/
	



    {literal}

    $('#templateDetail').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget),
            title = button.data('title');
        imgList = button.data('list');
        imgDetail = button.data('detail');

        var modal = $(this);
        modal.find('.modal-title').text(title);
        modal.find('.modal-body #imgList').attr('src', imgList);
        modal.find('.modal-body #imgDetail').attr('src', imgDetail);
    });


    
    {/literal}
</script>