<div class="row">
	<ul class="nav nav-tabs">
	   <li class="active"><a data-toggle="tab" href="#default-tab-1" aria-expanded="false">App Keys & SDK</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-2" aria-expanded="true">Push Notification</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-3" aria-expanded="false">App Settings</a></li>
	   <li class="callback-show">
		  <a data-toggle="tab" href="#default-tab-4" aria-expanded="false">Campaign Configurator</a>
	   </li>
	   <li class=""><a data-toggle="tab" href="#default-tab-5" aria-expanded="false">Email</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-6" aria-expanded="false">SMS</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-9" aria-expanded="false">Security</a></li>
	   <li  class=""><a data-toggle="tab" href="#default-tab-10" aria-expanded="false">Kill Switch</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-11" aria-expanded="false">Channel</a></li>
	   <li class="featureSet" style="display:block;"><a data-toggle="tab" href="#default-tab-12" aria-expanded="false">Features</a></li>
	   <li class="appInboxSet" style="display:block;"><a data-toggle="tab" href="#default-tab-13" aria-expanded="false">App Inbox</a></li>
	   <li class="" style="display:block;"><a data-toggle="tab" href="#default-tab-14" aria-expanded="false">File Encryption</a></li>
	   <li class="" style="display:block;"><a data-toggle="tab" href="#default-tab-15" aria-expanded="false">Push Notification Setting</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-16" aria-expanded="false">Utm Settings</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-17" aria-expanded="false">Partner</a></li>
	   <li class="" id="allowlisttab"><a data-toggle="tab" href="#default-tab-18" aria-expanded="false">Allow List</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-19" aria-expanded="false">Logs</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-20" aria-expanded="false">Campaign Analytics</a></li>
	   <li class=""><a data-toggle="tab" href="#default-tab-21" aria-expanded="false"> Site Settings</a></li>

	</ul>
	<!-- begin tab-content -->
	<div class="tab-content">
	   <!-- begin tab1-AppSettings -->
	   <div id="default-tab-1" class="tab-pane fade active in">
		  <legend style="font-size:12px;font-weight:bold;"> Application Keys</legend>
		  <div class="panel-body">
			 <form class="form-horizontal">
				<div class="form-group">
				   <label class="col-md-3 control-label" >App ID</label>
				   <div class="col-md-6">
					  <input type="text" class="form-control" placeholder="App ID"  value='<%=appid%>' name="appsettings" id="appIdText" autocomplete="off">
				   </div>
				   <button id="btnCopy1" type="button" class="btn btn-sm btn-primary m-r-5 col-md-1" data-clipboard-action="copy" data-clipboard-target="#appIdText" >Copy</button>
				</div>
				<div class="form-group">
				   <label class="col-md-3 control-label" >App Key</label>
				   <div class="col-md-6">
					  <input type="text" autocomplete="off" class="form-control" placeholder="App Key"  value='<%=appkey%>' name="appsettings" id="appKeyText">
				   </div>
				   <button id="btnCopy2" type="button" class="btn btn-sm btn-primary m-r-5 col-md-1" data-clipboard-action="copy" data-clipboard-target="#appKeyText" >Copy</button>
				</div>
				<div class="form-group">
				   <label class="col-md-3 control-label" >API Key</label>
				   <div class="col-md-6">
					  <input type="text" autocomplete="off" class="form-control" placeholder="Disabled input" name="appsettings" value='<%=member.api_key %>' id="apiKeyText" >
				   </div>
				   <button id="btnCopy3" type="button" class="btn btn-sm btn-primary m-r-5 col-md-1" data-clipboard-action="copy" data-clipboard-target="#apiKeyText" >Copy</button>
				</div>
			 </form>
		  </div>
		  <legend style="font-size:12px;font-weight:bold;"> Download SDK's</legend>
		  <div class="panel-body">
			 <form class="form-horizontal">
				<div class="form-group">
				   <label class="col-md-3 control-label" >iOS SDK </label>
				   <label class="control-label" style="padding-left:12px;"><a href="https://appiceprod.blob.core.windows.net/appice-doc/ios_apice_lite_skds.zip">Download</a></label>
				</div>
			 </form>
		  </div>
	   </div>
	   <!-- End tab1-AppSettings -->
	   <!-- begin tab2-PushNotification -->
	   <div id="default-tab-2" class="tab-pane fade ">
		  <div class="row"  >
			 <div class="col-md-8">
				To be able to send Push Notifications, we need to link your account with the appropriate certificate and keys. Make sure that you do specify the correct certificate keys for your production environment as well as your test/staging/development environment.
				<br />
				<br />
				<br />
			 </div>
			 <div class="col-md-1 col-sm-6">
				<input type="checkbox" checked data-off-text="&nbsp;Production" data-on-text="Development" id="chkDevProSwitch" data-label-text="Production" data-on-color="success" data-off-color="success">
			 </div>
		  </div>
		  <div class="row">
			 <ul class="nav nav-pills">
				<li class="active"><a href="#nav-pills-tab-1" data-toggle="tab" aria-expanded="true">Apple Push Notification</a></li>
				<li class=""><a href="#nav-pills-tab-2" data-toggle="tab" aria-expanded="false">External Push Notification URl</a></li>
				<li class="">
				   <a href="#nav-pills-tab-3" data-toggle="tab" aria-expanded="false">Firebase Cloud Messaging (FCM)</a>
				</li>
				<li class="">
				   <a href="#nav-pills-tab-4" data-toggle="tab" aria-expanded="false">Web Push Notification (WPN)</a>
				</li>
				<li class="">
				 <a href="#nav-pills-tab-5" data-toggle="tab" aria-expanded="false">Global Frequency Capping</a>
			  </li>
			  <li class="">
				 <a href="#nav-pills-tab-6" data-toggle="tab" aria-expanded="false">Do Not Disturb</a>
			  </li>
			  <li class="">
				<a href="#nav-pills-tab-7" data-toggle="tab" aria-expanded="false">Customization </a>
			 </li>

				<li class="">
				</li>
			 </ul>
			 <div class="tab-content">
				<div class="tab-pane fade active in" id="nav-pills-tab-1">
				   <legend id="apns" style="font-size:12px;font-weight:bold;"> Apple Push Notification Service(APNS) -- Development</legend>
				   <!-- </div>-->
				   <div class="panel-body">
					   <!-- IOS certification upload old code for future use --> 
			 
					  <form id="fileupload3" class="form-horizontal">
						 <div class="form-group">
							 <label  class="col-md-3 control-label"> Auth Key</label>
							 <div class="col-md-6">
								<input type="text" autocomplete="off" class="form-control" placeholder="P8 Key" disabled="" id="certName3" value="<%=devcert2%>">
								<input type="text" hidden="true" id="certPath3">
							 </div>
							 <div class="col-md-1" style="width: 95px;">
								<div id="mybutton" class="btn-primary" style="border:none;border-radius:3px">
								   <input type="file" accept=".p8,.p12" id="Certfi3" name="upload" class="fileObject">
								   Upload
								</div>
							 </div>
							 <div class="col-md-9" >
								<span id="ios_cert3Error" style="display: none;margin-left: 250px;">Please upload app auth key file</span>
							 </div>
						  </div>
						  <div class="form-group">
							 <label  class="col-md-3 control-label">Auth Key Type</label>
							 <div class="col-md-6">
								<select class="form-control"  id="auth_key_type" >
									 <option value="p8" selected> p8 </option>
									 <option value="p12"> p12 </option>
								</select>
								<span id="auth-error" style="display: none;margin-left: 250px;color: red; "hidden>Please check Auth Key type</span>
							 </div>
							 <div class="col-md-9" >
								<span id="ios_bundle_id_Error" style="display: none;margin-left: 250px;">Please enter app bundle id</span>
							 </div>
						  </div>
						  <div class="form-group">
							 <label  class="col-md-3 control-label">App Bundle ID</label>
							 <div class="col-md-6">
								<input type="text" autocomplete="off" class="form-control" placeholder="app bundle id" id="ios_bundleid" >
							 </div>
							 <div class="col-md-9" >
								<span id="ios_bundle_id_Error" style="display: none;margin-left: 250px;">Please enter app bundle id</span>
							 </div>
						  </div>
						  <div class="form-group" id="keyid">
							  <label  class="col-md-3 control-label">Key ID</label>
							  <div class="col-md-6">
								 <input type="text" autocomplete="off" class="form-control" placeholder="key id" id="ios_keyid" >
							  </div>
							  <div class="col-md-9">
								 <span id="ios_key_id_Error" style="display: none;margin-left: 250px;">Please enter key Id of bundle id</span>
							  </div>
						   </div>
  
						   <div class="form-group" id="teamid">
							 <label  class="col-md-3 control-label">Team ID</label>
							 <div class="col-md-6">
								<input type="text" autocomplete="off" class="form-control" placeholder="team id" id="ios_teamid" >
							 </div>
							 <div class="col-md-9">
								<span id="ios_team_id_Error" style="display: none;margin-left: 250px;">Please enter Team Id of bundle id</span>
							 </div>
						  </div>
						  <div class="form-group" id="topic">
							 <label  class="col-md-3 control-label">Topic</label>
							 <div class="col-md-6">
								<input type="text" autocomplete="off" class="form-control" placeholder="topic" id="ios_topic" >
							 </div>
							 <div class="col-md-9">
								<span id="ios_topic_Error" style="display: none;margin-left: 250px;">Please enter Topic</span>
							 </div>
						  </div>
						  <div class="form-group" id="pas">
							<label  class="col-md-3 control-label">Passphrase</label>
							<div class="col-md-6">
							   <input type="text" autocomplete="off" class="form-control" placeholder="password" id="ios_passphrase" >
							</div>
							<div class="col-md-9">
							   <span id="ios_team_id_Error" style="display: none;margin-left: 250px;">Please enter Password</span>
							</div>
						 </div>

						 <div class="form-group" >
							<label  class="col-md-3 control-label">Proxy Host</label>
							<div class="col-md-6">
							   <input type="text" autocomplete="off" class="form-control" placeholder="Please Enter Proxy Host" id="proxyUrl" >
							</div>
							<div class="col-md-9">
							</div>
						 </div>

						 <div class="form-group" id="teamid">
							<label  class="col-md-3 control-label">Proxy Port </label>
							<div class="col-md-6">
							   <input type="number" autocomplete="off" class="form-control" placeholder="Please Enter Proxy Port" id="proxyPORT" >
							</div>
							<div class="col-md-9">
							</div>
						 </div>
						 
						 <div class="form-group">
							<label  class="col-md-3 control-label"></label>
							<div class="col-md-6">
							   <button id="btnUploadCert" type="button" class="btn btn-sm btn-success m-r-5 col-md " >Save Files</button>
							</div>
						 </div>
					  </form>
				   </div>
				</div>
				  <div class="tab-pane fade" id="nav-pills-tab-2">
					 <legend  style="font-size:12px;font-weight:bold;" id="epnu"> External Push Notification URL -- Development </legend>
					 <div class="panel-body">
						<form class="form-horizontal">
						   <div class="form-group">
							  <label class="col-md-3 control-label" >Push Notification URL</label>
							  <div class="col-md-6">
								 <input type="text" autocomplete="off" value="<%=devepnukey%>" class="form-control" placeholder="Push Notification URL" id="EPNUKEYS">
							  </div>
							  <div class="col-md-1 ">
								 <button id="btnUpdateepnuKeys" type="button" class="btn btn-sm btn-success m-r-5 col-md " >Save </button>
							  </div>
							  <div class="col-md-9" >
								 <span id="EPNUKeysError" style="display: none;margin-left: 250px;">Push Notification URL</span>
							  </div>
						   </div>
						</form>
					 </div>
				  </div>
				  <div class="tab-pane fade" id="nav-pills-tab-3">
					 <legend style="font-size:12px;font-weight:bold;" id="fcm"> Firebase Cloud Messaging (FCM) -- Development </legend>
					 <div class="panel-body">
						<form class="form-horizontal uploadFcm" enctype="multipart/form-data" action="/apps/fcmcertificate" method="POST">
					
							<br>
							<br>
					
							<!-- Div for JSON file upload -->
							<div class="form-group" id="jsonFile">
								<!-- label -->
								<label class="col-md-3 control-label"> JSON File</label>
					
								<div class="col-md-6">
									<input type="text" autocomplete="off" class="form-control" placeholder="Upload your JSON file" id="json-cert-name" disabled>
								</div>
					
								<div class="col-md-1" style="width: 95px;">
									<div id="mybutton" class="btn-primary" style="border:none;border-radius:3px">
										<input type="file" accept=".json" id="json-cert" name="upload" class="fileObject">
										Upload
									</div>
								</div>
							</div>
					
							<!-- Proxy Should be for both JSON file upload -->
							<div class="form-group">
								<div class="row">
									<div class="col-md-12">
										<label class="col-md-3 control-label"> Proxy <span class="text-muted">(Optional)</span> </label>
										<div class="col-md-6">
											<input type="text" autocomplete="off" class="form-control" placeholder="Http Proxy" id="http_proxy">
										</div>
									</div>
								</div>
							</div>
					
							<!-- Div for save button -->
							<div class="form-group">
								<label class="col-md-3 control-label"></label>
								<div class="col-md-6">
									<button id="btnUpdateFCMdb" type="button" class="btn btn-sm btn-success m-r-5 col-md">Save</button>
								</div>
							</div>
					
						</form>
					</div>
				  </div>
				  <div class="tab-pane fade" id="nav-pills-tab-4">
					 <legend style="font-size:12px;font-weight:bold;" id="wpn"> Web Push Notificatoin (WPN) -- Development </legend>
					 <div class="panel-body">
						<form class="form-horizontal uploadFcm" enctype="multipart/form-data" action="/apps/webpushcertificate" method="POST">
						   <div class="form-group">
							  <label class="col-md-3 control-label">Private Key</label>
							  <div class="col-md-6">
								 <input type="text" autocomplete="off" value="<%=web_private_key%>" class="form-control" placeholder="Private Key" id="web_private_key">
							  </div>
						   </div>
						   <div class="form-group">
							  <label class="col-md-3 control-label">Public Key</label>
							  <div class="col-md-6">
								 <input type="text" autocomplete="off" value="<%=web_public_key%>" class="form-control" placeholder="Public Key" id="web_public_key">
							  </div>
						   </div>
						   <div class="form-group">
							  <label class="col-md-3 control-label">Subject</label>
							  <div class="col-md-6">
								 <input type="text" autocomplete="off" value="<%=web_subject%>" class="form-control" placeholder="Subject" id="web_subject">
							  </div>
						   </div>
						   <div class="form-group">
							  <div class="col-md-6">
								 <p></p>
							  </div>
							  <div class="col-md-1 ">
								 <button id="btnUpdateWebPush" type="button" class="btn btn-sm btn-success m-r-5 col-md ">Save </button>
							  </div>
							  <div class="col-md-5">
								 <p></p>
							  </div>
						   </div>
						   <div class="form-group">
							  <div class="col-md-9">
								 <span id="webPushError" style="display: none;margin-left: 250px;color:red;"></span>
							  </div>
						   </div>
						</form>
					 </div>
				  </div>
				  <div class="tab-pane fade" id="nav-pills-tab-5">
				   <legend style="font-size:12px;font-weight:bold;" id="cmnsetting"> Common Setting </legend>
				   <div class="panel-body">
					  <form class="form-horizontal uploadFcm" enctype="multipart/form-data" action="/apps/webpushcertificate" method="POST">
  <!-- Start First Div of Push Count -->
					   <div class="form-group">
						   <label class="col-md-5 control-label">
							   <label class="switch">
								   <input type="checkbox" id="togBtnTotalPush" value="true">
								   <span class="slider round"></span> &nbsp; &nbsp; 
							   </label>
							   &nbsp;&nbsp;Total push notifications send upto </label>
						   <div class="col-md-7" id="divInputTotalPush">
							   <input id="total_notification_count" value="" type="number" min="1" style="width:50px;" />
							   <label>in</label>
							   <input id="total_notification_days" value="" type="number" min="1" max="30" />
							   <label>days</label>
						   </div>
					   </div>
	   <!-- Sub Div of Push Count to be implemented later on -->
					   <!-- <div id="subDivTotalPush">
						   <div class="form-group">
							   <label class="col-md-5 control-label">
								   <label class="switch">
									   <input type="checkbox" id="togBtn2" value="false" class="sub1toggle">
									   <span class="slider round"></span>
								   </label>
								   General push notifications send upto </label>
							   <div class="col-md-7" id="div2">
								   <input type="number" min="1" style="width:50px;" />
								   <label>in</label>
								   <input type="number" min="1" max="30" />
								   <label>days</label>
							   </div>
						   </div>
						   <div class="form-group">
							   <label class="col-md-5 control-label">
								   <label class="switch">
									   <input type="checkbox" id="togBtn3" value="false" class="sub1toggle">
									   <span class="slider round"></span>
								   </label>
								   Smart Trigger push notifications send upto </label>
							   <div class="col-md-7" id="div3">
								   <input type="number" min="1" style="width:50px;" />
								   <label>in</label>
								   <input type="number" min="1" max="30" />
								   <label>days</label>
							   </div>
						   </div>
						   <div class="form-group">
							   <label class="col-md-5 control-label">
								   <label class="switch">
									   <input type="checkbox" id="togBtn4" value="false" class="sub1toggle">
									   <span class="slider round"></span>
								   </label>
								   Geo Fenced push notifications send upto </label>
							   <div class="col-md-7" id="div4">
								   <input type="number" min="1" style="width:50px;" />
								   <label>in</label>
								   <input type="number" min="1" max="30" />
								   <label>days</label>
							   </div>
						   </div>
					   </div> -->
	   <!-- End Sub Div Of PusH Count -->
  <!-- End First Main Div -->
  
  <!-- Start Second Div of Frequency refresh -->
					   <div class="form-group">
						   <label class="col-md-4 control-label">
							   <label class="switch">
								   <input type="checkbox" id="togBtnfrequency" value="false">
								   <span class="slider round"></span>
							   </label>
							   &nbsp;&nbsp;Refresh the Frequency Capping Daily at 00:00 GMT </label>
					   </div>
	   <!-- Sub div of frequency refresh  -->
						<div class="form-group" id="subDivBtnfrequency">
						   <label class="col-md-5 control-label">
							   &nbsp;&nbsp; Minimun delay between two notification </label>
						   <div class="col-md-7">
							  <input id="delay_count" value="" type="number"min="1" style="width:50px;"/>
							  <label >in</label>
							  <select id="selectedtime" name="time">
							   <option value="seconds">Seconds</option>
							   <option value="minutes" selected >Minutes</option>
							   <option value="hours">Hours</option>
							 </select>
						   </div>
						</div>	
	   <!--End Sub div of frequency refresh   -->
  <!--End Second Div of Frequency refresh -->
						 <div class="form-group">
							<div class="col-md-6">
							   <p></p>
							</div>
							<div class="col-md-1 ">
							   <button id="btnSaveCapping" type="button" class="btn btn-sm btn-success m-r-5 col-md ">Save </button>
							</div>
							<div class="col-md-5">
							   <p></p>
							</div>
						 </div>
						 <div class="form-group">
							<div class="col-md-9">
							   <span id="cappingError" style="display: none;margin-left: 250px;color:red;"></span>
							</div>
						 </div>
					  </form>
				   </div>
				</div>
  <!-- start div of DND -->
  <div class="tab-pane fade" id="nav-pills-tab-6">
   <legend style="font-size:12px;font-weight:bold;" id="cmnsetting"> DND SETTING </legend>
   <div class="panel-body">
	   <form class="form-horizontal >
  
	   <div class="form-group">
		   <label class="col-md-5 control-label">
			   <label class="switch">
				   <input type="checkbox" id="togBtnDnd" value="true">
				   <span class="slider round"></span> &nbsp; &nbsp;
			   </label>
			   &nbsp;&nbsp;Do Not Disturb (DND) </label>
	   </form>
   </div>
  
   <form class="form-horizontal">
	   <div id="subDivBtnDnd">
  
		   <div class="form-group" ">
		   <label class="col-md-2 control-label">
			   &nbsp;&nbsp; Set DND Period </label>
			   <div class="col-md-10">
  
				   <input id="start_Hour" value="" type="number" min="1" max="12" style="width:50px;" /> :
				   <input id="start_Min" value="" type="number" min="0" max="59" style="width:50px;" />
				   <select id="start_timeshift" name="time">
					   <option value="PM" selected>PM</option>
					   <option value="AM">AM</option>
				   </select>
				   <span style="display:inline-block; width: 10px;"></span>
				   <label>To</label>
				   <span style="display:inline-block; width: 10px;"></span>
				   <input id="end_Hour" value="" type="number" min="1" max="12" style="width:50px;" /> :
				   <input id="end_Min" value="" type="number" min="0" max="59" style="width:50px;" />
				   <select id="end_timeshift" name="time">
					   <option value="AM" selected>AM</option>
					   <option value="PM">PM</option>
				   </select>
				   <span style="display:inline-block; width: 10px;"></span>
				   <label> DND will be activated based on user's timezone</label>
			   </div>
		   </div>
  
		   <div class="form-group">
			   <div class="col-md-3"></div>
			   <label class="col-md-6 control-label" style="text-align: left">
				   <h5 style="font-weight: bold;">For the messages generated during the DND period</h5>
			   </label>
		   </div>
  
		   <div class="form-group">
			   <div class="col-md-3 control-label"></div>
			   <div class="col-md-7">
  
				   <input type="radio" name="JTP" id="dnd_discard" value="discard">Discard
				   these messages and do not send them later<br><br>
				   <input type="radio" name="JTP" id="dnd_send_later" value="send_later">Save
				   these messages and sent them after DND period is over<br>
  
			   </div>
  
		   </div>
		   <!-- Step 4  TO BE  -->
  
		   <div id="Step_4">
			   <div class="form-group">
				   <div class="col-md-3"></div>
				   <label class="col-md-6 control-label " style="text-align: left">
					   <h5 style="font-weight: bold;">Save And Send Criteria </h5>
				   </label>
			   </div>
  
			   <div class="form-group">
				   <div class="col-md-3 control-label"></div>
				   <div class="col-md-7">
  
					   <input type="radio" name="step4" id="send_all" value="send_all">Send
					   all the queued messages<br><br>
					   <input type="radio" name="step4" id="send_one_campaign"
						   value="send_one_campaign">Send only one message from each Campaign<br><br>
					   <input type="radio" name="step4" id="send_only_one"
						   value="send_only_one">Send only one message across Push Campaigns<br>
  
				   </div>
			   </div>
  
		   </div>
		   <div id="Step_4_1">
			   <div class="form-group">
				   <div class="col-md-3"></div>
				   <label class="col-md-6 control-label" style="text-align: left">
					   <h5 style="font-weight: bold;">Order in which queued messages should be sent </h5>
				   </label>
			   </div>
  
			   <div class="form-group">
				   <div class="col-md-3 control-label"></div>
				   <div class="col-md-7">
  
					   <input type="radio" name="step4_1" id="lifo" value="lifo">Send
					   most recent messages first (last in first out)<br><br>
					   <input type="radio" name="step4_1" id="fifo" value="fifo">Send
					   least recent message first (first in first out)<br><br>
				   </div>
			   </div>
  
		   </div>
  
		   <div id="Step_4_1_1">
			   <div class="form-group">
				   <div class="col-md-3"></div>
				   <label class="col-md-6 control-label" style="text-align: left">
					   <h5 style="font-weight: bold;">Control queued messages sending </h5>
				   </label>
			   </div>
  
			   <div class="form-group">
				   <div class="col-md-3 control-label"></div>
				   <div class="col-md-7">
  
					   <input type="radio" name="step4_1_1" id="all_at_once" value="all_at_once">Send all messages at
					   one<br><br>
					   <input type="radio" name="step4_1_1" id="with_gap" value="with_gap">Send messages at a gap of
					   <input id="gap_Min" value="" type="number" min="0" max="59" style="width:50px;" /> mins<br><br>
				   </div>
			   </div>
  
		   </div>
		   <!--  STEP 4  -->
	   </div>
  
   </form>
  
  
  
  <div class="form-group">
   <div class="col-md-6">
	   <p></p>
   </div>
   <div class="col-md-1 ">
	   <button id="btnSaveDnd" type="button" class="btn btn-sm btn-success m-r-5 col-md ">Save </button>
   </div>
   <div class="col-md-5">
	   <p></p>
   </div>
  </div>
  <div class="form-group">
   <div class="col-md-9">
	   <span id="DndError" style="display: none;margin-left: 250px;color:red;"></span>
   </div>
  </div>
  </div>
  <!-- End div of DND -->
 
  <!-- Custom Tab Started  -->
