   <div id="mycancel_shortcode_popup1" style="display:block;" class="popup_div_outer">

    <div class="live-links-outer" id="mycancel_shortcode_popup_inner">
    <div class="container" id="mycancel_shortcode_popup_inner1">
     <h3 class="mb-4 border-bottom pb-2"><i class="fa fa-users" aria-hidden="true"></i> Member Subscription 
      <a href="<?= admin_url('admin.php?page=dap_memberpages'); ?>" title="Back to Member Pages" class="member_backicon">Return to Member Pages</a></h3>
     
  <div class="membercancel-options-box">
 
		<table width="100%" cellpadding="2" cellspacing="2">
		
		<tr>
		<td valign="top">
		<strong>Do you want to Show All Transactions? <i class="fa fa-info-circle" data-toggle="tooltip" title="If set to YES, it will show all products that the user has EVEN if the product is not a subscription product."></i></strong> <br> 
		</td>
		<td valign="top" width="50%">
			<select  name="showalltrans" id="showalltrans">
			 <option value="Y">Yes</option>
			 <option value="N">No</option>
		   </select><br />
		</td>
		</tr>
		<tr><td></td><td></td></tr>
		<tr>
		<td valign="top"><strong>Select a Template</strong></td>
		<td>
		<select name="template" id="template">
		<option value="template1">Template1</option>
		<option value="template2">Template2</option>
		<option value="template3">Template3</option>
		</select>
		</td>
		</tr> 

		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
		</table>
    </div>
	
	<div class="membercancel-options-box">
    <h2 class="head_memb">General Options</h2>
   <table width="100%" cellpadding="2" cellspacing="2">

	<tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    
    <tr>
		<td valign="top"><strong>Enter Product Id</strong> <i class="fa fa-info-circle" data-toggle="tooltip" title="Only transactions related to these products will be listed. If you want all products, set it to ALL.
		If you want specific products, enter comma-separated list of ids.. for e.g. 1,2,4"></i><br></td>
		<td><input type="text" name="prodid" id="prodid" value="ALL"></td>
		</tr>
		<tr><td></td><td></td></tr>
    <tr>   
		
    <tr>
		<td valign="top">
		<strong>Enter 'No Transaction' found message</strong>
		</td>
		<td valign="top" width="50%">
		<input type="text" name="notransfoundmsg" id="notransfoundmsg" value="Sorry, no active transactions found">
		<br/>
		</td>
    </tr>    
    <tr>
		<td valign="top">
			<strong>Enter "CONTACT US" text for one-time purchases or for purchases that cannot be cancelled by the member. <i class="fa fa-info-circle" data-toggle="tooltip" title="PLEASE NOTE:  For transactions that the members cannot cancel (For e.g. one-time purchases), you can set a 'contact us' text and a 'contact us' link in the textboxes below. This way your members can click the 'contact us' link to contact you."></i> </strong><br>
		</td>
		<td valign="top" width="50%">
			<input type="text" name="cancelcontact" id="cancelcontact" value="">
			<br/>
		</td>
    </tr>
    
    <tr>
		<td valign="top">
			<strong>Enter URL of the page to which the "Contact US" text will be linked. <i class="fa fa-info-circle" data-toggle="tooltip" title="Only applicable if you have entered a 'CONTACT US' text above."></i></strong><br>
			
		</td>
			<td valign="top" width="50%">
			<input type="text" name="cancelcontacturl" id="cancelcontacturl" value="">
		<br/>
    </td>
    
    </tr> 
	<tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
	
    </table>
    </div>
    
    <div class="membercancel-options-box">
    <h2 class="head_memb">Cancellation Options</h2>   
    <table width="100%" cellpadding="2" cellspacing="2">  
	<tr>
    <td valign="top">
    <strong>Show Cancel?</strong> <i class="fa fa-info-circle" data-toggle="tooltip" title="Do you want to show a 'Cancel' button to allow users to self-cancel their subscription?"></i> <br><label><br><span style="font-size: 13px;color:red;padding-top: 9px;display:  block;">The cancel button will ONLY show up for:  <br>
    1) 'Recurring/Subscription' products. <br>
    2)  If the users have an ACTIVE subscription with STRIPE, PAYPAL or AUTHORIZE.net.
    </span></label>
    </td>
    <td valign="top" width="50%">
        <select  name="showcancel" id="showcancel">
         <option value="Y">Yes</option>
		 <option value="N">No</option>
       </select><br/>
    </td>
    </tr>
 
	</table>
	
	<div class="membercancel-options-subbox cancel_element">
	<h2 class="head_memb">Cancel Messages</h2>   
    <table width="100%" cellpadding="2" cellspacing="2">
   
    <td valign="top">
    <strong>Enter CANCELLED text</strong>  <i class="fa fa-info-circle" data-toggle="tooltip" title="This text will be displayed instead of the cancel button for 'already cancelled' transactions."></i><br>
    
    </td>
    <td valign="top" width="50%">
   <textarea name="cancelledtext" id="cancelledtext" rows="3">CANCELLED</textarea>
	<br/>
    </td>
    </tr>
    
	<tr>
    <td valign="top">
    <strong>Enter successful cancellation message</strong>
    </td>
    <td valign="top" width="50%">
   <textarea name="cancelsuccess" id="cancelsuccess" rows="3">Subscription cancellation completed Successfully!</textarea>
	<br/>
    </td>
    </tr>
	<tr><td></td><td></td></tr>
	<tr>
    <td valign="top">
    <strong>Enter failed cancellation message</strong>
    </td>
    <td valign="top" width="50%">
    <textarea name="cancelfailed" id="cancelfailed" rows="3">Sorry, could not cancel the subscription.</textarea>
	<br/>
    </td>
    </tr>
	<tr><td></td><td></td></tr>
	<tr>
    <td valign="top">
    <strong>Enter cancellation confirmation message</strong>
    </td>
    <td valign="top" width="50%">
    <textarea name="confirmmsg" id="confirmmsg" rows="3">Are you sure you want to cancel subscription?</textarea>
	<br/>
    </td>
    </tr>
	<tr><td></td><td></td></tr>
	</table>
	</div>
	
	<div class="membercancel-options-subbox cancel_element">
	<h2 class="head_memb">Cancel Button Customizer </h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		
		<tr><td></td><td></td></tr>
		
		<tr>
			<td valign="top">
				<strong>Select Button Type</strong>
			</td>
			<td valign="top" width="50%">
				<select name="cancelimgtype" id="cancelimgtype">
					<option value="url">Enter Image URL</option>
					<option value="upload">Upload an Image</option>
					<option value="button" selected>Customize a Button</option>
				</select>
				<br/>
			</td>
		</tr>
		
		
		<tr><td></td><td></td></tr>
		<tr class="cancelurl canceltype" style="display:none;">
			<td valign="top"><strong>Enter full URL of your cancel button image</strong></td>
			<td><textarea rows="3" name="cancelurl" id="cancelurl"><?php echo  plugin_dir_url( __FILE__ ).'includes/images/CancelButtonUp.jpg';?></textarea></td>
		</tr>

		<tr class="cancelupload canceltype" style="display:none;">
			<td valign="top"><strong>Browse image</strong></td>
			<td><input type="file" id="cancelupload" name="cancelupload"></td>
		</tr>

		<tr class="cancelbutton canceltype" style="display:">
			<td colspan="2">
				<div class="cancelbutton_design">
					<button id="cancelbutton" style="height: 30px;padding: 0 12px 2px;background: #d44625;border-color: #d44625;color: #fff;font-size: 13px;border-width: 1px;border-style: solid;border-radius: 3px;" >CANCEL</button>
				</div>		
					<div class="cancelbutton_customizer">
						<h4>Button Customizer</h4>
						<ul class="">
							<li>
							  <label>Button Text</label>
							  <div id="btn_text_div" class="input-group colorpicker-component cancelbtn">
								<input type="text" value="CANCEL" id="btn_text" class="form-control temp_style_fields">
							  </div>
							</li>
							<li>
							  <label>Background Color</label>
							   <div id="btn_bg" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#d44625" id="cancelbgcolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Style</label>
							   <div id="" class="input-group">
									<select id="border_style" class="form-control temp_style_fields">
										<option value="solid" selected>Solid</option>
										<option value="dashed">Dashed</option>
										<option value="dotted">Dotted</option>
									</select>
								</div>
							</li>
							
							<li>
							   <label>Border width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderwidth"  name="borderwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="1"/> 
								</div>
							</li>
							
							<li>
							  <label>Border Color</label>
							   <div id="btn_border_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#d44625" id="cancelbordercolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Radius</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderradius"  name="borderradius"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="200" data-slider-step="1" data-slider-value="3"/> 
								</div>
							</li>
							
	
							<li>
							   <label>Font Size</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="fontsize"  name="fontsize"  data-slider-id='ex2Slcancelbuttonider' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="13"/> 
								</div>
							</li>
							
							<li>
							   <label>Font weight</label>
							   <div id="" class="input-group">
									<select id="font_weight" class="form-control temp_style_fields">
										<option value="normal">Normal</option>
										<option value="bold">bold</option>
										<option value="lighter">Lighter</option>					
									</select>
								</div>
							</li>
							
							<li>
							   <label>Text Color</label>
							   <div id="btn_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#fff" id="cancelcolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Button Width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonwidth"  name="buttonwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="100" data-slider-max="800" data-slider-step="1" data-slider-value="100"/> 
								</div>
							</li>
							
							<li>
							   <label>Button Height</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonheight"  name="buttonheight"  data-slider-id='ex2Slider' type="text" data-slider-min="10" data-slider-max="100" data-slider-step="1" data-slider-value="30"/> 
								</div>
							</li>
							
						</ul>		
					</div>
			</td>
		</tr>
		<tr><td></td><td></td></tr>
	</table>
	</div>

	</div>
	
	
	
	<div class="membercancel-options-box">
	<h2 class="head_memb">Pause/Resume Options</h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		
		<tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
			
		<tr>
			<td valign="top">
				<strong>Show Pause/Resume Button?</strong>
				<br> 
				<label><span style="color:red">The Pause/Resume button will ONLY show up for:  <br>
				1) 'Recurring/Subscription' products. <br>
				2) Smartpaycart Transactions. <br>
				3) If the users have an ACTIVE subscription with STRIPE or PAYPAL.<br>
				4) Authorize.net is NOT supported currently.
				</span></label>
			</td>
			<td valign="top" width="50%">
			<select id="show_pause" name="show_pause">
				<option value="Y">Yes</option>
				<option value="N">No</option>
			</select>
			<br/>
			</td>
		</tr>
	</table>
	<div class="membercancel-options-subbox pause_element">
	<h2 class="head_memb">Pause Messages</h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		<tr><td></td><td></td></tr>
		<tr>
			<td valign="top">
				<strong>Enter Successfully Paused message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="pausesuccess" id="pausesuccess" rows="3">Subscription paused successfully.</textarea>
				<br/>
			</td>
		</tr>
		
		<tr><td></td><td></td></tr>
		<tr>
			<td valign="top">
				<strong>Enter Subscription Pause fail message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="pausefail" id="pausefail" rows="3">Sorry,could not pause the subscription.</textarea>
				<br/>
			</td>
		</tr>
		
		<tr><td></td><td></td></tr>
		<tr>
			<td valign="top">
				<strong>Enter Subscription Pause confirm message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="pauseconfirm" id="pauseconfirm" rows="3">Are you sure you pause the subscription?</textarea>
				<br/>
			</td>
		</tr>
		<tr><td></td><td></td></tr>
	</table>
	</div>
	<div class="membercancel-options-subbox pause_element">
	<h2 class="head_memb">Resume Messages</h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		<tr><td></td><td></td></tr>
		<tr>
			<td valign="top">
				<strong>Enter Successfully Resumed message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="resumesuccess" id="resumesuccess" rows="3">Subscription resumed successfully.</textarea>
				<br/>
			</td>
		</tr>

		<tr>
			<td valign="top">
				<strong>Enter Subscription Resume fail message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="resumefail" id="resumefail" rows="3">Sorry,could not Resume the subscription.</textarea>
				<br/>
			</td>
		</tr>	
		
		<tr><td></td><td></td></tr>
		<tr>
			<td valign="top">
				<strong>Enter Subscription Resume confirm message</strong>
			</td>
			<td valign="top" width="50%">
				<textarea name="resumeconfirm" id="resumeconfirm" rows="3">Are you sure you resume the subscription?</textarea>
				<br/>
			</td>
		</tr>
		<tr><td></td><td></td></tr>
	</table>
	</div>

	<div class="membercancel-options-subbox pause_element">
	<h2 class="head_memb">Pause Button Customizer </h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		
		<tr><td></td><td></td></tr>
		
		<tr>
			<td valign="top">
				<strong>Select Button Type</strong>
			</td>
			<td valign="top" width="50%">
				<select name="pauseimgtype" id="pauseimgtype">
					<option value="url">Enter Image URL</option>
					<option value="upload">Upload an Image</option>
					<option value="button" selected>Customize a Button</option>
				</select>
				<br/>
			</td>
		</tr>
		
		
		<tr><td></td><td></td></tr>
		<tr class="pauseurl pausetype" style="display:none;">
			<td valign="top"><strong>Enter full URL of your PAUSE button image</strong></td>
			<td><textarea rows="3" name="pauseurl" id="pauseurl"><?php echo  plugin_dir_url( __FILE__ ).'includes/images/CancelButtonUp.jpg';?></textarea></td>
		</tr>

		<tr class="pauseupload pausetype" style="display:none;">
			<td valign="top"><strong>Browse image</strong></td>
			<td><input type="file" id="pauseupload" name="pauseupload"></td>
		</tr>
		<!--tr>
			<td valign="top">
				<strong>If you want your PAUSE button to be a text hyperlink (instead of a button/image), then enter "PAUSE" text here.</strong><br>This will only be used if you do not specify a pause button/image.
			</td>
			<td valign="top" width="50%">
				<input type="text" name="pausetext" id="pausetext" value="PAUSE">
				<br>
			</td>
		</tr-->
		
		<tr class="pausebutton pausetype" style="display:">
			<td colspan="2">
				<div class="pausebutton_design">
					<button id="pausebutton" style="height: 30px;padding: 0 12px 2px;background: #2e8c00;border-color: #2e8c00;color: #fff;font-size: 13px;border-width: 1px;border-style: solid;border-radius: 3px;" >PAUSE</button>
				</div>		
					<div class="pausebutton_customizer">
						<h4>Button Customizer</h4>
						<ul class="">
							<li>
							  <label>Button Text</label>
							  <div id="btn_text_div" class="input-group colorpicker-component pausebtn">
								<input type="text" value="PAUSE" id="btn_text" class="form-control temp_style_fields">
							  </div>
							</li>
							<li>
							  <label>Background Color</label>
							   <div id="btn_bg" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#2e8c00" id="pausebgcolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Style</label>
							   <div id="" class="input-group">
									<select id="border_style" class="form-control temp_style_fields">
										<option value="solid" selected>Solid</option>
										<option value="dashed">Dashed</option>
										<option value="dotted">Dotted</option>
									</select>
								</div>
							</li>
							
							<li>
							   <label>Border width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderwidth"  name="borderwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="1"/> 
								</div>
							</li>
							
							<li>
							  <label>Border Color</label>
							   <div id="btn_border_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#2e8c00" id="pausebordercolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Radius</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderradius"  name="borderradius"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="200" data-slider-step="1" data-slider-value="3"/> 
								</div>
							</li>
							
	
							<li>
							   <label>Font Size</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="fontsize"  name="fontsize"  data-slider-id='ex2Slpausebuttonider' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="13"/> 
								</div>
							</li>
							
							<li>
							   <label>Font weight</label>
							   <div id="" class="input-group">
									<select id="font_weight" class="form-control temp_style_fields">
										<option value="normal">Normal</option>
										<option value="bold">bold</option>
										<option value="lighter">Lighter</option>					
									</select>
								</div>
							</li>
							
							<li>
							   <label>Text Color</label>
							   <div id="btn_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#fff" id="pausecolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Button Width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonwidth"  name="buttonwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="100" data-slider-max="800" data-slider-step="1" data-slider-value="100"/> 
								</div>
							</li>
							
							<li>
							   <label>Button Height</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonheight"  name="buttonheight"  data-slider-id='ex2Slider' type="text" data-slider-min="10" data-slider-max="100" data-slider-step="1" data-slider-value="30"/> 
								</div>
							</li>
							
						</ul>		
					</div>
			</td>
		</tr>
		<tr><td></td><td></td></tr>
	</table>
	</div>

	<div class="membercancel-options-subbox pause_element">
	<h2 class="head_memb">Resume Button Customizer </h2>
	<table width="100%" cellpadding="2" cellspacing="2">
		<tr><td></td><td></td></tr>
		
		<tr>
			<td valign="top">
				<strong>Select Button Type</strong>
			</td>
			<td valign="top" width="50%">
				<select name="resumeimgtype" id="resumeimgtype">
					<option value="url">Enter Image URL</option>
					<option value="upload">Upload an Image</option>
					<option value="button" selected>Customize a Button</option>
				</select>
				<br/>
			</td>
		</tr>
		
		
		<tr><td></td><td></td></tr>
		<tr class="resumeurl" style="display:none">
			<td valign="top"><strong>Enter full URL of your RESUME button image</strong></td>
			<td><textarea rows="3" name="resumeurl" id="resumeurl"><?php echo  plugin_dir_url( __FILE__ ).'includes/images/CancelButtonUp.jpg';?></textarea></td>
		</tr>

		<tr class="resumeupload resumetype" style="display:none;">
			<td valign="top"><strong>Browse image</strong></td>
			<td><input type="file" id="resumeupload" name="resumeupload"></td>
		</tr>
		<tr class="resumebutton resumetype" style="display:">
			<td colspan="2">
				<div class="resumebutton_design">
					<button id="resumebutton" style="height: 30px;padding: 0 12px 2px;background: #0085ba;border-color: #0085ba ;color: #fff;font-size: 13px;border-width: 1px;border-style: solid;border-radius: 3px;">RESUME</button>
				</div>		
					<div class="resumebutton_customizer">
						<h4>Button Customizer</h4>
						<ul class="">
							<li>
							  <label>Button Text</label>
							  <div id="btn_text_div" class="input-group colorpicker-component pausebtn">
								<input type="text" value="RESUME" id="btn_text" class="form-control temp_style_fields">
							  </div>
							</li>
							<li>
							  <label>Background Color</label>
							   <div id="btn_bg" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#0085ba" id="pausebgcolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Style</label>
							   <div id="" class="input-group">
									<select id="border_style" class="form-control temp_style_fields">
										<option value="solid" selected>Solid</option>
										<option value="dashed">Dashed</option>
										<option value="dotted">Dotted</option>
									</select>
								</div>
							</li>
							
							<li>
							   <label>Border width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderwidth"  name="borderwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="1"/> 
								</div>
							</li>
							
							<li>
							  <label>Border Color</label>
							   <div id="btn_border_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#0085ba" id="pausebordercolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Border Radius</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="borderradius"  name="borderradius"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="200" data-slider-step="1" data-slider-value="3"/> 
								</div>
							</li>
							
							
							
	
	
							<li>
							   <label>Font Size</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="fontsize"  name="fontsize"  data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="13"/> 
								</div>
							</li>
							
							<li>
							   <label>Font weight</label>
							   <div id="" class="input-group">
									<select id="font_weight" class="form-control temp_style_fields">
										<option value="normal">Normal</option>
										<option value="bold">bold</option>
										<option value="lighter">Lighter</option>					
									</select>
								</div>
							</li>
							
							<li>
							   <label>Text Color</label>
							   <div id="btn_clr" class="input-group colorpicker-component input-group-outer">
								<input type="text" value="#fff" id="pausecolor" class="form-control temp_style_fields"  name="pasuebgcolor"  />
								<span class="input-group-addon "><i></i></span>
								</div>
							</li>
							
							<li>
							   <label>Button Width</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonwidth"  name="buttonwidth"  data-slider-id='ex2Slider' type="text" data-slider-min="100" data-slider-max="800" data-slider-step="1" data-slider-value="100"/> 
								</div>
							</li>
							
							<li>
							   <label>Button Height</label>
							   <div id="" class="input-group colorpicker-component input-group-outer">
									<input class="form-control temp_style_fields" id="buttonheight"  name="buttonheight"  data-slider-id='ex2Slider' type="text" data-slider-min="10" data-slider-max="100" data-slider-step="1" data-slider-value="20"/> 
								</div>
							</li>
							
						</ul>		
					</div>
			</td>
		</tr>
		<tr><td></td><td></td></tr>
	</table>
	</div>
	</div>
	
	  <div class="shortcode_container" style="display:none">
		   <h5>Here is the DAP Member Subscription Shortcode</h5>
        <textarea style="height:150px"> </textarea>
    </div>

     <div align="center" class="btn_outer"><a href="<?= admin_url('admin.php?page=dap_memberpages'); ?>"><button class="button-primary back-btn" id="backbtn">Back</button> </a>
   <button class="button-primary next-btn" id="mycancelscbtn1">Generate Shortcode</button></div>     
	 
