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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Ledwin Ezkiel Wotulo</title>

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

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">

    <style>
        /* ── Variables ── */
        :root {
            --cyan-vivid: #1DD9F0;
            --cyan-mid: #00B4CC;
            --cyan-dark: #0090A8;
            --cyan-soft: rgba(29, 217, 240, 0.10);
            --cyan-border: rgba(29, 217, 240, 0.28);

            --bg: #F4FBFE;
            --bg-card: #FFFFFF;
            --bg-input: #EEF8FC;

            --text-main: #0D1B2A;
            --text-muted: #4A6478;
            --text-label: #2C4A5E;

            --border: #BDE8F5;
            --shadow-card: 0 24px 64px rgba(0, 180, 204, 0.14);
            --shadow-btn: 0 6px 24px rgba(0, 180, 204, 0.38);

            --radius: 16px;
            --radius-sm: 10px;
            --radius-pill: 50px;

            --font: 'Plus Jakarta Sans', sans-serif;
        }

        /* ── Reset & Base ── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font);
            background-color: var(--bg);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* ── Background decorative blobs ── */
        .bg-blob {
            position: fixed;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
            z-index: 0;
        }

        .blob-tl {
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(29, 217, 240, 0.18) 0%, transparent 70%);
            top: -160px;
            left: -160px;
        }

        .blob-br {
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(0, 180, 204, 0.14) 0%, transparent 70%);
            bottom: -120px;
            right: -120px;
        }

        .blob-center {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(29, 217, 240, 0.07) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* ── Card ── */
        .login-wrapper {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 440px;
            padding: 20px;
            animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes card-in {
            from {
                opacity: 0;
                transform: translateY(28px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .login-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 44px 40px 40px;
            box-shadow: var(--shadow-card);
        }

        /* ── Logo / Brand ── */
        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 32px;
        }

        .brand-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--cyan-vivid), var(--cyan-mid));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1rem;
            box-shadow: 0 4px 16px rgba(0, 180, 204, 0.35);
        }

        .brand-name {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.3px;
        }

        .brand-name span {
            color: var(--cyan-mid);
        }

        /* ── Heading ── */
        .login-heading {
            font-size: 1.6rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: var(--text-main);
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .login-sub {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-weight: 400;
            margin-bottom: 32px;
        }

        /* ── Form fields ── */
        .field-group {
            margin-bottom: 18px;
        }

        .field-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.9px;
            color: var(--text-label);
            margin-bottom: 8px;
        }

        .field-wrap {
            position: relative;
        }

        .field-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--cyan-mid);
            font-size: 0.875rem;
            pointer-events: none;
            transition: color 0.2s;
        }

        .field-input {
            width: 100%;
            background: var(--bg-input);
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 13px 44px 13px 40px;
            font-family: var(--font);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-main);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }

        .field-input::placeholder {
            color: #9DB4C4;
            font-weight: 400;
        }

        .field-input:focus {
            border-color: var(--cyan-mid);
            background: #fff;
            box-shadow: 0 0 0 3.5px rgba(29, 217, 240, 0.13);
        }

        .field-input:focus+.field-icon-right,
        .field-wrap:focus-within .field-icon {
            color: var(--cyan-dark);
        }

        /* Toggle password eye icon */
        .field-icon-right {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9DB4C4;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: color 0.2s, background 0.15s;
            user-select: none;
            line-height: 1;
        }

        .field-icon-right:hover {
            color: var(--cyan-mid);
            background: var(--cyan-soft);
        }

        /* ── Remember me + Forgot ── */
        .form-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 26px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .remember-wrap {
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            user-select: none;
        }

        .custom-checkbox {
            width: 18px;
            height: 18px;
            border: 1.5px solid var(--border);
            border-radius: 5px;
            background: var(--bg-input);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s, border-color 0.2s;
            position: relative;
            cursor: pointer;
        }

        .custom-checkbox input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        .custom-checkbox .check-icon {
            color: #fff;
            font-size: 0.6rem;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.15s, transform 0.15s;
            pointer-events: none;
        }

        .custom-checkbox.checked {
            background: linear-gradient(135deg, var(--cyan-vivid), var(--cyan-mid));
            border-color: var(--cyan-mid);
        }

        .custom-checkbox.checked .check-icon {
            opacity: 1;
            transform: scale(1);
        }

        .remember-label {
            font-size: 0.83rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .forgot-link {
            font-size: 0.83rem;
            font-weight: 600;
            color: var(--cyan-mid);
            text-decoration: none;
            transition: color 0.2s;
        }

        .forgot-link:hover {
            color: var(--cyan-dark);
            text-decoration: underline;
        }

        /* ── Submit button ── */
        .btn-login {
            width: 100%;
            background: linear-gradient(135deg, var(--cyan-vivid), var(--cyan-mid));
            color: #fff;
            font-family: var(--font);
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.2px;
            padding: 14px;
            border: none;
            border-radius: var(--radius-pill);
            cursor: pointer;
            box-shadow: var(--shadow-btn);
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0, 180, 204, 0.46);
        }

        .btn-login:active {
            transform: translateY(0);
            opacity: 0.9;
        }

        /* ── Divider ── */
        .divider {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 24px 0;
        }

        .divider-line {
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .divider-text {
            font-size: 0.75rem;
            font-weight: 600;
            color: #9DB4C4;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            white-space: nowrap;
        }

        /* ── Register link ── */
        .register-wrap {
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 400;
        }

        .register-wrap a {
            color: var(--cyan-mid);
            font-weight: 700;
            text-decoration: none;
            transition: color 0.2s;
        }

        .register-wrap a:hover {
            color: var(--cyan-dark);
            text-decoration: underline;
        }

        /* ── Back to portfolio link ── */
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-decoration: none;
            margin-bottom: 18px;
            transition: color 0.2s;
        }

        .back-link:hover {
            color: var(--cyan-mid);
        }

        /* ── Error / validation hint ── */
        .field-hint {
            font-size: 0.75rem;
            color: #E05858;
            font-weight: 500;
            margin-top: 5px;
            /* display: none; */
        }

        .field-input.has-error {
            border-color: #E05858;
            box-shadow: 0 0 0 3px rgba(224, 88, 88, 0.12);
        }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            .login-card {
                padding: 32px 24px 28px;
            }

            .login-heading {
                font-size: 1.35rem;
            }
        }
    </style>