<div id="nav-pills-tab-7" class="tab-pane fade custom-setting">

	<!-- Information Row the UI  -->
	<div class="row">
		<div class="col-md-8">
			This section provides users with extensive customization options for the payloads used in campaigns. Here,
			you can define custom fields, specifying their unique key names and the sources from which their values will
			be derived. Additionally, users can craft custom scripts that dynamically modify the default campaign
			payloads according to their specific requirements.
			<br />
			<br />
		</div>
	</div>

   <!--  Tabs ,  -->
	<ul class="nav nav-pills">
		<li class="nav-item active"> <a class="nav-link active" data-toggle="tab" href="#sub-custom-tab-1">Custom Fields</a>
		</li>
		<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#sub-custom-tab-1">Script </a> </li>
	</ul>

	<div class="tab-content">
		<!-- Sub Tab 1 Content -->
		<div id="sub-custom-tab-1" class="tab-pane fade active in">

			<legend style="font-size:12px; font-weight:bold;" id="cmnsetting">Custom Fields in the Campaign Payload
			</legend>

			<div class="panel-body">

				<div class="form-group" id="customFieldsContainer">
					<div class="row">
						<div class="col-md-3">
							<label class="control-label">Key</label>
						</div>
						<div class="col-md-6">
							<label class="control-label">Reference Value</label>
						</div>
						<div class="col-md-1"></div>
					</div>
				</div>

				<div class="form-group">
					<div class="row">
						<div class="col-md-3">
							<input type="text" autocapitalize="off" id="custom_key" class="form-control"
								placeholder="Enter Key" autocomplete="off" autocorrect="off">
						</div>
						<div class="col-md-6">
							<input type="text" autocapitalize="off" id="custom_value" class="form-control"
								placeholder="Enter Reference Value" autocomplete="off" autocorrect="off">
						</div>
						<div class="col-md-1">
							<button id="addCustomKey" type="button" class="btn btn-primary btn-sm">Add</button>
						</div>
					</div>
				</div>



				<div class="form-group">
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-9">
							<div id="list-container">
								<ul id="custom_field_list" style="list-style-type: none; padding: 0; margin-bottom: 0;">
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-9">
							<div class="clearfix"></div>
							<button style="margin-top:20px;" class="btn btn-primary save_custom">Save</button>
						</div>
					</div>
				</div>
			</div>


		</div>

		<!-- Sub Tab 2 Content -->
		<div id="sub-custom-tab-2" class="tab-pane fade">
			<legend style="font-size:12px; font-weight:bold;">Custom Script</legend>

			<div class="panel-body">
				<!-- Script text area -->
				<div class="form-group">
					<div class="row">
						<div class="col-md-12">
							<textarea class="form-control" id="custom_script" rows="8"
								placeholder="Enter your script/code here..."></textarea>
						</div>
					</div>
				</div>

				<!-- Save button -->
				<div class="form-group">
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-9">
							<div class="clearfix"></div>
							<button style="margin-top:20px;" class="btn btn-primary save_custom">Save</button>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

