<?php
/**
 * Filename: manage.groups.php
 * Created : EzLinkTools.Com <marcus@blogprofitnetwork.com> (https://EzLinkTools.Com)
 * Copyright 2020 - EzLinkTools.Com <marcus@blogprofitnetwork.com> (https://EzLinkTools.Com)
 */
defined('_IN_MAIN_MODULE') or die ('ACCESS DENIED');

include_once ('pages/header.part.php');

$sizes 	= get_option($buttonVoodooDatabase->tableSizeOptions);
$groups	= $buttonVoodooDatabase->getAllGroups();
?>

	<div class="ui-tabs">
		<ul class="ui-tabs-nav">
			<li><a href="#introduction">Introduction</a></li>
			<li><a href="#manage">Manage Groups</a></li>
			<li><a href="#settings">Settings</a></li>
		</ul>



		<!-- introduction -->
		<div id="introduction">
			<?php include_once ('pages/intro.part.php'); ?>
		</div>
		<!-- // introduction -->


		<!-- manage -->
		<div id="manage">

			<!-- holder - manage -->
			<div id="holder-manage">
				<div class="row cell">
					<h3>Manage Groups
						<span style="float:right;">
					        <span data-role="hint" data-hint-position="left" data-hint="New Group">
						        <a href="javascript:void(0);" name="cmdAddNewGroup" id="cmdAddNewGroup" class="button button-primary">
							        <span class="icon mif-plus"></span>
						        </a>
					        </span>
				        </span>
					</h3> <hr />
				</div>

				<div class="row cell">
					<table id="manage-table" class="table striped hovered border">
						<thead>
						<tr>
							<th width="100" style="text-align:center;">ID</th>
							<th width="200">Name</th>
							<th width="200">Details</th>
							<th width="250" style="text-align:center;">Actions</th>
						</tr>
						</thead>


						<?php
						if (0 != count($groups)) {
							echo '<tbody>';
								foreach ($groups as $group) {
									$groupid 		= $group['groupid'];
									$groupOptions	= get_option($buttonVoodooDatabase->tableGroupOptions .'_'. $groupid);

									$impressions	= ($buttonVoodooDatabase->countGroupImpressionsByGroupId($groupid) != 0) ? $buttonVoodooDatabase->countGroupImpressionsByGroupId($groupid) : 0;
									$clicks			= ($buttonVoodooDatabase->countButtonClicksByGroupId($groupid) != 0) ? $buttonVoodooDatabase->countButtonClicksByGroupId($groupid) : 0;
									$ctr			= ($clicks != 0 && $impressions != 0) ? number_format($clicks / $impressions / 0.01, 2, '.', '') : '0.00';

									switch ($group['status']) {
										case BUTTONVOODOO_ENABLED :
											$status = 'fg-green';
											break;

										case BUTTONVOODOO_DISABLED :
											$status = 'fg-red';
											break;
									}
									?>

									<tr>
										<td style="text-align:center;"><?php echo $groupid; ?></td>
										<td><?php echo $group['name']; ?></td>
										<td>
											<div class="row cell text-small">
												<div class="row cells2">
													<div class="cell text-bold">Impressions</div>
													<div id="holder-impressions-<?php echo $groupid; ?>"><?php echo $impressions; ?></div>
												</div>
												<div class="row cells2">
													<div class="cell text-bold">Clicks</div>
													<div id="holder-clicks-<?php echo $groupid; ?>"><?php echo $clicks; ?></div>
												</div>
												<div class="row cells2">
													<div class="cell text-bold">CTR</div>
													<div id="holder-ctr-<?php echo $groupid; ?>"><?php echo $ctr; ?></div>
												</div>
											</div>
										</td>
										<td style="text-align:center;">
											<div id="dialog-copy-group-codes-<?php echo $groupid; ?>" style="display:none;">[<?php echo BUTTONVOODOO_CODE .' id="'. $groupid .'"'; ?>]</div>
											<a href="javascript:void(0);" name="cmdCopyGroupCodes" id="cmdCopyGroupCodes" rel="<?php echo $groupid; ?>" class="button button-secondary" title="Copy codes">
												<span class="dashicons dashicons-share"></span>
											</a>

											<a href="<?php echo admin_url('admin.php?page='. BUTTONVOODOO_CODE .'&action=manage-buttons&id='. $groupid); ?>" class="button button-secondary" title="Manage buttons of <?php echo $group['name']; ?>">
												<span class="dashicons dashicons-editor-justify"></span>
											</a>
											<span style="margin-left:5px;"></span>

											<a href="javascript:void(0);" name="cmdUpdateGroupStatus" id="cmdUpdateGroupStatus" rel="<?php echo $groupid; ?>" class="button button-secondary" title="Update visibility of <?php echo $group['name']; ?>">
												<span class="dashicons dashicons-visibility <?php echo $status; ?>"></span>
											</a>

											<a href="javascript:void(0);" name="cmdResetGroupStat" id="cmdResetGroupStat" rel="<?php echo $groupid; ?>" class="button button-secondary" title="Reset stat of <?php echo $group['name']; ?>">
												<span class="dashicons dashicons-update fg-red"></span>
											</a>

											<a href="<?php echo admin_url('admin.php?page='. BUTTONVOODOO_CODE .'&action=update-group&id='. $groupid); ?>" class="button button-secondary" title="Update <?php echo $group['name']; ?>">
												<span class="dashicons dashicons-edit"></span>
											</a>

											<a href="javascript:void(0);" name="cmdDeleteGroup" id="cmdDeleteGroup" rel="<?php echo $groupid; ?>" class="button button-secondary" title="Delete <?php echo $group['name']; ?>">
												<span class="dashicons dashicons-trash fg-red"></span>
											</a>
										</td>
									</tr>

									<?php
								}
							echo '</tbody>';
						}
						?>
					</table>
				</div>
			</div>
			<!-- // holder - manage -->


			<!-- holder - addnew -->
			<div id="holder-addnew" style="display:none;">
				<form name="addNewGroupForm" id="addNewForm" method="POST" action="">

					<div class="row cell">
						<h3>Add New Group</h3> <hr />
					</div>


					<div class="row cells2">
						<div class="cell">
							<div class="input-control text full-size">
								<label for="group-name">Name ( reference only )</label>
								<input type="text" name="group-name" id="group-name" placeholder="Enter name ( reference only )" value="" />
							</div>
						</div>
					</div> <br />



					<div class="row cell">
						<h3>Button</h3> <hr />
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="group-button-size">Size ( Note: width,height )</label>
								<select name="group-button-size" id="group-button-size" style="height:38px;">
									<?php
									if (0 != count($sizes)) {
										foreach ($sizes as $size) {
											echo '<option value="'. $size .'">'. $size .'</option>';
										}
									}
									?>
								</select>
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="group-button-type">Type</label>
								<select name="group-button-type" id="group-button-type" style="height:38px;">
									<option value="round">Round</option>
									<option value="square">Square</option>
								</select>
							</div>
						</div>
					</div>
					
					<div class="row cells2">
						<div class="cell">
							<div class="input-control text full-size">
								<label for="group-button-bg">Background Color</label>
								<input type="text" name="group-button-bg" id="group-button-bg" placeholder="Enter background color" value="#ffffff" />
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control text full-size">
								<label for="group-button-color">Text Color</label>
								<input type="text" name="group-button-color" id="group-button-color" placeholder="Enter text color" value="#000000" />
							</div>
						</div>
					</div> <br />


					<div class="row cell">
						<h3>Font</h3> <hr />
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="group-font-family">Font Family</label>
								<select name="group-font-family" id="group-font-family" style="height:38px;">
									<option value="arial">Arial</option>
									<option value="consolas">Consolas</option>
									<option value="tahoma">Tahoma</option>
									<option value="verdana">Verdana</option>
								</select>
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="group-font-size">Size</label>
<!--								<input type="text" name="group-font-size" id="group-font-size" placeholder="Enter font size" value="12" />-->

                                <select name="group-font-size" id="group-font-size" style="height:38px;">
                                    <?php for ($f = 10; $f <= 20; $f++) {
                                        echo '<option value="'. $f .'">'. $f .'</option>';
                                    } ?>
                                </select>
                                
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<label for="group-font-underline" class="input-control checkbox adjust-top">
								<input type="checkbox" name="group-font-underline" id="group-font-underline" />
								<span class="check"></span>
								<span class="caption">Underline Text</span>
							</label>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<label for="group-font-bold" class="input-control checkbox adjust-top">
								<input type="checkbox" name="group-font-bold" id="group-font-bold" />
								<span class="check"></span>
								<span class="caption">Bold Text</span>
							</label>
						</div>
					</div> <br />


					<div class="row cell">
						<h3>Widget</h3> <hr />
					</div>
					
					<div class="row cells2">
						<div class="cell">
							<div>
								<label for="group-homepage" class="input-control checkbox adjust-top">
									<input type="checkbox" name="group-homepage" id="group-homepage" />
									<span class="check"></span>
									<span class="caption">Homepage</span>
								</label>
							</div>

							<div>
								<label for="group-pages" class="input-control checkbox adjust-top">
									<input type="checkbox" name="group-pages" id="group-pages" />
									<span class="check"></span>
									<span class="caption">Pages</span>
								</label>

								<div id="holder-group-pagesid" class="input-control text" style="width:55%;">
									<input type="text" name="group-pagesid" id="group-pagesid" placeholder="Enter PagesID. Comma separated." value="" />
								</div>
							</div>

							<div>
								<label for="group-posts" class="input-control checkbox adjust-top">
									<input type="checkbox" name="group-posts" id="group-posts" />
									<span class="check"></span>
									<span class="caption">Posts</span>
								</label>

								<div id="holder-group-postsid" class="input-control text" style="margin-left:2px; width:55%;">
									<input type="text" name="group-postsid" id="group-postsid" placeholder="Enter PostsID. Comma separated." value="" />
								</div>
							</div>
						</div>
					</div> <br />


					<div class="row cell">
						<button name="cmdSubmitNewGroup" id="cmdSubmitNewGroup" class="button button-primary text-bold">
							<span class="icon mif-checkmark"></span> Submit
						</button>
						<a href="javascript:void(0);" name="cmdCancelNewGroup" id="cmdCancelNewGroup" class="button button-secondary fg-red text-bold">
							<span class="icon mif-cross"></span> Cancel
						</a>

						<div id="dialog-manage" style="margin-left:10px;"></div>
					</div>
				</form>
			</div>
			<!-- // holder - addnew -->

		</div>
		<!-- // manage -->


		<!-- settings -->
		<div id="settings">
			<div id="holder-settings">
				<form name="settingsForm" id="settingsForm" method="POST" action="">

					<div class="row cell">
						<h3>Settings</h3> <hr />
					</div>

					<div class="row cell">
						<div class="input-control textarea full-size">
							<label for="settings-sizes">Button Sizes <span class="text-small fg-red text-bold">(NOTE: width,height. Separated by new line. -e.g. 350,50)</span></label>
							<textarea name="settings-sizes" id="settings-sizes">
