<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $password = $_POST['password'] ?? '';
    if ($password === 'experte') {
        $_SESSION['ruv_auth'] = 'ok';
        setcookie('ruv_auth', 'ok', time() + 365 * 24 * 3600, '/', '', true, true);
        header('Location: dispo2026.php');
        exit;
    }
    $error = true;
}

if ((isset($_SESSION['ruv_auth']) && $_SESSION['ruv_auth'] === 'ok') ||
    (isset($_COOKIE['ruv_auth']) && $_COOKIE['ruv_auth'] === 'ok')) {
    header('Location: dispo2026.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drehplan Resilienz Experten 2026</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 24px;
    }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 48px 40px 40px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    }
    .logo {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 8px;
    }
    h1 {
      font-size: 22px;
      font-weight: 700;
      color: #111;
      margin-bottom: 6px;
      line-height: 1.2;
    }
    .subtitle {
      font-size: 13px;
      color: #888;
      margin-bottom: 36px;
    }
    label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #555;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      font-family: inherit;
      color: #111;
      outline: none;
      transition: border-color 0.15s;
      margin-bottom: 18px;
      -webkit-appearance: none;
    }
    input:focus {
      border-color: #111;
    }
    .error-msg {
      background: #fff0f0;
      color: #c00;
      font-size: 13px;
      padding: 10px 14px;
      border-radius: 7px;
      margin-bottom: 18px;
    }
    button {
      width: 100%;
      padding: 14px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
    }
    button:hover { background: #333; }
    button:active { background: #000; }
  </style>
</head>
<body>
<div class="card">
  <div class="logo">R+V Versicherung</div>
  <h1>Resilienz Experten 2026</h1>
  <p class="subtitle">Drehplan · Flow Spaces · September</p>

  <form method="POST" action="" id="loginForm">
    <?php if (!empty($error)): ?>
      <div class="error-msg">Falsches Passwort.</div>
    <?php endif; ?>

    <label for="name">Dein Name</label>
    <input type="text" id="name" name="name" placeholder="Vorname Nachname" autocomplete="name" required>

    <label for="password">Passwort</label>
    <input type="password" id="password" name="password" placeholder="Passwort eingeben" autocomplete="current-password" required>

    <button type="submit">Einloggen</button>
  </form>
</div>
<script>
  const nameKey = 'ruv_dispo_name';
  const nameField = document.getElementById('name');

  // Pre-fill name from localStorage
  const saved = localStorage.getItem(nameKey);
  if (saved) nameField.value = saved;

  // Save name on submit
  document.getElementById('loginForm').addEventListener('submit', function() {
    const n = nameField.value.trim();
    if (n) localStorage.setItem(nameKey, n);
  });

  // Focus: if name already filled, focus password
  if (saved) {
    document.getElementById('password').focus();
  } else {
    nameField.focus();
  }
</script>
</body>
</html>