</div>
 <!-- Custom Tab ended  -->



			   </div>
		  </div>
	   </div>
	   <!-- End tab2-PushNotification -->
	   <!-- begin tab3-AppSettings -->
	   <div id="default-tab-3" class="tab-pane fade ">
		  <div class="row">
			 <!-- Shaila for App -->
			 <a href=""></a>
			 <div class="panel panel-info">
				<div class="panel-heading">
				   <h4 class="panel-title">Update App Url</h4>
				</div>
				<div class="panel-body">
				   <div class="col-md-6">
					  Give us the path to your application and we will start gathering data and churn insights for you to act upon.If your app is available on different platforms,please make sure you provide us the path of all the platforms below<br/><br/>
					  <!--Start col-12-->
					  <div class="col-12 ui-sortable">
						 <!--Start panel-body-->
						 <div class="panel-body">
							<div class="form-horizontal">
							   <div class="form-group">
								  <div class="col-md-3">
									 <img style="height: 40px;width: 100px;margin-bottom: 10px;"  src="images/dashboard/appstore.png">
								  </div>
								  <div class="col-md-6">
									 <%if(!(iosUrl) && (iosUrl == googleUrl )){%>
									 <input type="text" autocomplete="off" id="appnameStore" class="form-control appnameStore" placeholder="Application Name / App Store URL" name="appnameStore" value="<%=name%>">
									 <%}else {%>
									 <input type="text" autocomplete="off" id="appnameStore" class="form-control appnameStore" placeholder="Application Name / App Store URL" name="appnameStore" value="<%=iosUrl%>">
									 <%}%>
								  </div>
							   </div>
							   <div class="form-group">
								  <div class="col-md-3">
									 <img style="height: 40px;width: 100px;margin-bottom: 10px;"  src="images/dashboard/google.jpg">
								  </div>
								  <div class="col-md-6">
									 <%if(!(googleUrl) && (googleUrl == iosUrl)){%>
									 <input type="text" autocomplete="off" id="appnameGoogle" class="form-control appnameGoogle" placeholder="Application Name / App Store URL" name="appnameGoogle" value="<%=name%>">
									 <%}else{%>
									 <input type="text" autocomplete="off" id="appnameGoogle" class="form-control appnameGoogle" placeholder="Application Name / App Store URL" name="appnameGoogle" value="<%=googleUrl%>">
									 <%}%>
								  </div>
							   </div>
							   <div class="form-group">
								  <div class="col-md-3">
									 <input type="checkbox"> Other store</input>
								  </div>
								  <div class="col-md-6">
									 <input type="text" autocomplete="off" id="appnameOthers" class="form-control" placeholder="Application Name / App Store URL" name="appnameOthers" readonly>
								  </div>
							   </div>
							   <div class="form-group">
								  <label class="col-md-3 control-label"></label>
								  <div class="col-md-9">
									 <button id="btnUpdateApp" type="button" class="btn btn-sm btn-success">Update</button>
								  </div>
							   </div>
							</div>
						 </div>
						 <!--End panel-body-->
					  </div>
					  <!--End col-12-->
				   </div>
				   <div class="col-md-6">
					  <div class="panel panel-warning">
						 <div class="panel-heading">
							<h4 class="panel-title p-heading">Entry of App</h4>
						 </div>
						 <div class="panel-body">
							<div class="form-horizontal">
							   <div class="form-group">
								  <div class="col-md-3">
									 <img src="<%=icon%>" id="appImage" style="height: 60px;width: 60px;margin-bottom: 10px;"/>
								  </div>
								  <div id="appCategory"											style="display:none"><%=category%></div>
								  <h4 id="appname"><%=name%></h4>
							   </div>
							   <div class="form-group">
								  <div class="col-md-3">
									 <img src="images/dashboard/appstore.png" style="height: 40px;width: 100px;margin-bottom: 10px;">
								  </div>
								  <div class="col-md-12">
									 <label id="lblappnameas" style="font-size:10px;font-weight:bold" class="control-label"  name="lblappnameas" ><%=iosUrl%> </label>
								  </div>
							   </div>
							   <div class="form-group">
								  <div class="col-md-3">
									 <img style="height: 40px;width: 100px;margin-bottom: 10px;" src="images/dashboard/google.jpg">
								  </div>
								  <div class="col-md-12">
									 <label id="lblappnamegp" style="font-size:10px;font-weight:bold" class="control-label"  name="lblappnamegp" > <%=googleUrl%> </label>
								  </div>
							   </div>
							</div>
						 </div>
					  </div>
				   </div>
				   <!-- end row -->
				</div>
			 </div>
			 <!-- Shaila for APP -->
		  </div>
	   </div>
	   <!-- End tab3-AppSettings -->
	   <!-- Start App Call back urls -->

