	
<div ng-hide="inAppSurvey">
	<div class="row">

	<!-- Device Android -->
		<div class="col-sm-4 ui-sortable">
			<div id="showPreview">
				<div class="phonePreview openExpandedView" style="top: 20px; display: block;" id="previewDiv">
					<div id="pushNotificationView" class="dataView">

					<div class="dataView1" style="margin-top: 10px;">

						<div class="pushBasic" style="width: 100%; font-size: 14px; font-weight: bold; color:#ffffff">
							<div class="col-md-12" style="text-align: center;" ng-if="!(isBack || isNext)">
								{{surveyCounter+1}} of {{surveyCounter+1}}
							</div>
							<div class="col-md-3" ng-show="isBack" ng-click="back()">
								<a href="javascript:;" class="text-inverse">
									<i class="fa fa-arrow-left" style="font-size: 17px; color:#ffffff"></i>
								</a>
							</div>	
							<div ng-class="isBack? 'col-md-6':'col-md-8'" ng-style="{'text-align': isBack? 'center':'right', 'padding-right': isBack? 'none' : '22px'}" ng-if="(isBack || isNext)">{{surveyCounter+1}} of {{surveyCounter+1}}</div>
							<div class="col-md-3"  ng-show="isNext" ng-click="next()" style="text-align:right;">
								<a href="javascript:;" class="text-inverse">
									<i class="fa fa-arrow-right" style="font-size: 17px;color:#ffffff"></i>
								</a>
							</div>
						</div>

						<div class="clearfix down-space"></div>

						<!-- <div class="pushBasic" style="width: 100%; text-align: center;" ng-show="!surveyQuestions[surveyCounter].showQues" ng-click="showQuestionBox()" >	
							<img src="../images/dashboard/1462811934_file_add.png" alt="" style="cursor:pointer;" />
						</div> -->

						<div class="col-md-12" ng-show="surveyQuestions[surveyCounter].showQues" style="padding-left: 1px;">	
							<input type="text" class="form-control push_message question" name="question" ng-model="surveyQuestions[surveyCounter].question" style="border: none; padding-left: 3px; font-size:14px;" placeholder="Enter question" maxlength="50" ng-trim="false" id="surveyQues" ng-keyup="remainCharacter('surveyQues', 50, 'servey')" ng-blur="remainCharacterHide()" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter question'" autofocus="">
						</div>

						<div class="clearfix down-space"></div>

					<div ng-show="surveyQuestions[surveyCounter].ischoice && surveyQuestions[surveyCounter].question != ''" style="height: 285px;overflow: auto;">
						<div class="form-group" ng-show="surveyQuestions[surveyCounter].ischoice" ng-repeat="option in surveyQuestions[surveyCounter].options track by $index" style="margin-bottom:10px; color:#ffffff">
							<div class="col-md-10">
								<input type="text" class="form-control push_message" name="notificationHeader" ng-model="surveyQuestions[surveyCounter].options[$index]" style="width:176px!important; height:25px!important; margin-bottom:10px;border: 1px solid rgb(45, 53, 60)!important;" >
							</div>
							<div class="col-md-2" ng-click="removeOption($index)" style="cursor:pointer;">
								<i class="fa fa-1x fa-minus-circle"></i>
							</div>
						</div>
						<div class="clearfix down-space"></div>
						<div class="form-group" style="cursor:pointer; color:#ffffff">
							<div ng-click="addOption()" ng-style="{'margin-left': '32px', 'text-align': (surveyQuestions[surveyCounter].options.length > 0)? 'right':'left', 'padding-right': (surveyQuestions[surveyCounter].options.length > 0)? '16px':'none'}">
								<span style="padding-right:5px; ">Add choice</span>
								<i class="fa fa-1x fa-plus-circle"></i>
							</div>
						</div>

						<div class="form-group" ng-if="surveyQuestions[surveyCounter].otherOption">
							<div style="border: 1px solid rgb(45, 53, 60)!important; height:25px;  width: 73%;margin-left: 26px; padding: 3px; border-radius: 3px;">
								<span>Other Option</span>
							</div>
						</div>
					</div>

					<div class="form-group" ng-show="surveyQuestions[surveyCounter].isTextField">
						<div class="col-md-12" style="padding-left:1px; padding-right:3px;