<?php if (0 != count($sizes)) {
	foreach ($sizes as $size) {
		echo $size ."\r\n";
	}
}
?>
							</textarea>
						</div>
					</div>


					<div class="row cell">
						<button name="cmdUpdateSettings" id="cmdUpdateSettings" class="button button-primary text-bold">
							<span class="icon mif-checkmark"></span> Update Settings
						</button>

						<div id="dialog-settings" style="margin-left:10px;"></div>
					</div>
				</form>
			</div>
		</div>
		<!-- // settings -->
	</div>


	<script type="text/javascript">
		var manageJs = jQuery.noConflict();
		manageJs(function($) {
			//* settings - update
			$('#cmdUpdateSettings').click(function() {
				var $sizes	= $('#settings-sizes'),

					$dialog	= $('#dialog-settings'),

					$data	= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-update-settings',
						sizes	: $sizes.val()
					};

				$dialog.empty().append('<span class="icon mif-spinner2 mif-ani-spin"></span> Processing data... Please wait!');
				$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
					if (res != 'done') {
						$dialog.empty().append('<span class="icon mif-warning"></span> There was problem processing your data. Please try again!');
					}
					else {
						$dialog.empty().append('<span class="icon mif-checkmark"></span> Data has been successfully processed.');
						window.location.href = '<?php echo admin_url('admin.php?page='. BUTTONVOODOO_CODE); ?>';
					}
				});

				return false;
			});


			//* manage - add new
			$('#cmdAddNewGroup').click(function() {
				$('#holder-manage').slideUp();
				$('#holder-addnew').slideDown();
				return false;
			});


			//* mange - cancel new
			$('#cmdCancelNewGroup').click(function() {
				$('#holder-manage').slideDown();
				$('#holder-addnew').slideUp();
				return false;
			});


			//* manage - colorpicker
			$('#group-button-bg, #group-button-color').wpColorPicker({
				defaultColor	: true,
				change			: function(event, ui) {},
				clear			: function() {},
				hide			: true,
				palettes		: true
			});


			//* group - pages
			$('#group-pages').on('change', function() {
				var $this	= $(this),
					$holder	= $('#holder-group-pagesid');

				if ($this.is(':checked')) {
					$holder.fadeIn();
				}
				else {
					$holder.fadeOut();
				}

				return false;
			});

			if ($('#group-pages').is(':checked')) {
				$('#holder-group-pagesid').fadeIn();
			}
			else {
				$('#holder-group-pagesid').fadeOut();
			}


			//* group - posts
			$('#group-posts').on('change', function() {
				var $this	= $(this),
					$holder	= $('#holder-group-postsid');

				if ($this.is(':checked')) {
					$holder.fadeIn();
				}
				else {
					$holder.fadeOut();
				}

				return false;
			});

			if ($('#group-posts').is(':checked')) {
				$('#holder-group-postsid').fadeIn();
			}
			else {
				$('#holder-group-postsid').fadeOut();
			}



			//* manage -submit
			$('#cmdSubmitNewGroup').click(function() {
				var $name			= $('#group-name'),
					
					$buttonSize		= $('#group-button-size'),
					$buttonType		= $('#group-button-type'),
					$buttonBg		= $('#group-button-bg'),
					$buttonColor	= $('#group-button-color'),
					
					$fontFamily		= $('#group-font-family'),
					$fontSize		= $('#group-font-size'),
					$fontUnderline	= $('#group-font-underline'),
					$fontBold		= $('#group-font-bold'),
					
					$homepage		= $('#group-homepage'),
					$pages			= $('#group-pages'),
					$pagesid		= $('#group-pagesid'),
					$posts			= $('#group-posts'),
					$postsid		= $('#group-postsid'),
					
					$dialog			= $('#dialog-manage'),
					
					$data			= {
						action			: '<?php echo BUTTONVOODOO_CODE; ?>-add-group',
						name			: $name.val(),
						
						buttonSize		: $buttonSize.val(),
						buttonType		: $buttonType.val(),
						buttonBg		: $buttonBg.val(),
						buttonColor		: $buttonColor.val(),
						
						fontFamily		: $fontFamily.val(),
						fontSize		: $fontSize.val(),
						fontUnderline	: $fontUnderline.is(':checked'),
						fontBold		: $fontBold.is(':checked'),

						homepage		: $homepage.is(':checked'),
						pages			: $pages.is(':checked'),
						pagesid			: $pagesid.val(),
						posts			: $posts.is(':checked'),
						$postsid		: $postsid.val()
					};

				$dialog.empty().append('<span class="icon mif-spinner2 mif-ani-spin"></span> Processing data... Please wait!');
				$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
					if (res != 'done') {
						$dialog.empty().append('<span class="icon mif-warning"></span> There was a problem processing your data... Please try again!');
					}
					else {
						$dialog.empty().append('<span class="icon mif-checkmark"></span> Data has been successfully processed.');
						window.location.href = '<?php echo admin_url('admin.php?page='. BUTTONVOODOO_CODE); ?>';
					}
				});
				
				return false;
			});


			//* manage - copy codes
			$('#manage-table').on('click', '*[id^=cmdCopyGroupCodes]', function() {
				var $this	= $(this),
					$id		= $this.attr('rel'),

					$dialog	= $('#dialog-copy-group-codes-'+ $id);

				$dialog.dialog({
					title		: 'Group Codes',
					autoOpen	: false,
					modal		: true,
					width		: 250,
					height		: 150
				}).dialog('open');

				return false;
			});


			//* manage - update status
			$('#manage-table').on('click', '*[id^=cmdUpdateGroupStatus]', function() {
				var $this	= $(this),
					$id		= $this.attr('rel'),
					$span	= $this.children('span'),

					$data	= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-update-group-status',
						id		: $id
					};

				$span.removeClass('dashicons dashicons-visibility').addClass('icon mif-spinner2 mif-ani-spin');
				$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
					$span.removeClass('icon mif-spinner2 mif-ani-spin').addClass('dashicons dashicons-visibility');
					if ($span.hasClass('fg-green')) {
						$span.removeClass('fg-green').addClass('fg-red');
					}
					else {
						$span.removeClass('fg-red').addClass('fg-green');
					}
				});

				return false;
			});


			//* manage - reset stat
			$('#manage-table').on('click', '[id^=cmdResetGroupStat]', function() {
				var $this			= $(this),
					$id				= $this.attr('rel'),
					$span			= $this.children('span'),

					$impressions	= $('#holder-impressions-'+ $id),
					$clicks			= $('#holder-clicks-'+ $id),
					$ctr			= $('#holder-ctr-'+ $id),

					$data			= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-reset-group-stat',
						id		: $id
					},

					q				= confirm('Are you sure you want to reset this item?');

				if (q) {
					$span.removeClass('dashicons dashicons-update').addClass('icon mif-spinner2 mif-ani-spin');
					$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
						$span.removeClass('icon mif-spinner2 mif-ani-spin').addClass('dashicons dashicons-update');

						$impressions.empty().append(0);
						$clicks.empty().append(0);
						$ctr.empty().append(0);
					});
				}

				return false;
			});


			//* manage - delete
			$('#manage-table').on('click', '*[id^=cmdDeleteGroup]', function() {
				var $this   = $(this),
					$id     = $this.attr('rel'),
					$span	= $this.children('span'),
					$tr     = $this.closest('tr'),

					$data   = {
						action  : '<?php echo BUTTONVOODOO_CODE; ?>-delete-group',
						id      : $id
					},

					q       = confirm('Are you sure you want to delete this item?');

				if (q) {
					$span.removeClass('dashicons dashicons-trash').addClass('icon mif-spinner2 mif-ani-spin');
					$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function() {
						$span.removeClass('icon mif-spinner2 mif-ani-spin').addClass('icon mif-checkmark');
						$tr.slideUp();
					});
				}

				return false;
			});
		});
	</script>

<?php
include_once ('pages/footer.part.php');
