<?php
$purchase_info = $this->purchase_model->check_by(array('purchase_id' => $payments_info->purchase_id), 'tbl_purchases');
if (empty($purchase_info)) {
	$purchase_info = new stdClass();
	$purchase_info->purchase_id = 0;
	$purchase_info->reference_no = '-';
	$purchase_info->purchase_date = null;
}

$supplier_info = $this->purchase_model->check_by(array('supplier_id' => $payments_info->paid_to), 'tbl_suppliers');
$supplier_name = !empty($supplier_info) ? $supplier_info->name : '-';

if (is_numeric($payments_info->payment_method)) {
	$payment_methods = $this->purchase_model->check_by(array('payment_methods_id' => $payments_info->payment_method), 'tbl_payment_methods');
} else {
	$payment_methods = (object) array('method_name' => $payments_info->payment_method);
}

$currency = $this->purchase_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
$default_currency_symbol = !empty($currency->symbol) ? $currency->symbol : default_currency();
$purchase_due = $this->purchase_model->calculate_to('purchase_due', $payments_info->purchase_id);
$render_payment_note = function ($note) {
	$note = (string) $note;
	$allowed_tags = '<p><br><strong><b><em><i><u><ul><ol><li><a><span><div>';
	$note = preg_replace(array(
		'@<head[^>]*?>.*?</head>@siu',
		'@<style[^>]*?>.*?</style>@siu',
		'@<script[^>]*?>.*?</script>@siu',
		'@<object[^>]*?>.*?</object>@siu',
		'@<embed[^>]*?>.*?</embed>@siu',
		'@<applet[^>]*?>.*?</applet>@siu',
		'@<iframe[^>]*?>.*?</iframe>@siu',
		'@<form[^>]*?>.*?</form>@siu',
	), '', $note);
	$note = strip_tags($note, $allowed_tags);
	$note = preg_replace('/\s+on[a-z]+\s*=\s*(["\']).*?\1/isu', '', $note);
	$note = preg_replace('/\s+on[a-z]+\s*=\s*[^\s>]*/isu', '', $note);
	$note = preg_replace('/\s+(href|src)\s*=\s*(["\'])\s*(javascript|data):.*?\2/isu', '', $note);
	$note = preg_replace('/<a\s+/i', '<a target="_blank" rel="noopener noreferrer" class="font-semibold text-primary hover:underline" ', $note);
	return nl2br($note);
};
?>