<!--------------------------------------- Campaign configrator starts here ---------------------------------------------------->
	   <div id="default-tab-4" class="tab-pane fade">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-6" style="margin-top: 3%; margin-left: 0%;">
				<label for=""><b style="font-size: 2em;">Generic settings for all Partner types</b></label>
				<p id="err-for-camp-conf" style="color: red; margin-left: 2%;" hidden> No Data for this channel yet.</p>
			</div>
		</div>
	
		<div id="campConfigurator" class="sms-form" style="margin-left: 260px;">
			<div class="panel-body" style="margin-top: 0%; display: flex; flex-direction: column;">
				<form class="form-horizontal" style="width: 70%; margin-right: 5%;">
					<legend style="font-size:20px;font-weight:bold; margin-top: 5%; text-align: left;">Partner</legend>
				
					<div class="form-group">
						<label class="col-md-3 control-label">Channel</label>
						<div class="col-md-9">
							<select name="" class="form-control" id="channelCampConfig">
								<!-- Options will be dynamically added here -->
							</select>
						</div>
						<div class="clearfix"></div>
					</div>

					<div class="form-group">
						<label class="col-md-3 control-label">Partner</label>
						<div class="col-md-9">
							<select name="" class="form-control" id="partnerCampConfig">
								<!-- Options will be dynamically added here -->
							</select>
						</div>
						<div class="clearfix"></div>
					</div>

										<!-- Dynamically Adding validatorMappings -->
										<div id="keyvaluepairsGen" style="margin-left: 24.2%;"></div>
                                     
                                 
										<!-- <div class="form-group" style="margin-left: 26%;">
										   <button id="addRowForGen" type="button" class="btn btn-sm btn-success">Add Validator Mappings</button>
										</div> -->

										
					<legend style="font-size:20px;font-weight:bold; margin-top: 5%; text-align: left;">Request</legend>
		
					<div class="form-group">
						<label class="col-md-3 control-label">Provider Type</label>
						<div class="col-md-9">
							<select name="" class="form-control" id="providerType">
								<option value="smtp">SMTP</option>
								<option value="ses">SES</option>
								<option value="generic">Generic</option>
								<option value="cns">CNS</option>
							</select>
						</div>
						<div class="clearfix"></div>
					</div>
		
					<div class="form-group">
						<label class="col-md-3 control-label">Url</label>
						<div class="col-md-9">
							<input type="text" autocomplete="off" class="form-control" placeholder="Enter url" id="urlcampaignConfig">
						</div>
						<div class="clearfix"></div>
					</div>
		
					<!-- Dynamically Added Key-Value Pairs for Request -->
					<form id="myForm">
						<button type="button" id="addRequestRows">Add Row</button>
					</form>
                         <table id="requestData" style="width: 50%;">
                             <thead>
                                 <tr>
                                     <th>Source Key</th>
                                     <th>Source Value</th>
                                     <th>Source Type</th>
                                     <th>Destination Key</th>
                                     <th>Destination Value</th>
                                     <th>Destination Type</th>
                                     <th>Action</th> 
                                 </tr>
                             </thead>
                             <tbody>
                             </tbody>
                         </table>

					<div class="clearfix" style="margin-bottom: 80px;"></div>
				</form>
		
				<form class="form-horizontal" style="width: 70%; margin-right: 5%;">
					<legend style="font-size:20px;font-weight:bold; text-align: left;">Response</legend>
		
					<div class="form-group">
						<label class="col-md-3 control-label">Destination</label>
						<div class="col-md-9">
							<input type="text" autocomplete="off" class="form-control" placeholder="Url will be generated here" id="destination">
						</div>
						<div class="clearfix"></div>
					</div>
		
					<div class="form-group">
						<label class="col-md-3 control-label">HTTP Method</label>
						<div class="col-md-9">
							<select name="http_method" class="form-control" id="verbcampConfig">
								<option value="GET">GET</option>
								<option value="POST">POST</option>
							</select>
						</div>
						<div class="clearfix"></div>
					</div>

					<div class="form-group" style="margin-bottom: 50px;">
						<label class="col-md-3 control-label">Payload Key</label>
						<div class="col-md-9">
							<input type="text" autocomplete="off" class="form-control" placeholder="Enter Payload Key" id="payload_key">
						</div>
						<div class="clearfix"></div>
					</div>
		
					<form id="myForm">
						<button type="button" id="addResponseRows">Add Row</button>
					</form>
					
					<!-- Data Table -->
				    <table id="responseData" style="width: 50%;">
						<thead>
							<tr>
								<th>Source Key</th>
								<th>Source Value</th>
								<th>Source Type</th>
								<th>Destination Key</th>
								<th>Destination Value</th>
								<th>Destination Type</th>
								<th>Action</th> 
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</form>
			</div>
			<button style="margin-top: 20px; margin-left: 15px;" id="saveCampConfigurator" class="btn btn-primary">Save</button>
			<button style="margin-top: 20px; margin-left: 15px;" id="removeCampConfigurator" class="btn btn-primary">Clear</button>
		</div>
		
	
	  </div>
	   <!-- End App Call back urls -->
	   <!-- Email setup -->
	   <style>
		table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
    th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
    }
			 .switch {
				position: relative;
				width: 40px;
				height: 22px;
			 }
			 
			 /* Hide default HTML checkbox */
			 .switch input {
				 opacity: 0;
				 width: 0;
				 height: 0;
			 }
			 
			 /* The slider */
			 .slider {
				 position: absolute;
				 cursor: pointer;
				 top: 0;
				 left: 0;
				 right: 0;
				 bottom: 0;
				 background-color: #ccc;
				 -webkit-transition: .4s;
				 transition: .4s;
			 }
			 
			 .slider:before {
				 position: absolute;
				 content: "";
				 height: 17px;
				 width: 17px;
				 left: 4px;
				 bottom: 4px;
				 background-color: white;
				 -webkit-transition: .4s;
				 transition: .4s;
			 }
			 
			 input:checked + .slider {
				 background-color: #49C144;
			 }
			 
			 input:focus + .slider {
				 box-shadow: 0 0 1px #49C144;
			 }
			 
			 input:checked + .slider:before {
				 -webkit-transform: translateX(26px);
				 -ms-transform: translateX(26px);
				 transform: translateX(26px);
			 }
			 
			 /* Rounded sliders */
			 .slider.round {
				 border-radius: 34px;
			 }
			 
			 .slider.round:before {
				 border-radius: 50%;
				 display: inline-block;
			 }

			 .disable-div {
				 pointer-events: none;
			 }

		  .brand-div {
		  background-color: #cccccc;
		  width: 100px;
		  height: 100px;
		  border-radius: 8px;
		  display: inline-block;
		  margin:15px;
		  }
		  .brand-div a.fill-div {
		  display: block;
		  height: 100%;
		  width: 100%;
		  text-decoration: none;
		  text-align: center;
		  vertical-align: middle;
		  font-weight: bold;
		  font-size: 14px;
		  color: #ffffff;
		  }
		  .activeTab{
		  background-color: #ffffff!important;
		  color: #000000;
		  }
		  .activeTab a.fill-div{
		  color: #000000;
		  }
	   </style>
	   <div id="default-tab-5" class="tab-pane fade">
		 <div class="row">
			 <ul class="nav nav-pills">
				 <li class="active"><a href="#nav-pills-tab-7" data-toggle="tab" aria-expanded="true">Email Settings</a></li>
				 <li class=""><a href="#nav-pills-tab-8" data-toggle="tab" aria-expanded="false">Budget </a></li>
			 </ul>
			 <div class="tab-content">
				 <div class="tab-pane fade active in" id="nav-pills-tab-7">
					 <div class="panel-body">
						 <legend style="font-size:12px;font-weight:bold;">Email Settings</legend>
						 <div class="brand-div activeTab" id="smtp">
							 <a data-toggle="tab" aria-expanded="false" href="#netcoreScreen" class="fill-div"> <img
									 src="images/dashboard/netcore_email.png" alt="" height="100px" width="100px" style="box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
						 border-radius: 7%; margin: 0;"> </a>
						 </div>
						 <div class="brand-div" id="aws_ses">
							 <a data-toggle="tab" aria-expanded="false" href="#awsScreen" class="fill-div"> <img
									 src="images/dashboard/aws-ses-logo.png" alt="" height="100px" width="100px" style="box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
						 border-radius: 7%; margin: 0;"> </a>
						 </div>
	 
						 <div class="tab-pane " id="netcoreScreen">
							 <% var netcore = (emailCfg['smtp'])?emailCfg['smtp']:{}%>
								 <legend style="font-size:12px;font-weight:bold;"></legend>
								 <div class="panel-body">
									 <form autocomplete="off" id="block-first-1email" class="form-horizontal">
										 <div class="form-group">
											 <label class="col-md-3 control-label">SMTP Username</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control" placeholder="SMTP Username" autocomplete="nope" value="<%=(netcore['smtp_un'])?netcore['smtp_un']:''%>" name="smtp_username" id="smtp_username">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">SMTP Password</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control" autocomplete="new-password" autocomplete="nope" placeholder="SMTP Password"  value="<%=(netcore['smtp_ps'])?netcore['smtp_ps']:''%>" name="smtp_password" id="smtp_password">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">Host</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control" placeholder="Host" autocomplete="nope" name="host" value="<%=(netcore['smtp_h'])?netcore['smtp_h']:''%>" id="smtp_host">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">Port</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control" placeholder="Port" autocomplete="nope" name="port" value="<%=(netcore['smtp_po'])?netcore['smtp_po']:''%>" id="smtp_port">
											 </div>
										 </div>

										 <div class="form-group">
											 <label class="col-md-3 control-label">From Name</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control" placeholder="From Email" autocomplete="nope" name="fromName" value="<%=(netcore['smtp_fromName'])?netcore['smtp_fromName']:''%>" id="smtp_fromName">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">From Address</label>
											 <div class="col-md-6">
												 <input type="email" autocomplete="off" class="form-control" placeholder="From Address" autocomplete="nope" name="fromAddress" value="<%=(netcore['smtp_fromAddress'])?netcore['smtp_fromAddress']:''%>" id="smtp_fromAddress">
											 </div>
										 </div>

										 <div class="form-group">
											 <label class="col-md-3 control-label">&nbsp;</label>
											 <div class="col-md-6 emailConfigError" style="color:red;">
											 </div>
										 </div>
									 </form>
								 </div>
	 
						 </div>
	 
						 <div class="tab-pane fade" id="awsScreen" style="display: none;">
							 <% var aws_ses=(emailCfg['aws_ses'])?emailCfg['aws_ses']:{}%>
								 <legend style="font-size:12px;font-weight:bold;"></legend>
								 <div class="panel-body">
									 <form autocomplete="off" id="block-first-1email" class="form-horizontal">
										 <div class="form-group">
											 <label class="col-md-3 control-label">Access key ID</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control"
													 placeholder="Access key ID" autocomplete="nope"
													 value="<%=(aws_ses['aws_accessKeyId'])?aws_ses['aws_accessKeyId']:''%>"
													 name="aws_ses_accessKeyId" id="aws_ses_accessKeyId">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">Secret Access KeyID</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control"
													 autocomplete="new-password" autocomplete="nope"
													 placeholder="Secret Access KeyID"
													 value="<%=(aws_ses['aws_secretAccessKey'])?aws_ses['aws_secretAccessKey']:''%>"
													 name="aws_ses_secretAccessKey" id="aws_ses_secretAccessKey">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">Region</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control"
													 placeholder="Region" autocomplete="nope" name="aws_ses_region"
													 value="<%=(aws_ses['aws_region'])?aws_ses['aws_region']:''%>"
													 id="aws_ses_region">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">Source Email</label>
											 <div class="col-md-6">
												 <input type="text" autocomplete="off" class="form-control"
													 placeholder="Source Email" autocomplete="nope"
													 name="aws_ses_sourceEmail"
													 value="<%=(aws_ses['aws_sourceEmail'])?aws_ses['aws_sourceEmail']:''%>"
													 id="aws_ses_sourceEmail">
											 </div>
										 </div>
										 <div class="form-group">
											 <label class="col-md-3 control-label">&nbsp;</label>
											 <div class="col-md-6 emailConfigError" id="" style="color:red;">
											 </div>
										 </div>
									 </form>
								 </div>
	 
	 
						 </div>

						 <div class="panel-body">
							 <div class="form-group">
								 <button type="button"
									 class="saveEmailConfiguration btn btn-sm btn-primary m-r-5 col-md-1">Save</button>
							 </div>
						 </div>
						 <!-- working -->
					 </div>
				 </div>
				 <div class="tab-pane fade " id="nav-pills-tab-8">
					 <legend style="font-size:12px;font-weight:bold;"> Budget Settings </legend>
					 <div class="panel-body">
						 <form class="form-horizontal">
							 <div class="form-group">
								 <label class="col-md-3 control-label">Currency</label>
								 <div class="col-md-3">
									 <select id="email_currency" class="form-control" name="currency">
										 <option value="rupees" selected>₹ Rupees</option>
										 <option value="paise">$ Paise</option>
									 </select>
								 </div>
								 <div class="col-md-6" style="width:10%;">

								 </div>
							 </div>
							 <div class="form-group">
								 <label class="col-md-3 control-label">Total Budget</label>
								 <div class="col-md-3">
									 <input type="number" class="form-control" placeholder="Total Budget." step="0.01"
										 name="total_budget" id="total_bdgt" autocomplete="off">
								 </div>
								 <div class="col-md-6" style="width:10%;">
								 </div>
							 </div>
	 
							 <div class="form-group">
								 <label class="col-md-3 control-label">Cost Per Email </label>
								 <div class="col-md-3">
									 <input type="number" class="form-control" placeholder="Cost Per Email." step="0.01"
										 name="cost_per_email" id="cost_per_email" autocomplete="off">
								 </div>
	 
								 <div class="col-md-6" style="width:10%;">
								 </div>
	 
							 </div>
							 <div class="clearfix"></div>
							 <div class="col-md-12" id="email_setting_err" style="color:red; margin-top: 20px;">
							 </div>
							 <div class="form-group">
								 <label class="col-md-3 control-label"> </label>
								 <div class="col-md-3">
									 <button type="button" id="save_bdgt" class="btn btn-sm btn-primary ">Save</button>
								 </div>
							 </div>
						 </form>
					 </div>
				 </div>
	 
			 </div>
		 </div>
	   </div>
	   <!-- end Email setup -->
	  <!--start  SMS setup -->
