<?php echo message_box('success') ?>
<?php echo message_box('error') ?>
<?php
$payment_method = get_result('tbl_online_payment');
$gateway_descriptions = array(
	'paypal' => 'Global checkout, subscription billing and account-based payments.',
	'stripe' => 'Card-first payment infrastructure with strong developer support.',
	'razorpay' => 'Popular South Asia gateway for cards, bank transfers and local methods.',
	'2checkout' => 'Cross-border payment collection with checkout and subscription support.',
	'authorize.net' => 'Enterprise-ready card gateway for secure merchant processing.',
);
$active_gateways = 0;
foreach ($payment_method as $gateway_item) {
	$gateway_status = $this->config->item(slug_it(strtolower($gateway_item->gateway_name)) . '_status');
	if ($gateway_status === 'active') {
		$active_gateways++;
	}
}
$selected_gateway_name = !empty($payment) ? $payment : '';
$selected_gateway_slug = !empty($payment) ? slug_it(strtolower($payment)) : '';
$selected_gateway_status = !empty($payment) ? $this->config->item($selected_gateway_slug . '_status') : '';
$payment_info = !empty($payment) ? get_row('tbl_online_payment', array('gateway_name' => $payment)) : null;
$render_gateway_icon = function ($gateway_name, $icon, $size_classes = 'h-10 w-10') {
	$gateway_name = !empty($gateway_name) ? $gateway_name : 'Gateway';
	$icon = !empty($icon) ? trim($icon) : '';
	$is_remote_icon = !empty($icon) && preg_match('/^https?:\/\//i', $icon);
	$local_icon_path = !$is_remote_icon && !empty($icon) ? FCPATH . ltrim($icon, '/') : '';
	$has_icon = $is_remote_icon || (!empty($local_icon_path) && is_file($local_icon_path));
	if ($has_icon) {
		return '<img class="' . $size_classes . ' object-contain" src="' . ($is_remote_icon ? html_escape($icon) : base_url($icon)) . '" alt="' . html_escape($gateway_name) . '">';
	}
	$initial = strtoupper(substr($gateway_name, 0, 1));
	return '<div class="flex ' . $size_classes . ' items-center justify-center rounded-xl bg-primary/10 text-sm font-bold text-primary">' . html_escape($initial) . '</div>';
};
$configured_fields = 0;
if (!empty($payment_info)) {
	for ($key = 1; $key <= 5; $key++) {
		$field_key = 'field_' . $key;
		if (!empty($payment_info->$field_key)) {
			$configured_fields++;
		}
	}
}
?>

