MokoSuiteClient/source/packages/com_mokosuiteclient/admin/tmpl/replacements/default.php

<?php
/**
 * @package     MokoSuiteClient
 * @subpackage  com_mokosuiteclient
 * @copyright   Copyright (C) 2026 Moko Consulting. All rights reserved.
 * @license     GNU General Public License version 3 or later; see LICENSE
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Session\Session;

$items   = $this->items;
$total   = $this->total;
$filters = $this->filters;
$token   = Session::getFormToken();
$input   = Factory::getApplication()->getInput();
$page    = max(1, $input->getInt('page', 1));
$pages   = max(1, ceil($total / 50));
?>

<div id="mokosuiteclient-replacements">
	<form method="get" action="<?php echo Route::_('index.php?option=com_mokosuiteclient&view=replacements'); ?>" class="mb-3">
		<input type="hidden" name="option" value="com_mokosuiteclient">
		<input type="hidden" name="view" value="replacements">
		<div class="row g-2 align-items-end">
			<div class="col-md-4">
				<input type="text" name="filter_search" class="form-control form-control-sm" placeholder="Search by name or pattern..." value="<?php echo htmlspecialchars($filters['search'], ENT_QUOTES, 'UTF-8'); ?>">
			</div>
			<div class="col-md-2">
				<select name="filter_published" class="form-select form-select-sm">
					<option value="">All States</option>
					<option value="1"<?php echo $filters['published'] === '1' ? ' selected' : ''; ?>>Published</option>
					<option value="0"<?php echo $filters['published'] === '0' ? ' selected' : ''; ?>>Unpublished</option>
				</select>
			</div>
			<div class="col-auto">
				<button type="submit" class="btn btn-sm btn-primary"><span class="icon-search"></span> Filter</button>
				<a href="<?php echo Route::_('index.php?option=com_mokosuiteclient&view=replacements'); ?>" class="btn btn-sm btn-outline-secondary">Reset</a>
			</div>
		</div>
	</form>

	<div class="card">
		<div class="card-header d-flex justify-content-between align-items-center">
			<span><span class="icon-right-left"></span> Replacements</span>
			<span class="badge bg-secondary"><?php echo number_format($total); ?> total</span>
		</div>
		<div class="table-responsive">
			<table class="table table-striped table-hover mb-0">
				<thead>
					<tr>
						<th style="width:5%">ID</th>
						<th>Name</th>
						<th>Search</th>
						<th>Replace</th>
						<th style="width:7%">Area</th>
						<th style="width:5%">Regex</th>
						<th>Category</th>
						<th style="width:8%">Status</th>
					</tr>
				</thead>
				<tbody>
					<?php if (empty($items)): ?>
					<tr><td colspan="8" class="text-center text-muted py-4">No replacement rules found.</td></tr>
					<?php else: ?>
					<?php foreach ($items as $item): ?>
					<tr>
						<td><?php echo (int) $item->id; ?></td>
						<td>
							<?php if ($item->color): ?>
							<span style="display:inline-block;width:12px;height:12px;border-radius:2px;background:<?php echo htmlspecialchars($item->color, ENT_QUOTES, 'UTF-8'); ?>;vertical-align:middle;margin-right:4px;"></span>
							<?php endif; ?>
							<?php echo htmlspecialchars($item->name, ENT_QUOTES, 'UTF-8'); ?>
						</td>
						<td><code style="font-size:0.8rem"><?php echo htmlspecialchars(mb_strimwidth($item->search, 0, 50, '...'), ENT_QUOTES, 'UTF-8'); ?></code></td>
						<td><code style="font-size:0.8rem"><?php echo htmlspecialchars(mb_strimwidth($item->replace_value, 0, 50, '...'), ENT_QUOTES, 'UTF-8'); ?></code></td>
						<td><span class="badge bg-secondary"><?php echo htmlspecialchars($item->area, ENT_QUOTES, 'UTF-8'); ?></span></td>
						<td><?php echo $item->regex ? '<span class="badge bg-warning text-dark">Yes</span>' : ''; ?></td>
						<td>
							<?php if ($item->category): ?>
							<span class="badge bg-info"><?php echo htmlspecialchars($item->category, ENT_QUOTES, 'UTF-8'); ?></span>
							<?php endif; ?>
						</td>
						<td>
							<a href="#" class="mokosuite-toggle-published badge bg-<?php echo $item->published ? 'success' : 'danger'; ?>"
							   data-table="mokosuiteclient_replacements" data-id="<?php echo (int) $item->id; ?>"
							   data-token="<?php echo $token; ?>">
								<?php echo $item->published ? 'Published' : 'Unpublished'; ?>
							</a>
						</td>
					</tr>
					<?php endforeach; ?>
					<?php endif; ?>
				</tbody>
			</table>
		</div>
	</div>

	<?php if ($pages > 1): ?>
	<nav class="mt-3"><ul class="pagination pagination-sm justify-content-center">
		<?php for ($p = 1; $p <= $pages; $p++): ?>
		<li class="page-item<?php echo $p === $page ? ' active' : ''; ?>">
			<a class="page-link" href="<?php echo Route::_('index.php?option=com_mokosuiteclient&view=replacements&page=' . $p
				. ($filters['search'] ? '&filter_search=' . urlencode($filters['search']) : '')
				. ($filters['published'] !== '' ? '&filter_published=' . $filters['published'] : '')); ?>"><?php echo $p; ?></a>
		</li>
		<?php endfor; ?>
	</ul></nav>
	<?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	document.querySelectorAll('.mokosuite-toggle-published').forEach(function(el) {
		el.addEventListener('click', function(e) {
			e.preventDefault();
			var table = this.dataset.table, id = this.dataset.id, token = this.dataset.token, badge = this;
			var fd = new FormData();
			fd.append('table', table);
			fd.append('id', id);
			fd.append(token, '1');
			fetch('index.php?option=com_mokosuiteclient&task=display.togglePublished&format=json', {
				method: 'POST', headers: {'X-Requested-With': 'XMLHttpRequest'}, body: fd
			}).then(function(r) { return r.json(); }).then(function(d) {
				if (d.success) {
					var pub = d.published;
					badge.className = 'mokosuite-toggle-published badge bg-' + (pub ? 'success' : 'danger');
					badge.textContent = pub ? 'Published' : 'Unpublished';
				}
			}).catch(function() {
				badge.textContent = 'Error';
				badge.className = 'mokosuite-toggle-published badge bg-warning text-dark';
			});
		});
	});
});
</script>