<div id="default-tab-6" class="tab-pane fade sms">
    <legend style="font-size:12px;font-weight:bold;">SMS Settings</legend>
  <!-- Gupshup Tab -->
<div class="brand-div activeTab" id="gupshup">
    <a data-toggle="tab" aria-expanded="false" href="" class="fill-div"> <img
		src="images/dashboard/logo_type6.png" alt="" height="100px" width="100px" style="box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
border-radius: 7%; margin: 0;"> </a>
</div>

    <!-- Gupshup form -->
    <div id="gupshupForm" class="sms-form">
        <form id="block-first-1sms" class="form-horizontal">
            <div class="form-group">
                <label class="col-md-3 control-label">User Id</label>
                <div class="col-md-6">
                    <input type="text" autocomplete="off" class="form-control" placeholder="User ID" autocomplete="off" autocorrect="off" autocapitalize="off" value="" name="gupshup_username" id="gupshup_username">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">Password</label>
                <div class="col-md-6">
                    <input type="text" autocomplete="off" class="form-control" placeholder="Password" autocomplete="new-password" value="" name="gupshup_password" id="gupshup_password">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label">&nbsp;</label>
                <div class="col-md-6" id="smsConfigError" style="color:red;"></div>
            </div>
        </form>
    </div>

    <legend style="font-size:12px;font-weight:bold;"></legend>

	<!-- Save button after both Gupshup and SMS set panels -->
<div class="panel-body">
    <div class="form-group">
        <button id="saveSMSConfiguration" type="button" class="btn btn-sm btn-primary m-r-5 col-md-1">Save</button>
    </div>
</div>
</div>
<!-- end SMS setup -->

		<!-- Feature Switch  setup -->
		<div id="default-tab-7" class="tab-pane fade FeatureSwitch">
		 <legend style="font-size:12px;font-weight:bold;">Feature Switch</legend>
		 <div class="panel-body" >
			<form id="block-first-1sms" class="form-horizontal">
			   <div class="form-group">
				  <label class="col-md-3 control-label">Android SDK Version</label>
				  <div class="col-md-6">
					 <input type="text" autocomplete="off" class="form-control" placeholder="Android SDK Version" autocomplete="a-sdkversion" value="" name="feature_androidsdkv" id="feature_androidsdkv">
				  </div>
			   </div>
			   <div class="form-group">
				  <label class="col-md-3 control-label" >iOS SDK Version</label>
				  <div class="col-md-6">
					 <input type="text" autocomplete="off" class="form-control" placeholder="iOS SDK Version" autocomplete="i-sdkversion" value="" name="feature_iossdkv" id="feature_iossdkv">
				  </div>
			   </div>
			   <div class="form-group">
				 <label class="col-md-3 control-label" >Web SDK Version</label>
				 <div class="col-md-6">
					<input type="text" autocomplete="off" class="form-control" placeholder="Web SDK Version" autocomplete="w-sdkversion" value="" name="feature_websdkv" id="feature_websdkv">
				 </div>
			  </div>
			  <div class="form-group">
				 <label class="col-md-3 control-label" >Base URL</label>
				 <div class="col-md-6">
					<input type="text" autocomplete="off" class="form-control" placeholder="Base URL" autocomplete="w-baseurl" value="" name="feature_baseurl" id="feature_baseurl">
				 </div>
			  </div>
			   <div class="form-group">
				  <label class="col-md-3 control-label" >&nbsp;</label>
				  <div class="col-md-6" id="saveFeatureError" style="color:red;">
				  </div>
			   </div>
			</form>
		 </div>
		 <legend style="font-size:12px;font-weight:bold;"></legend>
		 <div class="panel-body">
			<div class="form-group">
			   <button id="saveFeatureSwitchConfiguration" type="button" class="btn btn-sm btn-primary m-r-5 col-md-1">Save</button>
			</div>
		 </div>
	 </div>
<!-- end Feature Switch setup -->
		<!-- Starts Custom Settings----->
		<div id="default-tab-9" class="tab-pane fade custom-setting">
		 <form class="form-horizontal">
			 <div class="form-group">
				 <div class="row" style="margin-top: 40px;">
				 <label style="margin-top:7px;" class="control-label col-md-3">Reset Password Mode</label>
				 <div class="col-md-9" style="width: 50%;">
					 <select name="" id="resetPassword" class="form-control">
						 <option value="SMTP">SMTP</option>
						 <option value="ADMIN" >Admin</option>			
					 </select>	
				 </div>							
			 </div>
		 </div>
		 <div class="form-group">
			 <div class="row" >
					 <label style="margin-top:7px;" class="control-label col-md-3">Allow Concurrent Logins</label>
					 <div class="col-md-9" style="width: 50%;">
						 <select name="" id="concurrentLogin" class="form-control">
							 <option value="ON">On</option>
							 <option value="OFF" >Off</option>			
						 </select>	
					 </div>							
				 </div>
			 </div>
		 <div class="form-group">
			 <div class="row" >
			 <label style="margin-top:7px;" class="control-label col-md-3">Email Authentication</label>
			 <div class="col-md-9" style="width: 50%;">
			 <select name="" id="2faAuth" class="form-control">
				 <option value="enable">Enable</option>
				 <option value="disable" selected>Disable</option>			
			 </select>	
			 <div class="clearfix"></div>
			 <div class="col-md-12" id="setting_err" style="color:red; margin-top: 20px;">
			 </div>
			 <button style="margin-top: 20px;" id="auth_save" class="btn btn-primary">Save</button>
		 </div>
	 </div>
		 </div>
	 </form>

	 </div>
<!-- Ends Custom Settings----->
			 <!-- Starts Kill Switch Settings----->
  <div  id="default-tab-10" class="tab-pane fade custom-setting">
	 <form class="form-horizontal">
		 <div class="row" style="margin-top: 30px;">
			 <div class="col-md-12" style="margin-bottom: 15px;">
				 <label class="control-label col-md-3">Kill Switch</label>
				 <div class="col-md-6">
					 <select name="" class="form-control" id="switch_state">
						 <option value="1">Enable</option>
						 <option value="0">Disable</option>
					 </select>
				 </div>
			 </div>
			 <div class="col-md-12" style="margin-bottom: 15px;">
				 <label class="control-label col-md-3">Android</label>
				 <div class="col-md-6">
					 <input type="text" autocomplete="off" class="form-control" id="switch_android" >
				 </div>
			 </div>
			 <div class="col-md-12" style="margin-bottom: 15px;">
				 <label class="control-label col-md-3">iOS</label>
				 <div class="col-md-6">
					 <input type="text" autocomplete="off" class="form-control" id="switch_ios" >

				 </div>
			 </div>
			 <div class="col-md-12">
				 <label class="control-label col-md-3">Web</label>
				 <div class="col-md-6">
					 <input type="text" autocomplete="off" class="form-control" id="switch_web" >
				 </div>
			 </div>
			 <div class="col-md-4" style="margin-top: 20px;">
			 <button style="float: right;" class="btn  btn-primary" id="switch_save">Save</button>
		 </div>
				 
			 
			 </div>	
		 </form>
	  </div>
	  
