<?php
/**
 * Filename: manage.buttons.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');

$groupid		= intval($_GET['id']);
$group			= $buttonVoodooDatabase->getGroupById($groupid);
$groupOptions	= get_option($buttonVoodooDatabase->tableGroupOptions .'_'. $groupid);
$buttons		= $buttonVoodooDatabase->getButtonsByGroupId($groupid);

if (0 == count($group)) {
	echo '<script type="text/javascript">window.location.href="'. admin_url('admin.php?page='. BUTTONVOODOO_CODE) .'";</script>';
}
?>

	<div class="ui-tabs">
		<ul class="ui-tabs-nav">
			<li><a href="#manage">Manage Buttons of <?php echo $group['name']; ?></a></li>
		</ul>



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

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

							<a href="<?php echo admin_url('admin.php?page='. BUTTONVOODOO_CODE); ?>" class="button button-secondary fg-red">
								<span class="dashicons dashicons-controls-back"></span> Back to Manage Groups
							</a>
				        </span>
					</h3> <hr />
				</div>

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


						<?php
						if (0 != count($buttons)) {
							echo '<tbody>';

								foreach ($buttons as $button) {
									$buttonid		= $button['buttonid'];
									$buttonOptions 	= get_option($buttonVoodooDatabase->tableButtonOptions .'_'. $buttonid);

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

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

									<tr rel="<?php echo $buttonid; ?>">
										<td><?php echo $button['sort']; ?></td>
										<td style="text-align:center;"><?php echo $buttonid; ?></td>
										<td><?php echo $button['title']; ?></td>
										<td class="text-small">
											<div class="row cells2">
												<div class="cell text-bold">Clicks</div>
												<div class="cell" id="holder-clicks-<?php echo $buttonid; ?>"><?php echo $button['clicks']; ?></div>
											</div>
										</td>
										<td style="text-align:center;">
											<a href="javascript:void(0);" name="cmdUpdateButtonStatus" id="cmdUpdateButtonStatus" rel="<?php echo $buttonid; ?>" class="button button-secondary" title="Update visibility of <?php echo $button['title']; ?>">
												<span class="dashicons dashicons-visibility <?php echo $status; ?>"></span>
											</a>

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

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

											<a href="javascript:void(0);" name="cmdDeleteButton" id="cmdDeleteButton" rel="<?php echo $buttonid; ?>" class="button button-secondary" title="Delete <?php echo $button['title']; ?>">
												<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="addNewButtonForm" id="addNewButtonForm" method="POST" action="">

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


					<div class="row cells2">
						<div class="cell">
							<div class="input-control text full-size">
								<label for="button-title">Title</label>
								<input type="text" name="button-title" id="button-title" placeholder="Enter title" value="" />
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control text full-size">
								<label for="button-url">URL</label>
								<input type="text" name="button-url" id="button-url" placeholder="Enter URL" value="" />
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<input type="hidden" name="button-icon" id="button-icon" value="" />

							<button name="cmdUploadIcon" id="cmdUploadIcon" class="button button-secondary">
								<span class="dashicons dashicons-upload"></span> Upload Icon
							</button>

							<div id="holder-icon" style="display:none;"><img /></div>

						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div>
								<label for="button-icon-enable" class="input-control checkbox adjust-top">
									<input type="checkbox" name="button-icon-enable" id="button-icon-enable" checked="checked" />
									<span class="check"></span>
									<span class="caption">Display Icon?</span>
								</label>
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="button-icon-location">Display Icon Where</label>
								<select name="button-icon-location" id="button-icon-location" style="height:38px;">
									<option value="left">Left</option>
									<option value="right">Right</option>
								</select>
							</div>
						</div>
					</div>

					<div class="row cells2">
						<div class="cell">
							<div class="input-control select full-size">
								<label for="button-icon-type">Display Icon As</label>
								<select name="button-icon-type" id="button-icon-type" style="height:38px;">
									<option value="square">Square</option>
									<option value="round">Round</option>
								</select>
							</div>
						</div>
					</div>


					<div class="row cells2">
						<div class="cell">
							<div>
								<label for="button-button-bg-override" class="input-control checkbox adjust-top">
									<input type="checkbox" name="button-button-bg-override" id="button-button-bg-override" />
									<span class="check"></span>
									<span class="caption">Override Background Color ( Default: <?php echo $groupOptions['button']['bg']; ?>)</span>
								</label>

								<div id="holder-button-button-bg-override" class="input-control text full-size" style="margin-top:5px; display:none;">
									<input type="text" name="button-button-bg" id="button-button-bg" placeholder="Enter background color" value="<?php echo $groupOptions['button']['bg']; ?>" />
								</div>
							</div>
						</div>
					</div>


					<div class="row cells2">
						<div class="cell">
							<div>
								<label for="button-button-color-override" class="input-control checkbox adjust-top">
									<input type="checkbox" name="button-button-color-override" id="button-button-color-override" />
									<span class="check"></span>
									<span class="caption">Override Background Text Color( Default: <?php echo $groupOptions['button']['color']; ?>)</span>
								</label>

								<div id="holder-button-button-color-override" class="input-control text full-size" style="margin-top:5px; display:none;">
									<input type="text" name="button-button-color" id="button-button-color" placeholder="Enter text color" value="<?php echo $groupOptions['button']['color']; ?>" />
								</div>
							</div>
						</div>
					</div>




					<div class="row cell">
						<button name="cmdSubmitNewButton" id="cmdSubmitNewButton" class="button button-primary text-bold">
							<span class="icon mif-checkmark"></span> Submit
						</button>
						<a href="javascript:void(0);" name="cmdCancelNewButton" id="cmdCancelNewButton" 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 -->
	</div>


	<script type="text/javascript">
		var manageJs = jQuery.noConflict();
		manageJs(function($) {

			//* sortable
			$('#manage-buttons-table tbody').sortable({
				start	: function(event, ui) {
					var $this	= $(this);
					$this.attr('data-previndex', ui.item.index());
//					console.log('PREVIEW INDEX : '+ ui.item.index());
				},
				update	: function(event, ui) {
					var $this		= $(this);
					var newIndex 	= ui.item.index();
					var oldIndex 	= $this.attr('data-previndex');
					$this.removeAttr('data-previndex');


					$('#manage-buttons-table tbody tr').each(function(i, el) {
//						console.log($(el).attr('rel'));

						var btnId 	= $(el).attr('rel');
						var sort	= $(el).index();

						var $data = {
							action	: '<?php echo BUTTONVOODOO_CODE; ?>-update-button-sort',
							id		: btnId,
							sort	: sort
						};

						$(el).hide();

						$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
							$(el).show();
						});
					});
				}
			}).disableSelection();


			//* datatable
			$('#manage-buttons-table').DataTable({
				'bJQueryUI'         : true,
				'sPaginationType'   : 'full_numbers',
				'columnDefs'		: [{
					'targets'		: [0],
					'visible'		: false,
					'searchable'	: false
				}, {
					'targets'		: [1, 3],
					'searchable'	: false
				}],

				'order'				: [0, 'asc']
			});


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


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


			//* manage - upload icon
			$('#cmdUploadIcon').click(function() {
				tb_show('Upload Icon', 'media-upload.php?type=image&TB_iframe=true&post_id=0', false);

				window.restore_send_to_editor = window.send_to_editor;
				window.send_to_editor = function(html) {
					var imgUrl = $('<div>'+ html +'</div>').find('img').attr('src');
					$('#button-icon').val(imgUrl);
					$('#holder-icon').fadeIn();
					$('#holder-icon > img').attr('src', imgUrl).attr('width', 150).attr('height', 150);

					tb_remove();
				}
				return false;
			});


			//* manage - background override
			$('#button-button-bg-override').on('change', function() {
				var $this	= $(this),
					$holder	= $('#holder-button-button-bg-override');

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

				return false;
			});

			if ($('#button-button-bg-override').is(':checked')) {
				$('#holder-button-button-bg-override').fadeIn();
			}
			else {
				$('#holder-button-button-bg-override').fadeOut();
			}


			//* manage - color override
			$('#button-button-color-override').on('change', function() {
				var $this	= $(this),
					$holder	= $('#holder-button-button-color-override');

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

				return false;
			});

			if ($('#button-button-color-override').is(':checked')) {
				$('#holder-button-button-color-override').fadeIn();
			}
			else {
				$('#holder-button-button-color-override').fadeOut();
			}


			//* manage -submit
			$('#cmdSubmitNewButton').click(function() {
				var $title				= $('#button-title'),
					$url				= $('#button-url'),

					$icon				= $('#button-icon'),
					$iconEnable			= $('#button-icon-enable'),
					$iconLocation		= $('#button-icon-location'),
					$iconType			= $('#button-icon-type'),

					$bgOverride			= $('#button-button-bg-override'),
					$bgOverrideColor	= $('#button-button-bg'),

					$colorOverride		= $('#button-button-color-override'),
					$colorOVerrideColor	= $('#button-button-color'),

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

					$data			= {
						action				: '<?php echo BUTTONVOODOO_CODE; ?>-add-button',
						id					: <?php echo $groupid; ?>,
						title				: $title.val(),
						url					: $url.val(),

						icon				: $icon.val(),
						iconEnable			: $iconEnable.is(':checked'),
						iconLocation		: $iconLocation.val(),
						iconType			: $iconType.val(),

						bgOverride			: $bgOverride.is(':checked'),
						bgOverrideColor		: $bgOverrideColor.val(),

						colorOverride		: $colorOverride.is(':checked'),
						colorOverrideColor	: $colorOVerrideColor.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 .'&action=manage-buttons&id='. $groupid); ?>';
					}
				});

				return false;
			});


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

					$data	= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-update-button-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-buttons-table').on('click', '*[id^=cmdResetButtonStat]', function() {
				var $this		= $(this),
					$id			= $this.attr('rel'),
					$span		= $this.children('span'),
					
					$clicks		= $('#holder-clicks-'+ $id),
					
					$data		= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-reset-button-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');

						$clicks.empty().append(0);
					});
				}
				
				return false;
			});


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

					$data   = {
						action  : '<?php echo BUTTONVOODOO_CODE; ?>-delete-button',
						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;
			});


			//* manage - update sort
			$('#manage-buttons-table').on('keyup', '*[id^=sort]', function() {
				var $this	= $(this),
					$id		= $this.attr('rel'),
					$dialog	= $('#dialog-sort-'+ $id),

					$data	= {
						action	: '<?php echo BUTTONVOODOO_CODE; ?>-update-button-sort',
						id		: $id,
						sort	: $this.val()
					};

				$dialog.show();
				$dialog.empty().removeClass('icon mif-checkmark green').addClass('icon mif-spinner2 mif-ani-spin');
				$.post('<?php echo admin_url('admin-ajax.php'); ?>', $data, function(res) {
					console.log(res);
					$dialog.empty().removeClass('icon mif-spinner2 mif-ani-spin').addClass('icon mif-checkmark green');

					setTimeout(function() {
						$dialog.hide();
					}, 1000);
				});

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

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