<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login — Mittal Group of Institutes</title>
    <meta name="robots" content="noindex, nofollow">
    <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@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg:      #0D1B2A;
            --surface: rgba(26, 42, 58, 0.85);
            --border:  rgba(255,255,255,.1);
            --red:     #C8102E;
            --red-h:   #a00d24;
            --gold:    #F5A623;
            --text:    #e0e6ef;
            --muted:   #8fa3b8;
            --input-bg: rgba(13,27,42,.6);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
        }

        /* Ambient gradient orbs */
        body::before, body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            opacity: .18;
            pointer-events: none;
            z-index: 0;
        }
        body::before {
            width: 500px; height: 500px;
            background: var(--red);
            top: -150px; left: -100px;
        }
        body::after {
            width: 400px; height: 400px;
            background: var(--gold);
            bottom: -120px; right: -80px;
        }

        .login-wrap {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
        }

        .card {
            background: var(--surface);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            box-shadow: 0 30px 80px rgba(0,0,0,.5);
        }

        .logo-wrap {
            text-align: center;
            margin-bottom: 1.8rem;
        }
        .logo-wrap img {
            height: 72px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 4px 12px rgba(200,16,46,.3));
        }
        /* Fallback if logo missing */
        .logo-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px; height: 72px;
            background: linear-gradient(135deg, var(--red), #8b0000);
            border-radius: 16px;
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -1px;
        }

        h1 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #fff;
            text-align: center;
            line-height: 1.35;
            margin-bottom: .3rem;
        }
        .subtitle {
            text-align: center;
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: 2rem;
        }
        .badge {
            display: inline-block;
            background: rgba(200,16,46,.15);
            border: 1px solid rgba(200,16,46,.3);
            color: var(--gold);
            font-size: .7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .05em;
            padding: 2px 8px;
            border-radius: 20px;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }
        label {
            display: block;
            font-size: .78rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .05em;
            margin-bottom: .5rem;
        }
        .input-wrap {
            position: relative;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: .75rem 1rem;
            background: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: .92rem;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }
        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(200,16,46,.2);
        }
        input[type="password"] {
            padding-right: 3rem;
        }

        .toggle-pw {
            position: absolute;
            right: .9rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1;
            padding: .2rem;
            transition: color .2s;
        }
        .toggle-pw:hover { color: var(--text); }

        .btn-login {
            width: 100%;
            padding: .85rem;
            background: linear-gradient(135deg, var(--red), #9b0022);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: .95rem;
            font-weight: 700;
            letter-spacing: .02em;
            cursor: pointer;
            margin-top: .5rem;
            transition: transform .15s, box-shadow .15s, background .2s;
            box-shadow: 0 6px 20px rgba(200,16,46,.35);
        }
        .btn-login:hover {
            background: linear-gradient(135deg, #d91232, var(--red));
            transform: translateY(-1px);
            box-shadow: 0 10px 28px rgba(200,16,46,.45);
        }
        .btn-login:active {
            transform: translateY(0);
        }

        .error-box {
            display: none;
            align-items: center;
            gap: .6rem;
            background: rgba(239,68,68,.12);
            border: 1px solid rgba(239,68,68,.35);
            border-radius: 8px;
            padding: .75rem 1rem;
            margin-bottom: 1.2rem;
            font-size: .85rem;
            color: #f87171;
        }
        .error-box .icon { font-size: 1.1rem; flex-shrink: 0; }

        .divider {
            border: none;
            border-top: 1px solid var(--border);
            margin: 1.8rem 0 1rem;
        }

        footer {
            position: relative;
            z-index: 1;
            text-align: center;
            font-size: .75rem;
            color: var(--muted);
            margin-top: 1.5rem;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .card { animation: fadeIn .4s ease; }
    </style>
</head>
<body>
<div class="login-wrap">
    <div class="card">
        <!-- Logo -->
        <div class="logo-wrap">
            <img src="../Assets/logo.png"
                 alt="Mittal Group of Institutes Logo"
                 onerror="this.style.display='none'; document.getElementById('logo-fallback').style.display='inline-flex';">
            <div id="logo-fallback" class="logo-fallback" style="display:none;">M</div>
        </div>

        <h1>Admin Panel</h1>
        <p class="subtitle">
            <span class="badge">Mittal Group of Institutes</span><br>
            <span style="display:block;margin-top:.5rem;">Analytics &amp; Leads Dashboard</span>
        </p>

        <!-- Error -->
        <div class="error-box" id="error-box" role="alert">
            <span class="icon">⚠️</span>
            <span></span>
        </div>

        <!-- Login Form -->
        <form method="POST" action="" autocomplete="on" novalidate id="login-form">
            <div class="form-group">
                <label for="username">Username</label>
                <input
                    type="text"
                    id="username"
                    name="username"
                    autocomplete="username"
                    placeholder="Enter username"
                    value=""
                    required
                    autofocus
                >
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <div class="input-wrap">
                    <input
                        type="password"
                        id="password"
                        name="password"
                        autocomplete="current-password"
                        placeholder="Enter password"
                        required
                    >
                    <button type="button" class="toggle-pw" id="toggle-pw" aria-label="Toggle password visibility">
                        👁️
                    </button>
                </div>
            </div>

            <button type="submit" class="btn-login" id="btn-submit">
                Login to Dashboard
            </button>
        </form>

        <hr class="divider">
        <p style="text-align:center;font-size:.75rem;color:var(--muted);">
            🔒 Secure admin access only. Unauthorised access is prohibited.
        </p>
    </div>
</div>

<footer>
    © 2024 Mittal Group of Institutes — Analytics Dashboard
</footer>

<script>
    // Password show/hide toggle
    const pwInput   = document.getElementById('password');
    const toggleBtn = document.getElementById('toggle-pw');
    toggleBtn.addEventListener('click', () => {
        const isText = pwInput.type === 'text';
        pwInput.type    = isText ? 'password' : 'text';
        toggleBtn.textContent = isText ? '👁️' : '🙈';
    });

    // Client-side validation before submit
    document.getElementById('login-form').addEventListener('submit', function(e) {
        const u = document.getElementById('username').value.trim();
        const p = document.getElementById('password').value;
        const errorBox = document.getElementById('error-box');

        if (!u || !p) {
            e.preventDefault();
            errorBox.style.display = 'flex';
            errorBox.querySelector('span:last-child').textContent = 'Please enter both username and password.';
        }
    });

    </script>
</body>
</html>