<div class="space-y-6">
	<div class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
		<div class="relative px-6 py-6 md:px-8">
			<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_35%),radial-gradient(circle_at_bottom_left,rgba(16,185,129,0.12),transparent_30%)]"></div>
			<div class="relative flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
				<div class="space-y-3">
					<p class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground"><?= lang('settings') ?></p>
					<div class="space-y-2">
						<h1 class="text-2xl font-semibold tracking-tight text-foreground">
							<?= lang('payment_settings') ?><?php if (!empty($payment)) {
																echo ' ' . lang('for') . ' ' . html_escape($payment);
															} ?>
						</h1>
						<p class="max-w-3xl text-sm leading-6 text-muted-foreground">
							Configure ERP payment gateways, manage live availability, and secure merchant credentials for invoice collections, online payments and client checkout flows.
						</p>
					</div>
					<div class="flex flex-wrap gap-2">
						<span class="inline-flex items-center rounded-full border border-border bg-background/80 px-3 py-1 text-xs font-semibold text-foreground">
							<?= count($payment_method) ?> <?= lang('gateway_name') ?>
						</span>
						<span class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300">
							<?= $active_gateways ?> <?= lang('active') ?>
						</span>
						<?php if (!empty($payment)) { ?>
							<span class="inline-flex items-center rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300">
								<?= 'Editing: ' . html_escape($payment) ?>
							</span>
						<?php } ?>
					</div>
				</div>
				<div class="grid w-full gap-3 sm:grid-cols-2 2xl:grid-cols-3 xl:max-w-xl">
					<div class="rounded-2xl border border-border bg-background/80 px-4 py-4">
						<div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('active') ?></div>
						<div class="mt-2 text-2xl font-semibold text-foreground"><?= $active_gateways ?></div>
						<div class="text-xs text-muted-foreground">Live gateways</div>
					</div>
					<div class="rounded-2xl border border-border bg-background/80 px-4 py-4">
						<div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('status') ?></div>
						<div class="mt-2 text-2xl font-semibold text-foreground"><?= !empty($selected_gateway_status) ? lang($selected_gateway_status) : 'Ready' ?></div>
						<div class="text-xs text-muted-foreground"><?= !empty($payment) ? html_escape($payment) : 'Select gateway' ?></div>
					</div>
					<div class="rounded-2xl border border-border bg-background/80 px-4 py-4">
						<div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('field') ?></div>
						<div class="mt-2 text-2xl font-semibold text-foreground"><?= $configured_fields ?></div>
						<div class="text-xs text-muted-foreground">Gateway configuration inputs</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<?php if (!empty($payment)) : ?>
		<div class="grid gap-6 xl:grid-cols-[minmax(0,1.45fr)_360px]">
			<div class="rounded-3xl border border-border bg-card shadow-sm">
				<div class="flex flex-col gap-4 border-b border-border px-6 py-5 md:flex-row md:items-center md:justify-between">
					<div>
						<h2 class="text-lg font-semibold text-foreground"><?= html_escape($payment) ?> Configuration</h2>
						<p class="text-sm text-muted-foreground">Update merchant credentials, environment behavior and gateway visibility for client-facing invoice payments.</p>
					</div>
					<a href="<?= base_url('admin/settings/payments') ?>" class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-muted">
						<i data-lucide="arrow-left" class="h-4 w-4"></i>
						<?= lang('back') ?>
					</a>
				</div>
				<form role="form" id="form" action="<?php echo base_url(); ?>admin/settings/save_payments/<?= $payment ?>" method="post" enctype="multipart/form-data" class="p-6">
					<input type="hidden" name="settings" value="<?= $load_setting ?>">
					<div class="grid gap-4 2xl:grid-cols-2">
						<?php
						if (!empty($payment_info)) {
							for ($key = 1; $key <= 5; $key++) {
								$field = 'field_' . $key;
								if (!empty($payment_info->$field)) {
									echo get_form_field($payment_info->$field);
								}
							}
						}
						?>
					</div>
					<div class="mt-4 rounded-2xl border border-border bg-background/60 p-4">
						<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
							<div class="flex items-center gap-4">
								<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl border border-border bg-card">
									<?= $render_gateway_icon($payment, !empty($payment_info->icon) ? $payment_info->icon : '', 'h-10 w-10') ?>
								</div>
								<div>
									<label for="payment_icon" class="text-sm font-medium text-foreground">Gateway icon</label>
									<p class="mt-1 text-xs leading-5 text-muted-foreground">Upload a square PNG, JPG, WEBP, GIF or SVG logo for this payment gateway.</p>
								</div>
							</div>
							<div class="w-full max-w-md">
								<input type="file" id="payment_icon" name="payment_icon" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-1 file:text-primary focus:border-primary focus:outline-none">
							</div>
						</div>
					</div>
					<div class="rounded-2xl border border-border bg-background/60 p-4 mt-3">
						<div class="flex flex-col gap-4 2xl:flex-row 2xl:items-end 2xl:justify-between">
							<div class="max-w-md">
								<?= form_select_group(
									$selected_gateway_slug . '_status',
									lang('status'),
									array('active' => lang('active'), 'deactive' => lang('deactive')),
									$selected_gateway_status,
									true
								) ?>
							</div>
							<div class="flex flex-wrap items-center 2xl:justify-end gap-3">
								<span class="text-xs text-muted-foreground">Changes apply to invoice checkout and online payment collections.</span>
								<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90">
									<i data-lucide="save" class="h-4 w-4"></i>
									<?= lang('save_changes') ?>
								</button>
							</div>
						</div>
					</div>
				</form>
			</div>

			<div class="space-y-6">
				<div class="rounded-3xl border border-border bg-card shadow-sm">
					<div class="border-b border-border px-6 py-5">
						<h3 class="text-base font-semibold text-foreground">Gateway overview</h3>
						<p class="text-sm text-muted-foreground"><?= html_escape($payment) ?> profile and deployment readiness.</p>
					</div>
					<div class="space-y-5 p-6">
						<div class="flex items-center gap-4">
							<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl border border-border bg-background">
								<?= $render_gateway_icon($payment, !empty($payment_info->icon) ? $payment_info->icon : '', 'h-10 w-10') ?>
							</div>
							<div class="min-w-0">
								<div class="text-lg font-semibold text-foreground"><?= html_escape($payment) ?></div>
								<div class="mt-1 text-sm text-muted-foreground">
									<?= isset($gateway_descriptions[$selected_gateway_slug]) ? $gateway_descriptions[$selected_gateway_slug] : 'Use this gateway to collect ERP invoice payments through your configured merchant account.' ?>
								</div>
							</div>
						</div>
						<div class="grid gap-3 sm:grid-cols-2">
							<div class="rounded-2xl border border-border bg-background px-4 py-4">
								<div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('status') ?></div>
								<div class="mt-2 text-sm font-semibold <?= $selected_gateway_status === 'active' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-300' ?>">
									<?php

									if ($selected_gateway_status === 'active') {
										echo lang('active');
									} elseif ($selected_gateway_status === 'deactive') {
										echo lang('deactive');
									} else {
										echo 'Ready for setup';
									}
									?>
								</div>
							</div>
							<div class="rounded-2xl border border-border bg-background px-4 py-4">
								<div class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('field') ?></div>
								<div class="mt-2 text-sm font-semibold text-foreground"><?= $configured_fields ?> configured items</div>
							</div>
						</div>
						<div class="rounded-2xl border border-border bg-background px-4 py-4">
							<div class="flex items-center gap-2 text-sm font-semibold text-foreground">
								<i data-lucide="shield-check" class="h-4 w-4 text-emerald-500"></i>
								Security notes
							</div>
							<ul class="mt-3 space-y-2 text-sm leading-6 text-muted-foreground">
								<li>Keep API secrets limited to production admins only.</li>
								<li>Rotate keys after merchant account changes or access transitions.</li>
								<li>Use sandbox credentials first before switching the gateway live.</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	<?php endif ?>

	<div class="rounded-3xl border border-border bg-card shadow-sm">
		<div class="flex flex-col gap-4 border-b border-border px-6 py-5 md:flex-row md:items-center md:justify-between">
			<div>
				<h2 class="text-lg font-semibold text-foreground">Payment gateways</h2>
				<p class="text-sm text-muted-foreground">Review all installed processors and jump directly into configuration for PayPal, Stripe and other ERP collection channels.</p>
			</div>
			<div class="inline-flex items-center w-40 justify-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-muted-foreground">
				<i data-lucide="wallet-cards" class="h-4 w-4"></i>
				<?= $active_gateways . ' / ' . count($payment_method) . ' ' . lang('active') ?>
			</div>
		</div>
		<div class="p-6">
			<div class="grid gap-4 md:grid-cols-2">
				<?php foreach ($payment_method as $v_payments) {
					$gateway_slug = slug_it(strtolower($v_payments->gateway_name));
					$status = $this->config->item($gateway_slug . '_status');
					$is_selected = !empty($payment) && strtolower($payment) === strtolower($v_payments->gateway_name);
				?>
					<div class="group rounded-2xl border <?= $is_selected ? 'border-primary bg-primary/5' : 'border-border bg-background/60' ?> p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
						<div class="flex items-start justify-between gap-4">
							<div class="flex items-center gap-4 min-w-0">
								<div class="flex shrink-0 h-14 w-14 items-center justify-center rounded-2xl border border-border bg-card">
									<?= $render_gateway_icon($v_payments->gateway_name, $v_payments->icon, 'h-9 w-9') ?>
								</div>
								<div class="min-w-0">
									<div class="truncate text-base font-semibold text-foreground"><?= html_escape($v_payments->gateway_name); ?></div>
									<div class="mt-1 text-sm text-muted-foreground">
										<?= isset($gateway_descriptions[$gateway_slug]) ? $gateway_descriptions[$gateway_slug] : 'Manage payment routing, credentials and invoice collection availability.' ?>
									</div>
								</div>
							</div>
							<span class="inline-flex shrink-0 items-center rounded-full px-2.5 py-1 text-[11px] font-semibold <?= $status === 'active' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' : 'bg-slate-100 text-slate-600 dark:bg-slate-500/15 dark:text-slate-300' ?>">
								<?php
								if ($status === 'active') {
									echo lang('active');
								} elseif ($status === 'deactive') {
									echo lang('deactive');
								} else {
									echo 'Ready for setup';
								}
								?>
							</span>
						</div>
						<div class="mt-5 flex items-center justify-between">
							<div class="text-xs text-muted-foreground"><?= $status === 'active' ? 'Ready for live collection' : 'Requires configuration review' ?></div>
							<a data-toggle="tooltip" title="<?= lang('edit') ?>" class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-foreground transition hover:bg-muted" href="<?= base_url() ?>admin/settings/payments/<?= $v_payments->gateway_name ?>">
								<i data-lucide="settings-2" class="h-4 w-4"></i>
								<?= $is_selected ? 'Editing' : 'Configure' ?>
							</a>
						</div>
					</div>
				<?php } ?>
			</div>
		</div>
	</div>
</div>
