<?php
$batch_rows = (array) ($batch_rows ?? array());
$batch_page = (int) ($batch_page ?? 1);
$batch_per_page = (int) ($batch_per_page ?? 10);
$batch_total_pages = (int) ($batch_total_pages ?? 1);
$batch_total_invoices = (int) ($batch_total_invoices ?? 0);
$batch_draft_total = (float) ($batch_draft_total ?? 0);
$batch_showing_start = $batch_total_invoices > 0 ? (($batch_page - 1) * $batch_per_page) + 1 : 0;
$batch_showing_end = min($batch_total_invoices, $batch_page * $batch_per_page);
$payment_method_options = array('' => lang('select') . ' ' . lang('payment_method'));
foreach ((array) ($payment_methods ?? array()) as $payment_method) {
	$payment_method_options[(string) $payment_method->payment_methods_id] = $payment_method->method_name;
}
$page_window_start = max(1, $batch_page - 2);
$page_window_end = min($batch_total_pages, $page_window_start + 4);
$page_window_start = max(1, $page_window_end - 4);
?>

<div class="invoice-batch-modal text-slate-800 dark:text-slate-200" data-batch-payment-modal>
	<form action="<?= base_url('client/invoice/save_batch_payments') ?>" method="post" class="flex flex-col gap-5" data-batch-payment-form data-draft-url="<?= base_url('client/invoice/save_batch_payment_draft') ?>" data-page-url="<?= base_url('client/invoice/batch_payment') ?>">
		<input type="hidden" name="redirect_to" value="<?= html_escape($redirect_to ?? base_url('client/invoice/all_payments')) ?>">

		<div class="flex flex-col items-stretch justify-between gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-5 lg:flex-row lg:items-center dark:border-slate-700 dark:bg-slate-900/70">
			<div class="flex flex-col gap-1">
				<h4 class="m-0 text-base font-bold tracking-tight text-slate-800 dark:text-slate-100">Batch Payment</h4>
				<p class="m-0 text-sm text-slate-500 dark:text-slate-400">Outstanding invoices are loaded in small pages for quick payment entry.</p>
			</div>
			<div class="flex min-w-[17rem] items-stretch overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800 lg:w-auto w-full">
				<span class="grid flex-1 gap-0.5 border-r border-slate-200 px-4 py-3 text-[11px] uppercase tracking-[0.11em] text-slate-500 dark:border-slate-700 dark:text-slate-400">
					<span><?= lang('outstanding') . ' ' . lang('invoice') ?></span>
					<strong class="text-base font-bold tracking-tight text-slate-800 dark:text-slate-100"><?= $batch_total_invoices ?></strong>
				</span>
				<span class="grid flex-1 gap-0.5 px-4 py-3 text-[11px] uppercase tracking-[0.11em] text-slate-500 dark:text-slate-400">
					<span><?= lang('total') ?></span>
					<strong class="text-base font-bold tracking-tight text-slate-800 dark:text-slate-100" data-batch-selected-total><?= number_format($batch_draft_total, 2) ?></strong>
				</span>
			</div>
		</div>

		<div class="flex flex-col items-stretch justify-between gap-3 rounded-2xl border border-slate-200 bg-white/90 p-3 lg:flex-row lg:items-center dark:border-slate-700 dark:bg-slate-900/60">
			<div class="flex items-center gap-2.5">
				<label for="batchPaymentPageSize" class="text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-slate-400"><?= lang('show') ?></label>
				<select id="batchPaymentPageSize" class="h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-700">
					<option value="10" <?= $batch_per_page === 10 ? 'selected' : '' ?>>10</option>
					<option value="25" <?= $batch_per_page === 25 ? 'selected' : '' ?>>25</option>
					<option value="50" <?= $batch_per_page === 50 ? 'selected' : '' ?>>50</option>
				</select>
			</div>
			<div class="flex flex-wrap items-center gap-2.5">
				<button type="button" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 sm:w-auto dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70" data-batch-fill-visible>
					<i data-lucide="wand-2" class="h-3.5 w-3.5"></i>
					<?= lang('fill') . ' ' . lang('due') ?>
				</button>
				<button type="button" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 sm:w-auto dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70" data-batch-clear-visible>
					<i data-lucide="rotate-ccw" class="h-3.5 w-3.5"></i>
					<?= lang('clear') ?>
				</button>
			</div>
		</div>

		<?php if (empty($batch_rows)) { ?>
			<div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-10 text-center dark:border-slate-600 dark:bg-slate-900/50">
				<h4 class="m-0 text-base font-bold text-slate-900 dark:text-slate-100"><?= lang('no_data') ?></h4>
				<p class="mt-2 text-sm text-slate-500 dark:text-slate-400"><?= lang('nothing_to_display') ?></p>
			</div>
		<?php } else { ?>
			<div class="flex flex-col gap-4">
				<div class="overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/50">
					<table class="min-w-[980px] w-full border-separate border-spacing-0" data-batch-payment-table>
						<thead>
							<tr>
								<th class="sticky top-0 z-[1] w-12 border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800"></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('invoice') ?></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('payment_date') ?></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('payment_method') ?></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('trans_id') ?></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-left text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('amount') ?></th>
								<th class="sticky top-0 z-[1] border-b border-slate-200 bg-slate-50 px-4 py-3 text-right text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= lang('due') ?></th>
							</tr>
						</thead>
						<tbody data-batch-table-body>
							<?php foreach ($batch_rows as $row) {
								$has_amount = isset($row['amount']) && $row['amount'] !== '' && (float) $row['amount'] > 0;
								?>
								<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/70" data-batch-row data-invoice-id="<?= (int) $row['invoices_id'] ?>" data-due-amount="<?= number_format((float) $row['due_amount'], 2, '.', '') ?>">
									<td class="align-middle border-b border-slate-100 bg-white px-4 py-4 dark:border-slate-800 dark:bg-slate-900">
										<input type="hidden" name="invoice_ids[]" value="<?= (int) $row['invoices_id'] ?>">
										<input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 focus:ring-slate-500 dark:border-slate-600 dark:bg-slate-800" data-batch-select <?= $has_amount ? 'checked' : '' ?>>
									</td>
									<td class="align-top border-b border-slate-100 bg-white px-4 py-4 text-sm dark:border-slate-800 dark:bg-slate-900">
										<div class="flex flex-col gap-1 pr-2">
											<a href="<?= base_url('client/invoice/manage_invoice/invoice_details/' . (int) $row['invoices_id']) ?>" target="_blank" class="text-base font-bold leading-5 text-slate-800 hover:text-slate-600 hover:underline dark:text-slate-100">
												<?= html_escape($row['reference_no']) ?>
											</a>
											<span class="text-xs text-slate-500 dark:text-slate-400"><?= display_date($row['invoice_date']) ?> · <?= lang('due') ?> <?= display_date($row['due_date']) ?></span>
										</div>
									</td>
									<td class="align-middle border-b border-slate-100 bg-white px-4 py-4 text-sm dark:border-slate-800 dark:bg-slate-900">
										<?= form_input(array(
											'name' => 'payment_date[' . (int) $row['invoices_id'] . ']',
											'value' => $row['payment_date'],
											'class' => 'ts-datepicker h-11 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-700',
											'data-type' => 'date',
											'data-format' => config_item('date_picker_format'),
											'autocomplete' => 'off',
										)); ?>
									</td>
									<td class="align-middle border-b border-slate-100 bg-white px-4 py-4 text-sm dark:border-slate-800 dark:bg-slate-900">
										<?= form_dropdown('payment_methods_id[' . (int) $row['invoices_id'] . ']', $payment_method_options, $row['payment_methods_id'], 'class="h-11 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-700" required'); ?>
									</td>
									<td class="align-middle border-b border-slate-100 bg-white px-4 py-4 text-sm dark:border-slate-800 dark:bg-slate-900">
										<?= form_input(array(
											'name' => 'trans_id[' . (int) $row['invoices_id'] . ']',
											'value' => $row['trans_id'],
											'class' => 'h-11 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-700',
											'autocomplete' => 'off',
										)); ?>
									</td>
									<td class="align-middle border-b border-slate-100 bg-white px-4 py-4 text-sm dark:border-slate-800 dark:bg-slate-900">
										<?= form_input(array(
											'name' => 'amount[' . (int) $row['invoices_id'] . ']',
											'value' => $row['amount'],
											'class' => 'h-11 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-right text-sm font-semibold text-slate-700 shadow-sm transition focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-slate-400 dark:focus:ring-slate-700',
											'type' => 'number',
											'step' => '0.01',
											'min' => '0',
											'max' => number_format((float) $row['due_amount'], 2, '.', ''),
											'data-batch-amount' => '1',
											'placeholder' => '0.00',
										)); ?>
									</td>
									<td class="border-b border-slate-100 bg-white px-4 py-4 text-right text-sm dark:border-slate-800 dark:bg-slate-900">
										<strong class="text-base text-slate-900 dark:text-slate-100"><?= display_money((float) $row['due_amount'], $row['currency_symbol']) ?></strong>
									</td>
								</tr>
							<?php } ?>
						</tbody>
					</table>
				</div>

				<div class="flex flex-col items-center justify-between gap-4 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-900/50 lg:flex-row">
					<div class="text-sm text-slate-600 dark:text-slate-400">
						<?= lang('showing') ?> <span class="font-semibold"><?= $batch_showing_start ?></span>-<span class="font-semibold"><?= $batch_showing_end ?></span> <?= lang('of') ?> <span class="font-semibold"><?= $batch_total_invoices ?></span>
					</div>
					<div class="flex flex-wrap items-center justify-center gap-2">
						<button type="button" class="inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg border border-slate-300 bg-white text-sm font-semibold text-slate-600 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70" data-batch-nav-url="<?= base_url('client/invoice/batch_payment?page=' . max(1, $batch_page - 1) . '&per_page=' . $batch_per_page . '&keep=1') ?>" <?= $batch_page <= 1 ? 'disabled' : '' ?>>
							<i data-lucide="chevron-left" class="h-4 w-4"></i>
						</button>
						<?php for ($i = $page_window_start; $i <= $page_window_end; $i++) { ?>
							<button type="button" class="inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg border text-sm font-semibold transition <?= $i === $batch_page ? 'border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900' : 'border-slate-300 bg-white text-slate-600 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70' ?>" data-batch-nav-url="<?= base_url('client/invoice/batch_payment?page=' . $i . '&per_page=' . $batch_per_page . '&keep=1') ?>">
								<?= $i ?>
							</button>
						<?php } ?>
						<button type="button" class="inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg border border-slate-300 bg-white text-sm font-semibold text-slate-600 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70" data-batch-nav-url="<?= base_url('client/invoice/batch_payment?page=' . min($batch_total_pages, $batch_page + 1) . '&per_page=' . $batch_per_page . '&keep=1') ?>" <?= $batch_page >= $batch_total_pages ? 'disabled' : '' ?>>
							<i data-lucide="chevron-right" class="h-4 w-4"></i>
						</button>
					</div>
				</div>
			</div>
		<?php } ?>

		<div class="flex flex-col items-start justify-between gap-4 border-t border-slate-200 pt-2 lg:flex-row lg:items-center dark:border-slate-700">
			<p class="m-0 text-sm text-slate-500 dark:text-slate-400"><?= lang('select') . ' ' . lang('invoice') ?>, enter amount, then apply the payment.</p>
			<div class="flex w-full flex-wrap items-center gap-2.5 lg:w-auto">
				<button type="button" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-600 transition hover:bg-slate-50 sm:w-auto dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700/70" data-dismiss="modal">
					<i data-lucide="x" class="h-3.5 w-3.5"></i>
					<?= lang('cancel') ?>
				</button>
				<button type="submit" class="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-slate-900 bg-slate-900 px-4 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 sm:w-auto dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300">
					<i data-lucide="check" class="h-3.5 w-3.5"></i>
					<?= lang('make_payment') ?>
				</button>
			</div>
		</div>
	</form>
</div>