<!-- Start channel Column  -->
<div id="default-tab-11" class="tab-pane fade custom-setting">
 <form class="form-horizontal">
	 <div class="form-group">
		 <div class="row" style="margin-top: 40px;">
			 <!--  -->
			 <div class="panel-body">
				 <form autocomplete="off" id="block-channel" class="form-horizontal">
					 <div class="form-group">
						 <div class="row">
							 <div class="col-md-2"></div>
							 <div class="col-md-6">
								 <label for=""><b style="font-size: 1.3em;">Integrate Facebook ad network to enable remarketing messages</b></label>
							 </div>
						 </div>
						 <div class="col-md-2"></div>
						 <div class="col-md-5">
							 <label ><small>Enter facebook ads account ID</small></label>
							 <input type="text" autocomplete="off" class="form-control" placeholder="Facebook_ID" name="facebook_input" id="facebook_account">
						 </div>
						 <div class="col-md-2"  style="margin-top: 22px;">
							 <button id="btnFacebookDisconnect" type="button" class="btn btn-sm btn-success m-r-5 col-md">Connect </button>
						 </div>
					 </div>
					 <div class="form-group">
						 <div class="row">
							 <div class="col-md-2"></div>
							 <div class="col-md-6">
								 <label for=""><b style="font-size: 1.3em;">Integrate your Google Ads account to enable remarketing messages</b></label>
							 </div>
						 </div>
						 <div class="col-md-2"></div>
						 <div class="col-md-5">
							 <label ><small>Enter Google ads account ID</small></label>
							 <input type="text" autocomplete="off" class="form-control" placeholder="Google_id " name="facebook_input" id="google_account">
						 </div>
						 <div class="col-md-2" style="margin-top: 22px;">
							 <button id="btnGoogleDisconnect" type="button" class="btn btn-sm btn-success m-r-5 col-md">Connect </button>
						 </div>
					 </div>
					 <div class="form-group">
						 <label class="col-md-3 control-label">&nbsp;</label>
						 <div class="col-md-6" id="adwords_error" style="color:red;">
						 </div>
					 </div>
				 </form>
			 </div>
			 <!--  -->
		 </div>
	 </div>
 </form>
</div>
<!-- End Channel Column -->
 <!-- Starts features Settings 12----->
 <div id="default-tab-12" class="tab-pane fade custom-setting" >
	 <form class="form-horizontal">
		 <div class="form-group">
			 <div class="row" style="margin-top: 40px;">
				 <!--  -->
				 <div class="panel-body">
					 <form autocomplete="off" id="block-channel" class="form-horizontal">
						 <div class="form-group">
							 <div class="row">
								 <div class="col-md-2"></div>
								 <div class="col-md-6" style="margin-bottom: 2%;">
									<label for=""><b style="font-size: 2em;">Disable Dashboard features</b></label>
									<p> Below selected features will get disabled / hidden if checked.</p>
								</div>
							 </div>
							 <div class="col-md-2"></div>
							 <div class="col-md-5">
								 <input type="checkbox" id="demographics" name="demographics" value="">
								 <label for="demographics"> Demographics</label><br>
								 								 
								 <input type="checkbox" id="language_variant_input" name="language_variant" value="">
								 <label for="language_variant"> Language Variant </label><br>
								 <input type="checkbox" id="ab_testing_variant_input" name="ab_testing_variant" value="">
								 <label for="ab_testing_variant"> AB Testing Variant</label><br>
								 
								 <input type="checkbox" id="usage" name="usage" value="">
								 <label for="usage" > Usage</label><br>
								 <input type="checkbox" id="reports" name="reports" value="">
								 <label for="reports" > Reports</label><br>
								 <input type="checkbox" id="appInboxReports" name="appInboxReports" value="">
								 <label for="appInboxReports"> Campaign AppInbox Reports</label><br>
								 
								 <input type="checkbox" id="maskedDids" name="maskedDids" value="">
								 <label for="maskedDids">Masked Customer Ids</label><br>
								 <input type="checkbox" id="churn" name="churn" value="">
								 <label for="churn">Churn</label><br>

								 <input type="checkbox" id="expendedImg" name="expendedImg" value="">
								 <label for="expendedImg">Push image</label><br>

								 <input type="checkbox" id="advancedPush" name="advancedPush" value="">
								 <label for="advancedPush">Advanced Push</label><br>
								 <input type="checkbox" id="campExceptPush" name="campExceptPush" value="">
								 <label for="campExceptPush"> Campaigns (except push)</label><br>
								 <input type="checkbox" id="transactionalCamp" name="transactionalCamp" value="">
								 <label for="transactionalCamp">Transactional Campaigns</label><br>
								 
								 <input type="checkbox" id="userProfileImg" name="userProfileImg" value="">
								 <label for="userProfileImg">User Profile Image</label><br>
								 
								 <input type="checkbox" id="optimisation" name="optimisation" value="">
								 <label for="optimisation">Optimization / Staggered Send</label><br>
								 
								 <input type="checkbox" id="appInbox-deliveryType" name="appInbox-deliveryType" value="">
								 <label for="appInbox-deliveryType">AppInbox Expiry / Delivery Type</label><br>
								 
								 <input type="checkbox" id="funnelPeriod" name="funnelPeriod" value="">
								 <label for="funnelPeriod">Funnel Lookback Window</label><br>

								 <input type="checkbox" id="documentation" name="documentation" value="">
								 <label for="documentation">Documentation</label><br>

								 <input type="checkbox" id="outsidetheapp" name="outsidetheapp" value="">
								 <label for="outsidetheapp">Outside The App</label><br>

								 <input type="checkbox" id="camp-details" name="camp-details" value="">
								 <label for="camp-details">Campaign details Csv</label><br>

								 <input type="checkbox" id="hidegranularMonetaryCACLTV" name="hidegranularMonetaryCACLTV" value="">
								 <label for="hidegranularMonetaryCACLTV">Granular / Monetary (CAC,LTV)</label><br>

								 <input type="checkbox" id="competingApps" name="competingApps" value="">
								 <label for="competingApps">Competing Apps</label><br>

								 <input type="checkbox" id="embedCustomField" name="embedCustomField" value="">
								 <label for="embedCustomField">Embed Custom Field</label><br>

								 <input type="checkbox" id="whowhatwherewhen" name="whowhatwherewhen" value="">
								 <label for="whowhatwherewhen">Audience Targets</label><br>

								 <input type="checkbox" id="deepLinkUrl" name="deepLinkUrl" value="">
								 <label for="deepLinkUrl">DeepLink Url</label><br>

								 <input type="checkbox" id="category" name="category" value="">
								 <label for="category">Category</label><br>

								 <input type="checkbox" id="utmbuilder" name="utmbuilder" value="">
								 <label for="utmbuilder">Utm Builder</label><br>
								 <input type="checkbox" id="email_editor" name="email_editor" value="">
								 <label for="email_editor">Email Editor</label><br>

								 <input type="checkbox" id="landingPageView" name="landingPageView" value="">
								 <label for="landingPageView">Landing Page view</label><br>

								 <input type="checkbox" id="funnelLaunchbtn" name="funnelLaunchbtn" value="">
								 <label for="funnelLaunchbtn">Funnel Launch Campaign </label><br>
								 <input type="checkbox" id="audience_exports" name="audience_exports" value="">
								 <label for="audience_exports"> Audience Exports</label><br>

								 <input type="checkbox" id="cmpInsertInToPG" name="cmpInsertInToPG" value="">
								 <label for="cmpInsertInToPG">Campaign Insertion into PG</label><br>

								 <input type="checkbox" id="advancedFreq" name="advancedFreq" value="">
								 <label for="advancedFreq">Advanced Frequency</label><br>

								 <input type="checkbox" id="launchCampFreq" name="launchCampFreq" value="">
								 <label for="launchCampFreq">Launch Campaign Frequency</label><br>

								 <input type="checkbox" id="actionbuttonSettings" name="actionbuttonSettings" value="">
								 <label for="actionbuttonSettings">Action Button (Push)</label><br>

								 <input type="checkbox" id="specialattributes" name="specialattributes" value="">
								 <label for="specialattributes">Special Attributes</label><br>

								 <input type="checkbox" id="conversionSettings" name="conversion" value="">
								 <label for="conversion">Conversion</label><br>

								 <input type="checkbox" id="journeynavsettings" name="journey" value="">
								 <label for="journey">Journey (Navbar)</label><br>

								 <input type="checkbox" id="setupAppsSettings" name="setupAppsSettings" value="">
								 <label for="setupAppsSettings">Setup Apps (Navbar)</label><br>

								 <input type="checkbox" id="delayLauch" name="delay" value="">
								 <label for="delay">Delay Campaign</label><br>

								 <input type="checkbox" id="removeweb" name="removeweb" value="">
								 <label for="removeweb">Remove Web Options</label><br>

								 <input type="checkbox" id="liveEventSett" name="liveEvent" value="">
								 <label for="liveEvent">Live Event</label><br>

								 <input type="checkbox" id="schedulerSett" name="scheduler" value="">
								 <label for="scheduler">Scheduler</label><br>

								 <input type="checkbox" id="cSegPhoneEmail" name="cSegPhoneEmail" value="">
								 <label for="cSegPhoneEmail">Phone/Email</label><br>

								 <input type="checkbox" id="deviceAttributes" name="deviceAtt" value="">
								 <label for="deviceAtt">Device Attributes</label><br>

								 <input type="checkbox" id="appUsageAttributes" name="appUsageAtt" value="">
								 <label for="appUsageAtt">App Usage Attributes</label><br>

								 <input type="checkbox" id="allowList" name="allowList" value="">
								 <label for="allowList">Allow List</label><br>

								 <button style="margin-top: 20px;" id="featuresSettings" class="btn btn-primary">Save</button>
							 </div>

						 </div>
					 
						 <div class="form-group">
							 <label class="col-md-3 control-label">&nbsp;</label>
							 <div class="col-md-6" id="adwords_error" style="color:red;">
							 </div>
						 </div>
					 </form>
				 </div>
				 <!--  -->
			 </div>
		 </div>
	 </form>
 
 </div>
 <!-- Ends features Settings----->

 <!-- Starts appinbox Settings 13----->
 <div id="default-tab-13" class="tab-pane fade custom-setting" >
	 <form class="form-horizontal">
		 <div class="form-group">
			 <div class="row" style="margin-top: 40px;">
				 <!--  -->
				 <div class="panel-body">
					 <form autocomplete="off" id="block-channel" class="form-horizontal">
						 <div class="form-group">
							 <div class="row">
								 <div class="col-md-2"></div>
								 <div class="col-md-6">
								 </div>
							 </div>
							 <div class="col-md-2"></div>
							 <div class="col-md-12" style="margin-bottom: 15px;">
								 <label class="control-label col-md-3">App Inbox Default Expiry (in Days)</label>
								 <div class="col-md-6">
									 <select name="numbers" style="width: 150px; border: 1px solid #ccc; border-radius: 4px; padding: 6px;" id="numberSelect" ></select>
									 <input type="button" value="Save" class="btn btn-primary" id="appInboxSettings" style="margin-left: 10px; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer;">
								 </div>
							 </div>

						 </div>
					 
						 <div class="form-group">
							 <label class="col-md-3 control-label">&nbsp;</label>
							 <div class="col-md-6" id="adwords_error" style="color:red;">
							 </div>
						 </div>
					 </form>
				 </div>
				 <!--  -->
			 </div>
		 </div>
	 </form>
 
 </div>
 <!-- Ends app inbox Settings----->


 <!-- Starts file encryption Settings 14----->
