<style type="text/css">
	.embedCustomField{
		width: 400px!important;
	}
</style>

<div class="col-md-12 ui-sortable" id="divToolsSection" >
	<div class="panel panel-inverse" data-sortable-id="form-stuff-1">
        <div class="panel-heading">
            <h4 class="panel-title p-heading">Engagement Tool Templates</h4>
        </div>

        <div id="previewDiv" style="display:none" class="phonePreview openExpandedView">
		    <div class="dataView" id="pushNotificationView">
		      
		        <div class="dataView1" data-bind="visible:isBasic">
		          <img id="headerImagePreview" src=""  class="leftIcon" name="dataview1_image" data-bind="attr{src: notificationImage}">
		          <p><strong> <span id="txtheader" data-bind="text: header"  name="dataview1_text"></span></strong>
		          <span id="txtdesc" data-bind="text: description"  name="dataview1_textdesc"></span></p>
		          <div class="clearFloat"></div>    
		        </div>
		       
		       <div class="dataView2" data-bind="visible:isExpanded">
		           <p class="dataView2pic"><img src="" id="expandedImagePreview" data-bind="attr{src: expandedNotificationImage}"></p>
		           <p>
		            <span id="txtdescExpanded" data-bind="text: expandedDescription"></span></p>
		           
		           <div class="clearFloat"></div>            

		       </div>
		       <div class="dataView1" data-bind="if:notificationImageLoader" style="text-align:center">
		          <img id="headerImagePreview" src="" name="dataview1_image" data-bind="attr{src: notificationImageLoader}">
		          <div class="clearFloat"></div>    
		        </div>
		        <!-- ko if: actionsToAdd().length > 0 && notificationActionsFlag -->
		        <!--  <div data-bind="if: actionsToAdd().length > 0"> -->
		       		<div style="border-bottom:1px solid #ffffff; width:100%; margin-bottom:10px;">
			        </div>
			        <div data-bind="foreach: actionsToAdd">
			       		<span class="spanButton" data-bind="text: actionName" style="cursor:pointer; display:inline-block; margin-bottom:10px;"></span>
			        </div>			     
		        <!-- </div> -->
		        <!-- /ko -->

		    </div>

		    <div class="dataView" id="In-AppNotificationView">
		    	
		    	<div style="position: relative;bottom: 0px;text-align: center;" data-bind="visible: inAppIsFullscreen">
		    		<div style="width:90%;height:200px;margin:10px;border:1px solid #FFFFFF">
		    				<img data-bind="attr{src:inAppImage}" width="100%">
		    		</div>
		    	  <p><strong> <span data-bind="text:inAppHeader">header </span></strong>
		          <span data-bind="text:inAppDescription">desccription</span></p>
		          	
		          <span class="spanButton" data-bind="text:inAppActionTitle, visible: inAppActionVisible">Close</span>
		      </div>
		      <div style="position: absolute;bottom: 0px;background-color:blueviolet;width:100%;" data-bind="visible: inAppIsMiniscreen">
		      	<img  src=""  class="leftIcon"  data-bind="attr{src: inAppIcon}">
		      	<i class="ion-android-settings fa-2x text-inverse"></i>
		          <p>
		          <span data-bind="text:inAppDescription"></span></p>
		      </div>
		    </div>

		    <div class="dataView" id="InAppSurveyView">
		    	<div id="surveyPreviewSource">
			    	<div style="padding-top:30px;">
				    	 <p style="text:center;padding-left:10px;padding-right:5px; font-size:15px; line-height:18px">
				          <span data-bind="text: questionTextToAdd"></span>
				      	 
				      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="foreach: questionOptionsToAdd">
			      	 			<li >
									    <span data-bind="text:optionText"> </span>
								</li>

				      	 	</ul>
				      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="visible:questionOtherOption">
				      	 		<li><span style="padding-right:10px;">Other</span><input type="text" style="width:100px;"/></li>
				      	 	</ul>	
				      	 </p>	
			      	 </div>
		      	 </div>
		      	 <div style="position: absolute;bottom: 0px;" data-bind="visible:isTextMode">
		      	 	<p>
			      	 	<textarea rows="4" class="form-control" placeholder="Your answer goes here.." data-bind="value:answerPlaceholder" disabled></textarea>
		      	 	</p>
		      	 	<img src="/appimages/Android-keyboard.png" width="216px">
		      	 </div>
		    </div>
		    <div class="dataView" id="ratingView">
		    	<div style="  position: absolute;bottom: 0px;margin-bottom: 70px; width: 100%;height: 200px">
		    		<p style="padding-left:10px;">
		          		<span data-bind="text:ratingQuestion"></span>
		          		<table align="center" style="padding:10px;">
		          			<tr>
		          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img11"></td>
		          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img12"></td>
		          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img13"></td>
		          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img14"></td>
		          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage} " id="img15"></td>
		          			</tr>
		          			
		          			<tr><td colspan="5" style="height:100px;text-align:center;"><span class="spanButton" data-bind="text:actionTitle" ></span>	</td> </tr>
		          		</table>
		          	</p>
		          	
		    	</div>
		    </div>
		    <div class="dataView"  style="padding-top:10px;overflow:auto;" id="scrollerDiv">
		    	<div id="uninstallFeedbackView">
			    	<div id="surveyPreviewSection">
				    	<div>
				    		 <table>
					      	 		<tbody data-bind="foreach:questions">
					      	 			<tr>
					      	 				<td>
					      	 					<p style="text:center;padding-left:10px;padding-right:5px; font-size:15px; line-height:18px">
										          <span data-bind="text: questionText"></span>
										      	 
										      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="foreach: questionOptions">
									      	 			<li >
															    <span data-bind="text:optionText"> </span>
														</li>

										      	 	</ul>
										      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="visible:otherOption">
										      	 		<li><span style="padding-right:10px;">Other</span><input type="text" style="width:100px;"/></li>
										      	 	</ul>	
										      	 </p>
					      	 				</td>
					      	 			</tr>
					      	 		</tbody>
					      	 </table>	
					    	 <p style="text:center;padding-left:10px;padding-right:5px; font-size:15px; line-height:18px">
					          <span data-bind="text: questionTextToAdd"></span>
					      	 
					      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="foreach: questionOptionsToAdd">
				      	 			<li >
										    <span data-bind="text:optionText"> </span>
									</li>

					      	 	</ul>
					      	 	<ul style="list-style-type: circle;color:#FFFFFF;font-size:15px;line-height:18px" data-bind="visible:questionOtherOption">
					      	 		<li><span style="padding-right:10px;">Other</span><input type="text" style="width:100px;"/></li>
					      	 	</ul>	
					      	 </p>
				      	</div>
			      	 </div>
			      	<div id="ratingPreviewSection" style="padding-bottom:15px;">
			      		<div>
					    	<p style="text:center;padding-left:10px;padding-right:5px;padding-bottom:10px; font-size:15px; line-height:18px">
					          <span data-bind="text: ratingQuestion"></span>
				          	</p>

			          		<table align="center" data-bind="visible:showRatingImages" style="padding:10px;">
			          			<tr>
			          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img1"></td>
			          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img2"></td>
			          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img3"></td>
			          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img4"></td>
			          				<td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage} " id="img5"></td>
			          			</tr>
			          		</table>
				          	
					    </div>
			      	</div>
		      	</div>
		      	<div id="previewSubmitMessage" style="display:none">
		      		<p>
		      			<span data-bind="text:ratingThankyouMessage" style="padding-bottom:25px;"></span>
		      		</p>
		      		<span class="spanButton" style="cursor:pointer" onclick="closeTestSubmitFeedback();">Back</span>
		      	</div>
		      	<div style="text-align:center;margin-top:20px;" data-bind="visible:showSubmitButton" id="feedBackClose">
		          		<span class="spanButton" data-bind="text:actionTitle" style="cursor:pointer" onclick="testSubmitFeedback();"></span>	
	          	</div>
		    </div>
		</div>
        <div class="panel-body" id="toolsContainer">
        	<div id="toolsSectionDiv">
        	<form class="form-horizontal">
        		<div class="input-group" style="text-align:right;" id="createNewNotification">
                    <div class="input-group-btn" >
                        <ul class="dropdown-menu pull-right">
                            <li><a href="javascript:switchTemplate('PUSH');clearVariables();">Push Notification</a></li>
                            <li><a href="javascript:switchTemplate('IN-APP');clearVariables();">In-App Notification</a></li>
                            <li><a href="javascript:switchTemplate('SURVEY');clearVariables();">Survey</a></li>
                            <li><a href="javascript:switchTemplate('RATING');clearVariables();">Rating</a></li>
                            <li><a href="javascript:switchTemplate('FEEDBACK');clearVariables();">Uninstall Feedback</a></li>
                        </ul>
                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                            <span class="caret"></span>
                        </button>
                        <button type="button" class="btn btn-success" data-toggle="dropdown">Create New Notification</button>
                    </div>
            	</div>

            	<div id="templatesDiv">
                   <table class="table table-striped" id="tblTemplates">
                    <thead>
                        <tr>
                            <th>Tool Name</th>
                            <th>Tool Type</th>
                            <th>Created On</th>
                            <th>Modified On</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                	</table>
                	
                	<div class="form-group" id="createNewTool" style="padding-left:25%;">
                    	<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
                        	<button type="button" class="btn btn-sm btn-success" onclick="switchTemplate();clearVariables();">Create New</button>
                        	<button type="button" class="btn btn-sm btn-success" onclick="showChooseEngagementTool();">Cancel</button>
                    	</div>
                	</div>
            	
                	
                </div>
               
                <fieldset id="pushTemplate" style="display:none;">
                    <legend>Push Notification Settings</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Template Name</label>
                        <div class="col-md-4">
                            <input type="text" id="templateName" class="form-control" placeholder="Template Name" data-bind="value:templateName, valueUpdate:'afterkeydown' ">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Notification Style</label>
                        <div class="col-md-9">
                            <label class="radio-inline">
                                <input type="radio" checked="" value="basic" name="optionsStyle" onclick="setPushStyle(true);" data-bind="checked:pushType">
                                Basic
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="expanded" name="optionsStyle" onclick="setPushStyle(false);" data-bind="checked:pushType">
                                Expanded
                            </label>
                        </div>
                    </div>
                    <div data-bind="visible:isBasic">
	               		<div class="form-group">
	                        <label class="col-md-3 control-label">Notification Header</label>
	                        <div class="col-md-4">
	                            <input type="text" class="form-control" id="notificationHeader" data-bind="value:header, valueUpdate:'input' " placeholder="Notification Header">

	                        </div>
	                        <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('notificationHeader')"></i>
	            		</div>
	            		<div class="form-group">
	                        <label class="col-md-3 control-label">Notification Description</label>
	                        <div class="col-md-4">
	                            <textarea class="form-control" placeholder="Notification Description" data-bind="value:description, valueUpdate:'afterkeydown'" rows="2" id="notificationDescription"></textarea>
	                        </div>
	                        <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('notificationDescription')"></i>
	            		</div>
	            		<div class="form-group">
	                        <label class="col-md-3 control-label">Notification Image</label>
	                        <div class="col-md-4">
	                            <div style="text-align:center;">
	                    			<img id="imgNotificationImage" class="media-object rounded-corner" alt="" style="display: none;margin-left: auto;margin-right: auto;height: 60px;width: 60px;" data-bind="attr:{src: notificationImage}" />
	                    			<div id="mybutton">
											Upload
									</div>
	        					</div>
	                        </div>
	            		</div>
            		</div>
            		<div data-bind="visible:isExpanded">            		
	            		<div class="form-group">
	                        <label class="col-md-3 control-label">Expanded Notification Description</label>
	                        <div class="col-md-4">
	                            <textarea class="form-control" placeholder="Expanded notification description" rows="2" data-bind="value: expandedDescription,valueUpdate:'afterkeydown'" id="expandedNotificationDescription"></textarea>
	                        </div>
	                        <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('expandedNotificationDescription')"></i>
	            		</div>
	            		<div class="form-group">
	                        <label class="col-md-3 control-label">Expanded Notification Image</label>
	                        <div class="col-md-4">
	                            <div style="text-align:center;">
	                    			<img id="imgExpandedNotificationImage" class="media-object rounded-corner" alt=""  style="display: none;margin-left: auto;margin-right: auto;height: 60px;width: 60px;" data-bind="attr{src: expandedNotificationImage}"/>
	                    			<div id="mybutton">
											Upload
									</div>
	        					</div>
	                        </div>
	            		</div>
            		</div>

            		<div class="form-group">
                        <label class="col-md-3 control-label">Actions</label>
                        <div class="col-md-4">
                             <label class="radio-inline">
                                <input type="radio" value="yes" name="actions" data-bind="checked: notificationActions" onclick="checkActionStyle('yes');">
                                Yes
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="no" name="actions" data-bind="checked: notificationActions" onclick="checkActionStyle('no');">
                                No
                            </label>
                            <span data-bind="if:notificationActionsFlag" style="margin-left: 20px;">
                        		<button type="button"  href="#actions-dialog" data-toggle="modal" class="btn btn-sm btn-success addAction" onclick="refreshActionFields()">Add Action </button>
                        	</span>
                        </div>                        
            		</div>

            		<div class="form-group" data-bind="visible:(!notificationActionsFlag())">
                        <label class="col-md-3 control-label">URL Type</label>
                        <div class="col-md-4">
                             <label class="radio-inline">
                                <input type="radio" checked="checked" value="dl" name="urlType" data-bind="checked:notificationUrlType">
                                Deep Link
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="lp" name="urlType" data-bind="checked:notificationUrlType">
                                Landing Page
                            </label>
                        </div>
            		</div>
            		<div class="form-group" data-bind="visible:(!notificationActionsFlag())">
                        <label class="col-md-3 control-label">External URL/Deeplink URL</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Enter external url or deep link url."  id="externalUrl" data-bind="value:externalUrl, valueUpdate:'afterkeydown' "></input>
                        </div>
                        <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('externalUrl')"></i>
            		</div>

            		<!-- ko if: actionsToAdd().length > 0 && notificationActionsFlag -->
            		<div class="form-group">
            			<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
	            			<div class="btn-group btn-group-justified">
	            				<span data-bind="foreach: actionsToAdd">
	            					<span data-bind="if: $index() == 1">
	            						<a href="#actions-dialog" data-toggle="modal" class="btn btn-default active" data-bind="text: actionName, click:$parent.editAction"></a>
	            					</span>
	    
	            					<span href="#actions-dialog" data-toggle="modal" data-bind="if: $index() != 1">
	            						<a class="btn btn-default" data-bind="text: actionName, click:$parent.editAction"></a>
									</span>									
	            				</span>
								
							</div>
						</div>
					</div>
            		<!-- /ko -->
               		
               		<div class="form-group">
                    	<label class="col-md-3 control-label">
                    		<span style="color:red;" data-bind="visible:validateAction,text:errorAction">
                    		</span>
                    	</label>
                    	<div class="col-md-9">
                        	<button type="button" id="btnSavePush" class="btn btn-sm btn-success">Submit </button>
                        	<button type="button" id="btnClose" class="btn btn-sm btn-success" onclick="closeTemplate('CLOSE');">Close</button>

                        	<label style="color:red;width:350px" data-bind="visible:validate,text:validationMessage"></label>
                    	</div>
                	</div>
                </fieldset>

                <fieldset id="surveyTemplate" style="display:none">
                    <legend>Survey Settings</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Survey Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Survey Name" data-bind="value:templateName, valueUpdate:'afterkeydown' " maxlength="50">
                        </div>
                    </div>
                    <div id="surveyContentsSource">
                        <div id="surveyContents">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Question</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder="Type your question here"  maxlength="110" data-bind="value: questionTextToAdd, valueUpdate:'afterkeydown'">


                                </div>
                            </div>
                            <div class="form-group" id="questionTypeDiv">
                                <label class="col-md-3 control-label">Question Type</label>
                                <div class="col-md-4">
                                    <select class="form-control" data-bind="value:questionType, event{change:changeQuestionType}">
                                        <option value="radiobuttonchoice">Multiple Choice</option>
                                        <option value="textinput">Text Field</option>
                                	</select>
                                </div>
                            </div>
                            
                            <div class="form-group" data-bind="visible:isMultipleMode" >
                                <label class="col-md-3 control-label">Add Option</label>
                                <div class="col-md-4">
                                	<table>
                                		<thead>
                                		<tr>
                                			<td>
                                				<input type="text" class="form-control" placeholder="Type your options here"  maxlength="50" data-bind="value: questionOption">
                                			</td>
                                			<td style="padding:5px">
                                				<button type="button" class="btn btn-primary btn-sm editable-submit" data-bind="click: addToOptions"><i class="fa fa-plus"></i></button>
                                			</td>
                                		</tr>
                                		</thead>
                                		<tbody data-bind="foreach: questionOptionsToAdd">
                                    		<tr>
                                    			<td style="padding-bottom:5px"><input class="form-control" type="text" data-bind="value:optionText, valueUpdate:'afterkeydown'">

                                    			</td>
                                    			<td style="padding:5px">
                                    				<a class="btn btn-danger btn-icon btn-circle btn-sm" data-bind="click:$parent.deleteOption"><i class="fa fa-times"></i></a>
                                    			</td>
                                    		</tr>
                                		</tbody>
                                	</table>
                                </div>
                            </div>
                            <div class="form-group" data-bind="visible:isTextMode">
                            	<label class="col-md-3 control-label"></label>
                            	<div class="col-md-4">
                            	    <textarea class="form-control" placeholder="Your answer goes here.." rows="3" data-bind="value: answerPlaceholder,valueUpdate:'afterkeydown'" ></textarea>
                        	    </div>
                            </div>
                            <div class="form-group">
                            	<label class="col-md-3 control-label">Other as last option</label>
                            	<div class="col-md-9">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" data-bind="checked:questionOtherOption">
                                            
                                        </label>
                                    </div>
                    			</div>
                            </div>
                            <div class="form-group">
                            	<label class="col-md-3 control-label"></label>
                            	<div class="col-md-9">
                                	<button type="button" data-bind="click: addToQuestions" class="btn btn-sm btn-success">Add Question</button>
                                	<label style="color:red;width:350px" data-bind="visible:validateQuestion,text:errorMessage"></label>
                            	</div>
                        	</div>
                            <div class="form-group">
                            	<div class="col-md-8" data-bind="visible:showQuestions">
                            		
                                	<table class="table">
		                                
		                                <tbody data-bind="foreach: questions">
		                                    <tr >
		                                    	<td>
		                                    		<table>
		                                    			<thead>
		                                    				<th>
		                                    					<span data-bind="text: questionText"></span>
																		
		                                    				</th>
		                                    			</thead>
		                                    			<tbody data-bind="foreach: questionOptions">
		                                    				<tr >
		                                    					<td>
		                                    						 <span data-bind="text: optionText"></span>
		                                    					</td>
		                                    				</tr>
		                                    			</tbody>
		                                    		</table>
		                                    	</td>
		                                    	<td>
		                                    		<a class="btn btn-danger btn-icon btn-circle btn-sm" data-bind="click:$parent.deleteQuestion"><i class="fa fa-times"></i></a>
		                                    	</td>
		                                    </tr>
		                                </tbody>
	                            	</table>
                            	</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                    	<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
                        	<button type="button" id="btnSaveSurvey" class="btn btn-sm btn-success">Submit</button>
                        	<button type="button"  class="btn btn-sm btn-success" onclick="closeTemplate('CLOSE');">Close</button>
                        	<label style="color:red;width:350px" data-bind="visible:validate,text:validationMessage"></label>
                    	</div>
                	</div>
                </fieldset>
                <fieldset id="inappTemplate" style="display:none">
                    <legend>In-App Settings</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Template Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Template Name" data-bind="value:templateName, valueUpdate:'afterkeydown' " maxlength="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">View</label>
                        <div class="col-md-4">
                            <table class="viewmode">
                            	<tr>
                            		<td style="cursor:pointer" onclick="changeViewMode('Fullscreen');">
                            			<img id="imgFullscreen" data-bind="attr{src:inAppFullscreenImage}">
                            		</td>
                            		<td style="cursor:pointer" onclick="changeViewMode('Mini');">
                            			<img id="imgMini" data-bind="attr{src:inAppMiniImage}">
                            		</td>
                            	</tr>
                            	<tr>
                            		<td>Fullscreen</td><td>Mini</td>
                            	</tr>
                            </table>
                        </div>
            		</div>
            		<div data-bind="visible: inAppIsFullscreen">
                		<div class="form-group">
                            <label class="col-md-3 control-label">Header</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" data-bind="value:inAppHeader, valueUpdate:'afterkeydown'" placeholder="Header" maxlength="50" id="txtInAppHeader">
                            </div>
                        	<i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtInAppHeader')"></i>
                		</div>
                		<div class="form-group">
                            <label class="col-md-3 control-label">Description</label>
                            <div class="col-md-4">
                                <textarea class="form-control" placeholder="Description" data-bind="value:inAppDescription, valueUpdate:'afterkeydown'" rows="3" id="txtInAppNotificationDescription" maxlength="90"></textarea>
                            </div>
                            <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtInAppNotificationDescription')"></i>
                		</div>
                		<div class="form-group">
                            <label class="col-md-3 control-label">Image</label>
                            <div class="col-md-4">
                                <div style="text-align:center;">
                        			<img id="imgInAppImage" class="media-object rounded-corner" alt="" style="display: none;margin-left: auto;margin-right: auto;height: 60px;width: 60px;" data-bind="attr{src:inAppImage}"  />
                        			<div id="mybutton">
  										Upload
									</div>
            					</div>
                            </div>
                		</div>
                		<div class="form-group">
                            <label class="col-md-3 control-label">Set Call To Action</label>
                            <div class="col-md-4">
                                <p>
	                                <input type="checkbox" data-render="switchery" data-theme="default" checked id="chkAction" data-bind="checked: inAppActionVisible"/>
	                            </p>
                            </div>
                		</div>
                		<div id="divAction" data-bind="visible: inAppActionVisible">
                    		<div class="form-group">
                                <label class="col-md-3 control-label">Action Title</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" data-bind="value:inAppActionTitle, valueUpdate:'afterkeydown' " placeholder="Action Title">
                                </div>
                    		</div>
                    		
                    		<div class="form-group">
                                <label class="col-md-3 control-label">Action Url</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" data-bind="value:inAppActionUrl, valueUpdate:'afterkeydown' " placeholder="Action Url" id="txtActionUrlInApp1">
                                </div>
                                <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtActionUrlInApp1')"></i>
                    		</div>
                		</div>
            		</div>
            		<div data-bind="visible: inAppIsMiniscreen">
            			<div class="form-group">
                            <label class="col-md-3 control-label">Image</label>
                            <div class="col-md-4">
                                <div style="padding:10px;text-align:center;">
                        			<img id="imgIconImage" class="media-object rounded-corner" alt="" style="display: none;margin-left: auto;margin-right: auto;height: 60px;width: 60px;" data-bind="attr:{src: inAppIcon}" />
                        			<div id="mybutton">
  										Upload
									</div>
            					</div>
                            </div>
            			</div>
            			<div class="form-group">
                            <label class="col-md-3 control-label">Description</label>
                            <div class="col-md-4">
                                <textarea class="form-control" placeholder="Description" data-bind="value:inAppDescription, valueUpdate:'afterkeydown'" rows="3" id="txtNotificationDescriptionMini" maxlength="90"></textarea>
                            </div>
                            <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtNotificationDescriptionMini')"></i>
                		</div>
                		<div class="form-group">
                                <label class="col-md-3 control-label">Tap Action Url</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" data-bind="value:inAppActionUrl, valueUpdate:'afterkeydown' " placeholder="Tap action Url, keeping it blank will just close notification." id="txtActionUrlInApp2">
                                </div>
                                <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtActionUrlInApp2')"></i>
                		</div>
            		</div>

            		<div class="form-group">
                    	<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
                        	<button type="button" id="btnSaveInApp" class="btn btn-sm btn-success">Submit</button>
                        	<button type="button"  class="btn btn-sm btn-success" onclick="closeTemplate('CLOSE');">Close</button>
                        	<label style="color:red;width:350px" data-bind="visible:validate,text:validationMessage"></label>
                    	</div>
                	</div>
                </fieldset>
                <fieldset id="ratingTemplate" style="display:none">
                    <legend>Rating Settings</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Rating Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Rating Name" data-bind="value:templateName, valueUpdate:'afterkeydown' " maxlength="50">
                        </div>
                    </div>
                    <div id="ratingContentsSource">
                        <div id="ratingContents">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Rating Question</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder="Type your question here"  maxlength="110" data-bind="value: ratingQuestion, valueUpdate:'afterkeydown', event{change:setRatingImageVisibility}" id="txtRatingQuestion">
                                </div>
                                <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtRatingQuestion')"></i>
                            </div>
                            <div class="form-group">
                                    <label class="col-md-3 control-label">Active Rating Image</label>
                                    <div class="col-md-4">
                                        <div style="padding:10px;text-align:center;">
		                        			<img class="media-object rounded-corner" alt="" style="display: block;margin-left: auto;margin-right: auto;height: 24px;width: 24px;" data-bind="attr{src:activeRatingImage}"  />
		                        			<div id="mybutton">
		  										Upload
											</div>
                    					</div>
                                    </div>
                    		</div>
                    		<div class="form-group">
                                    <label class="col-md-3 control-label">Disabled Rating Image</label>
                                    <div class="col-md-4">
                                        <div style="padding:10px;text-align:center;">
		                        			<img class="media-object rounded-corner" alt="" style="display: block;margin-left: auto;margin-right: auto;height: 24px;width: 24px;" data-bind="attr{src:disabledRatingImage}"  />
		                        			<div id="mybutton">
		  										Upload
											</div>
                    					</div>
                                    </div>
                    		</div>
                    		<div class="form-group" id="thankYouMessageDiv">
                                <label class="col-md-3 control-label">Thankyou Message</label>
                                <div class="col-md-4">
                                    <textarea class="form-control" placeholder="Thankyou Message" data-bind="value:ratingThankyouMessage, valueUpdate:'afterkeydown'" rows="3" id="txtRatingThankyou"></textarea>
                                </div>
                                <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('txtRatingThankyou')"></i>
                    		</div>
                    		<div class="form-group" id="actionButtonDiv">
                                <label class="col-md-3 control-label">Action Title</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder="Type your question here"  maxlength="30" data-bind="value: actionTitle, valueUpdate:'afterkeydown'">
                                </div>
                            </div>
                        </div>
                    </div>
            		<div class="form-group">
                    	<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
                        	<button type="button" id="btnSaveRating" class="btn btn-sm btn-success">Submit</button>
                        	<button type="button"  class="btn btn-sm btn-success" onclick="closeTemplate('CLOSE');">Close</button>
                        	<label style="color:red;width:350px" data-bind="visible:validate,text:validationMessage"></label>
                    	</div>
                	</div>
                	
                	<p style="height:100px"></p>
                </fieldset>
                
                <fieldset id="uninstallTemplate" style="display:none">
                	 <legend>Uninstall Feedback</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Feedback Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Feedback Name" data-bind="value:templateName, valueUpdate:'afterkeydown' " maxlength="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Type</label>
                        <div class="col-md-4">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="feedbacktype" value="R" >
                                    Rating
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="feedbacktype" value="S" checked="">
                                    Survey
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="feedbacktype" value="RS">
                                    Rating and Survey
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="feedbacktype" value="SR">
                                    Survey and Rating
                                </label>
                            </div>
                    	</div>
            		</div>
            		<div id="feedBackContainer">
            			<legend id="ratingLegend" style="font-size:12px;display:none;">Rating Settings</legend>
            			<legend id="surveyLegend" style="font-size:12px;display:none;">Survey Settings</legend>
            			<legend id="sectionLegend" style="display:none"></legend>
                		<div id="ratingContentsDestination">
                		</div>
                		<div id="surveyContentsDestination">
                    		
                		</div>
            			<div id="thankYouMessageContainer">
            			</div>
            			<div id="actionButtonContainer">
            			</div>
        			</div>
        			 <div class="form-group">
                    	<label class="col-md-3 control-label"></label>
                    	<div class="col-md-9">
                        	<button type="button" id="btnSaveFeedback" class="btn btn-sm btn-success">Submit</button>
                        	<button type="button" style="display:none" class="btn btn-sm btn-success" onclick="previewForm();">Preview</button>
                        	<button type="button"  class="btn btn-sm btn-success" onclick="closeTemplate('CLOSE');">Close</button>
                        	<label style="color:red;width:300px" data-bind="visible:validate,text:validationMessage"></label>
                    	</div>
                	</div>
                </fieldset>
                
            </form>
        	</div>
        </div>
    </div>