</div>	
	</div>
	</div>
 
 
	<script>
	jQuery(document).ready(function(){
		jQuery('#mycancelscbtn1').click(function(){
			var showalltrans = jQuery('#showalltrans').val();
			var showcancel = jQuery('#showcancel').val();
			var cancelurl = "";
			var cancelcontact = "";
			var cancelcontacturl = "";
			var cancelledtext = "";
			var cancelsuccess ="";
			var cancelfailed = "";
			var confirmmsg = "";
			var cancelbuttonstyle = "";
			var cancelbuttontext= "";
			
			if(showcancel == "Y"){
				var cancelcontact = jQuery('#cancelcontact').val();
				var cancelcontacturl = jQuery('#cancelcontacturl').val();
				
				var cancelledtext = jQuery('#cancelledtext').val();
				var cancelsuccess = jQuery('#cancelsuccess').val();
				var cancelfailed = jQuery('#cancelfailed').val();
				var confirmmsg = jQuery('#confirmmsg').val();

				var canceltype = jQuery('#cancelimgtype').val();
				if(canceltype == "url"){
					cancelurl = jQuery('#cancelurl').val();
				}
				else if(canceltype == "upload"){
					var filename = document.getElementById("cancelupload").files[0].name; 
				
					var formData = new FormData();
					formData.append('action', 'live_links_cancel_image_upload');
					formData.append('file', jQuery('input[type=file][id=cancelupload]')[0].files[0]);
					jQuery.ajax({
					   type: 'POST',
					   url: ajaxurl,
					   data: formData,
					   cache: false,
					   contentType: false,
					   processData: false,
					   success: function(data) {
						   cancelurl = data;  
					   },
					   error: function(data) {
					   }
					});
					cancelurl = '<?php echo plugins_url();?>/DAP-WP-LiveLinks/includes/images/'+filename;
				}
				else{
					var css = jQuery('#cancelbutton').attr('style');
					var txt = jQuery('#cancelbutton').text();
					cancelbuttonstyle = css;
					cancelbuttontext= txt;
				}

			}

			var template = jQuery('#template').val();
			var prodid = jQuery('#prodid').val();
			var notransfoundmsg = jQuery('#notransfoundmsg').val();
						
			/* pause-resume params */
			
			var pauseurl = "";
			var pausebutton = "";
			var resumeurl = "";
			var resumebutton = "";
			var pausebuttonstyle="";
			var pausebuttontext = "";
			var resumebuttonstyle = "";
			var resumebuttontext = "";
			var pausesuccess = "";
			var pausefail = "";
			var pauseconfirm = "";
			var resumesuccess = "";
			var resumefail = "";
			var resumeconfirm = "";
			
			var show_pause = jQuery('#show_pause').val();
			
			if(show_pause == "Y"){
				var pausesuccess = jQuery('#pausesuccess').val();
				var pausefail = jQuery('#pausefail').val();
				var pauseconfirm = jQuery('#pauseconfirm').val();			
				

				var resumesuccess = jQuery('#resumesuccess').val();
				var resumefail = jQuery('#resumefail').val();
				var resumeconfirm = jQuery('#resumeconfirm').val();
				
				
				var pausetype = jQuery('#pauseimgtype').val();
				if(pausetype == "url"){
					pauseurl = jQuery('#pauseurl').val();
				}
				else if(pausetype == "upload"){
					var filename = document.getElementById("pauseupload").files[0].name; 
				
					var formData = new FormData();
					formData.append('action', 'live_links_cancel_image_upload');
					formData.append('file', jQuery('input[type=file][id=pauseupload]')[0].files[0]);
					jQuery.ajax({
					   type: 'POST',
					   url: ajaxurl,
					   data: formData,
					   cache: false,
					   contentType: false,
					   processData: false,
					   success: function(data) {
						   cancelurl = data;  
					   },
					   error: function(data) {
					   }
					});
					pauseurl = '<?php echo plugins_url();?>/DAP-WP-LiveLinks/includes/images/'+filename;
				}
				
				else{
					var css = jQuery('#pausebutton').attr('style');
					var txt = jQuery('#pausebutton').text();
					pausebuttonstyle = css;
					pausebuttontext= txt;
				}
				
				var resumetype = jQuery('#resumeimgtype').val();
				if(resumetype == "url"){
					resumeurl = jQuery('#resumeurl').val();
				}
				else if(resumetype == "upload"){
					var filename = document.getElementById("resumeupload").files[0].name; 
				
					var formData = new FormData();
					formData.append('action', 'live_links_cancel_image_upload');
					formData.append('file', jQuery('input[type=file][id=resumeupload]')[0].files[0]);
					jQuery.ajax({
					   type: 'POST',
					   url: ajaxurl,
					   data: formData,
					   cache: false,
					   contentType: false,
					   processData: false,
					   success: function(data) {
						   cancelurl = data;  
					   },
					   error: function(data) {
					   }
					});
					resumeurl = '<?php echo plugins_url();?>/DAP-WP-LiveLinks/includes/images/'+filename;
				}
				else{
					var css = jQuery('#resumebutton').attr('style');
					var txt = jQuery('#resumebutton').text();
					resumebuttonstyle = css;
					resumebuttontext = txt;
				}
			}
			
			var shortcode = '[DAPUMemberSubscriptions showalltransactions="'+showalltrans+'" showcancel="'+showcancel+'" cancelimage="'+cancelurl+'" template="'+template+'" cancelledtext="'+cancelledtext+'" cancelsuccess="'+cancelsuccess+'" cancelfailed="'+cancelfailed+'"  confirmmsg="'+confirmmsg+'" canceltext="cancel" cancelcontact="'+cancelcontact+'" cancelcontacturl="'+cancelcontacturl+'" cancelbuttonstyle="'+cancelbuttonstyle+'" cancelbuttontext="'+cancelbuttontext+'" notransfoundmsg="'+notransfoundmsg+'" productId="'+prodid+'" showpause="'+show_pause+'" pausesuccess="'+pausesuccess+'" pausefail="'+pausefail+'" pauseconfirm="'+pauseconfirm+'" pauseurl="'+pauseurl+'" pausebuttonstyle="'+pausebuttonstyle+'" pausebuttontext="'+pausebuttontext+'" resumesuccess="'+resumesuccess+'" resumefail="'+resumefail+'" resumeconfirm="'+resumeconfirm+'" resumeurl="'+resumeurl+'" resumebuttonstyle="'+resumebuttonstyle+'" resumebuttontext="'+resumebuttontext+'"][/DAPUMemberSubscriptions]';
			jQuery('.shortcode_container').show();
			jQuery('.shortcode_container textarea').html(shortcode);
		});
		
		jQuery(document).on('change','#pauseimgtype',function(){
			var btn = jQuery(this).val();
			jQuery('.pausetype').hide();
			jQuery('.pause'+btn).show();
		});
		
		jQuery(document).on('change','#resumeimgtype',function(){
			var btn = jQuery(this).val();
			jQuery('.resumetype').hide();
			jQuery('.resume'+btn).show();
		});
		
		jQuery(document).on('change','#cancelimgtype',function(){
			var btn = jQuery(this).val();
			jQuery('.canceltype').hide();
			jQuery('.cancel'+btn).show();
		});
		
		
		
		jQuery(document).on('keyup','.pausebutton_customizer #btn_text',function(){
			var txt = jQuery(this).val();
			jQuery('#pausebutton').text(txt);
		});
		
		jQuery(document).on('keyup','.resumebutton_customizer #btn_text',function(){
			var txt = jQuery(this).val();
			jQuery('#resumebutton').text(txt);
		});
		
		jQuery(document).on('keyup','.cancelbutton_customizer #btn_text',function(){
			var txt = jQuery(this).val();
			jQuery('#cancelbutton').text(txt);
		});
		
		jQuery(document).on('change','.pausebutton_customizer #border_style',function(){
			var vall = jQuery(this).val();
			jQuery('#pausebutton').css('border-style',vall);
		});
		
		jQuery(document).on('change','.resumebutton_customizer #border_style',function(){
			var vall = jQuery(this).val();
			jQuery('#resumebutton').css('border-style',vall);
		});
		
		jQuery(document).on('change','.cancelbutton_customizer #border_style',function(){
			var vall = jQuery(this).val();
			jQuery('#cancelbutton').css('border-style',vall);
		});
		
		jQuery(document).on('change','.pausebutton_customizer #font_weight',function(){
			var vall = jQuery(this).val();
			jQuery('#pausebutton').css('font-weight',vall);
		});
		
		jQuery(document).on('change','.resumebutton_customizer #font_weight',function(){
			var vall = jQuery(this).val();
			jQuery('#resumebutton').css('font-weight',vall);
		});
		
		jQuery(document).on('change','.cancelbutton_customizer #font_weight',function(){
			var vall = jQuery(this).val();
			jQuery('#cancelbutton').css('font-weight',vall);
		});
		
		jQuery(document).on('change','#showcancel',function(){
			var vall = jQuery(this).val();
			if(vall=="Y"){
				jQuery('.cancel_element').show();
			}else{
				jQuery('.cancel_element').hide();
			}
		});
		
		jQuery(document).on('change','#show_pause',function(){
			var vall = jQuery(this).val();
			if(vall=="Y"){
				jQuery('.pause_element').show();
			}else{
				jQuery('.pause_element').hide();
			}
		});
		
		
	});
	
	</script>
 
