<div class="invoice-modern">
	<?= message_box('success') ?>
	<?= message_box('error') ?>

	<?php
	$edited = can_action('13', 'edited');
	$deleted = can_action('13', 'deleted');
	?>

	<div class="space-y-4">
		<div id="payments_state_report_div"></div>

		<div class="rounded-2xl border border-border bg-card shadow-sm">
			<div class="table-responsive p-4">
				<table class="table table-striped DataTables" id="DataTables" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th><?= lang('payment_date') ?></th>
							<th><?= lang('invoice_date') ?></th>
							<th><?= lang('invoice') ?></th>
							<th><?= lang('client') ?></th>
							<th><?= lang('amount') ?></th>
							<th><?= lang('payment_method') ?></th>
							<?php if (!empty($edited) || !empty($deleted)) { ?>
								<th class="col-options no-sort hidden-print text-right"><?= lang('action') ?></th>
							<?php } ?>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>

	<script>
		const PAYMENTS_LIST_BASE_URL = base_url + "admin/invoice/paymentList";
		list = PAYMENTS_LIST_BASE_URL;
		window.erpDatatablePreload = window.erpDatatablePreload || {};
		window.erpDatatablePreload.DataTables = window.erpDatatablePreload.DataTables || {};
		<?php if (!empty($datatable_preload)) { ?>
		window.erpDatatablePreload.DataTables["list"] = <?= json_encode($datatable_preload, JSON_UNESCAPED_SLASHES) ?>;
		<?php } ?>
		let currentPaymentFilter = "";
		let currentPaymentSearchType = "";

		function reloadPayments(filter, searchType) {
			currentPaymentFilter = filter || "";
			currentPaymentSearchType = searchType || "";
			if (currentPaymentSearchType && !currentPaymentFilter) {
				currentPaymentSearchType = "";
			}
			var url = PAYMENTS_LIST_BASE_URL;
			if (filter) {
				url += "/" + encodeURIComponent(currentPaymentFilter);
				if (currentPaymentSearchType) {
					url += "/" + encodeURIComponent(currentPaymentSearchType);
				}
			}
			list = url;
			if (typeof table_url === "function") {
				table_url(url);
			} else if (typeof fire_datatable === "function") {
				fire_datatable(url, "DataTables");
			}
		}

		$(function () {
			window.paymentsInvoiceFilter = function (id) {
				reloadPayments(id, 'by_invoice');
			};
			window.paymentsAccountFilter = function (id) {
				reloadPayments(id, 'by_account');
			};
			window.paymentsClientFilter = function (id) {
				reloadPayments(id, 'by_client');
			};

			$(document).on('click', '[data-payment-filter-action]', function (e) {
				e.preventDefault();
				const $item = $(this);
				const $dropdown = $item.closest('details');
				$dropdown.find('[data-header-filter-item]').removeClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300');
				$dropdown.find('[data-header-filter-item]').addClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
				$item.addClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300');
				$item.removeClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
				$dropdown.find('[data-header-filter-selected]').text($item.data('payment-filter-label') || '<?= html_escape(lang('all')) ?>');
				$dropdown.prop('open', false);
				reloadPayments($item.data('payment-filter') || '', $item.data('payment-search') || '');
			});

			if (typeof fire_datatable === "function") {
				fire_datatable(list);
			}

			if (window.ins_data) {
				window.ins_data(base_url + 'admin/invoice/payments_state_report');
			}
		});
	</script>
</div>
