<div class="flex gap-4 min-h-screen bg-slate-50 dark:bg-slate-950 p-4">
	<?php
	$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');
		$payment_method_name = !empty($payment_methods->method_name) ? $payment_methods->method_name : '-';
	} else {
		$payment_method_name = !empty($payments_info->payment_method) ? $payments_info->payment_method : '-';
	}

	$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->client_currency_symbol($payments_info->paid_by);
	}
	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();
	$invoice_due = !empty($payments_info->invoices_id) ? $this->invoice_model->calculate_to('invoice_due', $payments_info->invoices_id) : 0;
	?>

	<div class="w-80 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-4 py-3 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_payments') ?></h3>
			</div>

			<div class="p-3 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-2 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) $payments_info->payments_id);
								$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('client/invoice/manage_invoice/payments_details/' . $sidebar_payment->payments_id) ?>" class="block px-4 py-3 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>

			<div class="px-4 py-3 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between text-xs">
				<?php
				$payment_detail_base = base_url('client/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>

	<div class="flex-1 min-w-0">
		<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
			<div class="lg:col-span-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
				<div class="flex items-center gap-4">
					<div class="flex items-center justify-center w-14 h-14 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-7 h-7"></i>
					</div>
					<div class="flex-1">
						<p class="text-lg 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-6 text-center">
				<p class="text-xs font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wide mb-2"><?= lang('amount_received') ?></p>
				<p class="text-3xl 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-2"><?= lang('payment') ?></p>
			</div>
		</div>

		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6 mb-6">
			<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-4"><?= lang('payment') . ' ' . lang('details') ?></h3>
			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
				<div>
					<p class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-2">
						<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-2">
						<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-2">
						<i data-lucide="user" class="w-4 h-4"></i>
						<?= lang('received_from') ?>
					</p>
					<p class="text-sm font-semibold text-blue-600 dark:text-blue-400"><?= html_escape($p_client_name) ?></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-2">
						<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"><?= html_escape($payment_method_name) ?></p>
				</div>
			</div>
		</div>

		<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden mb-6">
			<div class="px-6 py-4 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') ?></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-6 py-3 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('invoice_code') ?></th>
						<th class="px-6 py-3 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('invoice_date') ?></th>
						<th class="px-6 py-3 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('invoice_amount') ?></th>
						<th class="px-6 py-3 text-left text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide"><?= lang('paid_amount') ?></th>
						<?php if ($invoice_due > 0) { ?>
							<th class="px-6 py-3 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-6 py-4">
							<a href="<?= base_url('client/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-6 py-4 text-slate-900 dark:text-white"><?= display_date($invoice_info->date_saved) ?></td>
						<td class="px-6 py-4 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-6 py-4 font-semibold text-slate-900 dark:text-white"><?= display_money($payments_info->amount, $currency->symbol) ?></td>
						<?php if ($invoice_due > 0) { ?>
							<td class="px-6 py-4 font-bold text-red-600 dark:text-red-400"><?= display_money($invoice_due, $currency->symbol) ?></td>
						<?php } ?>
					</tr>
					</tbody>
				</table>
			</div>
		</div>

		<?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-6">
				<h3 class="text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide mb-4"><?= lang('notes') ?></h3>
				<p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed"><?= nl2br(html_escape($payments_info->notes)) ?></p>
			</div>
		<?php } ?>
	</div>
</div>

<script>
(function () {
	const input = document.getElementById('paymentSearch');
	if (!input || input.dataset.ready === 'true') {
		return;
	}
	input.dataset.ready = 'true';
	input.addEventListener('keyup', function () {
		const searchTerm = this.value.toLowerCase().trim();
		const paymentItems = document.querySelectorAll('.payment-list-item');
		let visibleCount = 0;

		paymentItems.forEach(function (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';
			}
		});

		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>
