<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Masuk — SiAbsen</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
        --primary: #4f46e5; --primary-d: #3730a3; --primary-l: #eef2ff;
        --primary-m: rgba(79,70,229,.12); --violet: #7c3aed;
        --success: #059669; --danger: #dc2626; --danger-l: #fef2f2;
        --text: #0f172a; --muted: #64748b; --muted2: #94a3b8;
        --border: #e2e8f0; --bg: #f0f4ff; --white: #ffffff;
    }
    html, body { height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

    /* background decoration */
    .bg-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
    .bg-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
    .bg-orb-1 { width: 500px; height: 500px; top: -150px; left: -100px; background: rgba(79,70,229,.08); }
    .bg-orb-2 { width: 400px; height: 400px; bottom: -100px; right: -80px; background: rgba(124,58,237,.06); }
    .bg-grid {
        position: absolute; inset: 0;
        background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
        background-size: 48px 48px; opacity: .4;
    }

    .page { position: relative; z-index: 1; min-height: 100vh; display: flex; }

    /* left panel */
    .left-panel {
        display: none;
        width: 420px; flex-shrink: 0;
        background: linear-gradient(135deg, #1e1b4b, #3730a3, #4f46e5);
        padding: 48px 40px; flex-direction: column;
        justify-content: space-between; position: relative; overflow: hidden;
    }
    .left-panel::before {
        content: ''; position: absolute; inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .lp-logo { display: flex; align-items: center; gap: 12px; position: relative; }
    .lp-logo-ico { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
    .lp-logo-ico svg { width: 22px; height: 22px; stroke: white; }
    .lp-logo-name { font-size: 20px; font-weight: 900; color: white; letter-spacing: -.4px; }
    .lp-logo-name span { color: #a5b4fc; }
    .lp-content { position: relative; }
    .lp-title { font-size: 2rem; font-weight: 900; color: white; letter-spacing: -.04em; line-height: 1.2; margin-bottom: 16px; }
    .lp-title span { color: #c7d2fe; }
    .lp-desc { font-size: 14px; color: rgba(255,255,255,.65); font-weight: 500; line-height: 1.7; }
    .lp-features { display: flex; flex-direction: column; gap: 12px; position: relative; }
    .lp-feat { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
    .lp-feat-dot { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .lp-feat-dot svg { width: 13px; height: 13px; stroke: #a5b4fc; }

    /* right panel / form */
    .right-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
    .form-box { width: 100%; max-width: 420px; }

    .form-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
    .form-logo-ico { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--primary), var(--violet)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px var(--primary-m); }
    .form-logo-ico svg { width: 20px; height: 20px; stroke: white; }
    .form-logo-name { font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: -.3px; }
    .form-logo-name span { color: var(--primary); }

    .form-title { font-size: 1.6rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; margin-bottom: 6px; }
    .form-sub   { font-size: 13.5px; color: var(--muted); font-weight: 500; margin-bottom: 32px; }

    .form-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(79,70,229,.08); }

    .form-group { margin-bottom: 18px; }
    .form-label { display: block; font-size: 11px; font-weight: 800; color: var(--muted2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
    .form-input {
        width: 100%; padding: 11px 14px;
        border: 1.5px solid var(--border); border-radius: 11px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px; font-weight: 600; color: var(--text);
        background: var(--bg); outline: none; transition: all .15s;
    }
    .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-m); background: var(--white); }
    .form-input::placeholder { color: var(--muted2); font-weight: 500; }

    .pw-wrap { position: relative; }
    .pw-wrap .form-input { padding-right: 44px; }
    .pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted2); padding: 4px; transition: color .15s; }
    .pw-toggle:hover { color: var(--text); }
    .pw-toggle svg { width: 16px; height: 16px; stroke: currentColor; display: block; }

    .form-error { color: var(--danger); font-size: 11.5px; font-weight: 600; margin-top: 5px; display: block; }

    .alert-err { background: var(--danger-l); border: 1px solid #fecaca; color: var(--danger); border-radius: 11px; padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
    .alert-err svg { width: 14px; height: 14px; stroke: var(--danger); flex-shrink: 0; }

    .form-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .remember-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
    .remember-label input { accent-color: var(--primary); width: 14px; height: 14px; }
    .forgot-link { font-size: 12.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
    .forgot-link:hover { text-decoration: underline; }

    .btn-submit {
        width: 100%; padding: 13px;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        color: white; border: none; border-radius: 12px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 15px; font-weight: 800; cursor: pointer;
        box-shadow: 0 6px 20px var(--primary-m);
        transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,70,229,.35); }
    .btn-submit svg { width: 16px; height: 16px; stroke: white; }

    .form-footer { text-align: center; margin-top: 20px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
    .form-footer a { color: var(--primary); font-weight: 700; text-decoration: none; }
    .form-footer a:hover { text-decoration: underline; }

    @media(min-width: 900px) { .left-panel { display: flex; } .form-logo { display: none; } }
    </style>
</head>
<body>

<div class="bg-decor">
    <div class="bg-grid"></div>
    <div class="bg-orb bg-orb-1"></div>
    <div class="bg-orb bg-orb-2"></div>
</div>

<div class="page">
    {{-- LEFT PANEL --}}
    <div class="left-panel">
        <div class="lp-logo">
            <div class="lp-logo-ico">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                    <rect x="9" y="3" width="6" height="4" rx="1"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
            </div>
            <div class="lp-logo-name">Si<span>Absen</span></div>
        </div>
        <div class="lp-content">
            <div class="lp-title">Sistem Absensi<br><span>Digital Modern</span></div>
            <div class="lp-desc">Pantau kehadiran karyawan secara real-time dengan teknologi GPS dan verifikasi foto selfie.</div>
        </div>
        <div class="lp-features">
            <div class="lp-feat">
                <div class="lp-feat-dot"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
                Absensi berbasis lokasi GPS
            </div>
            <div class="lp-feat">
                <div class="lp-feat-dot"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></div>
                Verifikasi foto selfie otomatis
            </div>
            <div class="lp-feat">
                <div class="lp-feat-dot"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
                Laporan & rekap otomatis
            </div>
        </div>
    </div>

    {{-- RIGHT PANEL / FORM --}}
    <div class="right-panel">
        <div class="form-box">
            {{-- Logo (mobile only) --}}
            <div class="form-logo">
                <div class="form-logo-ico">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                        <rect x="9" y="3" width="6" height="4" rx="1"/>
                        <path d="m9 12 2 2 4-4"/>
                    </svg>
                </div>
                <div class="form-logo-name">Si<span>Absen</span></div>
            </div>

            <div class="form-title">Selamat Datang 👋</div>
            <div class="form-sub">Masuk ke akun SiAbsen kamu</div>

            <div class="form-card">
                @if($errors->any())
                <div class="alert-err">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    {{ $errors->first() }}
                </div>
                @endif

                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-input"
                               value="{{ old('email') }}"
                               placeholder="email@kamu.com" required autofocus>
                        @error('email')<span class="form-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Password</label>
                        <div class="pw-wrap">
                            <input type="password" name="password" id="pw-inp" class="form-input"
                                   placeholder="••••••••" required>
                            <button type="button" class="pw-toggle" onclick="togglePw()">
                                <svg id="pw-eye" viewBox="0 0 24 24" fill="none" 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>
                            </button>
                        </div>
                        @error('password')<span class="form-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-row-between">
                        <label class="remember-label">
                            <input type="checkbox" name="remember"> Ingat saya
                        </label>
                        @if(Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="forgot-link">Lupa password?</a>
                        @endif
                    </div>
                    <button type="submit" class="btn-submit">
                        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        Masuk ke SiAbsen
                    </button>
                </form>
            </div>

            <div class="form-footer">
                Kembali ke <a href="{{ url('/') }}">halaman utama</a>
            </div>
        </div>
    </div>
</div>

<script>
function togglePw() {
    const inp = document.getElementById('pw-inp');
    const isText = inp.type === 'text';
    inp.type = isText ? 'password' : 'text';
    document.getElementById('pw-eye').innerHTML = isText
        ? '<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"/>'
        : '<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"/>';
}
</script>
</body>
</html>