<div class="invoice-modern">
	<?php echo message_box('success') ?>
	<?php echo message_box('error') ?>

	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<header class="flex flex-col gap-3 border-b border-border px-5 py-4 md:flex-row md:items-center md:justify-between">
			<div>
				<h3 class="text-lg font-semibold text-foreground">
					<?= lang('client_award') . ' ' . lang('points') ?>
				</h3>
				<p class="text-sm text-muted-foreground">
					<?= lang('client') . ' ' . lang('points') . ' ' . lang('list') ?>
				</p>
			</div>
			<div class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
				<?= count($all_client ?? []) . ' ' . lang('clients') ?>
			</div>
		</header>

		<div class="p-5">
			<div class="rounded-xl">
				<table class="DataTables w-full border-collapse text-sm" id="DataTables" cellspacing="0" width="100%">
					<thead class="bg-muted/50 text-xs uppercase tracking-[0.14em] text-muted-foreground dark:bg-slate-800/80 dark:text-slate-400">
						<tr>
							<th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('name') ?></th>
							<th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('award_point') ?></th>
							<th class="border-b border-border px-4 py-3 text-left font-semibold dark:border-slate-700"><?= lang('actions') ?></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</div>

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

		if (typeof fire_datatable === "function") {
			fire_datatable(list);
		}
	});
</script>
