<?= message_box('success') ?>
<?= message_box('error'); ?>

<?php
$currency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : default_currency();
$status_display = strip_tags($sales_info->status ?? '');
$status_value = $status_display;
if (strpos($status_display, ':') !== false) {
	$parts = explode(':', $status_display, 2);
	$status_value = trim($parts[1]);
}
$status_key = 'pending';
$normalized_status = strtolower(trim($status_value));
if ($normalized_status === strtolower(lang('approved'))) {
	$status_key = 'approved';
} elseif ($normalized_status === strtolower(lang('rejected'))) {
	$status_key = 'rejected';
} elseif ($normalized_status === strtolower(lang('canceled'))) {
	$status_key = 'canceled';
}
$status_class = 'bg-slate-100 text-slate-700 border-slate-200';
if (strtolower($status_value) === strtolower(lang('approved'))) {
	$status_class = 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900/60';
} elseif (strtolower($status_value) === strtolower(lang('pending'))) {
	$status_class = 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900/60';
} elseif (strtolower($status_value) === strtolower(lang('rejected'))) {
	$status_class = 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-900/60';
}
$voucher_total = (float) ($sales_info->total_amount ?? $sales_info->total ?? 0);
$voucher_title = lang($active);
$party_label = $active == 'receipt_voucher' ? lang('clients') : lang('supplier');
$account_label = $active == 'receipt_voucher' ? 'Paid to' : lang('paid_from');
if (empty($account_label) || $account_label === 'paid_from') {
	$account_label = 'Paid from';
}
$entry_count = !empty($receipt_items) ? count($receipt_items) : 0;
$printed_label = 'Printed';
$prepared_by_label = 'Prepared by';
$checked_by_label = 'Checked by';
$approved_by_label = 'Approved by';
$voucher_total_label = 'Voucher total';
?>