<div id="default-tab-14" class="tab-pane fade custom-setting">
 <form class="form-horizontal">
	 <div class="form-group">
		 <div class="row" style="margin-top: 40px;">
			 <!--  -->
			 <div class="panel-body">
				 <form autocomplete="off" id="block-channel" class="form-horizontal">
					 <div class="form-group">
						 <div class="row">
							 <div class="col-md-12" style="margin-bottom: 15px;">
								 <label class="control-label col-md-3">Encryption Status</label>
								 <div class="col-md-9">
									 <div class="row">
										 <div class="col-md-2">
											 <select id="encryptionStatusDropdown" class="form-control">
												 <option value="true">Yes</option>
												 <option selected value="false">No</option>
											 </select>
										 </div>
										 <div class="col-md-8" id="encryptionKeyInput" style="display: none;">
											 <input type="text" id="encryptionKey" class="form-control" placeholder="Encryption Key" required>
											 <span id="encryptionKeyValidation" style="color: red; display: none;">Encryption Key is required.</span>
										 </div>
										 <div class="col-md-2">
											 <input type="button" value="Save" class="btn btn-primary" id="encryptionStatus" style="padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-left: 5%;">
										 </div>
									 </div>
								 </div>
							 </div>
						 </div>
					 </div>
					 <div class="form-group">
						 <label class="col-md-3 control-label">&nbsp;</label>
						 <div class="col-md-6" id="adwords_error" style="color:red;"></div>
					 </div>
				 </form>
			 </div>
			 <!--  -->
		 </div>
	 </div>
 </form>
</div>
<!-- End file encryption Settings 14----->

<!-- Push notification Settings 15 start------>
<div id="default-tab-15" class="tab-pane fade custom-setting">
 <div style="margin-left: 14%; margin-top: 5%;">
	 <label for=""><b style="font-size: 1.3em;">Push Notification Settings</b></label>
	 <p>Below inputs are for setting character limits for push notifications.</p>
 </div>
 <form class="form-horizontal">
    <div class="form-group">
        <div class="row" style="margin-top: 20px;">
            <div class="panel-body">
                <form autocomplete="off" id="block-channel" class="form-horizontal">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-6"></div>
                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-12" style="margin-left: 14%;">
                            <div class="row" style="margin-bottom: 10px;">
                                <div class="col-md-6">
                                    <label class="control-label" style="margin-bottom: 5px;">Header limit</label>
                                    <input type="text" id="header-limit" class="form-control" style="width: 50%;" placeholder="Header limit">
                                </div>
                            </div>
                            <div class="row" style="margin-bottom: 10px;">
                                <div class="col-md-6">
                                    <label class="control-label" style="margin-bottom: 5px;">Description limit</label>
                                    <input type="text" id="description-limit" class="form-control" style="width: 50%;" placeholder="Description limit">
                                </div>
                            </div>
                            <div class="row" style="margin-bottom: 10px;">
                                <div class="col-md-6">
                                    <label class="control-label" style="margin-bottom: 5px;">Expanded description limit</label>
                                    <input type="text" id="exp-description-limit" class="form-control" style="width: 50%;" placeholder="Expanded description limit">
                                </div>
                            </div>
                            <!-- New dropdown with label "GetApp" -->
                            <div class="row" style="margin-bottom: 10px;">
                                <div class="col-md-6">
                                    <label class="control-label" style="margin-bottom: 5px;">GetApp enablement</label>
                                    <select id="getApp-dropdown" class="form-control" style="width: 50%;">
                                        <option value="true">Enable</option>
                                        <option value="false">Disable</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12" style="margin-top: 30px;">
                                <input type="button" value="Save" class="btn btn-primary" id="charlimit_btn" style="padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">&nbsp;</label>
                        <div class="col-md-6" id="adwords_error" style="color:red;"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</form>

</div>
<!-- Push notification Settings 16 end----->
<div id="default-tab-16" class="tab-pane fade custom-setting">
 <form class="form-horizontal" autocomplete="off" id="block-baseUrl">
	 <div class="form-group">
		 <div class="row" style="margin-top: 40px;">
			 <div class="panel-body">
				 <div class="form-group">
					 <div class="col-md-2"></div>
					 <div class="col-md-5">
						 <label><small>Enter App Base Url</small></label>
						 <input type="text" class="form-control" placeholder="Base Url" name="baseUrl" id="baseUrl">
					 </div>
					 <div class="col-md-2" style="margin-top: 22px;">
						 <button id="btnBaseUrl" type="button" class="btn btn-primary" style="padding: 6px 12px; border: none; border-radius: 4px;">Submit</button>
					 </div>
				 </div>
				 <div class="form-group">
					 <h1 id="error-msg" style="color: red; font-size: small; margin-left: 28%;"></h1>
				 </div>
			 </div>
		 </div>
	 </div>
 </form>
</div>

				 <!--  -->



<!-- Push notification Settings 17 end----->
<div id="default-tab-17" class="tab-pane fade custom-setting">
	<div class="row">
		<div class="col-md-2"></div>
		<div class="col-md-6" style="margin-top: 5%;">
			<label for=""><b style="font-size: 1.3em;">Add/Remove Partners</b></label>
			<p> Below you can add new partners or remove existing partners.</p>
		</div>
	</div>
    <form class="form-horizontal" style="width: 50%; margin-top: 5%; margin-left:15%">
        <div id="Partners">
        </div>

        <button id="savePartnerInfo" style="margin-left:17%;" type="button" class="btn btn-sm btn-success">Save</button>

        <!-- Button to add another partner -->
        <button id="addAnotherPair" type="button" class="btn btn-sm btn-success">Add Partner</button>
    </form>
</div>


<!-- Push allow list start----->
<div id="default-tab-18" class="tab-pane fade custom-setting">
	<form class="form-horizontal" style="width: 50%; margin-top: 5%; margin-left:15%">
	
		<div class="form-group">
			<label class="col-md-3 control-label">Allow List</label>
			<div class="col-md-9">
				<input type="text" autocomplete="off" class="form-control" placeholder="" id="allow-list">
			</div>
			<div class="clearfix"></div>
		</div>
		
		<button id="saveallowListSettings" style="margin-left:27%;" type="button" class="btn btn-sm btn-success">Save</button>
	</form>
   </div>

<!-- get logs start 19----->
<div id="default-tab-19" class="tab-pane fade custom-setting">
	<form id="logs-form" role="form" class="form-horizontal" style="width: 50%; margin-top: 5%; margin-left:45%">
		<div class="form-group">
			<div class="input-group">
				<label class="switch">
					<input type="checkbox" id="getLogs">
					<span class="slider"></span>
					<div class="label">Logs</div>
				</label>
			</div>
		</div>
	</form>
	<div class="row">
		<div class="panel panel-info">
			<div class="panel-heading">
				<div class="panel-heading-btn">
				</div>
				<h4 class="panel-title p-heading">Logs</h4>
			</div>
			<div class="panel-body" style="overflow: auto;">
				<table class="table table-striped table-bordered" id="logs-table">
					<thead>
						<th>DID</th>
						<th>Platform</th>
						<th>Date</th>
						<th>Campaign ID</th>
						<th>Reach</th>
						<th>Pushed To</th>
						<th>Received To</th>
						<th>Failed To</th>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
	
   </div>
<!-- get logs end----->
<!-- Column Options Tab -->
<div id="default-tab-20" class="tab-pane fade custom-setting">

	<div class="row">
		<div class="col-md-8">
			Configure the Campaign module for dynamic column adjustments and Content Security Policy (CSP) management to
			ensure flexible data display and enhanced security.
			<br />
			<br />
		</div>
	
	</div>
	
	<ul class="nav nav-pills">
		<li class="nav-item active"> <a class="nav-link active" data-toggle="tab" href="#sub-tab-1">Configure Columns</a>
		</li>
		<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#sub-tab-2">Configure URLs </a> </li>
	</ul>
	
	<div class="tab-content">
		<!-- Sub Tab 1 Content -->
		<div id="sub-tab-1" class="tab-pane fade active in">
			<div>

    <form class="form-horizontal" style="width: 50%; margin-top: 3%; margin-left:15%">
        <!-- Column Options Form -->

		<div >
			<label for=""><b style="font-size: 1.3em;">Campaign Column Settings</b></label>
			<p>Configure the columns to be displayed in the campaign summary list or details page. Marking the columns below means they will be enabled for display.</p>
		</div>
		
        <div class="form-group">
            <div class="col-md-9">
                <!-- Received Column -->
                <div class="checkbox">
                    <label><input type="checkbox" id="receivedTo-checkbox">Received</label>
                    <span class="help-block">Display the number of received campaigns.</span>
                </div>
				   <!-- Deleted Column -->
				   <div class="checkbox">
                    <label><input type="checkbox" id="deletedTo-checkbox">Deleted</label>
                    <span class="help-block">Display the deleted campaign.</span>
                </div>
                <!-- Clicked Column -->
                <div class="checkbox">
                    <label><input type="checkbox" id="clickedTo-checkbox" checked >Clicked</label>
                    <span class="help-block">Display the number of clicked campaigns.</span>
                </div>
                <!-- Impression Rate Column -->
                <div class="checkbox">
                    <label><input type="checkbox" id="impressionRate-checkbox">Impression Rate</label>
                    <span class="help-block">Display the impression rate of campaigns.</span>
                </div>
                <!-- CTR Column -->
                <div class="checkbox">
                    <label><input type="checkbox" id="ctr-checkbox" checked>CTR (Click-Through Rate)</label>
                    <span class="help-block">Display the click-through rate of campaigns.</span>
                </div>
                <!-- Conversion Column -->
                <div class="checkbox">
                    <label><input type="checkbox" id="conversion-checkbox" checked>Conversion</label>
                    <span class="help-block">Display the conversion rate of campaigns.</span>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- Save Button -->
        <button id="" style="margin-left:27%;" type="button" class="save_campaign_settings btn btn-sm btn-success">Save</button>
		<span id="settings_message" style="margin-left: 10px; color: red;"></span>
    </form>


