<?php
defined('BASEPATH') or exit('No direct script access allowed');
$site_name = config_item('website_name') ?: (config_item('company_name') ?: 'Zisco ERP');
$site_initial = strtoupper(substr(trim((string) $site_name), 0, 1));
?>
<!DOCTYPE html>
<html lang="en" class="h-full">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title><?php echo isset($title) ? html_escape($title) : 'Register'; ?> | <?php echo html_escape($site_name); ?></title>
	<link rel="stylesheet" href="<?php echo base_url('assets/css/tailwind.generated.css'); ?>">
	<link rel="stylesheet" href="<?php echo base_url('assets/css/app.css'); ?>">
	<style>
		body {
			font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
		}
	</style>
</head>

<body class="h-full bg-gradient-to-br from-slate-900 via-slate-950 to-black text-slate-50">
	<div class="min-h-full flex items-center justify-center px-4 py-12">
		<div class="w-full max-w-2xl">
			<div class="bg-slate-900/60 border border-white/10 rounded-2xl shadow-2xl shadow-primary/20 backdrop-blur-xl p-8">
				<div class="flex items-center justify-between mb-6">
					<div>
						<p class="text-xs uppercase tracking-[0.4em] text-primary/80">Client registration</p>
						<h1 class="text-2xl font-bold mt-1 text-white">Create client company</h1>
					</div>
					<div class="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-indigo-400 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-primary/40">
						<?php echo html_escape($site_initial); ?>
					</div>
				</div>

				<?php if (!empty($error) || validation_errors()): ?>
					<div class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 text-red-100 px-4 py-3 text-sm">
						<?php
						echo $error ? html_escape($error) . '<br>' : '';
						echo validation_errors();
						?>
					</div>
				<?php endif; ?>

				<form action="<?php echo site_url('login/register'); ?>" method="post" class="space-y-5">
					<?php if (config_item('csrf_protection')): ?>
						<input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
					<?php endif; ?>

					<div class="grid gap-4 md:grid-cols-2">
						<div class="space-y-2">
							<label for="company_name" class="text-sm font-medium text-slate-200">Company name</label>
							<input id="company_name" name="company_name" type="text" value="<?php echo html_escape(set_value('company_name')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="fullname" class="text-sm font-medium text-slate-200">Primary contact name</label>
							<input id="fullname" name="fullname" type="text" value="<?php echo html_escape(set_value('fullname')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="email" class="text-sm font-medium text-slate-200">Email</label>
							<input id="email" name="email" type="email" value="<?php echo html_escape(set_value('email')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="username" class="text-sm font-medium text-slate-200">Username</label>
							<input id="username" name="username" type="text" value="<?php echo html_escape(set_value('username')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="password" class="text-sm font-medium text-slate-200">Password</label>
							<input id="password" name="password" type="password" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="confirm_password" class="text-sm font-medium text-slate-200">Confirm password</label>
							<input id="confirm_password" name="confirm_password" type="password" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition" required>
						</div>
						<div class="space-y-2">
							<label for="phone" class="text-sm font-medium text-slate-200">Phone</label>
							<input id="phone" name="phone" type="text" value="<?php echo html_escape(set_value('phone')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition">
						</div>
						<div class="space-y-2">
							<label for="website" class="text-sm font-medium text-slate-200">Website</label>
							<input id="website" name="website" type="url" value="<?php echo html_escape(set_value('website')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition">
						</div>
					</div>

					<div class="grid gap-4 md:grid-cols-3">
						<div class="space-y-2 md:col-span-3">
							<label for="address" class="text-sm font-medium text-slate-200">Address</label>
							<input id="address" name="address" type="text" value="<?php echo html_escape(set_value('address')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition">
						</div>
						<div class="space-y-2">
							<label for="city" class="text-sm font-medium text-slate-200">City</label>
							<input id="city" name="city" type="text" value="<?php echo html_escape(set_value('city')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition">
						</div>
						<div class="space-y-2">
							<label for="country" class="text-sm font-medium text-slate-200">Country</label>
							<input id="country" name="country" type="text" value="<?php echo html_escape(set_value('country')); ?>" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-400 focus:border-primary focus:ring-2 focus:ring-primary/50 transition">
						</div>
					</div>

					<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
						<a href="<?php echo site_url('login'); ?>" class="text-sm text-slate-400 hover:text-primary transition">Already have an account?</a>
						<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-primary/40 transition hover:translate-y-[-1px] hover:shadow-primary/60 focus:outline-none focus:ring-2 focus:ring-primary/60">
							Create account
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>

</html>