">
							<div style="border-top-right-radius: 10px; border-top-left-radius: 10px; height: 100px; border: 1px solid rgb(45, 53, 60); color:#ffffff; margin-top: 10px; padding: 10px;">
								Your answer goes here..
							</div>
							
						</div>
						<div style="position: absolute; bottom: -24px;">
				      	 	<img src="/appimages/Android-keyboard.png" style="width:99%;">
				      	</div>					
					</div>		

				</div>

				<div ng-if="leftCharacter" ng-style="{'position':'absolute', 'left':'28px','color':'#ffffff', 'bottom': leftCharBottom+'px'}">
					{{leftCharacter}}
				</div>

			</div>
		</div>
	</div>                        
</div>
	
	<!-- device android ends -->
	<!-- PushNotification Setting section -->
	<div class="col-sm-8 ui-sortable">
			<div class="panel-body">
				<div id="divSavedTools">
					<legend>In App Survey Settings</legend>
						<div class="clearfix down-space"></div>
							<div class="form-group">
								
								<div class="col-md-3">
									<label class=" control-label">Select Existing Template</label>
								</div>
								<a href="javascript:void(0)" ng-click="editTemplate('SURVEY')" class="col-md-1 href="">  <i class="fa fa-pencil"></i> </a>
									<div class="col-md-8">
										<select id="selectPushTemplate" ng-model="selectPushTemplate" ng-change="getAppTemplatesById(selectPushTemplate)" class="form-control input-sm">
											<option value="">Select Template</option>
											<option ng-repeat="pushTemplate in pushTemplates" value="{{pushTemplate._id}}">{{pushTemplate.template_name}}</option>
										</select>
									</div>
							</div>
							
							<div class="clearfix down-space"></div>

							<div style="width: 98%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-bottom: 10px; margin-left: 2%;">
                              <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
                                Create New
                              </span>
                            </div>

							<div class="clearfix down-space"></div>

							<div class="clearfix down-space"></div>

							<div class="form-group">
		                        <label class="col-md-4 control-label">Survey Name</label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Survey Name" ng-model="survey.surveyName" maxlength="50" ng-trim="false">
		                            
		                        </div>
							</div>
							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group">
		                        <label class="col-md-4 control-label">Select Border</label>
		                        <div class="col-md-8" ng-init="selectedBorder = 'true'"> 
										<select id="selectedBorder" ng-model="survey.selectedBorder" class="form-control input-sm">
											    <option value="">Please Select</option>
												<option value="true" selected>True</option>
												<option value="false">False</option>
										</select>											  
		                        </div>
		                    </div>

							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group" ng-if="survey.selectedBorder == 'true'">
		                        <label class="col-md-4 control-label">Border Background Color</label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Border Background Color" ng-model="survey.bobgclr" maxlength="50" ng-trim="false">
		                            
		                        </div>
		                    </div>

							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group">
		                        <label class="col-md-4 control-label">Next Button Text</label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Next Button Text" ng-model="survey.nt" maxlength="50" ng-trim="false">
		                            
		                        </div>
		                    </div>
							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group">
		                        <label class="col-md-4 control-label">Submit Button Text</label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Submit Button Text" ng-model="survey.st" maxlength="50" ng-trim="false">
		                            
		                        </div>
		                    </div>
							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group">
		                        <label class="col-md-4 control-label">Background colour </label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Background colour" ng-model="survey.bgclr" maxlength="10" ng-trim="false">
		                            
		                        </div>
		                    </div>
							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>
							<div class="form-group">
		                        <label class="col-md-4 control-label">Text colour </label>
		                        <div class="col-md-8">
		                            <input type="text" class="form-control" placeholder="Text colour" ng-model="survey.txclr" maxlength="10" ng-trim="false">
		                            
		                        </div>
		                    </div>
							<div class="clearfix down-space"></div>
							<div class="clearfix down-space"></div>

	                        <div class="form-group" id="questionTypeDiv" ng-cloak>
	                        	<label class="col-md-4">Question Type</label>
                        		<label class="col-md-8 control-label">
                        			<!-- <input type="radio" ng-model="surveyQuestions[surveyCounter].questionType" ng-value="radiobuttonchoice" name="questionType" ng-click="changeQuestionType('radiobuttonchoice')" ng-checked="(surveyQuestions[surveyCounter].questionType == 'radiobuttonchoice')">Multiple Choice -->
                        			<input 
                        				bs-switch 
                        				state="survey.state" 
                        				type="checkbox" 
                        				class="BSswitch" 
                        				data-off-text="Multiple&nbsp;Choice" 
                        				data-on-text="Text&nbsp;Field" 
                        				data-label-text="Text&nbsp;Field" 
                        				data-on-color="success" 
                        				data-off-color="success"
                        				onSwitchChange="surveySwitch">
                        			
                        			<!--<input id="changeOption" type="checkbox"  class="BSswitch" data-off-text="Multiple&nbsp;Choice" data-on-text="Text&nbsp;Field" data-label-text="Text&nbsp;Field" data-on-color="success" data-off-color="success">--> 

                        		</label>
	                            
	                        </div>
	                       
	                        <div class="form-group" ng-if="surveyQuestions[surveyCounter].ischoice">
	                        	<label class="col-md-4 control-label">Other as last option</label>
	                        	<div class="col-md-8">
	                                <div class="checkbox">
	                                    <label>
	                                        <input type="checkbox" ng-model="surveyQuestions[surveyCounter].otherOption">
	                                        
	                                    </label>
	                                </div>
	                			</div>
	                        </div>

	                        <div class="clearfix down-space"></div>

	                        <div class="form-group">
	                        	<label class="col-md-4 control-label"></label>
	                        	<div class="col-md-2">
	                            	<button type="button" ng-click="addToQuestions()" class="btn btn-sm btn-success">Add Question</button>
	                        	</div>
	                        	<div class="col-md-2">
	                            	<button type="button" ng-click="deleteSurvey()" class="btn btn-sm btn-warning">Delete Question</button>
	                        	</div>
	                        	<div class="col-md-4">
	                            	&nbsp;
	                        	</div>

	                    	</div>

	                    	<div class="clearfix down-space" ng-if="isErrorMessage || question_error_text || surveyName_error"></div>

	                    	<div class="col-md-12" ng-show="isErrorMessage">
	                    		<div class="col-md-4">&nbsp;</div>
	                    		<div class="col-md-8"
	                        		<label ng-show="isErrorMessage" style="color: red; width: 350px;">{{errorMessage}}</label>
	                        	</div>
	                        </div>


	                    	<div class="col-md-12" ng-if="question_error_text">
	                    		<div class="col-md-4">
	                            	&nbsp;
	                        	</div>
	                    		<div class="col-md-8">
	                            	<span ng-show="question_error" style="color: red">{{question_error_text}}</span>
	                        	</div>
	                    	</div>

	                    	<div class="col-md-12" ng-if="surveyName_error">
	                    		<div class="col-md-4">
	                            	&nbsp;
	                        	</div>
	                    		<div class="col-md-8">
	                            	<span style="color: red">Please enter survey name</span>
	                        	</div>
	                    	</div>
	                    	
	                    	<legend>&nbsp;</legend>

	                    	<div class="clearfix down-space"></div>
	                    	<div class="form-group">
	                    		<div class="col-md-12" style="text-align:right;">
		                        	<label class="col-md-4 control-label">&nbsp;</label>
		                        	<div class="col-md-8" style="text-align:padding-right">
		                            	<button type="button" ng-click="SubmitSurvey()" class="btn btn-sm btn-success">{{surveyButton}}</button>
		                            	<button ng-click="closeTemplate(clearTemplateId);" class="btn btn-sm btn-success" id="btnClose" type="button">Close</button>
		                            	
		                        	</div>
		                        	
		                    	</div>

	                    	</div>	                       
							
				</div>
			</div>
		</div>
	<!-- Setting ends here -->
	</div>

</div>