<div class="flex gap-3 min-h-screen bg-slate-50 dark:bg-slate-950 p-3">
	<div class="w-72 flex-shrink-0">
		<div class="sticky top-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow">
			<div class="px-3 py-2.5 border-b border-slate-200 dark:border-slate-700">
				<h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wide"><?= lang('all') . ' ' . lang('payment') ?></h3>
			</div>

			<div class="p-2.5 border-b border-slate-200 dark:border-slate-700">
				<input type="text" id="paymentSearch" placeholder="<?= lang('search_by_payment') ?>" class="w-full px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600"/>
			</div>

			<div class="max-h-96 overflow-y-auto">
				<ul class="divide-y divide-slate-200 dark:divide-slate-700 payment-list-container">
					<?php if (!empty($payment_sidebar_items)) {
						foreach ($payment_sidebar_items as $sidebar_payment) {
							$is_active = ((int) $sidebar_payment->payments_id === (int) $payments_info->payments_id);
							$sidebar_supplier_name = !empty($sidebar_payment->supplier_name) ? $sidebar_payment->supplier_name : '-';
					?>
					<li class="payment-list-item" data-client="<?= html_escape($sidebar_supplier_name) ?>" data-trans-id="<?= html_escape($sidebar_payment->trans_id) ?>" data-amount="<?= display_money($sidebar_payment->amount, $default_currency_symbol) ?>">
						<a href="<?= base_url('admin/purchase/payments_details/' . $sidebar_payment->payments_id) ?>" class="block px-3 py-2.5 hover:bg-slate-100 dark:hover:bg-slate-700 transition <?= $is_active ? 'bg-blue-50 dark:bg-slate-700 border-l-4 border-blue-500' : '' ?>">
							<div class="flex justify-between items-start gap-2">
								<div class="flex-1 min-w-0">
									<p class="text-sm font-semibold text-slate-900 dark:text-white truncate"><?= html_escape($sidebar_supplier_name) ?></p>
									<p class="text-xs text-slate-500 dark:text-slate-400 truncate"><?= html_escape($sidebar_payment->trans_id) ?></p>
									<p class="text-xs text-slate-400 dark:text-slate-500 mt-1"><?= display_date($sidebar_payment->created_date) ?> <?= display_time($sidebar_payment->created_date) ?></p>
								</div>
								<div class="text-right flex-shrink-0">
									<p class="text-sm font-bold text-slate-900 dark:text-white"><?= display_money($sidebar_payment->amount, $default_currency_symbol) ?></p>
								</div>
							</div>
						</a>
					</li>
					<?php }
					} ?>
				</ul>
			</div>

			<div class="px-3 py-2.5 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between text-xs">
				<?php
				$payment_detail_base = base_url('admin/purchase/payments_details/' . $payments_info->payments_id);
				$prev_payment_page = !empty($payment_sidebar_page) && $payment_sidebar_page > 1 ? $payment_sidebar_page - 1 : null;
				$next_payment_page = !empty($payment_sidebar_pages) && !empty($payment_sidebar_page) && $payment_sidebar_page < $payment_sidebar_pages ? $payment_sidebar_page + 1 : null;
				?>
				<?php if (!empty($prev_payment_page)) { ?>
				<a href="<?= $payment_detail_base . '?page=' . $prev_payment_page ?>" class="px-3 py-1 rounded border border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700">← Prev</a>
				<?php } else { ?>
				<span class="px-3 py-1 rounded border border-slate-200 text-slate-300 dark:border-slate-700 dark:text-slate-600 cursor-not-allowed">← Prev</span>
				<?php } ?>
				<span class="text-slate-600 dark:text-slate-400"><?= !empty($payment_sidebar_page) ? $payment_sidebar_page : 1 ?> of <?= !empty($payment_sidebar_pages) ? $payment_sidebar_pages : 1 ?></span>
				<?php if (!empty($next_payment_page)) { ?>
				<a href="<?= $payment_detail_base . '?page=' . $next_payment_page ?>" class="px-3 py-1 rounded border border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700">Next →</a>
				<?php } else { ?>
				<span class="px-3 py-1 rounded border border-slate-200 text-slate-300 dark:border-slate-700 dark:text-slate-600 cursor-not-allowed">Next →</span>
				<?php } ?>
			</div>
		</div>
	</div>

	<div class="flex-1 min-w-0">
		<div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4">
			<div class="lg:col-span-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
				<div class="flex items-center gap-3">
					<div class="flex items-center justify-center w-11 h-11 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white font-bold text-lg">
						<i data-lucide="truck" class="w-6 h-6"></i>
					</div>
					<div class="flex-1">
						<p class="text-base font-bold text-slate-900 dark:text-white"><?= config_item('company_name') ?></p>
						<p class="text-sm text-slate-600 dark:text-slate-400"><?= $this->config->item('company_address') ?></p>
						<p class="mt-1 text-xs font-medium text-slate-500 dark:text-slate-400"><?= lang('purchase') ?>: <?= html_escape($purchase_info->reference_no) ?></p>
					</div>
				</div>
			</div>

			<div class="bg-blue-50 dark:bg-slate-900 border border-blue-200 dark:border-slate-700 rounded-lg p-4 text-center">
				<p class="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wide mb-1.5"><?= lang('amount_paid') ?></p>
				<p class="text-2xl font-bold text-blue-700 dark:text-blue-400"><?= display_money($payments_info->amount, $default_currency_symbol) ?></p>
				<p class="text-xs font-semibold text-blue-600 dark:text-blue-400 mt-1.5"><?= lang('payment') . ' ' . lang('successful') ?></p>
			</div>
		</div>

		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-4">
			<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-3"><?= lang('payment_details') ?></h3>
			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
				<div>
					<p class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-1.5"><i data-lucide="hash" class="w-4 h-4"></i><?= lang('transaction_id') ?></p>
					<p class="text-sm font-semibold text-slate-900 dark:text-white"><?= html_escape($payments_info->trans_id) ?></p>
				</div>
				<div>
					<p class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-1.5"><i data-lucide="calendar" class="w-4 h-4"></i><?= lang('payment_date') ?></p>
					<p class="text-sm font-semibold text-slate-900 dark:text-white"><?= display_date($payments_info->payment_date) ?></p>
				</div>
				<div>
					<p class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-1.5"><i data-lucide="building-2" class="w-4 h-4"></i><?= lang('paid') . ' ' . lang('to') ?></p>
					<p class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">
						<a href="<?= base_url('admin/supplier/supplier_details/' . $payments_info->paid_to) ?>"><?= html_escape($supplier_name) ?></a>
					</p>
				</div>
				<div>
					<p class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-1.5"><i data-lucide="credit-card" class="w-4 h-4"></i><?= lang('payment_mode') ?></p>
					<p class="text-sm font-semibold text-slate-900 dark:text-white"><?= !empty($payment_methods->method_name) ? $payment_methods->method_name : '-' ?></p>
				</div>
			</div>
		</div>

		<?php
		$role = $this->session->userdata('user_type');
		if ($role == 1 && !empty($payments_info->account_id) && $payments_info->account_id != 0) {
			$account_info = $this->purchase_model->check_by(array('account_id' => $payments_info->account_id), 'tbl_accounts');
			if (!empty($account_info)) {
		?>
		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-4">
			<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-3"><?= lang('deduct_from') ?></h3>
			<p class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">
				<a href="<?= base_url('admin/account/create_account/' . $account_info->account_id) ?>"><?= html_escape($account_info->account_name) ?></a>
			</p>
		</div>
		<?php }
		} ?>

		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden mb-4">
			<div class="px-4 py-3 border-b border-slate-200 dark:border-slate-700">
				<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('payment_for') ?> - <?= lang('purchase') . ' ' . lang('details') ?></h3>
			</div>
			<div class="overflow-x-auto">
				<table class="w-full text-sm">
					<thead>
						<tr class="bg-slate-50 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('reference_no') ?></th>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('purchase_date') ?></th>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('purchase') . ' ' . lang('amount') ?></th>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('paid_amount') ?></th>
							<?php if ($purchase_due > 0) { ?>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('due_amount') ?></th>
							<?php } ?>
						</tr>
					</thead>
					<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
						<tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50">
							<td class="px-4 py-3">
								<a href="<?= base_url('admin/purchase/purchase_details/' . $payments_info->purchase_id) ?>" class="text-blue-600 dark:text-blue-400 font-semibold hover:underline"><?= html_escape($purchase_info->reference_no) ?></a>
							</td>
							<td class="px-4 py-3 text-slate-900 dark:text-white"><?= display_date($purchase_info->purchase_date) ?></td>
							<td class="px-4 py-3 font-semibold text-slate-900 dark:text-white"><?= display_money($this->purchase_model->calculate_to('total', $payments_info->purchase_id), $default_currency_symbol) ?></td>
							<td class="px-4 py-3 font-semibold text-slate-900 dark:text-white"><?= display_money($payments_info->amount, $default_currency_symbol) ?></td>
							<?php if ($purchase_due > 0) { ?>
							<td class="px-4 py-3 font-bold text-red-600 dark:text-red-400"><?= display_money($purchase_due, $default_currency_symbol) ?></td>
							<?php } ?>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<?php if (config_item('amount_to_words') == 'Yes') { ?>
		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4 mb-4">
			<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-3"><?= lang('num_word') ?></h3>
			<div class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed"><?= number_to_word('', $payments_info->amount); ?></div>
		</div>
		<?php } ?>

		<?php if (!empty($payments_info->notes)) { ?>
		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-4">
			<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-3"><?= lang('notes') ?></h3>
			<div class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed"><?= $render_payment_note($payments_info->notes) ?></div>
		</div>
		<?php } ?>
	</div>
</div>

<script>
document.getElementById('paymentSearch').addEventListener('keyup', function() {
	const searchTerm = this.value.toLowerCase().trim();
	const paymentItems = document.querySelectorAll('.payment-list-item');
	let visibleCount = 0;

	paymentItems.forEach(item => {
		const supplierName = (item.dataset.client || '').toLowerCase();
		const transId = (item.dataset.transId || '').toLowerCase();
		const amount = (item.dataset.amount || '').toLowerCase();

		if (supplierName.includes(searchTerm) || transId.includes(searchTerm) || amount.includes(searchTerm)) {
			item.style.display = '';
			visibleCount++;
		} else {
			item.style.display = 'none';
		}
	});

	let noResult = document.getElementById('paymentSearchEmpty');
	if (!visibleCount) {
		if (!noResult) {
			noResult = document.createElement('div');
			noResult.id = 'paymentSearchEmpty';
			noResult.className = 'px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400';
			noResult.textContent = 'No matching payments found.';
			document.querySelector('.payment-list-container').appendChild(noResult);
		}
	} else if (noResult) {
		noResult.remove();
	}
});
</script>
