<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClassTrack — Admin Login</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --navy-950: #0B1526;
    --navy-900: #0F1E36;
    --navy-800: #152B4A;
    --navy-700: #1D3B63;
    --teal-500: #2E5AA8;
    --teal-400: #4C7BC9;
    --bg: #EEF1F6;
    --surface: #FFFFFF;
    --surface-2: #F5F7FA;
    --line: #DFE4EC;
    --ink-900: #0B1526;
    --ink-700: #37425A;
    --ink-500: #6B7690;
    --ink-300: #AEB6C8;
    --coral-500: #B23A3A;
    --teal-tint-10: rgba(46,90,168,.10);
    --teal-tint-35: rgba(46,90,168,.35);
    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;
    --shadow-sm: 0 1px 2px rgba(15,30,54,.06);
    --shadow-md: 0 8px 24px rgba(15,30,54,.10);
    --shadow-lg: 0 20px 60px rgba(15,30,54,.18);
    --radius: 14px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  /* Hide scrollbars everywhere */
  *{scrollbar-width:none;-ms-overflow-style:none;}
  *::-webkit-scrollbar{display:none;}
  body {
    font-family: var(--font-body);
    background: var(--bg);
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

  /* ── Left panel ── */
  .left-panel {
    background: linear-gradient(145deg, var(--navy-950) 0%, var(--navy-800) 50%, var(--navy-700) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 56px;
    position: relative;
    overflow: hidden;
  }
  .left-panel::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,123,201,.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .left-panel::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46,90,168,.14) 0%, transparent 70%);
    pointer-events: none;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
  }
  .brand-mark {
    width: 44px; height: 44px; border-radius: 12px;
    background: conic-gradient(from 220deg, var(--navy-950), var(--teal-500) 55%, var(--teal-400) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    color: var(--navy-950);
    box-shadow: 0 4px 16px rgba(76,123,201,.4);
    flex-shrink: 0;
  }
  .brand-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
  }
  .brand-sub {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 2px;
  }

  .hero-text {
    position: relative;
    z-index: 1;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(46,90,168,.2);
    border: 1px solid rgba(76,123,201,.3);
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--teal-400);
    margin-bottom: 22px;
    letter-spacing: .3px;
  }
  .hero-badge span.dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal-400);
    display: inline-block;
  }
  .hero-text h1 {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    margin-bottom: 18px;
    letter-spacing: -.3px;
  }
  .hero-text h1 span {
    background: linear-gradient(90deg, var(--teal-400), #7EB7FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-text p {
    font-size: 15px;
    color: rgba(255,255,255,.55);
    line-height: 1.7;
    max-width: 360px;
  }

  .feature-list {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
  }
  .feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255,255,255,.65);
  }
  .feature-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(46,90,168,.2);
    border: 1px solid rgba(76,123,201,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--teal-400);
  }
  .feature-icon svg { width: 16px; height: 16px; }

  /* ── Right panel ── */
  .right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    background: var(--bg);
  }

  .login-card {
    width: 100%;
    max-width: 420px;
  }

  .login-header {
    margin-bottom: 32px;
  }
  .login-header h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 6px;
    letter-spacing: -.2px;
  }
  .login-header p {
    font-size: 14px;
    color: var(--ink-500);
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
  }
  .form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: var(--ink-300);
    display: flex;
    pointer-events: none;
  }
  .input-wrap .input-icon svg { width: 17px; height: 17px; }
  .input-wrap input {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--ink-900);
    background: var(--surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .input-wrap input::placeholder { color: var(--ink-300); }
  .input-wrap input:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px var(--teal-tint-10);
    background: #fff;
  }
  .input-wrap input.is-error {
    border-color: var(--coral-500);
    box-shadow: 0 0 0 3px rgba(178,58,58,.10);
  }
  .toggle-pass {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--ink-300);
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color .15s;
  }
  .toggle-pass:hover { color: var(--ink-700); }
  .toggle-pass svg { width: 17px; height: 17px; }

  .field-error {
    font-size: 12px;
    color: var(--coral-500);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
  }
  .field-error svg { width: 13px; height: 13px; flex-shrink: 0; }

  .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  .remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-700);
    cursor: pointer;
    user-select: none;
  }
  .remember-label input[type="checkbox"] {
    width: 16px; height: 16px;
    border-radius: 4px;
    accent-color: var(--teal-500);
    cursor: pointer;
  }

  .btn-login {
    width: 100%;
    padding: 13.5px;
    background: var(--navy-950);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: .2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .15s, box-shadow .15s, transform .1s;
    position: relative;
    overflow: hidden;
  }
  .btn-login:hover {
    background: var(--navy-800);
    box-shadow: var(--shadow-md);
  }
  .btn-login:active { transform: scale(.98); }
  .btn-login svg { width: 17px; height: 17px; }

  .alert-error {
    background: rgba(178,58,58,.08);
    border: 1px solid rgba(178,58,58,.25);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: var(--coral-500);
    font-weight: 500;
  }
  .alert-error svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

  .login-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    color: var(--ink-300);
  }

  /* Responsive */
  @media (max-width: 820px) {
    body { grid-template-columns: 1fr; }
    .left-panel { display: none; }
    .right-panel { padding: 32px 24px; min-height: 100vh; }
  }
