<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaiAdmin — Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-card {
            display: flex;
            width: 100%;
            max-width: 900px;
            min-height: 560px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(11, 31, 58, 0.18), 0 4px 16px rgba(0,0,0,0.08);
        }

        /* ─── LEFT PANEL ─── */
        .login-left {
            width: 42%;
            background: #0B1F3A;
            padding: 44px 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .deco-circle-1 {
            position: absolute;
            top: -80px; right: -80px;
            width: 260px; height: 260px;
            border-radius: 50%;
            border: 42px solid rgba(212,175,55,0.10);
            pointer-events: none;
        }

        .deco-circle-2 {
            position: absolute;
            bottom: -60px; left: -60px;
            width: 200px; height: 200px;
            border-radius: 50%;
            border: 32px solid rgba(212,175,55,0.07);
            pointer-events: none;
        }

        .school-brand { position: relative; z-index: 1; }

        .school-emblem {
            width: 64px; height: 64px;
            background: linear-gradient(135deg, #D4AF37, #F5D46D);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 22px;
            box-shadow: 0 8px 24px rgba(212,175,55,0.3);
        }

        .school-emblem svg { width: 36px; height: 36px; }

        .school-name {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 6px;
        }

        .school-name span { color: #D4AF37; }

        .school-tagline {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            font-weight: 300;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .left-divider {
            width: 36px; height: 2px;
            background: #D4AF37;
            border-radius: 1px;
            margin: 24px 0;
        }

        .left-desc {
            font-size: 13px;
            color: rgba(255,255,255,0.5);
            line-height: 1.75;
            font-weight: 300;
        }

        .left-footer { position: relative; z-index: 1; }

        .badge-row { display: flex; gap: 8px; flex-wrap: wrap; }

        .badge {
            font-size: 10px;
            color: rgba(212,175,55,0.8);
            border: 0.5px solid rgba(212,175,55,0.28);
            padding: 4px 12px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            font-weight: 400;
        }

        /* ─── RIGHT PANEL ─── */
        .login-right {
            flex: 1;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px 52px;
        }

        .form-inner { width: 100%; max-width: 340px; }

        .form-greeting {
            font-size: 11px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: #D4AF37;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .form-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 600;
            color: #0B1F3A;
            margin-bottom: 6px;
        }

        .form-subtitle {
            font-size: 13px;
            color: #888;
            font-weight: 300;
            margin-bottom: 32px;
        }

        /* Alert */
        .alert {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 12.5px;
            margin-bottom: 20px;
        }

        .alert-error {
            background: #FEF2F2;
            border: 0.5px solid #FECACA;
            color: #991B1B;
        }

        .alert svg { flex-shrink: 0; width: 16px; height: 16px; }

        /* Field */
        .field-group { margin-bottom: 18px; }

        .field-label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: #555;
            margin-bottom: 7px;
            letter-spacing: 0.3px;
        }

        .field-wrap { position: relative; }

        .field-icon {
            position: absolute;
            left: 13px; top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            pointer-events: none;
        }

        .field-icon svg { width: 17px; height: 17px; }

        .field-input {
            width: 100%;
            height: 46px;
            padding: 0 42px 0 42px;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            color: #1a1a1a;
            background: #f8f9fb;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            outline: none;
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }

        .field-input:focus {
            border-color: #D4AF37;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(212,175,55,0.14);
        }

        .field-input::placeholder { color: #bbb; font-weight: 300; }

        .toggle-pw {
            position: absolute;
            right: 13px; top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #aaa;
            padding: 0;
            display: flex; align-items: center;
        }

        .toggle-pw svg { width: 17px; height: 17px; }
        .toggle-pw:hover { color: #666; }

        .forgot-row {
            text-align: right;
            margin: -6px 0 24px;
        }

        .forgot-link {
            font-size: 12px;
            color: #D4AF37;
            text-decoration: none;
            font-weight: 400;
        }

        .forgot-link:hover { text-decoration: underline; }

        /* Button */
        .btn-login {
            width: 100%;
            height: 48px;
            background: #0B1F3A;
            color: #fff;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            letter-spacing: 0.4px;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: background 0.2s, transform 0.1s;
            position: relative;
            overflow: hidden;
        }

        .btn-login::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.18) 50%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn-login:hover { background: #142d52; }
        .btn-login:hover::before { opacity: 1; }
        .btn-login:active { transform: scale(0.98); }

        .btn-login svg { width: 18px; height: 18px; }

        .gold-bar {
            height: 3px;
            background: linear-gradient(90deg, #D4AF37, #F5D46D, #D4AF37);
            border-radius: 0 0 10px 10px;
            margin-top: -2px;
            margin-bottom: 24px;
        }

        .form-footer {
            text-align: center;
            font-size: 11px;
            color: #bbb;
            font-weight: 300;
        }

        /* Spinner */
        @keyframes spin { to { transform: rotate(360deg); } }
        .spin { animation: spin 0.8s linear infinite; }

        /* Page load fade-in */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .login-left  { animation: fadeUp 0.5s ease both; }
        .login-right { animation: fadeUp 0.5s ease 0.1s both; }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 640px) {
            .login-left { display: none; }
            .login-right { padding: 40px 28px; }
        }
    </style>
</head>
<body>

<div class="login-card">

    <!-- LEFT -->
    <div class="login-left">
        <div class="deco-circle-1"></div>
        <div class="deco-circle-2"></div>

        <div class="school-brand">
            <div class="school-emblem">
                <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 4L32 11V17C32 24.2 25.8 30.6 18 33C10.2 30.6 4 24.2 4 17V11L18 4Z"
                          stroke="#0B1F3A" stroke-width="2" fill="none"/>
                    <path d="M18 8L28 13V17C28 22.5 23.8 27.5 18 29.5C12.2 27.5 8 22.5 8 17V13L18 8Z"
                          fill="#0B1F3A" fill-opacity="0.25"/>
                    <path d="M12 18.5L16 22.5L24 14.5"
                          stroke="#0B1F3A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="school-name">Mai<span>Admin</span></div>
            <div class="school-tagline">Sistem Informasi Sekolah</div>
            <div class="left-divider"></div>
            <p class="left-desc">
                Platform manajemen terpadu untuk administrasi, akademik, dan pengelolaan data sekolah secara efisien.
            </p>
        </div>

        <div class="left-footer">
            <div class="badge-row">
                <span class="badge">Akademik</span>
                <span class="badge">Kesiswaan</span>
                <span class="badge">Keuangan</span>
                <span class="badge">Laporan</span>
            </div>
        </div>
    </div>

    <!-- RIGHT -->
    <div class="login-right">
        <div class="form-inner">
            <p class="form-greeting">Selamat Datang</p>
            <h1 class="form-title">Masuk ke Akun</h1>
            <p class="form-subtitle">Gunakan kredensial yang diberikan admin</p>

            {{-- Error Message --}}
            @if(session('error'))
            <div class="alert alert-error">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                </svg>
                {{ session('error') }}
            </div>
            @endif

            <form method="POST" action="{{ url('/login') }}" id="loginForm">
                @csrf

                <div class="field-group">
                    <label class="field-label" for="userid">User ID</label>
                    <div class="field-wrap">
                        <span class="field-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
                            </svg>
                        </span>
                        <input
                            class="field-input"
                            type="text"
                            id="userid"
                            name="userid"
                            placeholder="Masukkan User ID"
                            value="{{ old('userid') }}"
                            autocomplete="username"
                            required
                        />
                    </div>
                </div>

                <div class="field-group">
                    <label class="field-label" for="password">Password</label>
                    <div class="field-wrap">
                        <span class="field-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                      d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
                            </svg>
                        </span>
                        <input
                            class="field-input"
                            type="password"
                            id="password"
                            name="password"
                            placeholder="Masukkan Password"
                            autocomplete="current-password"
                            required
                        />
                        <button type="button" class="toggle-pw" id="togglePw" aria-label="Tampilkan/sembunyikan password">
                            <svg id="eyeShow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                      d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <svg id="eyeHide" style="display:none;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
                                      d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="forgot-row">
                    <a href="#" class="forgot-link" onclick="alert('Hubungi administrator sekolah untuk reset password.')">Lupa password?</a>
                </div>

                <button type="submit" class="btn-login" id="btnLogin">
                    <svg id="iconLogin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
                    </svg>
                    <span id="btnText">Masuk</span>
                </button>
                <div class="gold-bar"></div>

            </form>

            <p class="form-footer">&copy; {{ date('Y') }} MaiAdmin &middot; Hak cipta dilindungi</p>
        </div>
    </div>

</div>

<script>
    // Toggle password visibility
    const togglePw  = document.getElementById('togglePw');
    const pwInput   = document.getElementById('password');
    const eyeShow   = document.getElementById('eyeShow');
    const eyeHide   = document.getElementById('eyeHide');

    togglePw.addEventListener('click', () => {
        const isHidden = pwInput.type === 'password';
        pwInput.type   = isHidden ? 'text' : 'password';
        eyeShow.style.display = isHidden ? 'none'  : '';
        eyeHide.style.display = isHidden ? ''      : 'none';
    });

    // Loading state on submit
    document.getElementById('loginForm').addEventListener('submit', function () {
        const btn  = document.getElementById('btnLogin');
        const icon = document.getElementById('iconLogin');
        const txt  = document.getElementById('btnText');

        icon.innerHTML = `<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="31.4" stroke-dashoffset="10" class="spin"/>`;
        txt.textContent = 'Memverifikasi...';
        btn.disabled = true;
        btn.style.opacity = '0.85';
    });
</script>

</body>
</html>