</div>

<!--Engagement Tools Section Ends-->

<!-- Dialog  custom field popup Start-->
<div class="modal fade" id="customfields-dialog" style="z-index:1050!important;">
    <div class="modal-dialog embedCustomField">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Embed Custom Fields</h4>
            </div>
            <div class="modal-body">
            	
            	<div style="height:250px;overflow:auto">
            	<table class="table">
            		<thead>            			
            			<th>Select</th>
            			<th>Field Name</th>
            			<th>Default Value</th>            			            			
            		</thead>
            		<tbody ng-repeat="cf in customFields">
            			<tr >
            				<td><input type="checkbox" ng-model="cf.selected"/></td>
            				<td>{{cf.name}}</td> 
            				<td><input type="text" placeholder="Default Value" class="form-control" ng-model="cf.defaultValue"></td>            				
            			</tr>
            		</tbody>
            	</table>
            	</div>	                                                            
            </div>
            <div class="modal-footer">            	
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="embedCustomField()"  data-dismiss="modal">Save</button>                
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="refreshCustomFields()" data-dismiss="modal">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  custom field popup End-->

<!-- Dialog  custom field popup Start for action-->
<div class="modal fade" id="actions-dialog" style="z-index:1040!important;">
    <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">Manage Action</h4>
            </div>
            <div class="modal-body">
            	
            	<div style="height:250px;">
            	<div class="form-group row" style="margin-bottom:20px;">
                    <label class="col-md-3 control-label">Action Name</label>
                    <div class="col-md-4">
                         <input type="text" class="form-control" placeholder="Enter action name."  id="actionName" data-bind="value: actionsNameToAdd, valueUpdate:'afterkeydown'"></input>
                         <label style="color:red;width:350px" data-bind="visible:validateAction,text:errorActionName"></label>
                    </div>
                </div>
                <div class="form-group row" style="margin-bottom:20px;">
                	<label class="col-md-3 control-label">Action Type</label>
                    <div class="col-md-7">
                         <label class="radio-inline">
                            <input type="radio" value="dl" name="actionType" data-bind="checked:actionsTypeToAdd">
                            Deep Link
                        </label>
                        <label class="radio-inline">
                            <input type="radio" value="lp" name="actionType" data-bind="checked:actionsTypeToAdd">
                            Landing Page
                        </label>

                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 control-label">Action URL</label>
                    <div class="col-md-4">
                         <input type="text" class="form-control" placeholder="Enter action url."  id="actionExternalUrl" data-bind="value: actionsUrlToAdd, valueUpdate:'afterkeydown'"></input> 
                         <label style="color:red;width:350px" data-bind="visible:validateAction,text:errorActionUrl"></label>           
                    </div>

                    <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('actionExternalUrl')"></i>
        		</div>
            	</div>	                                                            
            </div>
            <div class="modal-footer"> 
            	<label style="color:red;width:350px" data-bind="visible:validateAction,text:errorActionLength"></label>

                <button class="btn btn-sm btn-primary m-r-5" type="button" data-bind="click: addToActions">Save</button>   

               <!-- ko if: actionsUpdate() >= 0 -->
               		<button class="btn btn-sm btn-primary m-r-5 cancelAction" type="button" data-dismiss="modal" data-bind="click:deleteAction">Delete</button>
               	<!-- /ko -->

                <button class="btn btn-sm btn-primary m-r-5 cancelAction" type="button" data-dismiss="modal" onclick="refreshActionFields()">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  custom field popup End