<?php
echo message_box('success');
echo message_box('error');
$customer_groups = $this->db->where('type', 'client')->order_by('customer_group_id', 'DESC')->get('tbl_customer_group')->result();
$created = can_action('4', 'created');
$deleted = can_action('4', 'deleted');

// Lightweight stats
$total_clients = $this->db->count_all('tbl_client');
$new_last7 = $this->db->where('date_added >=', date('Y-m-d', safe_strtotime('-7 days')))->count_all_results('tbl_client');
$group_count = $this->db->where('type', 'client')->count_all_results('tbl_customer_group');
$contact_count = $this->db->count_all('tbl_account_details');
?>

<div class="rounded-2xl border border-border bg-card shadow-sm">
	<div class="px-6 py-5 flex flex-col md:flex-row md:items-center md:justify-between gap-3 border-b border-border">
		<div>
			<h3 class="text-xl font-bold text-foreground"><?= lang('client_list'); ?></h3>
			<p class="text-sm text-muted-foreground"><?= lang('overview_of_clients'); ?></p>
		</div>
		<div class="flex flex-wrap gap-2">
			<a href="<?= base_url('admin/client/create_client'); ?>" class="btn btn-primary btn-sm"><?= lang('new_client'); ?></a>
			<a href="<?= base_url('admin/client/import'); ?>" class="btn btn-info btn-sm"><?= lang('import') . ' ' . lang('client'); ?></a>
		</div>
	</div>

	<div class="p-6 space-y-4">
		<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
			<div class="rounded-xl border border-border bg-card/60 p-4">
				<p class="text-xs uppercase tracking-wide text-muted-foreground"><?= lang('total_clients'); ?></p>
				<p class="text-2xl font-bold text-foreground mt-1"><?= $total_clients; ?></p>
				<p class="text-xs text-muted-foreground mt-1"><?= lang('all_time'); ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card/60 p-4">
				<p class="text-xs uppercase tracking-wide text-muted-foreground"><?= lang('new'); ?> (7d)</p>
				<p class="text-2xl font-bold text-foreground mt-1"><?= $new_last7; ?></p>
				<p class="text-xs text-green-600"><?= lang('recent_growth'); ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card/60 p-4">
				<p class="text-xs uppercase tracking-wide text-muted-foreground"><?= lang('customer_group'); ?></p>
				<p class="text-2xl font-bold text-foreground mt-1"><?= $group_count; ?></p>
				<p class="text-xs text-muted-foreground"><?= lang('segments'); ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card/60 p-4">
				<p class="text-xs uppercase tracking-wide text-muted-foreground"><?= lang('contacts'); ?></p>
				<p class="text-2xl font-bold text-foreground mt-1"><?= $contact_count; ?></p>
				<p class="text-xs text-muted-foreground"><?= lang('team_linked'); ?></p>
			</div>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
			<div>
				<label class="text-xs font-semibold text-muted-foreground mb-1 block"><?= lang('customer_group'); ?></label>
				<select id="filter_group" class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm">
					<option value=""><?= lang('all'); ?></option>
					<?php if (!empty($customer_groups)) : foreach ($customer_groups as $group) : ?>
						<option value="<?= $group->customer_group_id; ?>"><?= $group->customer_group; ?></option>
					<?php endforeach; endif; ?>
				</select>
			</div>
			<div>
				<label class="text-xs font-semibold text-muted-foreground mb-1 block"><?= lang('search'); ?></label>
				<input type="text" id="search_client" class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm" placeholder="<?= lang('search'); ?>...">
			</div>
		</div>

		<div class="overflow-hidden rounded-xl border border-border">
			<table class="table table-striped" id="client_table">
				<thead class="bg-muted/50">
					<tr>
						<?php if (!empty($deleted)) : ?>
							<th class="w-10"><input type="checkbox" id="select_all"></th>
						<?php endif; ?>
						<th><?= lang('name'); ?></th>
						<th><?= lang('contacts'); ?></th>
						<th><?= lang('primary_contact'); ?></th>
						<th><?= lang('projects'); ?></th>
						<th><?= lang('outstanding'); ?></th>
						<th><?= lang('paid_amount'); ?></th>
						<th><?= lang('expenses'); ?></th>
						<th><?= lang('customer_group'); ?></th>
						<th class="text-right"><?= lang('action'); ?></th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
</div>

<script>
	(function () {
		const deleted = <?= !empty($deleted) ? 'true' : 'false'; ?>;
		const table = $('#client_table').DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: "<?= base_url('admin/client/clientList'); ?>",
				type: "POST",
				data: function (d) {
					d.group = $('#filter_group').val();
					d.search_custom = $('#search_client').val();
				}
			},
			order: [[1, 'asc']],
			columns: [
				<?php if (!empty($deleted)) : ?>{ data: 0, orderable: false },<?php endif; ?>
				{ data: <?php echo !empty($deleted) ? 1 : 0; ?> },
				{ data: <?php echo !empty($deleted) ? 2 : 1; ?> },
				{ data: <?php echo !empty($deleted) ? 3 : 2; ?> },
				{ data: <?php echo !empty($deleted) ? 4 : 3; ?> },
				{ data: <?php echo !empty($deleted) ? 5 : 4; ?> },
				{ data: <?php echo !empty($deleted) ? 6 : 5; ?> },
				{ data: <?php echo !empty($deleted) ? 7 : 6; ?> },
				{ data: <?php echo !empty($deleted) ? 8 : 7; ?> },
				{ data: <?php echo !empty($deleted) ? 9 : 8; ?>, orderable: false },
			],
			pageLength: 10,
			responsive: true,
			language: {
				emptyTable: "<?= lang('no_record_available'); ?>"
			}
		});

		$('#filter_group, #search_client').on('change keyup', function () {
			table.ajax.reload();
		});

		<?php if (!empty($deleted)) : ?>
		$('#select_all').on('change', function () {
			const checked = $(this).is(':checked');
			$('#client_table tbody input[type="checkbox"]').prop('checked', checked);
		});
		<?php endif; ?>
	})();
</script>
