<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sign in — Staff Checkin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link rel="icon" href="<?= base_url(); ?>assets/images/favicon-32x32.png" type="image/png" />
    <link rel="stylesheet" href="<?= base_url('assets/css/care-theme.css'); ?>?v=20260826b" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <style>
        * {
            box-sizing: border-box;
        }

        body.login-modern {
            margin: 0;
            min-height: 100vh;
            font-family: "Outfit", system-ui, sans-serif;
            color: var(--lc-text);
            background: #1e2744;
            -webkit-font-smoothing: antialiased;
        }

        .login-modern__wrap {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 992px) {
            .login-modern__wrap {
                flex-direction: row;
            }
        }

        .login-modern__panel {
            position: relative;
            flex: 1;
            min-height: 220px;
            padding: clamp(2rem, 5vw, 3.5rem);
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(145deg, #2a3766 0%, #4E64A8 42%, #6981C5 100%);
        }

        @media (min-width: 992px) {
            .login-modern__panel {
                max-width: 46%;
                min-height: 100vh;
            }
        }

        .login-modern__panel::before {
            content: "";
            position: absolute;
            inset: -20%;
            background:
                radial-gradient(ellipse 80% 60% at 20% 20%, rgba(155, 180, 229, 0.42) 0%, transparent 55%),
                radial-gradient(ellipse 60% 50% at 85% 75%, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
            pointer-events: none;
        }

        .login-modern__panel::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            opacity: 0.5;
            pointer-events: none;
        }

        .login-modern__brand {
            position: relative;
            z-index: 1;
            color: #fff;
        }

        .login-modern__brand img {
            max-width: 170px;
            height: auto;
            display: block;
        }

        .login-modern__brand h1 {
            font-size: clamp(1.75rem, 4vw, 2.35rem);
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.15;
            margin: 1.25rem 0 0.75rem;
        }

        .login-modern__brand p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            max-width: 22rem;
            color: rgba(255, 255, 255, 0.82);
            margin: 0;
        }

        .login-modern__badges {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .login-modern__badge {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.4rem 0.75rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: rgba(255, 255, 255, 0.95);
        }

        .login-modern__main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(1.5rem, 4vw, 3rem);
            background: linear-gradient(180deg, #eef2fa 0%, #e4eaf6 100%);
        }

        .login-modern__card {
            width: 100%;
            max-width: 420px;
            background: var(--lc-surface);
            border-radius: 20px;
            box-shadow: var(--lc-shadow);
            border: 1px solid var(--lc-border);
            padding: clamp(1.75rem, 4vw, 2.5rem);
        }

        .login-modern__card-head {
            margin-bottom: 1.5rem;
        }

        .login-modern__card-head .kicker {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #6981C5;
            margin-bottom: 0.35rem;
        }

        .login-modern__card-head h2 {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin: 0 0 0.35rem;
        }

        .login-modern__card-head .sub {
            font-size: 0.9rem;
            color: var(--lc-muted);
            margin: 0;
            line-height: 1.5;
        }

        .login-modern .form-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--lc-text);
            margin-bottom: 0.4rem;
        }

        .login-modern .input-wrap {
            position: relative;
            display: flex;
            align-items: stretch;
            border: 1px solid var(--lc-border);
            border-radius: 12px;
            background: #f7f9fd;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .login-modern .input-wrap:focus-within {
            border-color: rgba(105, 129, 197, 0.5);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(105, 129, 197, 0.16);
        }

        .login-modern .input-wrap .input-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            flex-shrink: 0;
            color: var(--lc-muted);
            font-size: 1rem;
        }

        .login-modern .input-wrap input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 0.85rem 0.75rem 0.85rem 0;
            font-size: 0.95rem;
            font-family: inherit;
            outline: none;
            min-width: 0;
        }

        .login-modern .input-wrap input::placeholder {
            color: #94a3b8;
        }

        .login-modern .toggle-pass {
            border: none;
            background: transparent;
            width: 48px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--lc-muted);
            cursor: pointer;
            border-radius: 0 12px 12px 0;
            transition: color 0.15s ease, background 0.15s ease;
        }

        .login-modern .toggle-pass:hover {
            color: var(--lc-primary);
            background: rgba(105, 129, 197, 0.08);
        }

        .login-modern .btn-submit {
            width: 100%;
            margin-top: 0.25rem;
            padding: 0.95rem 1.25rem;
            font-size: 0.95rem;
            font-weight: 600;
            font-family: inherit;
            letter-spacing: 0.02em;
            border: none;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            background: linear-gradient(135deg, #6981C5 0%, #9BB4E5 100%);
            box-shadow: 0 4px 14px rgba(105, 129, 197, 0.38);
            transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
        }

        .login-modern .btn-submit:hover {
            filter: brightness(1.05);
            box-shadow: 0 8px 22px rgba(105, 129, 197, 0.42);
            transform: translateY(-1px);
        }

        .login-modern .btn-submit:active {
            transform: translateY(0);
        }

        .login-modern .alert {
            border-radius: 12px;
            border: none;
            font-size: 0.875rem;
        }

        .login-modern .alert-success {
            background: #eef2fa;
            color: #3a4c8a;
        }

        .login-modern .alert-warning {
            background: #fffbeb;
            color: #92400e;
        }
    </style>
</head>

<body class="login-modern">
    <div class="login-modern__wrap">
        <aside class="login-modern__panel" aria-hidden="false">
            <div class="login-modern__brand">
                <img src="<?= base_url(); ?>assets/images/dplogo.png" alt="Sleepers" />
                <h1>Admin Panel</h1>
                <p>Sign in to manage your account.</p>
                <div class="login-modern__badges">
                    <span class="login-modern__badge">Secure access</span>
                    <span class="login-modern__badge">Admin console</span>
                </div>
            </div>
        </aside>

        <main class="login-modern__main">
            <div class="login-modern__card">
                <div class="login-modern__card-head">
                    <p class="kicker">Sleepers</p>
                    <h2>Welcome back</h2>
                    <p class="sub">Enter your email and password to access your account.</p>
                </div>

                <?php
                $successMessage = $this->session->flashdata('successmessage');
                $warningmessage = $this->session->flashdata('warningmessage');
                if (isset($successMessage)) {
                    echo '<div id="alertmessage" class="mb-3">
          <div class="alert alert-success alert-dismissible">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                   ' . output($successMessage) . '
                  </div>
          </div>';
                }
                if (isset($warningmessage)) {
                    echo '<div id="alertmessage" class="mb-3">
          <div class="alert alert-warning alert-dismissible">
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                   ' . output($warningmessage) . '
                  </div>
          </div>';
                }
                ?>

                <form action="<?= base_url() . 'login/login_action'; ?>" method="post" novalidate>
                    <div class="mb-3">
                        <label for="login-email" class="form-label">Email</label>
                        <div class="input-wrap">
                            <span class="input-icon" aria-hidden="true"><i class="fa-regular fa-envelope"></i></span>
                            <input id="login-email" type="email" name="email" placeholder="you@example.com" autocomplete="email" required />
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="login-password" class="form-label">Password</label>
                        <div class="input-wrap">
                            <span class="input-icon" aria-hidden="true"><i class="fa-solid fa-lock"></i></span>
                            <input id="login-password" class="login-password-field" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
                            <button type="button" class="toggle-pass" aria-label="Show password" title="Show / hide password">
                                <i class="fa-regular fa-eye eye-toggle-icon" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="btn-submit">Log in</button>

                    <a href="<?php echo base_url('forgot'); ?>" class="d-none">Forgot password</a>
                </form>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var btn = document.querySelector(".login-modern .toggle-pass");
            var field = document.querySelector(".login-modern .login-password-field");
            var icon = document.querySelector(".login-modern .eye-toggle-icon");
            if (!btn || !field || !icon) return;

            btn.addEventListener("click", function () {
                var show = field.type === "password";
                field.type = show ? "text" : "password";
                icon.classList.toggle("fa-eye", !show);
                icon.classList.toggle("fa-eye-slash", show);
                btn.setAttribute("aria-label", show ? "Hide password" : "Show password");
            });
        });
    </script>
</body>

</html>
