<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Sistem RT</title>
    <link rel="stylesheet" href="<?= base_url('assets/css/bootstrap.min.css'); ?>">
    <link rel="stylesheet" href="<?= base_url('assets/bootstrap-icons@1.10.0/bootstrap-icons.css'); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --teal-1: #0d9488;
            --teal-2: #0f766e;
            --teal-3: #115e59;
            --teal-light: #ccfbf1;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
            background: #f0fdfa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ── BACKGROUND DECORATION ── */
        .bg-deco {
            position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
        }
        .bg-deco::before {
            content: '';
            position: absolute;
            top: -120px; left: -100px;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(13,148,136,.18) 0%, transparent 70%);
            border-radius: 50%;
        }
        .bg-deco::after {
            content: '';
            position: absolute;
            bottom: -80px; right: -80px;
            width: 420px; height: 420px;
            background: radial-gradient(circle, rgba(17,94,89,.14) 0%, transparent 70%);
            border-radius: 50%;
        }
        .bg-deco-mid {
            position: absolute;
            top: 40%; left: 55%;
            width: 280px; height: 280px;
            background: radial-gradient(circle, rgba(13,148,136,.08) 0%, transparent 70%);
            border-radius: 50%;
        }

        /* ── LAYOUT ── */
        .login-wrap {
            position: relative; z-index: 1;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 24px 16px;
        }

        /* ── DESKTOP: 2 panel ── */
        .login-card {
            display: flex;
            width: 100%;
            max-width: 860px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 40px rgba(13,148,136,.13), 0 1px 4px rgba(0,0,0,.06);
            overflow: hidden;
            animation: cardIn .4s cubic-bezier(.22,.68,0,1.2) both;
        }
        @keyframes cardIn {
            from { opacity:0; transform: translateY(18px) scale(.97); }
            to   { opacity:1; transform: translateY(0) scale(1); }
        }

        /* ── LEFT PANEL (desktop only) ── */
        .login-left {
            width: 320px;
            flex-shrink: 0;
            background: linear-gradient(160deg, var(--teal-1) 0%, var(--teal-3) 100%);
            padding: 48px 36px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }
        .login-left::before {
            content: '';
            position: absolute;
            top: -60px; right: -60px;
            width: 200px; height: 200px;
            background: rgba(255,255,255,.06);
            border-radius: 50%;
        }
        .login-left::after {
            content: '';
            position: absolute;
            bottom: -40px; left: -40px;
            width: 160px; height: 160px;
            background: rgba(255,255,255,.05);
            border-radius: 50%;
        }
        .ll-brand {
            position: relative; z-index: 1;
        }
        .ll-logo {
            width: 52px; height: 52px;
            background: rgba(255,255,255,.18);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 20px;
            border: 1px solid rgba(255,255,255,.2);
        }
        .ll-logo i { font-size: 1.5rem; color: #fff; }
        .ll-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: -.3px;
            line-height: 1.25;
            margin-bottom: 8px;
        }
        .ll-sub {
            font-size: .8rem;
            color: rgba(255,255,255,.65);
            line-height: 1.6;
        }
        .ll-features {
            position: relative; z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .ll-feat {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,.1);
            border-radius: 10px;
            padding: 10px 13px;
            border: 1px solid rgba(255,255,255,.12);
        }
        .ll-feat i { font-size: .95rem; color: #a7f3d0; flex-shrink: 0; }
        .ll-feat span { font-size: .76rem; color: rgba(255,255,255,.82); font-weight: 500; }
        .ll-copy {
            position: relative; z-index: 1;
            font-size: .7rem;
            color: rgba(255,255,255,.35);
        }

        /* ── RIGHT PANEL (form) ── */
        .login-right {
            flex: 1;
            padding: 44px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .lr-head {
            margin-bottom: 28px;
        }
        .lr-head h2 {
            font-size: 1.3rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 4px;
            letter-spacing: -.3px;
        }
        .lr-head p {
            font-size: .8rem;
            color: #64748b;
        }

        /* ── FORM ── */
        .form-group { margin-bottom: 16px; }
        .form-group label {
            display: block;
            font-size: .75rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 6px;
            letter-spacing: .02em;
            text-transform: uppercase;
        }
        .input-wrap {
            position: relative;
        }
        .input-wrap .iw-icon {
            position: absolute;
            left: 12px; top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: .9rem;
            pointer-events: none;
            transition: color .2s;
        }
        .input-wrap input {
            width: 100%;
            padding: 10px 12px 10px 36px;
            border: 1.5px solid #e5e7eb;
            border-radius: 9px;
            font-size: .855rem;
            font-family: inherit;
            color: #111827;
            background: #fafafa;
            outline: none;
            transition: border-color .2s, background .2s, box-shadow .2s;
        }
        .input-wrap input:focus {
            border-color: var(--teal-1);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(13,148,136,.1);
        }
        .input-wrap input:focus + .iw-icon,
        .input-wrap:focus-within .iw-icon { color: var(--teal-1); }
        /* icon is before input in DOM so we use focus-within on wrap */

        .input-wrap .iw-toggle {
            position: absolute;
            right: 11px; top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            cursor: pointer;
            font-size: .9rem;
            background: none; border: none; padding: 2px;
            transition: color .15s;
        }
        .input-wrap .iw-toggle:hover { color: var(--teal-1); }

        /* Alert */
        .login-alert {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 10px 13px;
            border-radius: 9px;
            font-size: .8rem;
            margin-bottom: 18px;
            animation: fadeIn .3s ease;
        }
        @keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
        .login-alert.danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
        .login-alert.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
        .login-alert i { flex-shrink:0; margin-top:1px; }

        /* Submit button */
        .btn-submit {
            width: 100%;
            padding: 11px;
            border: none;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--teal-1) 0%, var(--teal-2) 100%);
            color: #fff;
            font-family: inherit;
            font-size: .88rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 3px 12px rgba(13,148,136,.28);
            margin-top: 6px;
            letter-spacing: .01em;
        }
        .btn-submit:hover {
            background: linear-gradient(135deg, var(--teal-2) 0%, var(--teal-3) 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(13,148,136,.35);
        }
        .btn-submit:active { transform: translateY(0); }

        /* Divider */
        .form-divider {
            height: 1px; background: #f1f5f9;
            margin: 22px 0 16px;
        }
        .lr-foot {
            text-align: center;
            font-size: .72rem;
            color: #94a3b8;
        }

        /* ── MOBILE ── */
        @media (max-width: 640px) {
            .login-card {
                flex-direction: column;
                border-radius: 16px;
                max-width: 100%;
            }
            .login-left {
                width: 100%;
                padding: 24px 22px;
                flex-direction: row;
                align-items: center;
                gap: 14px;
            }
            .login-left::before, .login-left::after { display: none; }
            .ll-features, .ll-copy { display: none; }
            .ll-logo { width: 40px; height: 40px; margin-bottom: 0; flex-shrink: 0; border-radius: 11px; }
            .ll-logo i { font-size: 1.15rem; }
            .ll-title { font-size: 1rem; margin-bottom: 2px; }
            .ll-sub { font-size: .72rem; }
            .login-right {
                padding: 26px 22px 28px;
            }
            .lr-head { margin-bottom: 20px; }
            .lr-head h2 { font-size: 1.1rem; }
        }

        @media (min-width: 641px) and (max-width: 768px) {
            .login-left { width: 260px; padding: 36px 26px; }
            .login-right { padding: 36px 30px; }
        }
    </style>
</head>
<body>
<div class="bg-deco"><div class="bg-deco-mid"></div></div>

<div class="login-wrap">
    <div class="login-card">

        <!-- LEFT -->
        <div class="login-left">
            <div class="ll-brand">
                <div class="ll-logo"><i class="bi bi-house-door-fill"></i></div>
                <div class="ll-title">Sistem<br>Informasi RT</div>
                <div class="ll-sub">Kelola data warga, keuangan, dan layanan RT dalam satu platform.</div>
            </div>
            <div class="ll-features">
                <div class="ll-feat"><i class="bi bi-people-fill"></i><span>Data Warga & KK</span></div>
                <div class="ll-feat"><i class="bi bi-cash-stack"></i><span>Keuangan & Iuran</span></div>
                <div class="ll-feat"><i class="bi bi-box-seam"></i><span>Inventaris RT</span></div>
                <div class="ll-feat"><i class="bi bi-megaphone-fill"></i><span>Pengumuman & Surat</span></div>
            </div>
            <div class="ll-copy">&copy; <?= date('Y') ?> Sistem RT</div>
        </div>

        <!-- RIGHT -->
        <div class="login-right">
            <div class="lr-head">
                <h2>Selamat Datang</h2>
                <p>Masukkan Akun Anda untuk melanjutkan</p>
            </div>

            <?php if($this->session->flashdata('error')): ?>
            <div class="login-alert danger">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <span><?= $this->session->flashdata('error') ?></span>
            </div>
            <?php endif; ?>

            <?php if($this->session->flashdata('success')): ?>
            <div class="login-alert success">
                <i class="bi bi-check-circle-fill"></i>
                <span><?= $this->session->flashdata('success') ?></span>
            </div>
            <?php endif; ?>

            <form action="<?= base_url('auth/login') ?>" method="post" autocomplete="off">

                <div class="form-group">
                    <label for="username">Username</label>
                    <div class="input-wrap">
                        <input type="text" id="username" name="username"
                               placeholder="Masukkan username"
                               required autofocus autocomplete="username">
                        <i class="bi bi-person iw-icon"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-wrap">
                        <input type="password" id="password" name="password"
                               placeholder="Masukkan password"
                               required autocomplete="current-password">
                        <i class="bi bi-lock iw-icon"></i>
                        <button type="button" class="iw-toggle" id="togglePwd" title="Tampilkan/sembunyikan">
                            <i class="bi bi-eye" id="eyeIcon"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn-submit">
                    <i class="bi bi-box-arrow-in-right"></i>
                    Masuk ke Sistem
                </button>

            </form>

            <div class="form-divider"></div>
            <div class="lr-foot">
                Butuh bantuan? Hubungi pengurus RT Anda
            </div>
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Toggle password visibility
document.getElementById('togglePwd').addEventListener('click', function() {
    var input = document.getElementById('password');
    var icon  = document.getElementById('eyeIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'bi bi-eye-slash';
    } else {
        input.type = 'password';
        icon.className = 'bi bi-eye';
    }
});
</script>
</body>
</html>