<?php
echo message_box('success');
echo message_box('error');

$activities_type = array(
	'client' => 'client',
	'estimates' => 'estimates',
	'proposals' => 'proposals',
	'settings' => 'settings',
	'leads' => 'leads',
	'invoice' => 'invoice',
	'user' => 'user',
	'payroll' => 'payroll',
	'departments' => 'departments',
	'account' => 'account',
	'announcements' => 'announcements',
	'attendance' => 'attendance',
	'award' => 'award',
	'bugs' => 'bugs',
	'goal_tracking' => 'goal_tracking',
	'holiday' => 'holiday',
	'items' => 'items',
	'job_circular' => 'job_circular',
	'knowledgebase' => 'knowledgebase',
	'leave_management' => 'leave_management',
	'opportunities' => 'opportunities',
	'overtime' => 'overtime',
	'projects' => 'projects',
	'quotations' => 'quotations',
	'stock' => 'stock',
	'tasks' => 'tasks',
	'training' => 'training',
	'tickets' => 'tickets',
	'transactions' => 'transactions'
);
?>

<div class="space-y-6">
	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="border-b border-border px-4 py-4">
			<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
				<div>
					<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('settings') ?></p>
					<h2 class="text-xl font-semibold text-foreground"><?= lang('all_activities'); ?></h2>
					<p class="text-sm text-muted-foreground">Review your recent account activities and changes</p>
				</div>
				<div class="flex items-center gap-2">
					<div class="relative">
						<button
							type="button"
							id="activities-filter-toggle"
							class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
							<i data-lucide="sliders-horizontal" class="h-4 w-4"></i>
							<?= lang('filter_by') ?>
						</button>
						<div
							id="activities-filter-menu"
							class="absolute right-0 top-11 z-20 hidden w-80 rounded-xl border border-border bg-card p-3 shadow-xl">
								<div class="mb-3 flex items-center justify-between">
									<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('module') ?></p>
								<button type="button" data-filter="" class="filter_by rounded-lg bg-primary/10 px-2 py-1 text-[11px] font-semibold text-primary"><?= lang('all') ?></button>
							</div>
							<div class="grid grid-cols-2 gap-2 max-h-72 overflow-y-auto pr-1">
								<?php foreach ($activities_type as $type => $label) : ?>
									<button
										type="button"
										data-filter="<?= $type ?>"
										class="filter_by rounded-lg border border-border bg-card px-2 py-1.5 text-left text-xs font-medium text-foreground hover:bg-muted">
										<?= lang($label) ?>
									</button>
								<?php endforeach; ?>
							</div>
						</div>
					</div>

					<a
						onclick="return confirm('<?= lang('delete_alert') ?>')"
						href="<?= base_url('admin/settings/clear_activities') ?>"
						class="inline-flex items-center gap-2 rounded-lg bg-red-500 px-3 py-2 text-xs font-semibold text-white hover:bg-red-600">
						<i data-lucide="trash-2" class="h-4 w-4"></i>
						<?= lang('clear') ?>
					</a>
				</div>
			</div>
		</div>

		<div class="p-4">
			<div class="overflow-hidden rounded-xl border border-border">
				<table class="table table-striped mb-0" id="DataTables" width="100%">
					<thead>
						<tr>
							<th class="col-xs-2"><?= lang('activity_date') ?></th>
							<th class="col-xs-3"><?= lang('user') ?></th>
							<th class="col-xs-2"><?= lang('module') ?></th>
							<th><?= lang('activity') ?></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		list = base_url + "admin/settings/activitiesList";

		const $menu = $('#activities-filter-menu');
		const $toggle = $('#activities-filter-toggle');

		$toggle.on('click', function(e) {
			e.preventDefault();
			$menu.toggleClass('hidden');
		});

		$(document).on('click', function(e) {
			if (!$(e.target).closest('#activities-filter-toggle, #activities-filter-menu').length) {
				$menu.addClass('hidden');
			}
		});

		$('.filter_by').on('click', function(e) {
			e.preventDefault();
			$('.filter_by').removeClass('ring-2 ring-primary/40 bg-primary/10 text-primary');
			$(this).addClass('ring-2 ring-primary/40 bg-primary/10 text-primary');
			const filter_by = $(this).data('filter') || '';
			table_url(base_url + "admin/settings/activitiesList/" + filter_by);
			$menu.addClass('hidden');
		});
	});
</script>
