<?= 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';
}
$total_debit = (float) ($sales_info->total_debit ?? 0);
$total_credit = (float) ($sales_info->total_credit ?? 0);
$balance_difference = $total_debit - $total_credit;
$is_balanced = abs($balance_difference) < 0.01;
$reconciliation_label = !empty($sales_info->reconciled_status) ? lang($sales_info->reconciled_status) : lang('unreconciled');
$balanced_label = 'Balanced';
$unbalanced_label = 'Out of balance';
$difference_label = 'Difference';
$reconciliation_title = 'Reconciliation';
$printed_label = 'Printed';
$prepared_by_label = 'Prepared by';
$checked_by_label = 'Checked by';
$approved_by_label = 'Approved by';
?>

<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-2">
					<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
						<i data-lucide="book-open" class="h-5 w-5"></i>
					</span>
					<div class="min-w-0">
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('accounting') ?></p>
						<h2 class="truncate text-2xl font-semibold text-foreground"><?= lang('journal_entry') ?></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 <?= $is_balanced ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-300' : 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300' ?> px-3 py-1 text-xs font-semibold">
						<i data-lucide="<?= $is_balanced ? 'check-circle-2' : 'triangle-alert' ?>" class="h-3.5 w-3.5"></i>
						<?= $is_balanced ? $balanced_label : $unbalanced_label ?>
					</span>
				</div>
			</div>
			<div class="flex flex-wrap items-center gap-2">
				<a href="<?php echo base_url('admin/accounting/new_' . $active . '/' . $sales_info->journal_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->journal_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>
				<?php if (empty($sales_info->reversal_journal_id) && empty($sales_info->reversed_from_journal)): ?>
					<button type="button" onclick="reverseJournal(<?= (int) $sales_info->journal_id ?>)" class="inline-flex h-10 items-center gap-2 rounded-lg border border-orange-200 bg-orange-50 px-3 text-xs font-semibold text-orange-700 shadow-sm hover:bg-orange-100 dark:border-orange-900/60 dark:bg-orange-950/40 dark:text-orange-300">
						<i data-lucide="rotate-ccw" class="h-4 w-4"></i>
						<?= lang('reverse') ?>
					</button>
				<?php endif; ?>
				<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->journal_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-3">
					<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="user-check" class="h-5 w-5"></i>
						</span>
						<div class="min-w-0">
							<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('created_by') ?></p>
							<p class="truncate text-sm font-semibold text-foreground"><?= html_escape($sales_info->fullname) ?></p>
						</div>
					</div>
				</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"><?= lang('total_debit') ?></p>
					<p class="mt-2 text-xl font-bold text-foreground"><?= display_money($total_debit, $currency_symbol) ?></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"><?= lang('total_credit') ?></p>
					<p class="mt-2 text-xl font-bold text-foreground"><?= display_money($total_credit, $currency_symbol) ?></p>
				</div>
				<div class="rounded-xl border border-border bg-background p-4 lg:col-span-12">
					<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
						<div>
							<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= $reconciliation_title ?></p>
							<p class="mt-1 text-sm font-semibold text-foreground"><?= html_escape($reconciliation_label) ?></p>
						</div>
						<div class="text-left md:text-right">
							<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= $difference_label ?></p>
							<p class="mt-1 text-sm font-semibold <?= $is_balanced ? 'text-emerald-600 dark:text-emerald-300' : 'text-rose-600 dark:text-rose-300' ?>">
								<?= display_money(abs($balance_difference), $currency_symbol) ?>
							</p>
						</div>
					</div>
				</div>
			</div>

		<?php if (!empty($sales_info->reversal_journal)): ?>
			<div class="flex items-start gap-3 rounded-xl border border-orange-200 bg-orange-50/70 p-4 text-sm text-orange-800 dark:border-orange-900/60 dark:bg-orange-950/30 dark:text-orange-300">
				<i data-lucide="rotate-ccw" class="mt-0.5 h-4 w-4"></i>
				<div>
					<span class="font-semibold"><?= lang('reversal_journal') ?>:</span>
					<a class="font-semibold underline" href="<?= base_url('admin/accounting/view_journal_entry/' . $sales_info->reversal_journal->journal_id) ?>"><?= html_escape($sales_info->reversal_journal->reference_no) ?></a>
				</div>
			</div>
		<?php endif; ?>
		<?php if (!empty($sales_info->reversed_from_journal)): ?>
			<div class="flex items-start gap-3 rounded-xl border border-orange-200 bg-orange-50/70 p-4 text-sm text-orange-800 dark:border-orange-900/60 dark:bg-orange-950/30 dark:text-orange-300">
				<i data-lucide="undo-2" class="mt-0.5 h-4 w-4"></i>
				<div>
					<span class="font-semibold"><?= lang('reversed_from') ?>:</span>
					<a class="font-semibold underline" href="<?= base_url('admin/accounting/view_journal_entry/' . $sales_info->reversed_from_journal->journal_id) ?>"><?= html_escape($sales_info->reversed_from_journal->reference_no) ?></a>
				</div>
			</div>
		<?php endif; ?>

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

