<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>Login - Visores</title>
	<style>
		:root {
			--bg: #4d74c3;
			--card: rgba(255,255,255,0.18);
			--card-border: rgba(255,255,255,0.22);
			--ink: #ffffff;
			--field-bg: #ffffff;
			--field-ink: #173246;
			--accent: #5f8fa8;
			--accent-ink: #ffffff;
			--accent-ghost: rgba(255,255,255,0.18);
			--accent-ghost-border: rgba(255,255,255,0.28);
			--error-bg: rgba(95, 20, 20, 0.24);
			--error-border: rgba(255,255,255,0.28);
		}
		* { box-sizing: border-box; }
		body {
			margin: 0;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 24px 18px;
			background:
				radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 30%),
				var(--bg);
			color: var(--ink);
			font-family: "Trebuchet MS", Arial, sans-serif;
		}
		.shell { width: 100%; max-width: 420px; }
		.brand { text-align: center; margin-bottom: 22px; }
		.brand h1 { margin: 0; font-size: 34px; letter-spacing: 0.5px; }
		.brand p { margin: 8px 0 0; opacity: 0.9; }
		.card {
			background: var(--card);
			border: 1px solid var(--card-border);
			border-radius: 28px;
			padding: 24px 20px;
			backdrop-filter: blur(8px);
			box-shadow: 0 16px 30px rgba(19, 34, 54, 0.18);
		}
		.field { margin-top: 16px; }
		.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
		.field input {
			width: 100%;
			border: 0;
			border-radius: 14px;
			padding: 14px 16px;
			background: var(--field-bg);
			color: var(--field-ink);
			font: inherit;
		}
		.field input:focus { outline: 3px solid rgba(95, 143, 168, 0.25); }
		.btn {
			display: block;
			width: 100%;
			margin-top: 24px;
			border: 0;
			border-radius: 18px;
			padding: 16px 20px;
			background: var(--accent);
			color: var(--accent-ink);
			font: inherit;
			font-size: 18px;
			font-weight: 700;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
		}
		.btn-secondary {
			margin-top: 12px;
			background: var(--accent-ghost);
			border: 1px solid var(--accent-ghost-border);
			color: #ffffff;
		}
		.notice {
			margin-bottom: 14px;
			padding: 14px 16px;
			border-radius: 16px;
			background: var(--error-bg);
			border: 1px solid var(--error-border);
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="shell">
		<div class="brand">
			<h1><?php echo htmlspecialchars(isset($company_name) ? $company_name : 'Time Store', ENT_QUOTES, 'UTF-8'); ?></h1>
			<p>Panel Supervisor</p>
		</div>

		<div class="card">
			<?php if (!empty($error)) { ?>
				<div class="notice"><?php echo htmlspecialchars($error, ENT_QUOTES, 'UTF-8'); ?></div>
			<?php } ?>

			<form method="post" action="<?php echo site_url('login'.(!empty($continue) ? '?continue='.rawurlencode($continue) : '')); ?>">
				<input type="hidden" name="continue" value="<?php echo htmlspecialchars($continue, ENT_QUOTES, 'UTF-8'); ?>" />
				<div class="field">
					<label for="username">Usuario</label>
					<input id="username" type="text" name="username" value="<?php echo htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); ?>" autocomplete="username" required />
				</div>
				<div class="field">
					<label for="password">Contrasena</label>
					<input id="password" type="password" name="password" autocomplete="current-password" required />
				</div>
				<button class="btn" type="submit">Entrar a Visores</button>
			</form>

			<a class="btn btn-secondary" href="<?php echo site_url('../visor'); ?>">Ir a Visor</a>
		</div>
	</div>
</body>
</html>
