<?php

$permalink1 = get_site_url();
$permalink2 = get_home_url();
if ($permalink1 == $permalink2) {
    $permalink = $permalink1;
} else {
    $permalink = $permalink2;
}
$find = array('http://', 'https://');
$replace = 'https://';
$siteurl = str_replace($find, $replace, $permalink);

$allMemberPages_obj = DAP_MemberPages::loadByAction('subaccount');
$page_id_already_used = array();
if(count($allMemberPages_obj)){
	foreach($allMemberPages_obj as $allMemberPage_obj){
		$page_id_already_used[] = $allMemberPage_obj->getPageId();
	}
}

echo DapMemberShowLoader();
$id = $_GET['id'];


try {
    $customFieldsList = Dap_CustomFields::loadUserFacingCustomFields();   /* get dap custom fields. */
} catch (PDOException $e) {
    return ERROR_DB_OPERATION;
} catch (Exception $e) {
    return ERROR_GENERAL;
}

//6693b7 
//140
//15
//Y

$enableBulk = 'Y';
$bulkBtnBgClr = '#6693b7';
$bulkBtnWid = '140';
$bulkBtnHeight = '15';
$createBtnWidth = '137';
$createBtnBgClr = '#005bff';
$productBgClr = '#ffffff';
$csvBgClr = '#ffffff';
$fieldsBgClr = '#ffffff';

if($id != ''){
	$data = DAP_MemberPages::loadById($id);
	
	
	if(isset($data)){
		$templateHtml = $data->getTemplateHtml();
		$style_options = $data->getStylingOptions();

		if($style_options != ''){
			$style_options = explode('|' , $style_options);
			$enableBulk = $style_options[0];
			$bulkBtnBgClr = $style_options[1];
			$bulkBtnWid = $style_options[2];
			$bulkBtnHeight = $style_options[3];
			$createBtnWidth = $style_options[4];
			$createBtnBgClr = $style_options[5];
			$productBgClr = $style_options[6];
			$csvBgClr = $style_options[7];
			$fieldsBgClr = $style_options[8];
		}else{
			$enableBulk = 'N';
			$bulkBtnBgClr = '#6693b7';
			$bulkBtnWid = '140';
			$bulkBtnHeight = '15';
			$createBtnWidth = '137';
			$createBtnBgClr = '#005bff';
			$productBgClr = '#ffffff';
			$csvBgClr = '#ffffff';
			$fieldsBgClr = '#ffffff';

		}

		
		
		$templateHtml = explode('||', $templateHtml);	

		
		$html = $templateHtml[0];
		$frontendHtml = $templateHtml[1];
		$backendHtml = $templateHtml[2];
		$buttonHtml = $templateHtml[3];
		$subaccountFormHtml = $templateHtml[4];
		$subaccountBulkFormHtml = $templateHtml[5];
		
		
		$html = str_replace( '[GROUPTABLEDATA]', $backendHtml, $html);
	}
	
	$success_added_msg = DAP_MemberPagesValues::loadByActionIdAndName($id,'success_added_msg');
	if($success_added_msg != '' && $success_added_msg != false){
		$success_added_msg =  $success_added_msg->getValue();	
	}
	
	$limit_reached_msg = DAP_MemberPagesValues::loadByActionIdAndName($id,'limit_reached_msg');
	if($limit_reached_msg != '' && $limit_reached_msg != false){
		$limit_reached_msg =  $limit_reached_msg->getValue();	
	}
	
	$delete_confirm_msg = DAP_MemberPagesValues::loadByActionIdAndName($id,'delete_confirm_msg');
	if($delete_confirm_msg != '' && $delete_confirm_msg != false){
		$delete_confirm_msg =  $delete_confirm_msg->getValue();	
	}
	
	$deleted_msg = DAP_MemberPagesValues::loadByActionIdAndName($id,'deleted_msg');
	if($deleted_msg != '' && $deleted_msg != false){
		$deleted_msg =  $deleted_msg->getValue();	
	}
	
	$not_logged_in = DAP_MemberPagesValues::loadByActionIdAndName($id,'not_logged_in');
	if($not_logged_in != '' && $not_logged_in != false){
		$not_logged_in =  stripslashes($not_logged_in->getValue());	
	}
	
	$no_access = DAP_MemberPagesValues::loadByActionIdAndName($id,'no_access');
	if($no_access != '' && $no_access != false){
		$no_access =  stripslashes($no_access->getValue());	
	}

	$bulkNoAddUserMsg = 'You need to add at least one user.';
	$bulkNoAddUserMsg_obj = DAP_MemberPagesValues::loadByActionIdAndName($id,'bulkNoAddUserMsg');
	if($bulkNoAddUserMsg_obj != '' && $bulkNoAddUserMsg_obj != false){
		$bulkNoAddUserMsg =  $bulkNoAddUserMsg_obj->getValue();	
	}

	$no_field_select_msg = 'Please select the field name';
	$no_field_select_msg_obj = DAP_MemberPagesValues::loadByActionIdAndName($id,'no_field_select_msg');
	if($no_field_select_msg_obj != '' && $no_field_select_msg_obj != false){
		$no_field_select_msg =  $no_field_select_msg_obj->getValue();	
	}

	$limit_reached_bulk = 'Added %%USERS%%. Could not add all the users as max limit was reached';
	$limit_reached_bulk_obj = DAP_MemberPagesValues::loadByActionIdAndName($id,'limit_reached_bulk');
	if($limit_reached_bulk_obj != '' && $limit_reached_bulk_obj != false){
		$limit_reached_bulk =  $limit_reached_bulk_obj->getValue();	
	}
	
	
		
}

$tableBorderStyle = 'solid';

?>	


<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">