</div>
</div>

<!-- Sub Tab 2 Content -->
	<div id="sub-tab-2" class="tab-pane fade">

		<div>
			<form class="form-horizontal"  margin-top: 3%; margin-left:15%">
			
				<div class="form-group">
					<div class="row">
						<label style="margin-top:7px;" class="control-label col-md-3">Add New URL</label>

						<div class="col-md-7" style="width: 50%;">
							<input autocapitalize="off" type="text" id="item-input" class="form-control" placeholder="Enter Allowed URL"
								autocomplete="off" autocorrect="off">
						</div>

						<div class="col-md-2 col-sm-2">
							<button id="addItem" type="button" class="fa fa-plus btn btn-primary btn-sm " data-toggle="tooltip"
								data-placement="top" title="Add">
							</button>
						</div>

					</div>
				</div>

				<div class="form-group">
					<div class="row">
						<label style="margin-top:7px;" class="control-label col-md-6">Allowed URLs List</label>
						<div class="col-md-4">
							
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="row">
						<label style="margin-top:7px;" class="control-label col-md-2"></label>
						<div class="col-md-10">
							<div id="list-container">
								<!-- <ul id="item-list" style="list-style-type: none; padding: 0;"></ul> -->
								<ul id="item-list" style="list-style-type: none; padding: 0; margin-bottom: 0;"></ul>

							</div>
						</div>
					</div>
				</div>



					<div class="form-group">
						<div class="row">
							<label style="margin-top:7px;" class="control-label col-md-3"> </label>
							<div class="col-md-9" style="width: 50%;">
								<div class="clearfix"></div>
								<button style="margin-top: 20px;" id="" class="save_campaign_settings btn btn-primary">Save</button>
							</div>
						</div>
					</div>

			</form>
		</div>
	</div>
</div>

</div>
<div id="default-tab-21" class="tab-pane fade custom-setting">
	<form class="form-horizontal">
		<div class="form-group">
			<div class="row">
				<label style="margin-top:7px;" class="control-label col-md-3">Single Sign-On (SSO)</label>
				<div class="col-md-9" style="width: 50%;">
					<select name="sso_type" id="is_sso" class="form-control">
						<option value="enable" selected>Enabled</option>
						<option value="disable">Disabled</option>
					</select>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>

		<div class="form-group">
			<div class="row">
				<label style="margin-top:7px;" class="control-label col-md-3">SSO Provider</label>
				<div class="col-md-9" style="width: 50%;">
					<select name="sso_type" id="sso_type" class="form-control">
						<option value="disabled" selected>None</option>
						<option value="ad">Active Directory SSO</option>
						<option value="saml">Saml-Based SSO</option>
					</select>
					<div class="clearfix"></div>
					<!-- <div class="col-md-12" id="gbl_setting_err" style="color:red; margin-top: 20px;">
                    </div> -->
				</div>
			</div>
		</div>
		<!-- Additional UI for AD settings -->
		<div id="ad_settings" style="display: none;">
			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">LDAP URL</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="ldap_url" style="width: 200px;">
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">Bind DN</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="bind_dn" style="width: 200px;">
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">Bind Credential</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="bind_credential" style="width: 200px;">
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">Search Base</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="search_base" style="width: 200px;">
					</div>
				</div>
			</div>
		</div>

		<!--  Div Custom logo upload -->
		<div class="form-group">
			<label class="col-md-3 control-label">Custom Logo</label>
		
			<div class="col-md-6">
				<input type="text" autocomplete="off" class="form-control" placeholder="Please upload Logo Image" disabled id="logo_name">
			</div>
		
			
			<div class="col-md-3 btn-primary"  id="mybutton" style="border:none;border-radius:3px">
				<input type="file" accept=".jpg,.jpeg,.png" id="logoImg" name="upload" class="fileObject">
				Upload
			</div>
		
		</div>

		   <!-- Additional field for Portal Name -->
		   <div class="form-group">
            <div class="row">
                <label style="margin-top:7px;" class="control-label col-md-3">Portal Name</label>
                <div class="col-md-9" style="width: 50%;">
                    <input type="text" class="form-control" id="portal_name" placeholder="Enter Portal Name">
                </div>
            </div>
        </div>

		  <!-- Field for Captcha -->
		  <div class="form-group">
            <div class="row">
                <label style="margin-top:7px;" class="control-label col-md-3">Captcha</label>
                <div class="col-md-9" style="width: 50%;">
					<select name="" id="authCaptcha" class="form-control">
						<option value="enable">Enable</option>
						<option value="disable" selected>Disable</option>			
					</select>	
                </div>
            </div>
        </div>

		<div id="saml_settings" style="display: none;">

			
			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3" for="saml_callbackURL">CallBackUrl <span style="color: red;">*</span></label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="saml_callbackURL" style="width: 50%;" required>
					</div>
				</div>
			</div>


			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">Entry Point</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="saml_entryPoint" style="width: 50%;">
					</div>
				</div>
			</div>



			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">Issuer</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="saml_issuer" style="width: 50%;">
					</div>
				</div>
			</div>
		



			<div class="form-group">
				<div class="row">
					<label class="control-label col-md-3">cert</label>
					<div class="col-md-9">
						<input type="text" class="form-control" id="saml_cert" style="width: 50%;">
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="row">
					<label class="col-md-3 control-label">XML File</label>
			
				<div class="col-md-6" style="width: 32%;">
					<input type="text" autocomplete="off" class="form-control" placeholder="Please upload XML File Here (Optional)" disabled id="XMLmetadataFile_name">
				</div>
			
				
				<div class="col-md-3 btn-primary"  id="mybutton" style="border:none;border-radius:3px">
					<input type="file" accept=".xml" id="XMLmetadataFile" name="upload" class="fileObject">

					Upload
				</div>
			
				</div>
			</div>

		</div>
		<div class="form-group">
			<div class="row">
				<div class="col-md-4">
				</div>
				<div class="col-md-6" id="gbl_setting_err" style="color:red; margin-top: 20px;">
				</div>

			</div>
			<div class="row">

				<div class="col-md-4">
					<button style="margin-top: 20px;" id="gbl_save" class="btn btn-primary pull-right">Save</button>
				</div>
			</div>
		</div>
	</form>
</div>

 </div>
	<!-- End tab-content -->
 
</div>



<style>
	.switch {
		position: relative;
		display: inline-block;
		width: 120px;
		height: 40px;
		border-radius: 20px;
		overflow: hidden;
	}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: 36px;
		width: 36px;
		left: 2px;
		bottom: 2px;
		background-color: white;
		border-radius: 50%;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .slider {
		background-color: #3A92AB; /* Change to the desired color */
	}

	input:focus + .slider {
		box-shadow: 0 0 1px #3A92AB; /* Change to the desired color */
	}

	input:checked + .slider:before {
		-webkit-transform: translateX(80px);
		-ms-transform: translateX(80px);
		transform: translateX(80px);
	}

	.label {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		text-align: center;
		color: white;
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: bold;
	}

	.input-container {
     width: 30%;
     float: left;
     margin-right: 5%;
     }

    .save-btn-container {
    float: left;
    }
</style>

</style>
<script nonce="<%=nonce%>">
 $("#aws_ses").click(function(){
	 $("#aws_ses").addClass("activeTab")
	 $("#smtp").removeClass("activeTab")
	 $("#netcoreScreen").hide()
	 $("#awsScreen").show()
	 $('.emailConfigError').text('')
 })
 $("#smtp").click(function(){
	 $("#smtp").addClass("activeTab")
	 $("#aws_ses").removeClass("activeTab")
	 $("#awsScreen").hide()
	 $("#netcoreScreen").show()
	 $('.emailConfigError').text('')
 })
 $("#generic").click(function(){
	$("#aws_ses").removeClass("activeTab")
	 $("#smtp").removeClass("activeTab")
	 $("#generic").addClass("activeTab")
	 $("#awsScreen").hide();
	 $("#netcoreScreen").hide();
	 $("#genScreen").show();
	 $('.emailConfigError').text('')

 })
  $("#btnCopy1").click(function(){
	 copyText('btnCopy1');
  });
  $("#btnCopy2").click(function(){
	  copyText('btnCopy2');
  });
  $("#btnCopy3").click(function(){
	  copyText('btnCopy3')
  });

$('#smsGeneric').on('click', function() {
    $('#block-first-1sms').hide();
    // $('#smsGenericContent').show();
    $("#gupshup").removeClass("activeTab");
    $("#smsGeneric").addClass("activeTab");
});

$('#gupshup').on('click', function() {
    $('#block-first-1sms').show();
    // $('#smsGenericContent').hide();
    $("#smsGeneric").removeClass("activeTab");
    $("#gupshup").addClass("activeTab");
});
	   // Dynamic drop down 
	 var selectElement = document.getElementById("numberSelect");
	 for (var i = 0; i <= 30; i++) {
	   var option = document.createElement("option");
	   option.value = i;
	   option.text = i;
	   selectElement.appendChild(option);
	 }

	 

	 const encryptionStatusDropdown = document.getElementById("encryptionStatusDropdown");
	 const encryptionKeyInput = document.getElementById("encryptionKeyInput");
 
	 encryptionStatusDropdown.addEventListener("change", function() {
		 if (encryptionStatusDropdown.value === "true") {
			 encryptionKeyInput.style.display = "block";
		 } else {
			 encryptionKeyInput.style.display = "none";
		 }
	 });

	 
	 $(document).ready(function () {
        // Show/hide key-value pairs based on selected HTTP method
        $("#http_method").change(function () {
            var selectedMethod = $(this).val().toUpperCase();
            if (selectedMethod === "GET" || selectedMethod === "POST") {
                $(".key-value-pairs-pass").show();
            } else {
                $(".key-value-pairs-pass").hide();
            }
        });
    });
</script>