<div class="space-y-6">
	<div class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
		<div class="flex flex-col gap-5 border-b border-border bg-muted/30 p-5 lg:flex-row lg:items-start lg:justify-between">
			<div class="min-w-0">
				<div class="flex flex-wrap items-center gap-3">
					<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
						<i data-lucide="<?= $active == 'receipt_voucher' ? 'receipt-text' : 'credit-card' ?>" class="h-5 w-5"></i>
					</span>
					<div class="min-w-0">
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Accounting voucher</p>
						<h2 class="truncate text-2xl font-semibold text-foreground"><?= $voucher_title ?></h2>
					</div>
				</div>
				<div class="mt-4 flex flex-wrap items-center gap-2">
					<span class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-xs font-semibold text-foreground">
						<i data-lucide="hash" class="h-3.5 w-3.5 text-muted-foreground"></i>
						<?= html_escape($sales_info->reference_no) ?>
					</span>
					<span class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold <?= $status_class ?>">
						<?= html_escape($status_value) ?>
					</span>
					<span class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-xs font-semibold text-foreground">
						<i data-lucide="list-checks" class="h-3.5 w-3.5 text-muted-foreground"></i>
						<?= (int) $entry_count ?> lines
					</span>
				</div>
			</div>
			<div class="flex flex-wrap items-center gap-2">
				<a href="<?php echo base_url('admin/accounting/new_' . $active . '/' . $sales_info->voucher_id); ?>" class="inline-flex h-10 items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground shadow-sm hover:bg-muted">
					<i data-lucide="square-pen" class="h-4 w-4"></i>
					<?= lang('edit') ?>
				</a>
				<a href="<?= base_url() ?>admin/accounting/voucher_pdf/<?= $active ?>/<?= $sales_info->voucher_id ?>" class="inline-flex h-10 items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-3 text-xs font-semibold text-emerald-700 shadow-sm hover:bg-emerald-100 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-300">
					<i data-lucide="file-text" class="h-4 w-4"></i>
					<?= lang('pdf') ?>
				</a>
				<button type="button" onclick="print_sales_details()" class="inline-flex h-10 items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground shadow-sm hover:bg-muted">
					<i data-lucide="printer" class="h-4 w-4"></i>
					<?= lang('print') ?>
				</button>
				<?php if (!empty(admin_head())) { ?>
					<div class="inline-flex h-10 items-center gap-2 rounded-lg border border-border bg-background px-3 shadow-sm">
						<label for="voucher-status" class="text-xs font-semibold text-muted-foreground">
							<?= lang('status') ?>
						</label>
						<select
							id="voucher-status"
							class="border-0 bg-transparent p-0 text-xs font-semibold text-foreground outline-none"
							data-url-base="<?= base_url('admin/accounting/change_status/' . $active . '/' . $sales_info->voucher_id . '/') ?>"
							data-current="<?= $status_key ?>"
							onchange="updateVoucherStatus(this)"
						>
							<option value="approved" <?= $status_key === 'approved' ? 'selected' : '' ?>><?= lang('approved') ?></option>
							<option value="rejected" <?= $status_key === 'rejected' ? 'selected' : '' ?>><?= lang('rejected') ?></option>
							<option value="pending" <?= $status_key === 'pending' ? 'selected' : '' ?>><?= lang('pending') ?></option>
							<option value="canceled" <?= $status_key === 'canceled' ? 'selected' : '' ?>><?= lang('canceled') ?></option>
						</select>
					</div>
				<?php } ?>
			</div>
		</div>

		<div id="sales_details" class="space-y-6 p-5">
			<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
				<div class="rounded-xl border border-border bg-background p-4 lg:col-span-3">
					<div class="flex items-center gap-3">
						<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-300">
							<i data-lucide="calendar-days" class="h-5 w-5"></i>
						</span>
						<div>
							<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('date') ?></p>
							<p class="text-sm font-semibold text-foreground"><?= display_date($sales_info->date) ?></p>
						</div>
					</div>
				</div>
				<div class="rounded-xl border border-border bg-background p-4 lg:col-span-4">
					<div class="flex items-center gap-3">
						<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
							<i data-lucide="landmark" class="h-5 w-5"></i>
						</span>
						<div class="min-w-0">
							<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= $account_label ?></p>
							<p class="truncate text-sm font-semibold text-foreground"><?= html_escape($sales_info->account_name) ?></p>
						</div>
					</div>
				</div>
				<div class="rounded-xl border border-border bg-background p-4 lg:col-span-2">
					<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= $party_label ?></p>
					<p class="mt-2 text-xl font-bold text-foreground"><?= (int) $entry_count ?></p>
				</div>
				<div class="rounded-xl border border-border bg-background p-4 lg:col-span-3">
					<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Voucher total</p>
					<p class="mt-2 text-xl font-bold text-foreground"><?= display_money($voucher_total, $currency_symbol) ?></p>
				</div>
			</div>

			<?php $this->view($sales_info->item_layout, $sales_info); ?>
		</div>
	</div>
</div>

<div id="voucher_print_design" class="voucher-print-shell" aria-hidden="true">
	<div class="voucher-print-page">
		<div class="voucher-print-header">
			<div>
				<div class="voucher-print-kicker"><?= lang('accounting') ?></div>
				<h1><?= html_escape($voucher_title) ?></h1>
				<div class="voucher-print-reference"><?= html_escape($sales_info->reference_no) ?></div>
			</div>
			<div class="voucher-print-company">
				<div class="voucher-print-company-name"><?= html_escape(config_item('company_name') ?: '') ?></div>
				<div><?= $printed_label ?>: <?= display_date(date('Y-m-d')) ?></div>
				<div><?= lang('status') ?>: <?= html_escape($status_value) ?></div>
			</div>
		</div>

		<table class="voucher-print-meta">
			<tr>
				<th><?= lang('date') ?></th>
				<td><?= display_date($sales_info->date) ?></td>
				<th><?= $account_label ?></th>
				<td><?= html_escape($sales_info->account_name) ?></td>
			</tr>
			<tr>
				<th><?= lang('created_by') ?></th>
				<td><?= html_escape(fullname($sales_info->created_by)) ?></td>
				<th><?= $voucher_total_label ?></th>
				<td class="voucher-print-total-value"><?= display_money($voucher_total, $currency_symbol) ?></td>
			</tr>
		</table>

		<table class="voucher-print-items">
			<thead>
				<tr>
					<th class="voucher-print-index">#</th>
					<th><?= $party_label ?></th>
					<th><?= lang('description') ?></th>
					<th class="voucher-print-money"><?= lang('amount') ?></th>
				</tr>
			</thead>
			<tbody>
				<?php if (!empty($receipt_items)) { ?>
					<?php foreach ($receipt_items as $key => $item) { ?>
						<tr>
							<td class="voucher-print-index"><?= $key + 1 ?></td>
							<td><strong><?= html_escape($item->name) ?></strong></td>
							<td><?= !empty($item->description) ? nl2br(html_escape($item->description)) : '-' ?></td>
							<td class="voucher-print-money"><?= display_money($item->amount, $currency_symbol) ?></td>
						</tr>
					<?php } ?>
				<?php } else { ?>
					<tr>
						<td colspan="4" class="voucher-print-empty"><?= lang('nothing_to_display') ?></td>
					</tr>
				<?php } ?>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3"><?= lang('total') ?></td>
					<td class="voucher-print-money"><?= display_money($voucher_total, $currency_symbol) ?></td>
				</tr>
			</tfoot>
		</table>

		<div class="voucher-print-summary">
			<div>
				<h2><?= lang('notes') ?></h2>
				<div class="voucher-print-notes">
					<?= !empty($sales_info->notes) ? nl2br(html_escape($sales_info->notes)) : '-' ?>
				</div>
			</div>
			<table>
				<tr>
					<th><?= $party_label ?></th>
					<td><?= (int) $entry_count ?></td>
				</tr>
				<tr>
					<th><?= lang('total') ?></th>
					<td><?= display_money($voucher_total, $currency_symbol) ?></td>
				</tr>
			</table>
		</div>

		<div class="voucher-print-signatures">
			<div><span></span><?= $prepared_by_label ?></div>
			<div><span></span><?= $checked_by_label ?></div>
			<div><span></span><?= $approved_by_label ?></div>
		</div>
	</div>