<div id="dap_member_page_wrapper">
	<div class="dap_member_cancellation_outer common_outer">

		<!--wrapper-tab-->
		<div class="member_cancellation_box">
			<ul class="nav nav-tabs dap_member_cancellation_tab" id="myTab" role="tablist">
				<li class="nav-item active">
					<a id="" class="nav-link active" data-toggle="tab" href="#subaccount_table" role="tab" aria-controls="subaccount_table" aria-selected="false">Manage Sub-Accounts</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#customize_form" role="tab" aria-controls="customize_form" aria-selected="false">Customize "Invite Member" Form</a>
				</li> 
				<li class="nav-item customize_bulk_add_tab_outer" style="<?= isset($enableBulk) && $enableBulk == 'Y' ? 'block' : 'none'; ?>">
					<a class="nav-link" data-toggle="tab" href="#customize_bulk_add" role="tab" aria-controls="customize_bulk_add" aria-selected="false">Customize "Bulk Add" Form</a>
				</li>  
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#customize_message" role="tab" aria-controls="customize_message" aria-selected="false">Customize Messages</a>
				</li>  
				<li class="nav-item shortcodeTab" style='display:<?= isset($_GET['id']) ? 'block' : 'none' ?>'>
					<a id="shortcodeTab" class="nav-link" data-toggle="tab" href="#shortcode" role="tab" aria-controls="shortcode" aria-selected="false">Shortcode</a>
				</li> 
			</ul>

		    <div class="tab-content">  
				<div class="tab-pane" id="page_detail" role="tabpanel">
					<div class="member_subscription_content">
						<div class="enter_name_outer">
							<input type="hidden" id="saved_id" value="<?= isset($_GET['id']) ? $_GET['id'] : '' ; ?>" >
							<input type="hidden" id="page_id" value="<?= isset($data) ? $data->getPageId() : '' ?>" >
							<h4 class="sub_inner_section_heading">
								<span><i class="fa fa-pencil-square" aria-hidden="true"></i> Customize Page Details</span>
								<a href="<?= admin_url('admin.php?page=dap_member_pages'); ?>" class="btn btn-success theme-btn">Return to Member Pages</a>
							</h4>
							<div class="form-group row mt-4">  		
								<div class="col-sm-4 align-items-center">
								<label> Create a New Subaccount Page </label>
								</div>
								<div class="col-sm-5">
									<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text"><?php echo $siteurl; ?>/</span>
									</div>
										<input type="text" name="create_subaccount_page" id="create_subaccount_page" class="form-control page_name" value="" placeholder="Enter Name" <?php if($data){ echo 'disabled=disbled';}?>/>
									</div>
								</div>
								<div class="col-sm-3">
									<button type="button"  id="subaccount_page" data-id ="create_subaccount_page" class="btn theme-btn btn-blue notransform check_availability_page_btn create_page_btn" <?php if($data){ echo 'disabled=disbled';}?>>Check Availability</button>									 
								</div>
								<div class="error-msgs text-center messages-div col-sm-12 mt-4">
									<h5 class="alert alert-danger error_create_subaccount_page error_msg" style="display:none">Sorry, This Name is already taken. Please Try with another one. </h5>
									<h5 class="alert alert-success success_create_subaccount_page success_msg" style="display:none">Congrats! This Name is available!</h5>
								</div>
							</div>	
							<div class="form-group row" >  
								<div class="col-sm-4"></div>
								<div class="col-sm-5">
									<div class="or">
										<span>OR</span>
									</div>
								</div>
							</div>
							<div class="form-group row form_group_inner">  
								<div class="col-sm-4 d-flex  align-items-center">
									<label> Select an Existing Page </label>
								</div>
								<div class="col-sm-5">
									<select class="form-control" id="subaccount_page_url" name="subaccount_page_url" <?php if($data){ echo 'disabled=disbled';}?>>
									<option value="">Select a URL</option>
									 <?php
										$page_ids = get_all_page_ids();
										foreach($page_ids as $page){
											$page_name = get_page( $page );
											$selected = '';
											if ($page_name->post_status == 'publish'){
												if(isset($data) && ($data->getPageId() == $page)){
													$selected = 'selected=selected';
												}else if(in_array($page,$page_id_already_used)){
													continue;
												}
												
												
											?>
												<option value='<?php echo $page; ?>' <?php echo $selected;?>>
												<?php echo get_permalink($page); ?>
												</option>
											<?php } 

										}//close foreach loop ?>
									</select>
								</div>
							</div>
						</div>
							
						<div class="col-sm-12 bottom_buttom">
							<button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button> 
							<button type="button" class="btn  next_btn custom_btn" id="" onclick="spc_main_offer_next_tab();">Next <img src="http://dapcart.com/wp-content/plugins/smartpaycart/includes/admin/templates/../assets/images/next-arrow.png" alt=""></button>
						</div>  

					</div>
				</div>

		 <div class="tab-pane active" id="subaccount_table" role="tabpanel">
		
			<div class="member_subscription_content">
			<div class="enter_name_outer">	
				<h4 class="sub_inner_section_heading">
					<span>
					<i class="fa fa-table" aria-hidden="true"></i> Customize "Manage Sub-Accounts" Table
					</span>
					<a href="<?= admin_url('admin.php?page=dap_member_pages'); ?>" class="btn btn-success theme-btn">Return to Member Pages</a>
				
				 </h4>				
			
			<div class="wrapper_customizer_manage">
		
				<div class="inner_customizer_manage">
								<div class="wrapper_member_customizer">
											  <div class="customized-optional dap_member_subaccount_customizer">
							 <div class="customizer_heading">Table Customizer</div>
								<ul class="templates-styles">
									<li>
										<label>Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="table_width"  name="table_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="500" data-slider-max="990" data-slider-step="1" data-slider-value="<?= isset($tableWidth) ? $tableWidth : '990' ?>" /> 
											</div>
										</div>
									</li>
									<li>
										<label>Background Color</label>
										<div class="input-group ">
											 <div id="table_background_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($tableBackground) ? $tableBackground : '#fff' ?>" name="table_background_clr" id="table_background_clr" class="form-control temp_style_fields" />		
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li>
										<label>Section Header Background Color</label>
										<div class="input-group ">
											 <div id="table_section_header_background_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($tableSectionHeaderBackground) ? $tableSectionHeaderBackground : '#fff' ?>" name="table_section_header_background_clr" id="table_section_header_background_clr" class="form-control temp_style_fields" />		
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									
									<li>
										<label>Alignment</label>
										<div class="input-group ">
											<select class="input-group form-control" id="table_alignment" name="table_alignment">
												<?php 
												$dm_bdr_style_array = array('none'=>'Center','right'=>'Right','left'=>'Left');
												foreach($dm_bdr_style_array as $key=>$value){
													 $slected = ''	;
													if($key == $tableAlignment ){
														
														$slected = 'selected=selected';
													}
													echo "<option value='".$key."' $slected >$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									
									<li>
										<label>Border Style</label>
										<div class="input-group ">
											<select class="input-group form-control" id="table_bdr_style" name="table_bdr_style">
												<?php 
												$dm_bdr_style_array = array('none'=>'None','solid'=>'Solid','dashed'=>'Dashed','dotted'=>'Dotted');
												foreach($dm_bdr_style_array as $key=>$value){
													 $slected = ''	;
													if($key == $tableBorderStyle ){
														
														$slected = 'selected=selected';
													}
													echo "<option value='".$key."' $slected >$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									<li>
										<label>Border Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="table_border_width"  name="table_border_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="<?= isset($tableBorderWidth) ? $tableBorderWidth : 1 ?>" /> 
											</div>
										</div>
									</li>
									<li>
										<label>Border Color</label>
										<div class="input-group ">
											 <div id="table_border_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($tableBorderColor) ? $tableBorderColor : '#ccc' ?>" name="table_border_clr" id="table_border_clr" class="form-control temp_style_fields" />	
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li>
									<label>Border Radius </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="table_border_radius"  name="table_border_radius" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="<?= isset($tableBorderRadius) ? $tableBorderRadius : 0 ?>"  /> 
											</div>
										</div>
									</li>
									
									
									
								</ul>
								</div>
				</div>
				</div>


				<div class="inner_customizer_middle_outer">
					<h6 class="sub_inner_section_text" style="font-weight"> This is the form that the group owners will see in the frontend. You can customize the table here.<br> Please note: This is just sample data. It will be replaced with actual data on frontend. </h6> 
					<div class="inner_customizer_middle">
						<?php 

						if(isset($html) && $html != ''){
						echo stripslashes($html);	
						}else{
						?>
						<div class="manageSubaccountTableOuter" id="manageSubaccountTableOuterId">	
							<div class="table_head">
								<div class="top_product_details">
									<div class="product_detail_inner">
										<strong class="editable p-2">Product Name:</strong>
										<div class="backend_score editable"> Product A</div>
										<div class="frontend_score editable">[PRODUCTNAME] </div>
									</div>
									<div class="top_product_actions">
										<div class="editable product_detail_inner add_bulk_btn_outer add_subaccount_bulk_btn common_btn" style="display:<?= isset($enableBulk) && $enableBulk == 'Y' ? 'inline-block' : 'none'?>;border:none; font-weight:600; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.20);font-size:16px; border-radius:5px;padding:14px 24px;background-color:<?= $bulkBtnBgClr ?>;border-color:<?= $bulkBtnBgClr ?>;color: #fff;">Add in Bulk
										</div>
										<div style="border:none; font-weight:600; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.20);font-size:16px; border-radius:5px;padding:14px 24px;background-color:#3ac3c5;border-color:#3ac3c5;color: #fff;" class="editable product_detail_inner add_new_btn_outer add_subaccount_btn common_btn">Add New Subaccount</div>
									</div>
								</div>
								<div class="bulkImportHtmlOuter" style="display: none"><button type="button" class="close_grp_bulk_import">×</button>[BULK_IMPORT_HTML]</div>
								<div class="wrapper_inner_head">
									<div class="product_head">
										<h4 class="editable total_seats p-2">Total Seats:</h4>
										<div class="backend_score total_seats_backend editable"> 20</div>
										<div class="frontend_score total_seats_frontend editable"> [TOTALSEATS]</div>
									</div>

									<div class="product_head">
										<strong class="editable used_seats p-2">Used Seats:</strong>
										<div class="backend_score used_seats_backend editable"> 10</div>
										<div class="frontend_score used_seats_frontend editable"> [USEDSEATS]</div>
									</div>

									<div class="product_head">
										<strong class="editable remaining_seats p-2">Remaining Seats:</strong>
										<div class="backend_score remaining_seats_backend editable"> 10</div>
										<div class="frontend_score remaining_seats_frontend editable"> [REMAININGSEATS]</div>
									</div>
								</div>
							</div>
							<div class="table-responsive ">
								<table class="table table-striped">
									<thead>
										<tr class="tableHead">
											<th scope="col" class="editable">Name</th>
											<th scope="col" class="editable">Email</th>
											<th scope="col" class="editable">Product Name</th>
											<th scope="col" class="editable">Action</th>
										</tr>
									</thead>
									<tbody class="subaccountTableBody">
										<tr>
											<td class="tableFirstName editable">Joe Smith</td>
											<td class="tableEmail editable">test@yoursite.com</td>
											<td class="tableProduct editable">Product A</td>
											<td class="tableAction">
												<div name="select_action" class="btn-group">
													<input type="hidden" id="" value="">
													<a class="edit_subaccount_btn edit-btn btn btn-secondary btn-sm" href="#">
														<i class="subaccount-fa fa fa-pencil" aria-hidden="true"></i>
													</a>
													<a class="delete_subaccount_btn del-btn btn btn-danger btn-sm" title="Delete" href="#">
														<i aria-hidden="true" class="subaccount-fa fa fa-trash"></i>
													</a>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<?php  } ?>
					</div>
				</div>


					<div class="inner_customizer_right">
							<div class="wrapper_member_customizer">
						<div class="customized-optional dap_member_subaccount_customizer">
							 <div class="customizer_heading" style="font-size:15px">Add Bulk Button Customizer</div>
								<ul class="templates-styles">
									<li class="customizer_main_heading switch_onoff_wrapper">
										<label>Enable Bulk Import</label>
										<div class="switch_onoff">
											<input type="checkbox" class="checkbox_inner" id="add_bulk_btn_enable" <?= isset($enableBulk) && $enableBulk == 'Y' ? 'checked' : ''?>>
											<label for="add_bulk_btn_enable"></label>
										</div>
									</li>
									<li style="display: none">
										<label>Button Text</label>
										<div class="input-group btn_text">
											 <input type="text" class="form-control" id="add_bulk_btn_text" value="<?= isset($add_new_btn_text) ? $add_new_btn_text : 'Add New Subaccount' ?>">
										</div>
									</li>
									<li>
										<label>Background Color</label>
										<div class="input-group ">
											 <div id="add_bulk_background_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= $bulkBtnBgClr ?>" name="add_bulk_background_clr" id="add_bulk_background_clr" class="form-control temp_style_fields" />		
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Style</label>
										<div class="input-group ">
											<select class="input-group form-control" id="add_bulk_bdr_style" name="add_new_bdr_style">
												<?php 
												$dm_bdr_style_array = array('none'=>'None','solid'=>'Solid','dashed'=>'Dashed','dotted'=>'Dotted');
												foreach($dm_bdr_style_array as $key=>$value){
													 $slected = ''	;
													if($key == $addNewBorderStyle ){
														
														$slected = 'selected=selected';
													}
													echo "<option value='".$key."' $slected >$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_bulk_border_width"  name="add_bulk_border_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="<?= isset($addNewBorderWidth) ? $addNewBorderWidth : 0 ?>" /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Color</label>
										<div class="input-group ">
											 <div id="add_bulk_border_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($addNewBorderColor) ? $addNewBorderColor : '#3ac3c5' ?>" name="add_bulk_border_clr" id="add_bulk_border_clr" class="form-control temp_style_fields" />	
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Radius </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_bulk_border_radius"  name="add_bulk_border_radius" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="<?= isset($addNewBorderRadius) ? $addNewBorderRadius : 4 ?>"  /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Font Size </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_bulk_font_size"  name="add_bulk_font_size" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="<?= isset($addNewFontSize) ? $addNewFontSize : '16' ?>" /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Font Weight</label>
										<div class="input-group ">
											<select class="input-group form-control" id="add_bulk_font_weight" name="add_bulk_font_weight">
												<?php 
												$add_new_font_weight_array = array('200'=>'200','400'=>'400','600'=>'600','700'=>'700','800'=>'800');
												
												if(!isset($addNewFontWeight)){
													$addNewFontWeight = 600;	
												}
												
												foreach($add_new_font_weight_array as $key=>$value){
													 $slected = '';
													if($key == $addNewFontWeight ){
														
														$slected = 'selected=selected';
													}
													
													
													echo "<option value='".$key."' $slected>$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									<li  style="display: none">
										<label>Text Color</label>
										<div class="input-group ">
											 <div id="add_bulk_text_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($addNewTextColor) ? $addNewTextColor : '#fff' ?>" name="add_bulk_text_clr" id="add_bulk_text_clr" class="form-control temp_style_fields" />
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li>
										<label>Button Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_bulk_button_width"  name="add_bulk_button_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="50" data-slider-max="500" data-slider-step="1" data-slider-value="<?= $bulkBtnWid ?>" /> 
											</div>
										</div>
									</li>
									<li>
										<label>Button Height </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_bulk_button_height"  name="add_bulk_button_height" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="<?= $bulkBtnHeight ?>" /> 
											</div>
										</div>
									</li>
								</ul>
							</div>		
						<div class="customized-optional dap_member_subaccount_customizer">
							 <div class="customizer_heading" style="font-size:15px">Subaccount Button Customizer</div>
								<ul class="templates-styles">
									<li style="display: none">
										<label>Button Text</label>
										<div class="input-group btn_text">
											 <input type="text" class="form-control" id="add_new_btn_text" value="<?= isset($add_new_btn_text) ? $add_new_btn_text : 'Add New Subaccount' ?>">
										</div>
									</li>
									<li>
										<label>Background Color</label>
										<div class="input-group ">
											 <div id="add_new_background_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($addNewBackground) ? $addNewBackground : '#3ac3c5' ?>" name="add_new_background_clr" id="add_new_background_clr" class="form-control temp_style_fields" />		
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Style</label>
										<div class="input-group ">
											<select class="input-group form-control" id="add_new_bdr_style" name="add_new_bdr_style">
												<?php 
												$dm_bdr_style_array = array('none'=>'None','solid'=>'Solid','dashed'=>'Dashed','dotted'=>'Dotted');
												foreach($dm_bdr_style_array as $key=>$value){
													 $slected = ''	;
													if($key == $addNewBorderStyle ){
														
														$slected = 'selected=selected';
													}
													echo "<option value='".$key."' $slected >$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_new_border_width"  name="add_new_border_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="<?= isset($addNewBorderWidth) ? $addNewBorderWidth : 0 ?>" /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Color</label>
										<div class="input-group ">
											 <div id="add_new_border_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($addNewBorderColor) ? $addNewBorderColor : '#3ac3c5' ?>" name="add_new_border_clr" id="add_new_border_clr" class="form-control temp_style_fields" />	
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li  style="display: none">
										<label>Border Radius </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_new_border_radius"  name="add_new_border_radius" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="<?= isset($addNewBorderRadius) ? $addNewBorderRadius : 4 ?>"  /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Font Size </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_new_font_size"  name="add_new_font_size" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="<?= isset($addNewFontSize) ? $addNewFontSize : '16' ?>" /> 
											</div>
										</div>
									</li>
									<li  style="display: none">
										<label>Font Weight</label>
										<div class="input-group ">
											<select class="input-group form-control" id="add_new_font_weight" name="add_new_font_weight">
												<?php 
												$add_new_font_weight_array = array('200'=>'200','400'=>'400','600'=>'600','700'=>'700','800'=>'800');
												
												if(!isset($addNewFontWeight)){
													$addNewFontWeight = 600;	
												}
												
												foreach($add_new_font_weight_array as $key=>$value){
													 $slected = '';
													if($key == $addNewFontWeight ){
														
														$slected = 'selected=selected';
													}
													
													
													echo "<option value='".$key."' $slected>$value</option>";
												}
												?>
											</select>
										</div>
									</li>
									<li  style="display: none">
										<label>Text Color</label>
										<div class="input-group ">
											 <div id="add_new_text_clr_div" class="input-group colorpicker-component">
											  <input type="text" value="<?= isset($addNewTextColor) ? $addNewTextColor : '#fff' ?>" name="add_new_text_clr" id="add_new_text_clr" class="form-control temp_style_fields" />
											  <span class="input-group-addon">
												  <i></i>
											   </span>
										  </div>
										</div>
									</li>
									<li>
										<label>Button Width </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_new_button_width"  name="add_new_button_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="50" data-slider-max="500" data-slider-step="1" data-slider-value="<?= isset($addNewWidth) ? $addNewWidth : '228' ?>" /> 
											</div>
										</div>
									</li>
									<li>
										<label>Button Height </label>
										<div class="input-group ">
											<div class="input-group colorpicker-component m_top_bottom">
												<input id="add_new_button_height"  name="add_new_button_height" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="<?= isset($addNewHeight) ? $addNewHeight : '15' ?>" /> 
											</div>
										</div>
									</li>
								</ul>
							</div>
							
						</div>
				</div>
				</div>
						
	
					<div class="frontendTableData" style="display:none">
						<tr>
							<td class="frontTableFirstName">Joe Smith</td>
							<td class="frontTableEmail">test@yoursite.com</td>
							<td class="frontTableProductName">Product A</td>
							<td>
								<div name="select_action" class="btn-group">
									<input type="hidden" id="" value="">
									<a class="edit_subaccount_btn edit-btn btn btn-secondary btn-sm"  data-id="[ROWPRODUCTID]" data-key="[ROWUSERID]"  href="#">
										<i class="fa fa-pencil" aria-hidden="true"></i>
									</a>
									<a class="delete_subaccount_btn del-btn btn btn-danger btn-sm" title="Delete"  data-id="[ROWPRODUCTID]" data-key="[ROWUSERID]"   href="#">
										<i aria-hidden="true" class="fa fa-trash"></i>
									</a>

								</div>
							</td>
						</tr>
						
					</div>
					
				<div class="wrapper_member_customizer">

	</div>

		  </div>
		  	<div class="col-sm-12 bottom_buttom">
					
                    <button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button> 
                   <button type="button" class="btn  custom_btn next_btn"  onclick="activaTab('customize_form');" id="">Next <img src="" alt=""></button>
				</div>
		   <!-- Add New User Options End -->
		   </div>
		   </div>


	   <div class="tab-pane" id="customize_form" role="tabpanel">
		  <div class="member_subscription_content"> 
		   <div class="wrapper_customize_form enter_name_outer">
			   <h4 class="sub_inner_section_heading">
				   <span>
				   <i class="fa fa-file-text" aria-hidden="true"></i> 
				   Customize "Invite Member" Form
				   </span>
				   <a href="<?= admin_url('admin.php?page=dap_member_pages'); ?>" class="btn btn-success theme-btn">Return to Member Pages</a>
				   </h4>
				<div class="row">
					<div class="col-sm-3 subaccount_left_part">
						<div class="customized-optional">
						  <div class="customizer_heading">Display Options </div>
							<ul class="templates-styles subaccount_show_section_option">
								<li class="customizer_main_heading switch_onoff_wrapper">
									<label><b>Account Information</b></label>
									  <div class="switch_onoff">										
										<input class="checkbox_inner"  type="checkbox"  id="account_info" checked value="">
										<label for="account_info"></label>
									</div>
								</li>
								<li class="sub_customizer sub_subaccount_account_info_section switch_onoff_wrapper">
									<label>First Name</label>
									 <div class="switch_onoff">									
										 <input type="checkbox" checked id="first_name" value=""  class="checkbox_inner">
										 <label for="first_name"></label>
									</div>
								</li>
								<li class="sub_customizer sub_subaccount_account_info_section switch_onoff_wrapper">
									<label>Last Name</label>
										<div class="switch_onoff">									
										 <input type="checkbox" checked id="last_name" value="" class="checkbox_inner">
										 	<label for="last_name"></label>
									</div>
								</li>
								
								<li class="sub_customizer sub_subaccount_account_info_section switch_onoff_wrapper">
									<label>Email</label>
										<div class="switch_onoff">												
										 <input type="checkbox" checked id="email" value="" class="checkbox_inner">
										 	<label for="email"></label>
									</div>
								</li>
														
								
								<li class="customizer_main_heading switch_onoff_wrapper">
									<label><b>Billing Information</b></label>
										<div class="switch_onoff">											
										 <input type="checkbox" id="billing_info" value="" class="checkbox_inner">
										 	<label for="billing_info"></label>
									</div>
								</li>
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>Address 1</label>
									<div class="switch_onoff">													
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="address1" id="address_1" value="" >
										 	<label for="address_1"></label>
									</div>
								</li>
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>Address 2</label>
										<div class="switch_onoff">											
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="address2" id="address_2" value="">
										 	<label for="address_2"></label>
									</div>
								</li>
								
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>City</label>
										<div class="switch_onoff">											
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="city"  id="city" value="">
										 	<label for="city"></label>
									</div>
								</li>
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>State</label>
										<div class="switch_onoff">											
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="state"  id="state" value="">
										 	<label for="state"></label>
									</div>
								</li>
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>Zip/Postal Code</label>
									<div class="switch_onoff">												
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="zip" id="postal_code">
										 	<label for="postal_code"></label>
									</div>
								</li>
								<li class="sub_customizer sub_billing_info_section switch_onoff_wrapper">
									<label>Country</label>
										<div class="switch_onoff">											
										 <input type="checkbox" checked class="billing_info_toggle checkbox_inner" data-id="country" id="country">
										 	<label for="country"></label>
									</div>
								</li>
								<li class="customizer_main_heading switch_onoff_wrapper">
									<label><b>Additional Information</b></label>
									<div class="switch_onoff">										
									<input type="checkbox" id="additional_info" value=""  class="checkbox_inner">
									<label for="additional_info"></label>
									</div>
								</li>
								
								<?php foreach ($customFieldsList as $key) {  ?>
									<li class="sub_customizer switch_onoff_wrapper sub_subaccount_custom_fields_section outer_check_<?php echo $key['name']; ?>">
										<label>  <?php echo $key['label']; ?>     </label>
										<div class="switch_onoff">		
											<input type="checkbox" class="checkbox_inner add_additional" data-id="<?php echo $key['name']; ?>" id="check_<?php echo $key['name']; ?>" value="<?php echo $key['label']; ?>" data-type="<?php echo $key['label']; ?>" data-label-type="<?php echo $key['label']; ?>" data-toggle="toggle">
											<label for="additional_info"></label>
										</div>
									</li>
								<?php } ?>
								
								
								
								
							</ul>
						</div>
						
						
						
								
						<div class="customized-optional">
						  <div class="customizer_heading">Create Button Style </div>
							<ul class="templates-styles">
								<li class="customized_optional_single_column m_top_bottom">
									<label>Button Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_btn_width"  name="create_subaccount_btn_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="50" data-slider-max="500" data-slider-step="1" data-slider-value="" /> 
										</div>
									</div>
								</li>
								<li class="show_orderbump_top_bottom_outer">
									<label>Background color</label>
									<div class="input-group ">
									  <div id="create_subaccount_btn_background_outer_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#000000" name="create_subaccount_btn_background_outer_color" id="update_btn_background_outer_color" class="form-control update_btn_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#000000"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								
								<li>
									<label>Border Style  </label>
									<div class="input-group ">
										<select class="input-group form-control" id="create_subaccount_btn_frnt_bdr_style" name="create_subaccount_btn_frnt_bdr_style">
											<option value="none">None</option><option value="solid">Solid</option><option value="dashed">Dashed</option><option value="dotted">Dotted</option>										
										</select>
									</div>
								</li>
								<li>
									<label>Border Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_btn_border_width"  name="create_subaccount_btn_border_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="0" /> 
										</div>
									</div>
								</li>
								<li>
									<label>Border Radius</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_btn_border_radius"  name="create_subaccount_btn_border_radius" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="40" data-slider-step="1" data-slider-value="0" /> 
										</div>
									</div>
								</li>
								
								<li>
									<label>Border Color </label>
									<div class="input-group ">
									  <div id="create_subaccount_btn_frnt_bdr_color_div" class="input-group colorpicker-component colorpicker-element"> 
									  <input type="text" id="create_subaccount_btn_frnt_bdr_color" value="#000000" name="create_subaccount_btn_frnt_bdr_color" class="form-control colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#000000"></i>
									   </span>
									  </div>
									</div>
									
								</li>
								
							</ul>
						</div>
						

					</div>
					
					<div class="col-sm-6 subaccount_center_part subaccount_htm_cutomizer">

						<div id="dap_member_subaccount_outer">
							<?php 
							if($subaccountFormHtml){
								echo stripslashes($subaccountFormHtml);	
							}else{ ?>
							<div class="dap_member_subaccount_inner">
								<form action="" name="dap_update_subaccount_form" method="POST" id="dap_update_subaccount_form">

								<div class="enter_name_outer show_subaccount_product_details_section product_detail">
									<div class="master_heading border-bottom-0 mb-4 editable" style="position: relative;" ><h4>Add A New User</h4></div>
									<div class="section_heading editable" style="position: relative;" >
										<div>Product Details</div>
									</div>

									<div class="form-group row mt-4 show_first_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;" spellcheck="false">Select Product</label>
										</div>
										<div class="col-sm-8">
											<div class="backendVisibilityProduct">
												<select class="form-control" id="" name="">
													<option value="center">DYNAMICALLY REPLACED IN THE FRONTEND</option>
												</select>
											</div>
											<div class="frontendVisibilityProduct">
												[PRODUCTDROPDOWN]
											</div>
										</div>
									</div>
								</div>

								<div class="enter_name_outer show_subaccount_account_info_section">
									<div class="section_heading editable" style="position: relative;"><div>Account Information</div></div>
									<div class="form-group row mt-4 show_first_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;" >First Name</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" required="Y" name="u_first_name">
										</div>
									</div>
									<div class="form-group row show_last_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable"style="position: relative;">Last Name</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_last_name">
										</div>
									</div>
									<div class="form-group row show_email_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Email</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" required="Y" name="u_email">
										</div>
									</div>
								</div>

								<div class="enter_name_outer show_subaccount_billing_info_section" style="display:none">
									<div class="editable"><h3 class="section_heading ">Billing Information</h3></div>
									<div class="form-group row mt-4 show_subaccount_billing_address1_section u_address1">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Address Line 1</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_address1">
										</div>
									</div>

									<div class="form-group row mt-4 show_subaccount_billing_address2_section u_address2">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Address Line 2</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_address2">
										</div>
									</div>

									<div class="form-group row show_subaccount_billing_city_section u_city">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">City</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_city">
										</div>
									</div>

									<div class="form-group row show_subaccount_billing_state_section u_state">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">State</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_state">
										</div>
									</div>

									<div class="form-group row show_subaccount_billing_postal_code_section u_zip">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Zip/Postal Code</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_zip">
										</div>
									</div>

									<div class="form-group row show_subaccount_billing_country_section u_country">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Country</label>
										</div>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="u_country">
										</div>
									</div>
								</div>

								<div class="enter_name_outer show_subaccount_additional_info_section addtional_info_outer" style="display:none">
									<div class="editable" style="position: relative;"><h3 class="section_heading">Additional Information</h3></div>
									<div class="append_new"></div>
								</div>

								<div class="wrapper_bottom_btn_section">
									<div class="row create_section">
										<div class="col-sm-12 text-right">
											<div class="theme-btn editable createSubaccountButton" style="position: relative;">Add Account</div>
										</div>
									</div>	
								</div>

								<div style="display:none">%%HIDDENFIELDS%%</div>

								</form>
							</div>
							<?php } ?>
						</div>			
					</div>

					<div class="subaccount_htm_cutomizer_link"></div>
					
					<div class="col-sm-3 subaccount_right_part">
						<div class="customized-optional">
						  <div class="customizer_heading">Background Color </div>
							<ul class="templates-styles">
								<li class="productDetailsCustomizeOuter">
									<label>Product Details </label>
									<div class="input-group ">
									  <div id="product_background_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#f9f9f9" name="product_background_color" id="product_background_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								<li class="accountInfoCustomizeOuter">
									<label>Account Information </label>
									<div class="input-group ">
									  <div id="account_background_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#f9f9f9" name="account_background_color" id="account_background_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								<li class="billingInfoCustomizeOuter">
									<label>Billing Information </label>
									<div class="input-group ">
									  <div id="billing_background_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#f9f9f9" name="billing_background_color" id="billing_background_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										 <i style="background-color:#f9f9f9"></i>
									   </span>
									  </div>
									</div>
								</li>
								<li class="additionalInfoCustomizeOuter">
									<label>Additional Information </label>
									<div class="input-group ">
									  <div id="additional_background_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#f9f9f9" name="additional_background_color" id="additional_background_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#f9f9f9"></i>
									   </span>
									  </div>
									</div>
								</li>
								
							</ul>
						</div>
						
						<div class="customized-optional">
						  <div class="customizer_heading">Template Style </div>
							<ul class="templates-styles">
								<li>
									<label>Template Alignment</label>
									<div class="input-group ">
										<select class="input-group form-control" id="dm_subaccount_temp_aligment" name="dm_subaccount_temp_aligment">
										<option value="center" selected="selected">Center</option><option value="left">Left</option><option value="right">Right</option>											
											
										</select>
									</div>
							</li>
								
								<li class="customized_optional_single_column m_top_bottom">
									<label>Template Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component">
											<input id="temp_frnt_wid" class="form-control" data-slider-id="ex1Slider" type="text" data-slider-min="400" data-slider-max="1400" data-slider-step="1" data-slider-value="790" name="temp_frnt_wid" style="display: none;" data-value="790" value="790"> 
										</div>
									</div>
								</li>
								<li class="show_orderbump_top_bottom_outer">
									<label>Template outer color</label>
									<div class="input-group ">
									  <div id="temp_background_outer_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="#f9f9f9" name="temp_background_outer_color" id="temp_background_outer_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#f9f9f9"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								
								<li>
									<label>Border Style  </label>
									<div class="input-group ">
										<select class="input-group form-control" id="temp_frnt_bdr_style" name="temp_frnt_bdr_style">
											<option value="none">None</option><option value="solid">Solid</option><option value="dashed">Dashed</option><option value="dotted">Dotted</option>										
										</select>
									</div>
								</li>
								<li>
									<label>Border Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="temp_frnt_bdr_wid" name="temp_frnt_bdr_wid" class="form-control" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="0" style="display: none;" data-value="0" value="0"> 
										</div>
									</div>
								</li>
								<li>
									<label>Border Radius</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="temp_frnt_br_radius" name="temp_frnt_br_radius" class="form-control" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" style="display: none;" data-value="0" value="0"> 
										</div>
									</div>
								</li>
								
								<li>
									<label>Border Color </label>
									<div class="input-group ">
									  <div id="temp_frnt_bdr_color_div" class="input-group colorpicker-component colorpicker-element"> 
									  <input type="text" id="temp_frnt_bdr_color" value="#dddddd" name="temp_frnt_bdr_color" class="form-control colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#dddddd"></i>
									   </span>
									  </div>
									</div>
									
								</li>
								<li>
									<label>Padding Top </label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="temp_frnt_padd_top" name="temp_frnt_padd_top" class="form-control" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" style="display: none;" data-value="0" value="0"> 
										</div>
									</div>
								</li>
								<li>
									<label>Padding Bottom </label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="temp_frnt_padd_bottom" name="temp_frnt_padd_bottom" class="form-control" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" style="display: none;" data-value="0" value="0"> 
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>

				</div>

				</div>
				<div class="col-sm-12 bottom_buttom">
					<button type="button" class="btn custom_btn prev_pre_btn" onclick="activaTab('subaccount_table');">
					
						Previous</button>
                    <button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button> 
                   <button type="button" class="btn  custom_btn next_btn" onclick="activaTab('customize_message');">Next </button>
                  </div>
				
			</div>
		   </div>

		  	<div class="tab-pane" id="customize_bulk_add" role="tabpanel">
					<div class="member_subscription_content"> 
		   <div class="wrapper_customize_form enter_name_outer">
			   <h4 class="sub_inner_section_heading">
				   <span>
				   <i class="fa fa-file-text" aria-hidden="true"></i> 
				   Customize "Bulk Add" Form
				   </span>
				   <a href="<?= admin_url('admin.php?page=dap_member_pages'); ?>" class="btn btn-success theme-btn">Return to Member Pages</a>
				   </h4>
				<div class="row">
					<div class="col-sm-3 subaccount_left_part">
								
						<div class="customized-optional">
						  <div class="customizer_heading">Create Button Style </div>
							<ul class="templates-styles">
								<li class="customized_optional_single_column m_top_bottom">
									<label>Button Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_bulk_btn_width"  name="create_subaccount_bulk_btn_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="50" data-slider-max="500" data-slider-step="1" data-slider-value="<?= $createBtnWidth ?>" /> 
										</div>
									</div>
								</li>
								<li class="show_orderbump_top_bottom_outer">
									<label>Background color</label>
									<div class="input-group ">
									  <div id="create_subaccount_bulk_btn_background_outer_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="<?= $createBtnBgClr ?>" name="create_subaccount_bulk_btn_background_outer_color" id="update_bulk_btn_background_outer_color" class="form-control update_bulk_btn_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:<?= $createBtnBgClr ?>"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								
								<li style="display: none">
									<label>Border Style  </label>
									<div class="input-group ">
										<select class="input-group form-control" id="create_subaccount_bulk_btn_frnt_bdr_style" name="create_subaccount_bulk_btn_frnt_bdr_style">
											<option value="none">None</option><option value="solid">Solid</option><option value="dashed">Dashed</option><option value="dotted">Dotted</option>										
										</select>
									</div>
								</li>
								<li style="display: none">
									<label>Border Width</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_bulk_btn_border_width"  name="create_subaccount_bulk_btn_border_width" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="0" /> 
										</div>
									</div>
								</li>
								<li style="display: none">
									<label>Border Radius</label>
									<div class="input-group ">
										<div class="input-group colorpicker-component m_top_bottom">
											<input id="create_subaccount_bulk_btn_border_radius"  name="create_subaccount_bulk_btn_border_radius" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="40" data-slider-step="1" data-slider-value="0" /> 
										</div>
									</div>
								</li>
								
								<li style="display: none">
									<label>Border Color </label>
									<div class="input-group ">
									  <div id="create_subaccount_bulk_btn_frnt_bdr_color_div" class="input-group colorpicker-component colorpicker-element"> 
									  <input type="text" id="create_subaccount_bulk_btn_frnt_bdr_color" value="#000000" name="create_subaccount_bulk_btn_frnt_bdr_color" class="form-control colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:#000000"></i>
									   </span>
									  </div>
									</div>
									
								</li>
								
							</ul>
						</div>
						

					</div>
					
					<div class="col-sm-6 subaccount_center_part subaccount_htm_cutomizer subaccount_bulk_html_customizer">

						<div id="dap_member_subaccount_bulk_outer" class="dap_member_subaccount_block">
							<?php 
							if($subaccountBulkFormHtml && $subaccountBulkFormHtml != '' && $subaccountBulkFormHtml != 'undefined'){
								echo stripslashes($subaccountBulkFormHtml);	
							}else{ ?>
							<div class="dap_member_subaccount_inner">
								<form action="" name="dap_update_subaccount_form" method="POST" id="dap_update_subaccount_form">

								<div class="enter_name_outer show_subaccount_bulk_product_details_section product_detail">
									<div class="master_heading border-bottom-0 mb-4 editable" style="position: relative;" ><h4>Add Students in Bulk</h4></div>
									<div class="section_heading editable" style="position: relative;" >
										<div>Product Details</div>
									</div>

									<div class="form-group row mt-4 show_first_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;" spellcheck="false">Select Product</label>
										</div>
										<div class="col-sm-8">
											<div class="backendVisibilityProduct">
												<select class="form-control" id="" name="">
													<option value="center">DYNAMICALLY REPLACED IN THE FRONTEND</option>
												</select>
											</div>
											<div class="frontendVisibilityProduct">
												[PRODUCTDROPDOWN]
											</div>
										</div>
									</div>
								</div>
								<div class="enter_name_outer show_subaccount_bulk_csv_info_section">
									<div class="section_heading editable" style="position: relative;"><div>Enter Comma-Separated List of Data to be Imported </div></div>
									<div class="col-sm-12 mt-3">
										<textarea class="form-control" name="b_data" id="b_data" aria-describedby="b_data" style=" "></textarea>
									</div>
								</div>	

								<div class="enter_name_outer show_subaccount_bulk_field_info_section">
									<div class="section_heading editable" style="position: relative;"><div>Select the Order of Fields (in the data to be imported)</div></div>
									<div class="form-group row mt-4 show_first_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;" >Field 1</label>
										</div>
										<div class="col-sm-8">
											<select name="b_f1" id="b_f1" class="form-control"> 
						                      <option selected="" value="select">Select Field Name</option>
						                      <option value="email">Email</option>
						                      <option value="first_name">First Name</option>
						                      <option value="last_name">Last Name</option>
						                  	</select>
										</div>
									</div>
									<div class="form-group row show_last_name_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable"style="position: relative;">Field 2</label>
										</div>
										<div class="col-sm-8">
											<select name="b_f2" id="b_f2" class="form-control"> 
						                      <option selected="" value="select">Select Field Name</option>
						                      <option value="email">Email</option>
						                      <option value="first_name">First Name</option>
						                      <option value="last_name">Last Name</option>
						                  	</select>
										</div>
									</div>
									<div class="form-group row show_email_section">
										<div class="col-sm-4 d-flex align-items-center">
											<label class="editable" style="position: relative;">Field 3</label>
										</div>
										<div class="col-sm-8">
											<select name="b_f3" id="b_f3" class="form-control"> 
						                      <option selected="" value="select">Select Field Name</option>
						                      <option value="email">Email</option>
						                      <option value="first_name">First Name</option>
						                      <option value="last_name">Last Name</option>
						                  	</select>
										</div>
									</div>
								</div>


								<div class="wrapper_bottom_btn_section">
									<div class="row create_section">
										<div class="col-sm-12 text-right">
											<div class="theme-btn editable createSubaccountBulkButton" style="position: relative;">Add Accounts</div>
										</div>
									</div>	
								</div>

								<div style="display:none">%%HIDDENFIELDS%%</div>

								</form>
							</div>
							<?php } ?>
						</div>			
					</div>

					<div class="subaccount_htm_cutomizer_link"></div>
					
					<div class="col-sm-3 subaccount_right_part">
						<div class="customized-optional">
						  <div class="customizer_heading">Background Color </div>
							<ul class="templates-styles">
								<li class="productDetailsCustomizeOuter">
									<label>Product Details </label>
									<div class="input-group ">
									  <div id="product_background_bulk_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="<?= $productBgClr ?>" name="product_background_bulk_color" id="product_background_bulk_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:<?= $productBgClr ?>"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								<li class="accountInfoCustomizeOuter">
									<label>CSV Information </label>
									<div class="input-group ">
									  <div id="csv_background_bulk_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="<?= $csvBgClr ?>" name="csv_background_bulk_color" id="csv_background_bulk_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:<?= $csvBgClr ?>"></i>
									   </span>
									  </div>
									</div>
								</li>

								<li class="accountInfoCustomizeOuter">
									<label>Fields</label>
									<div class="input-group ">
									  <div id="fields_background_bulk_color_div" class="input-group colorpicker-component colorpicker-element">
									  <input type="text" value="<?= $fieldsBgClr ?>" name="fields_background_bulk_color" id="fields_background_bulk_color" class="form-control temp_style_fields colorpicker-element">
									  <span class="input-group-addon">
										  <i style="background-color:<?= $fieldsBgClr ?>"></i>
									   </span>
									  </div>
									</div>
								</li>
								
								
							</ul>
						</div>
						
					</div>

				</div>

				</div>
				<div class="col-sm-12 bottom_buttom">
					<button type="button" class="btn custom_btn prev_pre_btn" onclick="activaTab('subaccount_table');">
					
						Previous</button>
                    <button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button> 
                   <button type="button" class="btn  custom_btn next_btn" onclick="activaTab('customize_message');">Next </button>
                  </div>
				
			</div>	
			</div>

			<div class="tab-pane" id="customize_message" role="tabpanel">
				<div class="member_subscription_content">
					<div class="enter_name_outer">
						<h4 class="sub_inner_section_heading">
						<span><i class="fa fa-envelope" aria-hidden="true"></i> Customize Message</span>
						<a href="<?= admin_url('admin.php?page=dap_member_pages'); ?>" class="btn btn-success theme-btn">Return to Member Pages</a>
						</h4>

					<div class="form-group row mt-4">  
					<div class="col-sm-12">
					<div class="sub_inner_section">

						<div class="form-group row">  
							<div class="col-sm-2">
								<label>User Added Successfully</label>
							</div>
							<div class="col-sm-4">
								<textarea type="text" id="success_added_msg" class="form-control" rows="4"><?= isset($success_added_msg) ? $success_added_msg : 'Added Successfully!' ?></textarea>
							</div>
						</div> 	

						<div class="form-group row">  
							<div class="col-sm-2">
								<label> Limit Reached</label>
							</div>
							<div class="col-sm-4">
								<textarea type="text" id="limit_reached_msg" class="form-control" rows="4"><?= isset($limit_reached_msg) ? $limit_reached_msg : 'Sorry, max account limit reached!' ?></textarea>
							</div>
						</div>

						<div class="form-group row">  
							<div class="col-sm-2">
								<label> Delete User Confirmation</label>
							</div>
							<div class="col-sm-4">
								<textarea type="text" id="delete_confirm_msg" class="form-control" rows="4"><?= isset($delete_confirm_msg) ? $delete_confirm_msg : 'Are you sure you want to delete user?' ?></textarea>
							</div>
						</div>

					<div class="form-group row">  
					<div class="col-sm-2">
					<label> User Deleted Successfully</label>
					</div>
					<div class="col-sm-4">
					<textarea type="text" id="deleted_msg" class="form-control" rows="4"><?= isset($deleted_msg) ? $deleted_msg : 'Deleted Successfully!' ?></textarea>
					</div>
					</div>
					<div class="form-group row">  
					<div class="col-sm-2">
					<label> Not Logged-in Message</label>
					</div>
					<div class="col-sm-4">
					<div name="not_logged_in"  id="not_logged_in" class="form-control editable" rows="4"><?= isset($not_logged_in) ? $not_logged_in : 'Sorry, you need to be logged-in to access this page.' ?></div>
					</div>
					</div>
					<div class="form-group row">  
					<div class="col-sm-2">
					<label> No Access Message</label>
					</div>
					<div class="col-sm-4">
					<div name="no_access" id="no_access" class="form-control editable" rows="4"><?= isset($no_access) ? $no_access : 'Sorry, your account does not have access to this page. This page is only available to group account owners.' ?></div>
					</div>
					</div>

					<div class="form-group row">  
					<div class="col-sm-2">
					<label> No User To Add In Bulk</label>
					</div>
					<div class="col-sm-4">
					<textarea type="text" id="bulkNoAddUserMsg" class="form-control" rows="4"><?= isset($bulkNoAddUserMsg) ? $bulkNoAddUserMsg : 'You need to add at least one user.' ?></textarea>
					</div>
					</div>

					<div class="form-group row">  
					<div class="col-sm-2">
					<label> No Field Selected</label>
					</div>
					<div class="col-sm-4">
					<textarea type="text" id="no_field_select_msg" class="form-control" rows="4"><?= isset($no_field_select_msg) ? $no_field_select_msg : 'Please select the field name' ?></textarea>
					</div>
					</div>

					<div class="form-group row">  
					<div class="col-sm-2">
					<label>Bulk Limit Reached</label>
					</div>
					<div class="col-sm-4">
					<textarea type="text" id="limit_reached_bulk" class="form-control" rows="4"><?= isset($limit_reached_bulk) ? $limit_reached_bulk : 'Added %%USERS%%. Could not add all the users as max limit was reached.' ?></textarea>
					</div>
					</div>


					
					</div>

					</div>
					</div>
					</div> <!-- Add New User Options End -->


					<div class="col-sm-12 bottom_buttom">
						<button type="button" class="btn custom_btn prev_pre_btn" onclick="activaTab('customize_form');">Previous</button>
						<button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button> 
						<button style="display:<?= isset($_GET['id']) ? 'block' : 'none' ?>" type="button" class="btn last_next_btn custom_btn next_btn" onclick="activaTab('shortcode');">Next </button>
					</div>
				</div>
			</div>

			<div class="tab-pane" id="shortcode" role="tabpanel" >
				<div class="member_subscription_content">
					<div class="enter_name_outer">
						<div class="shortcodeOuter">
							<div class="row">
								<div class="col-md-6">
									<div class="sub_inner_section_text">
										<h2>Here's the new Group Account Shortcode:</h2>
										<div class="shortcodeMainOuter">
											<div id="shortcode_display" class="d-inline" name="shortcode_display"><?= dapMemberGetSubaccountShortcodeNameById($_GET['id']) ?></div>
											<div id="shortcode_display_copy_outer">
											<button data-id="shortcode_display" id="copy_shortcode" class="theme-button btn btn-warning" onclick="dap_member_copy_to_clipboard(this)"> Copy</button>
											</div>
										</div>
										<p>Publish this shortcode on any Wordpress page. When group account owners visit this page, they will be able to add and manage sub-accounts on this page.</p>
									</div>
								</div>
								<div class="col-md-6"></div>
							</div>
						</div>
					</div>
					<div class="col-sm-12 bottom_buttom">
						<button type="button" class="btn custom_btn prev_pre_btn" onclick="activaTab('customize_message')";>Previous</button>
						<button type="button" class="btn custom_btn save_product save_pre_btn green_btn saveSubaccountData">Save</button>
					</div>
				</div>
			</div>

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

<div class="tempHtml"></div>

<script>
$(document).ready(function(){
 jQuery('.template_style_left').click(function(){
 var id = jQuery(this).attr('data-id');
 jQuery('.'+id).toggle("slow"); 
   });  
 
});
</script>