<div id="journal_print_design" class="journal-print-shell" aria-hidden="true">
	<div class="journal-print-page">
		<div class="journal-print-header">
			<div>
				<div class="journal-print-kicker"><?= lang('accounting') ?></div>
				<h1><?= lang('journal_entry') ?></h1>
				<div class="journal-print-reference"><?= html_escape($sales_info->reference_no) ?></div>
			</div>
			<div class="journal-print-company">
				<div class="journal-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="journal-print-meta">
			<tr>
				<th><?= lang('date') ?></th>
				<td><?= display_date($sales_info->date) ?></td>
				<th><?= lang('created_by') ?></th>
				<td><?= html_escape($sales_info->fullname) ?></td>
			</tr>
			<tr>
				<th><?= $reconciliation_title ?></th>
				<td><?= html_escape($reconciliation_label) ?></td>
				<th><?= $difference_label ?></th>
				<td class="<?= $is_balanced ? 'journal-print-balanced' : 'journal-print-unbalanced' ?>">
					<?= display_money(abs($balance_difference), $currency_symbol) ?>
				</td>
			</tr>
		</table>

		<table class="journal-print-items">
			<thead>
				<tr>
					<th class="journal-print-index">#</th>
					<th><?= lang('chart_of_accounts') ?></th>
					<th><?= lang('description') ?></th>
					<th class="journal-print-money"><?= lang('debit') ?></th>
					<th class="journal-print-money"><?= lang('credit') ?></th>
				</tr>
			</thead>
			<tbody>
				<?php if (!empty($receipt_items)) { ?>
					<?php foreach ($receipt_items as $key => $item) { ?>
						<tr>
							<td class="journal-print-index"><?= $key + 1 ?></td>
							<td>
								<strong><?= html_escape($item->name) ?></strong>
								<?php if (!empty($item->code)) { ?>
									<span><?= html_escape($item->code) ?></span>
								<?php } ?>
							</td>
							<td><?= !empty($item->description) ? nl2br(html_escape($item->description)) : '-' ?></td>
							<td class="journal-print-money"><?= display_money($item->debit, $currency_symbol) ?></td>
							<td class="journal-print-money"><?= display_money($item->credit, $currency_symbol) ?></td>
						</tr>
					<?php } ?>
				<?php } else { ?>
					<tr>
						<td colspan="5" class="journal-print-empty"><?= lang('nothing_to_display') ?></td>
					</tr>
				<?php } ?>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3"><?= lang('total') ?></td>
					<td class="journal-print-money"><?= display_money($total_debit, $currency_symbol) ?></td>
					<td class="journal-print-money"><?= display_money($total_credit, $currency_symbol) ?></td>
				</tr>
			</tfoot>
		</table>

		<div class="journal-print-summary">
			<div>
				<h2><?= lang('notes') ?></h2>
				<div class="journal-print-notes">
					<?= !empty($sales_info->notes) ? nl2br(html_escape($sales_info->notes)) : '-' ?>
				</div>
			</div>
			<table>
				<tr>
					<th><?= lang('total_debit') ?></th>
					<td><?= display_money($total_debit, $currency_symbol) ?></td>
				</tr>
				<tr>
					<th><?= lang('total_credit') ?></th>
					<td><?= display_money($total_credit, $currency_symbol) ?></td>
				</tr>
				<tr>
					<th><?= $difference_label ?></th>
					<td class="<?= $is_balanced ? 'journal-print-balanced' : 'journal-print-unbalanced' ?>">
						<?= display_money(abs($balance_difference), $currency_symbol) ?>
					</td>
				</tr>
			</table>
		</div>

		<div class="journal-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>
	.journal-print-shell {
		display: none;
	}

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

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

		body * {
			visibility: hidden !important;
		}

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

		#journal_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;
		}

		.journal-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;
		}

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

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

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

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

		.journal-print-reference {
			margin-top: 7px;
			display: inline-block;
			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;
		}

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

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

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

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

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

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

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

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

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

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

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

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

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

		.journal-print-items td span {
			display: block;
			margin-top: 2px;
			color: #6b7280;
			font-size: 10px;
		}

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

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

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

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

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

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

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

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

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

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

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

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

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

		.journal-print-balanced {
			color: #047857 !important;
			font-weight: 700;
		}

		.journal-print-unbalanced {
			color: #be123c !important;
			font-weight: 700;
		}

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

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

		.journal-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();
			});
	}

	function reverseJournal(journalId) {
		if (!confirm('<?= lang('reverse') ?> <?= lang('journal_entry') ?>?')) {
			return;
		}
		fetch('<?= base_url('admin/accounting/reverse_journal_entry/') ?>' + journalId, { method: 'GET', credentials: 'same-origin' })
			.then(function () { window.location.reload(); })
			.catch(function () { window.location.reload(); });
	}
</script>
