<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** ADMIN LOGIN PAGE (standalone — no admin shell) */
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sign In — Bloom Iris Admin</title>
	<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="<?= asset_url('css/admin.css') ?>">
	<link rel="icon" type="image/png" href="<?= asset_url('img/favicon.png') ?>">
	<style>
		.fld-password {
			position: relative;
		}
		.fld-password input {
			padding-right: 2.8rem;
		}
		.toggle-pw {
			position: absolute;
			right: 0.75rem;
			top: 50%;
			transform: translateY(-50%);
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
			color: #9ca3af;
			display: flex;
			align-items: center;
			transition: color 0.2s;
		}
		.toggle-pw:hover {
			color: #4b5563;
		}
		.toggle-pw svg {
			pointer-events: none;
		}
	</style>
</head>
<body>
<div class="login-wrap">
	<div class="login-card">
		<div class="brand">
			<span class="mark">b</span>
			<h1>Bloom Iris Admin</h1>
			<span class="sub">Sign in to manage your creative agency</span>
		</div>
		<?= flash() ?>
		<?= val_errors() ?>
		<form action="<?= base_url('admin/login/submit') ?>" method="post">
			<?= form_hidden($this->security->get_csrf_token_name(), $this->security->get_csrf_hash()) ?>
			<div class="form-grid">
				<div class="fld">
					<label>Email Address</label>
					<input type="email" name="email" value="<?= set_value('email') ?>" placeholder="you@bloomiris.com" required autofocus>
				</div>
				<div class="fld">
					<label>Password</label>
					<div class="fld-password">
						<input type="password" id="password" name="password" placeholder="••••••••" required>
						<button type="button" class="toggle-pw" id="togglePw" aria-label="Toggle password visibility">
							<!-- Eye icon (shown when password is hidden) -->
							<svg id="icon-eye" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
								<circle cx="12" cy="12" r="3"/>
							</svg>
							<!-- Eye-off icon (shown when password is visible) -->
							<svg id="icon-eye-off" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
								<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
								<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
								<line x1="1" y1="1" x2="23" y2="23"/>
							</svg>
						</button>
					</div>
				</div>
				<button type="submit" class="btn btn-primary btn-block">
					<?= bloom_icon('logout', 16) ?> Sign In
				</button>
			</div>
		</form>
		<p class="muted" style="text-align:center;margin-top:20px;font-size:.8rem;">
			Bloom Iris Agency &copy; <?= date('Y') ?>
		</p>
	</div>
</div>
<script>
	(function () {
		const btn     = document.getElementById('togglePw');
		const input   = document.getElementById('password');
		const eyeOn   = document.getElementById('icon-eye');
		const eyeOff  = document.getElementById('icon-eye-off');

		btn.addEventListener('click', function () {
			const isHidden = input.type === 'password';

			input.type      = isHidden ? 'text' : 'password';
			eyeOn.style.display  = isHidden ? 'none'  : '';
			eyeOff.style.display = isHidden ? ''      : 'none';

			btn.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password');

			// Return focus to the input so the user can keep typing
			input.focus();
		});
	})();
</script>
</body>
</html>