<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Absensi</title>
    <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=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --muted: #9aa5bf;
            --text: #e8edf5;
            --primary: #2563eb;
            --primary-soft: rgba(37, 99, 235, 0.64);
            --accent: #0ea5e9;
            --surface: rgba(15, 23, 42, 0.8);
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
            color: var(--text);
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.12), transparent 48%),
                        radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.16), transparent 40%),
                        #0b1120;
            position: relative;
            overflow: hidden;
            padding: 24px;
        }
        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -2;
        }
        body::before {
            background: url('{{ asset('storage/login-bg-mine.png') }}') center center / cover no-repeat;
            filter: saturate(1.02) brightness(0.92);
        }
        body::after {
            background: linear-gradient(130deg, rgba(12, 20, 38, 0.85) 18%, rgba(2, 6, 23, 0.92) 70%);
            z-index: -1;
        }
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><g fill="none" stroke="rgba(148,163,184,0.08)" stroke-width="0.7"><path d="M80 0v160M0 80h160"/><path d="M0 0l160 160M160 0L0 160"/></g></svg>');
            mix-blend-mode: overlay;
            opacity: 0.35;
            z-index: -1;
        }
        .hero-title {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translateX(-50%);
            font-size: clamp(36px, 6.8vw, 68px);
            font-weight: 700;
            letter-spacing: 0.14em;
            color: rgba(252, 211, 77, 0.92);
            text-transform: uppercase;
            text-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
            white-space: nowrap;
            max-width: 90vw;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ambient {
            position: absolute;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.32;
            pointer-events: none;
            z-index: 0;
        }
        .ambient-1 { background: rgba(59, 130, 246, 0.6); top: -110px; right: -80px; }
        .ambient-2 { background: rgba(16, 185, 129, 0.55); bottom: -140px; left: -120px; }
        .ambient-3 { background: rgba(14, 165, 233, 0.55); bottom: 14vh; right: 12vw; }
        .card {
            width: min(480px, calc(100vw - 48px));
            padding: 40px 42px;
            border-radius: 24px;
            background: var(--surface);
            border: 1px solid rgba(148, 163, 184, 0.22);
            box-shadow: 0 30px 70px rgba(8, 15, 32, 0.52);
            backdrop-filter: blur(18px) saturate(130%);
            position: relative;
            overflow: hidden;
        }
        .card::before,
        .card::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(35px);
            opacity: 0.75;
        }
        .card::before {
            inset: -70px auto auto -80px;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 70%);
        }
        .card::after {
            inset: auto -110px -120px auto;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.28), transparent 70%);
        }
        .card > * { position: relative; z-index: 1; }
        .card-brand {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 26px;
        }
        .brand-avatar {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(14, 165, 233, 0.24));
            border: 1px solid rgba(148, 163, 184, 0.26);
            display: grid;
            place-items: center;
            color: #bfdbfe;
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
        }
        .brand-avatar svg {
            width: 26px;
            height: 26px;
        }
        .brand-label {
            font-size: 12px;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(148, 163, 184, 0.8);
            margin-bottom: 4px;
        }
        .brand-name {
            font-size: clamp(18px, 3.6vw, 22px);
            font-weight: 600;
            margin: 0;
            color: #f8fafc;
            letter-spacing: -0.01em;
        }
        .card-header {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
        .card-header .badge {
            align-self: flex-start;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.22);
            color: #bfdbfe;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        h1 {
            margin: 0;
            font-size: clamp(22px, 4vw, 26px);
            font-weight: 700;
            letter-spacing: -0.015em;
        }
        p.sub {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.6;
        }
        .divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.42), rgba(14, 165, 233, 0.1));
            margin: 22px 0;
        }
        .alert {
            background: rgba(34, 197, 94, 0.14);
            border: 1px solid rgba(34, 197, 94, 0.36);
            color: #bbf7d0;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 13px;
            margin-bottom: 18px;
        }
        .errors {
            background: rgba(248, 113, 113, 0.12);
            border: 1px solid rgba(248, 113, 113, 0.28);
            color: #fecaca;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 13px;
            margin-bottom: 18px;
        }
        .errors ul { margin: 0; padding-left: 18px; }
        .field { margin-bottom: 18px; }
        label {
            display: block;
            font-size: 13px;
            margin-bottom: 6px;
            color: #cbd5e1;
        }
        .input-wrapper {
            position: relative;
        }
        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 13px 46px 13px 46px;
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: rgba(3, 7, 18, 0.55);
            color: var(--text);
            outline: none;
            transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        input:focus {
            border-color: rgba(37, 99, 235, 0.7);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
            transform: translateY(-1px);
        }
        .field-icon .field-icon-symbol {
            position: absolute;
            top: 50%;
            left: 18px;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #93c5fd;
            opacity: 0.92;
        }
        .field-icon .field-icon-symbol svg {
            width: 18px;
            height: 18px;
        }
        .field-password { position: relative; }
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 18px;
            transform: translateY(-50%);
            font-size: 11px;
            color: #60a5fa;
            cursor: pointer;
            padding: 4px 8px;
            background: rgba(37, 99, 235, 0.12);
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.18);
            letter-spacing: 0.03em;
            transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
        }
        .toggle-password:hover {
            background: rgba(96, 165, 250, 0.18);
            color: #bfdbfe;
        }
        .remember {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 20px;
            gap: 12px;
        }
        .remember label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
        .remember input { accent-color: var(--primary); }
        .remember a { color: #93c5fd; text-decoration: none; }
        .remember a:hover { text-decoration: underline; }
        button {
            width: 100%;
            padding: 13px 16px;
            border: none;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(20, 184, 166, 0.88));
            color: white;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 24px 46px rgba(37, 99, 235, 0.32);
            transition: transform 0.12s ease, filter 0.2s ease, box-shadow 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        button::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 55%);
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        button:hover { filter: brightness(1.06); box-shadow: 0 30px 60px rgba(37, 99, 235, 0.36); }
        button:hover::after { opacity: 1; }
        button:active { transform: translateY(1px); }
        button:focus-visible { outline: 3px solid rgba(79, 160, 255, 0.45); outline-offset: 4px; }
        .footer {
            margin-top: 20px;
            font-size: 12px;
            color: var(--muted);
            text-align: center;
            line-height: 1.6;
        }
        .footer a { color: #93c5fd; text-decoration: none; }
        .footer a:hover { text-decoration: underline; }

        @media (max-width: 768px) {
            body {
                padding: 18px;
            }

            .hero-title {
                top: 24px;
                font-size: clamp(30px, 9vw, 42px);
                letter-spacing: 0.1em;
            }

            .card {
                width: min(460px, calc(100vw - 36px));
                padding: 34px 30px;
            }

            .card-brand {
                margin-bottom: 22px;
            }

            .remember {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
        }

        @media (max-width: 560px) {
            body {
                padding: 16px 14px 22px;
            }

            .hero-title {
                display: none;
            }

            .card {
                width: 100%;
                max-width: 420px;
                padding: 30px 22px;
            }

            .card-header {
                gap: 8px;
            }

            p.sub {
                font-size: 13px;
            }

            .remember {
                font-size: 12px;
            }

            button {
                padding: 12px 14px;
            }
        }

        @media (max-width: 400px) {
            body {
                padding: 12px 12px 18px;
            }

            .card {
                padding: 24px 18px;
                border-radius: 18px;
            }

            input[type="email"],
            input[type="password"] {
                padding: 12px 40px 12px 42px;
            }

            .remember {
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="ambient ambient-1"></div>
    <div class="ambient ambient-2"></div>
    <div class="ambient ambient-3"></div>
    <form class="card" method="POST" action="{{ route('login.post') }}">
        @csrf
        <div class="card-brand">
            <div class="brand-avatar">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5L12 3l9 4.5-9 4.5L3 7.5z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9 4.5 9-4.5" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5L12 21l9-4.5" />
                </svg>
            </div>
            <div>
                <div class="brand-label">Sistem absensi</div>
            </div>
        </div>
        <div class="card-header">
            <span class="badge">Selamat datang</span>
            <h1>Masuk Pegawai</h1>
            <p class="sub">Silakan login untuk mencatat absensi serta mengakses dashboard internal.</p>
        </div>
        <div class="divider"></div>

        @if (session('status'))
            <div class="alert">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="errors">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="field field-icon">
            <label for="email">Email</label>
            <div class="input-wrapper">
                <span class="field-icon-symbol" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 6.75A2.25 2.25 0 015.25 4.5h13.5A2.25 2.25 0 0121 6.75v10.5A2.25 2.25 0 0118.75 19.5H5.25A2.25 2.25 0 013 17.25V6.75z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 7.5l7.5 6 7.5-6" />
                    </svg>
                </span>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus placeholder="nama@email.com" />
            </div>
        </div>

        <div class="field field-password field-icon">
            <label for="password">Password</label>
            <div class="input-wrapper">
                <span class="field-icon-symbol" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25a3.75 3.75 0 10-7.5 0V9" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 9.75A2.25 2.25 0 016.75 7.5h10.5a2.25 2.25 0 012.25 2.25v8.25A2.25 2.25 0 0117.25 20.25H6.75A2.25 2.25 0 014.5 18V9.75z" />
                    </svg>
                </span>
                <input id="password" type="password" name="password" required placeholder="Masukkan password" />
                <span class="toggle-password" role="button" tabindex="0" data-target="password">Lihat password</span>
            </div>
        </div>

        <div class="remember">
            <label>
                <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }} /> Ingat saya
            </label>
            <a href="{{ route('password.request') }}">Lupa password?</a>
        </div>

        <button type="submit">Masuk</button>

        <div class="footer">
            Belum punya akun? <a href="{{ route('register') }}">Daftar sekarang</a>
        </div>
    </form>

    <script>
        document.querySelectorAll('.toggle-password').forEach(trigger => {
            trigger.addEventListener('click', () => {
                const input = document.getElementById(trigger.dataset.target);
                if (!input) return;
                const hidden = input.type === 'password';
                input.type = hidden ? 'text' : 'password';
                trigger.textContent = hidden ? 'Sembunyikan password' : 'Lihat password';
            });
        });
    </script>
</body>
</html>
