<div class="flex gap-3 min-h-screen bg-slate-50 dark:bg-slate-950 p-3">
	<?php
	$edited = can_action('13', 'edited');
	$invoice_info = $this->invoice_model->check_by(array('invoices_id' => $payments_info->invoices_id), 'tbl_invoices');
	if (empty($invoice_info)) {
		$invoice_info = new stdClass();
		$invoice_info->adjustment = 0;
		$invoice_info->client_id = 0;
		$invoice_info->date_saved = 0;
		$invoice_info->invoices_id = 0;
		$invoice_info->reference_no = '-';
	}

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

	$can_edit = $this->invoice_model->can_action('tbl_invoices', 'edit', array('invoices_id' => $payments_info->invoices_id));

	$p_client_info = $this->invoice_model->check_by(array('client_id' => $payments_info->paid_by), 'tbl_client');
	$p_client_name = !empty($p_client_info) ? $p_client_info->name : '-';

	if (!empty($payments_info->system_currency)) {
		$currency = $this->invoice_model->check_by(array('code' => $payments_info->system_currency), 'tbl_currencies');
	}
	if (empty($currency)) {
		$currency = $this->invoice_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
	}
	$default_currency_symbol = !empty($currency->symbol) ? $currency->symbol : default_currency();
	$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);
	};
	?>

	<!-- LEFT SIDEBAR: All Invoices & Payments List -->
	<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">All Payments</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) {
							if (!empty($sidebar_payment)) {
								$is_active = ((int) $sidebar_payment->payments_id === (int) $this->uri->segment(5));
								$sidebar_client_name = !empty($sidebar_payment->client_name) ? $sidebar_payment->client_name : '-';
								$sidebar_currency_symbol = $default_currency_symbol;
					?>
									<li class="payment-list-item" data-client="<?= html_escape($sidebar_client_name) ?>" data-trans-id="<?= html_escape($sidebar_payment->trans_id) ?>" data-amount="<?= display_money($sidebar_payment->amount, $sidebar_currency_symbol) ?>">
										<a href="<?= base_url() ?>admin/invoice/manage_invoice/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_client_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, $sidebar_currency_symbol) ?></p>
												</div>
											</div>
										</a>
									</li>
						<?php
							}
						}
						} ?>
					</ul>
				</div>

			<!-- Pagination -->
			<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/invoice/manage_invoice/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>

	<!-- RIGHT CONTENT: Payment Details -->
	<div class="flex-1 min-w-0">
		<!-- FROM Card -->
		<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="building-2" 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('invoice') ?>: <?= html_escape($invoice_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">Amount Received</p>
				<p class="text-2xl font-bold text-blue-700 dark:text-blue-400"><?= display_money($payments_info->amount, $currency->symbol) ?></p>
				<p class="text-xs font-semibold text-blue-600 dark:text-blue-400 mt-1.5">Payment Successful</p>
			</div>
		</div>

		<!-- Payment Details -->
		<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">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>
						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>
						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="user" class="w-4 h-4"></i>
						Received From
					</p>
					<p class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">
						<a href="<?= base_url() ?>admin/client/details/<?= $payments_info->paid_by ?>"><?= $p_client_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>
						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 if (!empty($payments_info->account_id) && $payments_info->account_id != 0) { ?>
		<!-- Received Account -->
		<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">Received Account</h3>
			<?php
			$account_info = $this->invoice_model->check_by(array('account_id' => $payments_info->account_id), 'tbl_accounts');
			if (!empty($account_info)) {
			?>
			<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>
			<?php } ?>
		</div>
		<?php } ?>

		<!-- Applied to Invoices -->
		<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">Applied to Invoices</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">Invoice Code</th>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide">Invoice 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">Invoice 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">Paid Amount</th>
							<?php if ($this->invoice_model->calculate_to('invoice_due', $payments_info->invoices_id) > 0) { ?>
							<th class="px-4 py-2.5 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide">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/invoice/manage_invoice/invoice_details/<?= $payments_info->invoices_id ?>" class="text-blue-600 dark:text-blue-400 font-semibold hover:underline"><?= html_escape($invoice_info->reference_no) ?></a>
							</td>
							<td class="px-4 py-3 text-slate-900 dark:text-white"><?= display_date($invoice_info->date_saved) ?></td>
							<td class="px-4 py-3 font-semibold text-slate-900 dark:text-white"><?= display_money($this->invoice_model->calculate_to('total', $invoice_info->invoices_id), $currency->symbol) ?></td>
							<td class="px-4 py-3 font-semibold text-slate-900 dark:text-white"><?= display_money($payments_info->amount, $currency->symbol) ?></td>
							<?php if ($this->invoice_model->calculate_to('invoice_due', $payments_info->invoices_id) > 0) { ?>
							<td class="px-4 py-3 font-bold text-red-600 dark:text-red-400"><?= display_money($this->invoice_model->calculate_to('invoice_due', $payments_info->invoices_id), $currency->symbol) ?></td>
							<?php } ?>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<?php if (!empty($payments_info->notes)) { ?>
		<!-- 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">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 clientName = item.dataset.client.toLowerCase();
		const transId = item.dataset.transId.toLowerCase();
		const amount = item.dataset.amount.toLowerCase();

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

	// Show/hide "No results" message
	const noResultsMsg = document.getElementById('noPaymentsMsg');
	if (visibleCount === 0 && searchTerm.length > 0) {
		if (!noResultsMsg) {
			const ul = document.querySelector('.payment-list-container');
			const msg = document.createElement('li');
			msg.id = 'noPaymentsMsg';
			msg.className = 'px-4 py-6 text-center text-slate-500 dark:text-slate-400';
			msg.textContent = 'No payments found';
			ul.appendChild(msg);
		}
	} else if (noResultsMsg) {
		noResultsMsg.remove();
	}
});
</script>
