<!DOCTYPE html>
<html lang="en">
<head>
    <title>Admin Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

    <style>
        body {
            background-color: #ffd966; /* yellow background */
            height: 100vh;
        }
        .login-box {
            margin-top: 60px;
        }
        .login-card {
            background: #fff;
            border-radius: 6px;
            padding: 25px;
            box-shadow: 0 0 10px rgba(0,0,0,.2);
        }
        .login-logo img {
            max-width: 100%;
            border: 2px solid #0056ff;
        }
        .login-title {
            color: red;
            font-weight: bold;
            text-align: center;
            margin-top: 15px;
        }
		
		.error
		{
			color:red;
			font-weight:bold;
		}
    </style>
</head>

<body>

<div class="container">
    <div class="row justify-content-center login-box">
        <div class="col-md-4">

            <!-- Logo -->
            <div class="text-center login-logo mb-3">
                <img src="<?= base_url('images/crm_logo.webp') ?>" alt="Logo">
            </div>

            <!-- Card -->
            <div class="login-card">

                <h5 class="login-title">
                    The Brand Chimps CRM
                </h5>

                <p class="text-center text-muted">
                    Sign in to start your session
                </p>


				<?php if (session()->getFlashdata('error')){ ?>
    <div id="flash-message"  class="alert alert-danger text-center">
        <?= session()->getFlashdata('error') ?>
    </div>
				<?php } ?>

                <form method="post" action="<?= base_url('admin/authenticate') ?>">

                    <div class="form-group">
                        <input type="text" name="username" class="form-control" placeholder="Username" required>
						
						<?php 
						if (isset($validation)) {
							?>
								<span class="error"><?= $validation->getError('username') ?></span>
						<?php } ?>		
						
                    </div>

                    <div class="form-group">
                        <input type="password" name="password" class="form-control" placeholder="Password" required>
						<?php 
						if (isset($validation)) {
							?>
								<span class="error"><?= $validation->getError('password') ?></span>
						<?php } ?>
                    </div>

                    <div class="form-group d-flex justify-content-between align-items-center">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="remember">
                            <label class="form-check-label" for="remember">Remember Me</label>
                        </div>

                        <button type="submit" class="btn btn-primary">Sign In </button>
                    </div>

                </form>

            </div>

        </div>
    </div>
</div>


<script>
    setTimeout(function () {
        var flash = document.getElementById('flash-message');
        if (flash) {
            flash.style.transition = "opacity 0.5s ease";
            flash.style.opacity = "0";
            setTimeout(() => flash.remove(), 500);
        }
    }, 12000); // 12 seconds
</script>

</body>
</html>
