<?php
$created = can_action_by_label('chart_of_accounts', 'created');
$edited = can_action_by_label('chart_of_accounts', 'edited');
$deleted = can_action_by_label('chart_of_accounts', 'deleted');
?>

<div class="space-y-4">
	<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
		<div class="border-b border-slate-200 px-4 py-4 dark:border-slate-800">
			<div class="grid gap-4 2xl:grid-cols-[minmax(0,1fr)_auto] 2xl:items-center">
				<div class="flex min-w-0 flex-col gap-3 lg:flex-row lg:flex-wrap lg:items-center">
					<div class="relative w-full min-w-0 lg:max-w-md">
						<i data-lucide="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
						<input id="accountSubTypeSearch" type="search" placeholder="<?= lang('search_sub_types') ?>" class="h-11 w-full rounded-xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-900 placeholder-slate-400 shadow-sm outline-none transition focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder-slate-500 dark:focus:border-slate-100 dark:focus:ring-slate-100/10">
					</div>
					<div class="flex flex-wrap items-center gap-2">
						<button type="button" id="accountSubTypeExport" class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:bg-slate-900">
							<i data-lucide="download" class="h-4 w-4 text-slate-500"></i>
							Export
						</button>
						<button type="button" id="accountSubTypeDelete" class="inline-flex items-center gap-2 rounded-xl border border-rose-200 bg-rose-50 px-3.5 py-2 text-sm font-semibold text-rose-600 shadow-sm transition hover:bg-rose-100 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300 dark:hover:bg-rose-950/70">
							<i data-lucide="trash-2" class="h-4 w-4"></i>
							Delete
						</button>
						<?php if (!empty($created) || !empty($edited)) { ?>
							<?= btn_modal(
								'admin/accounting/new_account_sub_type',
								lang('new') . ' ' . lang('sub_type'),
								lang('new') . ' ' . lang('sub_type'),
								'md',
								'plus',
								array('class' => 'inline-flex items-center gap-2 rounded-xl bg-slate-900 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white')
							); ?>
						<?php } ?>
					</div>
				</div>
				<div class="flex flex-wrap items-center gap-2 2xl:justify-end">
					<div class="inline-flex w-full items-center rounded-xl border border-slate-200 bg-white shadow-sm sm:w-auto dark:border-slate-700 dark:bg-slate-950">
						<label class="px-3 text-sm text-slate-500 dark:text-slate-400">View:</label>
						<select id="accountSubTypeLength" class="h-11 min-w-[4.5rem] rounded-r-xl border-0 bg-transparent pl-1 pr-8 text-sm font-medium text-slate-700 outline-none dark:text-slate-200">
							<option value="10">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
					</div>
					<button type="button" id="accountSubTypeRefresh" class="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-sm transition hover:bg-slate-50 hover:text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-400 dark:hover:bg-slate-900 dark:hover:text-slate-200">
						<i data-lucide="rotate-cw" class="h-4 w-4"></i>
					</button>
				</div>
			</div>
		</div>

		<div class="overflow-x-auto">
			<table class="min-w-full DataTables text-sm" id="DataTables" width="100%">
				<thead class="bg-slate-50 dark:bg-slate-800/70">
					<tr class="border-b border-slate-200 dark:border-slate-700">
						<th class="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-300"><?= lang('account_sub_type') ?></th>
						<th class="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-300"><?= lang('account_type') ?></th>
						<th class="px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-300"><?= lang('status') ?></th>
						<th class="px-5 py-3 text-right text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-300"><?= lang('action') ?></th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>

<script>
	list = base_url + "admin/accounting/accountSubTypeList";

	$(function () {
		if (typeof fire_datatable === 'function') {
			fire_datatable(list);
		}

		function getAccountSubTypeTable() {
			if ($.fn.dataTable && $.fn.dataTable.isDataTable('#DataTables')) {
				return $('#DataTables').DataTable();
			}
			return null;
		}

		$('#accountSubTypeSearch').on('input', function () {
			var table = getAccountSubTypeTable();
			if (table) {
				table.search(this.value).draw();
			}
		});

		$('#accountSubTypeLength').on('change', function () {
			var table = getAccountSubTypeTable();
			if (table) {
				table.page.len(parseInt(this.value, 10)).draw();
			}
		});

		$('#accountSubTypeRefresh').on('click', function () {
			var table = getAccountSubTypeTable();
			if (table) {
				table.ajax.reload(null, false);
			}
		});

		$('#accountSubTypeExport').on('click', function () {
			var table = getAccountSubTypeTable();
			if (!table) return;
			var rows = table.rows({ search: 'applied' }).data().toArray();
			var csv = [['Account Sub Type', 'Account Type', 'Status']];
			rows.forEach(function (row) {
				csv.push([
					$('<div>').html(row[0]).text().trim(),
					$('<div>').html(row[1]).text().trim(),
					$('<div>').html(row[2]).text().trim()
				]);
			});
			var csvContent = csv.map(function (line) {
				return line.map(function (cell) {
					return '"' + String(cell).replace(/"/g, '""') + '"';
				}).join(',');
			}).join('\n');
			var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
			var link = document.createElement('a');
			link.href = URL.createObjectURL(blob);
			link.download = 'account-sub-types.csv';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		});
	});
</script>