</head>

<body>

    <div class="login-wrapper">

        <a href="/" class="back-link">
            <i class="fa-solid fa-arrow-left"></i> Kembali ke Portfolio
        </a>

        <div class="login-card">

            <!-- Brand -->
            <div class="brand">
                <div class="brand-icon">
                    <i class="fa-solid fa-code"></i>
                </div>
                <div class="brand-name">&lt;<span>Ledwin</span>/&gt;</div>
            </div>

            <h1 class="login-heading">Selamat Datang</h1>
            <p class="login-sub">Silakan masuk untuk melanjutkan</p>

            <form method="POST" action="/authenticate">
                @csrf
                @method('post')
                <!-- Email -->
                <div class="field-group">
                    <label class="field-label" for="email">Email</label>
                    <div class="field-wrap">
                        <i class="fa-solid fa-envelope field-icon"></i>
                        <input type="email" name="email" class="field-input @error('email') has-error @enderror"
                            placeholder="nama@email.com" id="email" value="{{ old('email') }}">
                    </div>
                    @error('email')
                        <p class="field-hint">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password -->
                <div class="field-group">
                    <label class="field-label" for="password">Password</label>
                    <div class="field-wrap">
                        <i class="fa-solid fa-lock field-icon"></i>

                        <input type="password" name="password" id="password"
                            class="field-input @error('password') has-error @enderror" placeholder="Masukkan password">

                        <span class="field-icon-right" id="togglePwd">
                            <i class="fa-solid fa-eye" id="eyeIcon"></i>
                        </span>

                    </div>
                    @error('password')
                        <p class="field-hint">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Remember -->
                <div class="form-footer">
                    <label class="remember-label">
                        <input type="checkbox" name="remember" checked>
                        Ingat saya
                    </label>
                </div>

                <button type="submit" class="btn-login">
                    <i class="fa-solid fa-right-to-bracket"></i>
                    Masuk
                </button>

            </form>

        </div>
    </div>

    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        /* ===== Toggle Password ===== */

        const password = document.getElementById("password");
        const toggle = document.getElementById("togglePwd");
        const eye = document.getElementById("eyeIcon");

        toggle.addEventListener("click", function() {

            if (password.type === "password") {
                password.type = "text";
                eye.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                password.type = "password";
                eye.classList.replace("fa-eye-slash", "fa-eye");
            }

        });
    </script>

</body>

</html>
