<div class="invoice-modern min-h-screen bg-slate-50 text-foreground dark:bg-slate-950">
	<?php
	$this->load->helper('string');

	$invoice_currency = get_sales_currency($invoice_info);
	if (empty($invoice_currency) || empty($invoice_currency->symbol)) {
		$invoice_currency = $this->invoice_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
	}
	$currency_symbol = !empty($invoice_currency->symbol) ? $invoice_currency->symbol : config_item('default_currency');

	$invoice_total = (float) $this->invoice_model->calculate_to('total', $invoice_info->invoices_id);
	$paid_total = (float) $this->invoice_model->calculate_to('paid_amount', $invoice_info->invoices_id);
	$invoice_due = (float) $this->invoice_model->calculate_to('invoice_due', $invoice_info->invoices_id);
	if ($invoice_due < 0) {
		$invoice_due = 0;
	}
	$payment_progress = $invoice_total > 0 ? (int) round(($paid_total / $invoice_total) * 100) : 0;
	if ($payment_progress > 100) {
		$payment_progress = 100;
	}

	$payment_status = $this->invoice_model->get_payment_status($invoice_info->invoices_id);
	$status_text = !empty($payment_status) ? $payment_status : ($invoice_due <= 0 ? lang('fully_paid') : lang('partially_paid'));
	$status_key = strtolower(trim((string) $status_text));
	$status_classes = 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-900/30 dark:text-amber-300';
	if ($status_key === strtolower(lang('fully_paid')) || $invoice_due <= 0) {
		$status_classes = 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/30 dark:text-emerald-300';
	} elseif ($status_key === strtolower(lang('cancelled'))) {
		$status_classes = 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300';
	} elseif ($status_key === strtolower(lang('not_paid')) || $status_key === strtolower(lang('overdue'))) {
		$status_classes = 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-900/30 dark:text-rose-300';
	}

	$payment_method_options = array('' => lang('select') . ' ' . lang('payment_method'));
	$payment_method_rows = $this->db->order_by('method_name', 'ASC')->get('tbl_payment_methods')->result();
	foreach ($payment_method_rows as $payment_method_row) {
		$payment_method_options[$payment_method_row->payment_methods_id] = $payment_method_row->method_name;
	}
	$selected_payment_method_id = config_item('default_payment_method');
	if (empty($selected_payment_method_id) && !empty($payment_method_rows)) {
		$selected_payment_method_id = $payment_method_rows[0]->payment_methods_id;
	}
	$selected_payment_method_label = !empty($selected_payment_method_id) && !empty($payment_method_options[$selected_payment_method_id]) ? $payment_method_options[$selected_payment_method_id] : '';

	$selected_account_id = config_item('default_account');
	$selected_account_label = '';
	$new_account_link = '';
	if (!empty(can_action('36', 'created'))) {
		$new_account_link = form_lookup_add_link('account_id', base_url('admin/account/new_account'), lang('new') . ' ' . lang('account'), 'xl');
	}
	if (!empty($selected_account_id)) {
		$selected_account = $this->db->select('account_id, account_name')->where('account_id', $selected_account_id)->get('tbl_accounts')->row();
		if (!empty($selected_account)) {
			$selected_account_label = $selected_account->account_name;
		}
	} else {
		$first_account = $this->db->select('account_id, account_name')->order_by('account_name', 'ASC')->limit(1)->get('tbl_accounts')->row();
		if (!empty($first_account)) {
			$selected_account_id = $first_account->account_id;
			$selected_account_label = $first_account->account_name;
		}
	}

	$payment_reference = random_string('nozero', 6);
	$payment_date_value = date('Y-m-d');
	$client_name = !empty($invoice_info->client_id) ? client_name($invoice_info->client_id) : '-';
	$invoice_no = !empty($invoice_info->reference_no) ? $invoice_info->reference_no : '-';
	$invoice_issue_date = !empty($invoice_info->invoice_date) ? $invoice_info->invoice_date : (!empty($invoice_info->date_saved) ? $invoice_info->date_saved : date('Y-m-d'));
	$invoice_sidebar = isset($invoice_sidebar_html) ? $invoice_sidebar_html : '';
	$payment_page = !empty($payment_history_page) ? (int) $payment_history_page : 1;
	$payment_pages = !empty($payment_history_pages) ? (int) $payment_history_pages : 1;
	$payment_query = $this->input->get();
	unset($payment_query['payment_page']);
	?>

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

	<div class="mx-auto max-w-[1680px] p-4 sm:p-6 lg:p-8">
		<div class="grid gap-5 xl:grid-cols-[300px_minmax(0,1fr)_320px]">
			<aside class="xl:sticky xl:top-4 h-fit">
				<?= $invoice_sidebar ?>
			</aside>

			<section class="space-y-5">
				<section class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm dark:border-slate-700 dark:bg-slate-900">
					<header class="border-b border-border px-5 py-4 dark:border-slate-700">
						<div class="flex items-center gap-2 text-sm font-semibold text-foreground">
							<i data-lucide="file-text" class="h-4.5 w-4.5 text-slate-500 dark:text-slate-400"></i>
							<span><?= lang('payment_details') ?></span>
						</div>
					</header>
					<div class="p-5 sm:p-6">
						<form method="post" data-parsley-validate="" novalidate="" action="<?= base_url() ?>admin/invoice/get_payment/<?= $invoice_info->invoices_id ?>" class="space-y-5">
							<input type="hidden" name="currency" value="<?= html_escape($currency_symbol) ?>">

							<div class="grid gap-4 md:grid-cols-2 !mt-0">
								<?= form_input_group('amount', lang('amount'), number_format($invoice_due, 2, '.', ''), 'text', true, array('min' => '0', 'class' => 'payment_amount'), $currency_symbol, '', 'stacked') ?>
								<?= form_datepicker('payment_date', lang('payment_date'), $payment_date_value, true, array('class' => 'datepicker', 'data-format' => config_item('date_picker_format'))) ?>
							</div>

							<div class="grid gap-4 md:grid-cols-2">
								<?= form_input_group('trans_id', lang('trans_id'), $payment_reference, 'text', true, array('readonly' => 'readonly'), '#', '', 'stacked') ?>
								<?= form_select_group('payment_methods_id', lang('payment_method'), $payment_method_options, $selected_payment_method_id, true, array('id' => 'payment_methods_id', 'data-live-search' => 'true'), '<i data-lucide="credit-card" class="h-4 w-4"></i>', '', 'stacked') ?>
							</div>

							<div class="grid gap-4 md:grid-cols-1">
								<?= form_lookup_group(
									'account_id',
									'Deposit Account',
									$selected_account_id,
									$selected_account_label,
									true,
									array('id' => 'account_id_lookup'),
									'',
									array(
										'type' => 'account',
										'min_length' => 0,
										'placeholder' => lang('search') . ' ' . lang('account'),
										'append' => $new_account_link,
									)
								) ?>
							</div>

							<div class="space-y-2">
								<label class="block text-sm font-medium text-foreground"><?= lang('notes') ?></label>
								<textarea name="notes" rows="4" placeholder="<?= lang('payment_internal_notes_placeholder') ?>" class="w-full rounded-lg border border-border bg-input px-3 py-3 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-secondary focus:ring-2 focus:ring-secondary/20 dark:focus:border-secondary dark:focus:ring-secondary/30"></textarea>
							</div>

							<div class="flex flex-col gap-4 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-700">
								<div class="flex flex-wrap gap-3">
									<div class="rounded-xl border border-border bg-card px-4 py-3 shadow-sm dark:border-slate-700 dark:bg-slate-900">
										<?= form_checkbox('send_thank_you', lang('send_email'), false, false, array('class' => 'custom-checkbox')) ?>
									</div>
									<div class="rounded-xl border border-border bg-card px-4 py-3 shadow-sm dark:border-slate-700 dark:bg-slate-900">
										<?= form_checkbox('send_sms', lang('send') . ' ' . lang('sms'), false, false, array('class' => 'custom-checkbox')) ?>
									</div>
								</div>
								<button type="submit" class="inline-flex h-11 items-center justify-center rounded-xl bg-slate-900 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white">
									Record Payment
								</button>
							</div>
						</form>
					</div>
				</section>

				<section class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm dark:border-slate-700 dark:bg-slate-900">
					<header class="border-b border-border px-5 py-4 dark:border-slate-700">
						<div class="flex items-center gap-2 text-sm font-semibold text-foreground">
							<i data-lucide="receipt-text" class="h-4.5 w-4.5 text-slate-500 dark:text-slate-400"></i>
							<span>Payment Ledger</span>
						</div>
					</header>
					<div class="overflow-x-auto">
						<table class="min-w-full divide-y divide-slate-200 text-sm dark:divide-slate-700">
							<thead class="bg-slate-50 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:bg-slate-800/70 dark:text-slate-300">
								<tr>
									<th class="px-5 py-3 text-left"><?= lang('date') ?></th>
									<th class="px-5 py-3 text-left"><?= lang('trans_id') ?></th>
									<th class="px-5 py-3 text-left"><?= lang('payment_method') ?></th>
									<th class="px-5 py-3 text-right"><?= lang('amount') ?></th>
								</tr>
							</thead>
							<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
								<?php if (!empty($all_payments_history)) { ?>
									<?php foreach ($all_payments_history as $v_payment_history) {
										$payment_method_name = !empty($v_payment_history->payment_method_name) ? $v_payment_history->payment_method_name : $v_payment_history->payment_method;
									?>
										<tr class="transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
											<td class="px-5 py-4 text-slate-700 dark:text-slate-200"><?= display_date($v_payment_history->payment_date) ?></td>
											<td class="px-5 py-4 font-semibold text-slate-900 dark:text-slate-100">
												<a href="<?= base_url() ?>admin/invoice/manage_invoice/payments_details/<?= $v_payment_history->payments_id ?>" class="text-primary hover:underline">
													<?= html_escape($v_payment_history->trans_id) ?>
												</a>
											</td>
											<td class="px-5 py-4 text-slate-700 dark:text-slate-200"><?= !empty($payment_method_name) ? html_escape($payment_method_name) : '-' ?></td>
											<td class="px-5 py-4 text-right font-semibold text-slate-900 dark:text-slate-100"><?= display_money($v_payment_history->amount, $currency_symbol) ?></td>
										</tr>
									<?php } ?>
								<?php } else { ?>
									<tr>
										<td colspan="4" class="px-5 py-8 text-center text-sm text-slate-500 dark:text-slate-400"><?= lang('nothing_to_display') ?></td>
									</tr>
								<?php } ?>
							</tbody>
						</table>
					</div>
					<?php if ($payment_pages > 1) { ?>
						<div class="flex items-center justify-between border-t border-border px-5 py-4 dark:border-slate-700">
							<?php if ($payment_page > 1) { ?>
								<a href="<?= base_url('admin/invoice/manage_invoice/payment/' . $invoice_info->invoices_id) . '?' . http_build_query(array_merge($payment_query, array('payment_page' => $payment_page - 1))) ?>" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200">Prev</a>
							<?php } else { ?>
								<span class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-500">Prev</span>
							<?php } ?>
							<span class="text-sm font-medium text-slate-500 dark:text-slate-300"><?= $payment_page ?> of <?= $payment_pages ?></span>
							<?php if ($payment_page < $payment_pages) { ?>
								<a href="<?= base_url('admin/invoice/manage_invoice/payment/' . $invoice_info->invoices_id) . '?' . http_build_query(array_merge($payment_query, array('payment_page' => $payment_page + 1))) ?>" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200">Next</a>
							<?php } else { ?>
								<span class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-500">Next</span>
							<?php } ?>
						</div>
					<?php } ?>
				</section>
			</section>

			<aside class="xl:sticky xl:top-4 h-fit">
				<section class="overflow-hidden rounded-2xl border border-border bg-card shadow-sm dark:border-slate-700 dark:bg-slate-900">
					<div class="border-b border-border px-5 py-4 dark:border-slate-700">
						<div class="inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] <?= $status_classes ?>">
							<?= html_escape(strtoupper($status_text)) ?>
						</div>
					</div>
					<div class="px-5 py-6 text-center">
						<p class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground"><?= lang('amount') . ' ' . lang('due') ?></p>
						<div class="mt-2 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100"><?= display_money($invoice_due, $currency_symbol) ?></div>
						<div class="mt-5 flex items-center justify-between text-xs font-semibold text-slate-500 dark:text-slate-400">
							<span><?= lang('progress') ?></span>
							<span><?= $payment_progress ?>%</span>
						</div>
						<div class="mt-2 h-2.5 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
							<div class="h-full rounded-full bg-slate-900 dark:bg-slate-100" style="width: <?= (int) $payment_progress ?>%"></div>
						</div>
					</div>
					<div class="border-t border-border px-5 py-5 dark:border-slate-700">
						<div class="space-y-4 text-sm">
							<div class="flex items-center justify-between gap-3">
								<span class="text-slate-500 dark:text-slate-400"><?= lang('total') . ' ' . lang('invoice_amount') ?></span>
								<span class="font-semibold text-slate-900 dark:text-slate-100"><?= display_money($invoice_total, $currency_symbol) ?></span>
							</div>
							<div class="flex items-center justify-between gap-3">
								<span class="text-slate-500 dark:text-slate-400"><?= lang('total') . ' ' . lang('paid_amount') ?></span>
								<span class="font-semibold text-slate-900 dark:text-slate-100"><?= display_money($paid_total, $currency_symbol) ?></span>
							</div>
							<div class="flex items-center justify-between gap-3 border-t border-border pt-4 text-base dark:border-slate-700">
								<span class="font-semibold text-slate-700 dark:text-slate-300"><?= lang('due_amount') ?></span>
								<span class="font-bold text-slate-900 dark:text-slate-100"><?= display_money($invoice_due, $currency_symbol) ?></span>
							</div>
						</div>
					</div>
					<div class="border-t border-border px-5 py-5 dark:border-slate-700">
						<p class="text-[11px] font-bold uppercase tracking-[0.22em] text-muted-foreground"><?= lang('invoice') . ' ' . lang('details') ?></p>
						<div class="mt-4 space-y-3 text-sm">
							<div class="flex items-center justify-between gap-3">
								<span class="text-slate-500 dark:text-slate-400"><?= lang('invoice') . ' ' . lang('no') ?></span>
								<a href="<?= base_url() ?>admin/invoice/manage_invoice/invoice_details/<?= $invoice_info->invoices_id ?>" class="font-semibold text-slate-900 hover:text-primary dark:text-slate-100 dark:hover:text-primary"><?= html_escape($invoice_no) ?></a>
							</div>
							<div class="flex items-center justify-between gap-3">
								<span class="text-slate-500 dark:text-slate-400"><?= lang('issue_date') ?></span>
								<span class="font-semibold text-slate-900 dark:text-slate-100"><?= display_date($invoice_issue_date) ?></span>
							</div>
							<div class="flex items-center justify-between gap-3">
								<span class="text-slate-500 dark:text-slate-400"><?= lang('client') ?></span>
								<a href="<?= base_url() ?>admin/client/details/<?= $invoice_info->client_id ?>" class="font-semibold text-slate-900 hover:text-primary dark:text-slate-100 dark:hover:text-primary"><?= html_escape($client_name) ?></a>
							</div>
						</div>
					</div>
				</section>
			</aside>
		</div>
	</div>
</div>