</style>
</head>
<body>

<!-- Left decorative panel -->
<div class="left-panel">
  <div class="brand">
    <div class="brand-mark">CT</div>
    <div>
      <div class="brand-name">ClassTrack</div>
      <div class="brand-sub">Attendance System</div>
    </div>
  </div>

  <div class="hero-text">
    <div class="hero-badge">
      <span class="dot"></span> Admin Portal
    </div>
    <h1>Track attendance<br>with <span>precision</span></h1>
    <p>Manage courses, batches and students from one dashboard. Mark attendance and generate reports instantly.</p>

    <div class="feature-list">
      <div class="feature-item">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
        </div>
        Daily attendance marking with Present / Late / Absent
      </div>
      <div class="feature-item">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18 17V9M13 17V5M8 17v-4"/></svg>
        </div>
        Instant reports with exportable attendance records
      </div>
      <div class="feature-item">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        Manage students across multiple courses & batches
      </div>
    </div>
  </div>
</div>

<!-- Right login form -->
<div class="right-panel">
  <div class="login-card">
    <div class="login-header">
      <h2>Welcome back</h2>
      <p>Sign in to your admin account to continue</p>
    </div>

    {{-- Error alert --}}
    @if ($errors->has('login'))
      <div class="alert-error">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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('login') }}
      </div>
    @endif

    <form method="POST" action="{{ route('login.post') }}" novalidate>
      @csrf

      <div class="form-group">
        <label for="login">Email or Username</label>
        <div class="input-wrap">
          <span class="input-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
          </span>
          <input
            type="text"
            id="login"
            name="login"
            value="{{ old('login') }}"
            placeholder="admin or admin@classtrack.edu"
            autocomplete="username"
            class="{{ $errors->has('login') ? 'is-error' : '' }}"
            autofocus
          >
        </div>
        @error('login')
          <span class="field-error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/></svg>
            {{ $message }}
          </span>
        @enderror
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <div class="input-wrap" id="passWrap">
          <span class="input-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </span>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="Enter your password"
            autocomplete="current-password"
          >
          <button type="button" class="toggle-pass" id="togglePass" title="Show password">
            <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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="field-error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/></svg>
            {{ $message }}
          </span>
        @enderror
      </div>

      <div class="form-options">
        <label class="remember-label">
          <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
          Remember me
        </label>
      </div>

      <button type="submit" class="btn-login">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
        Sign in to Dashboard
      </button>
    </form>

    <div class="login-footer">
      ClassTrack &copy; {{ date('Y') }} &nbsp;·&nbsp; Admin Portal
    </div>
  </div>
</div>

<script>
  // Toggle password visibility
  const toggleBtn = document.getElementById('togglePass');
  const passInput = document.getElementById('password');
  const eyeIcon   = document.getElementById('eyeIcon');

  const eyeOpen = `<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"/>`;
  const eyeOff  = `<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.94M9.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.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>`;

  toggleBtn.addEventListener('click', () => {
    const shown = passInput.type === 'text';
    passInput.type = shown ? 'password' : 'text';
    eyeIcon.innerHTML = shown ? eyeOpen : eyeOff;
  });
</script>
</body>
</html>