</div>

<style>
	.voucher-print-shell {
		display: none;
	}

	@media print {
		@page {
			size: A4;
			margin: 14mm;
		}

		html,
		body {
			background: #eef2f7 !important;
			color: #111827 !important;
		}

		body * {
			visibility: hidden !important;
		}

		#voucher_print_design,
		#voucher_print_design * {
			visibility: visible !important;
		}

		#voucher_print_design {
			display: block !important;
			position: absolute;
			inset: 0 auto auto 0;
			width: 100%;
			min-height: 100%;
			background: #eef2f7;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 10.5px;
			line-height: 1.45;
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
		}

		.voucher-print-page {
			width: 100%;
			min-height: 260mm;
			padding: 12mm;
			background: #fff;
			border: 1px solid #cbd5e1;
			box-shadow: inset 0 0 0 4px #f1f5f9;
			box-sizing: border-box;
		}

		.voucher-print-header {
			display: table;
			width: 100%;
			overflow: hidden;
			background: #0f172a;
			border: 1px solid #0f172a;
			border-radius: 10px 10px 0 0;
		}

		.voucher-print-header > div {
			display: table-cell;
			padding: 16px 18px;
			vertical-align: top;
		}

		.voucher-print-kicker {
			margin-bottom: 4px;
			color: #93c5fd;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: .08em;
			text-transform: uppercase;
		}

		.voucher-print-header h1 {
			margin: 0;
			color: #fff;
			font-size: 25px;
			font-weight: 700;
			line-height: 1.1;
		}

		.voucher-print-reference {
			display: inline-block;
			margin-top: 7px;
			padding: 4px 10px;
			background: rgba(255, 255, 255, .12);
			border: 1px solid rgba(255, 255, 255, .24);
			border-radius: 999px;
			color: #dbeafe;
			font-size: 11px;
			font-weight: 700;
		}

		.voucher-print-company {
			width: 34%;
			color: #cbd5e1;
			text-align: right;
		}

		.voucher-print-company-name {
			margin-bottom: 5px;
			color: #fff;
			font-size: 13px;
			font-weight: 700;
		}

		.voucher-print-meta,
		.voucher-print-items,
		.voucher-print-summary table {
			width: 100%;
			border-collapse: collapse;
		}

		.voucher-print-meta {
			margin-top: 0;
			border: 1px solid #cbd5e1;
			border-top: 0;
		}

		.voucher-print-meta th,
		.voucher-print-meta td {
			padding: 9px 12px;
			border: 1px solid #cbd5e1;
			text-align: left;
		}

		.voucher-print-meta th {
			width: 18%;
			background: #e0f2fe;
			color: #0f172a;
			font-size: 10px;
			font-weight: 700;
			text-transform: uppercase;
		}

		.voucher-print-meta td {
			background: #f8fafc;
			color: #111827;
			font-weight: 600;
		}

		.voucher-print-total-value {
			color: #047857 !important;
			font-weight: 700 !important;
		}

		.voucher-print-items {
			margin-top: 18px;
			border: 1px solid #94a3b8;
			border-radius: 8px;
		}

		.voucher-print-items th,
		.voucher-print-items td {
			padding: 9px 10px;
			border: 1px solid #dbe4ee;
			vertical-align: top;
		}

		.voucher-print-items thead th {
			background: #1e40af;
			color: #fff;
			font-size: 10px;
			font-weight: 700;
			text-align: left;
			text-transform: uppercase;
		}

		.voucher-print-items tbody tr:nth-child(even) td {
			background: #f8fafc;
		}

		.voucher-print-items tbody tr:nth-child(odd) td {
			background: #fff;
		}

		.voucher-print-items td strong {
			display: block;
			color: #111827;
			font-size: 11px;
		}

		.voucher-print-items tfoot td {
			background: #dbeafe;
			border-top: 2px solid #1e40af;
			color: #0f172a;
			font-weight: 700;
		}

		.voucher-print-index {
			width: 32px;
			text-align: center !important;
		}

		.voucher-print-money {
			width: 130px;
			text-align: right !important;
			white-space: nowrap;
		}

		.voucher-print-empty {
			padding: 20px !important;
			text-align: center;
		}

		.voucher-print-summary {
			display: table;
			width: 100%;
			margin-top: 18px;
		}

		.voucher-print-summary > div,
		.voucher-print-summary > table {
			display: table-cell;
			vertical-align: top;
		}

		.voucher-print-summary > div {
			width: 62%;
			padding-right: 18px;
		}

		.voucher-print-summary h2 {
			margin: 0 0 6px;
			color: #0f172a;
			font-size: 11px;
			font-weight: 700;
			text-transform: uppercase;
		}

		.voucher-print-notes {
			min-height: 58px;
			padding: 12px;
			background: #f8fafc;
			border: 1px solid #cbd5e1;
			border-left: 4px solid #2563eb;
			border-radius: 6px;
			color: #374151;
		}

		.voucher-print-summary table {
			border: 1px solid #cbd5e1;
			border-radius: 6px;
		}

		.voucher-print-summary th,
		.voucher-print-summary td {
			padding: 9px 12px;
			border: 1px solid #dbe4ee;
		}

		.voucher-print-summary th {
			background: #f1f5f9;
			color: #334155;
			text-align: left;
			text-transform: uppercase;
		}

		.voucher-print-summary td {
			font-weight: 700;
			text-align: right;
			white-space: nowrap;
		}

		.voucher-print-signatures {
			display: table;
			width: 100%;
			margin-top: 44px;
			page-break-inside: avoid;
		}

		.voucher-print-signatures div {
			display: table-cell;
			width: 33.333%;
			color: #374151;
			font-size: 10px;
			font-weight: 700;
			text-align: center;
			text-transform: uppercase;
		}

		.voucher-print-signatures span {
			display: block;
			width: 72%;
			margin: 0 auto 8px;
			border-top: 1.5px solid #334155;
		}
	}
</style>

<script>
	function print_sales_details() {
		if (typeof window.erpNativePrint === 'function') {
			window.erpNativePrint();
			return;
		}

		if (typeof window.print === 'function') {
			window.print();
			return;
		}

		if (typeof Window !== 'undefined' && Window.prototype && typeof Window.prototype.print === 'function') {
			Window.prototype.print.call(window);
			return;
		}

		document.execCommand('print', false, null);
	}

	function updateVoucherStatus(selectEl) {
		var selected = selectEl.value;
		if (!selected) {
			return;
		}
		var confirmText = 'Change status to ' + selected + '?';
		if (!confirm(confirmText)) {
			selectEl.value = selectEl.getAttribute('data-current');
			return;
		}
		var baseUrl = selectEl.getAttribute('data-url-base');
		fetch(baseUrl + selected, { method: 'GET', credentials: 'same-origin' })
			.then(function () {
				window.location.reload();
			})
			.catch(function () {
				window.location.reload();
			});
	}
</script>
