<?php
session_start();

$conn = new mysqli("localhost", "carsfory_locis", "8QYP2!S?ONk1HQ5_", "carsfory_locis");
if ($conn->connect_error) { exit("DB greška."); }
$conn->set_charset('utf8mb4');

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $korisnik = trim($_POST["korisnicko_ime"] ?? '');
    $lozinka  = $_POST["lozinka"] ?? '';

    if ($korisnik === '' || $lozinka === '') {
        $greska = "Unesite korisničko ime i lozinku.";
    } else {
        $stmt = $conn->prepare("SELECT id, naziv, uloga, lozinka FROM poslovnice WHERE korisnicko_ime = ?");
        $stmt->bind_param("s", $korisnik);
        $stmt->execute();
        $rez = $stmt->get_result();
        $korisnik_data = $rez->fetch_assoc();
        $stmt->close();

        if ($korisnik_data && password_verify($lozinka, $korisnik_data["lozinka"])) {
            session_regenerate_id(true);

            $_SESSION["poslovnica_id"] = (int)$korisnik_data["id"];
            $_SESSION["naziv"]         = (string)$korisnik_data["naziv"];
            $_SESSION["uloga"]         = (string)$korisnik_data["uloga"];
            $_SESSION["last_activity"] = time();

            $uloga = $_SESSION['uloga'];
            if ($uloga === 'admin') {
                header("Location: admin.php"); exit;
            } elseif ($uloga === 'kazne') {
                header("Location: dashboard_kazne_sve_poslovnice.php"); exit;
            } elseif (strpos($uloga, 'najmovi') === 0) {
                header("Location: najmovi.php"); exit;
            } else {
                header("Location: dashboard.php"); exit;
            }
        } else {
            $greska = "Neispravno korisničko ime ili lozinka.";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0d6efd">
  <title>Prijava | Login</title>

  <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@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

  <style>
    :root {
      --avia-blue: #0d6efd;
      --avia-blue-dark: #0755c8;
      --avia-ink: #14213d;
      --avia-muted: #6b7890;
      --avia-border: #dfe5ee;
      --avia-surface: rgba(255, 255, 255, 0.94);
    }

    * { box-sizing: border-box; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--avia-ink);
      background:
        radial-gradient(circle at 10% 15%, rgba(13, 110, 253, .12), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(13, 110, 253, .08), transparent 30%),
        linear-gradient(135deg, #f7f9fc 0%, #edf2f8 100%);
    }

    .login-page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .login-shell {
      width: 100%;
      max-width: 440px;
    }

    .brand {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 23px;
      background: linear-gradient(145deg, #1c75ff, #0755c8);
      box-shadow: 0 12px 25px rgba(13, 110, 253, .25);
    }

    .brand-title {
      margin: 0;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.4px;
    }

    .brand-subtitle {
      margin: 2px 0 0;
      color: var(--avia-muted);
      font-size: 13px;
    }

    .login-card {
      background: var(--avia-surface);
      border: 1px solid rgba(223, 229, 238, .95);
      border-radius: 22px;
      box-shadow: 0 22px 60px rgba(28, 43, 68, .12);
      backdrop-filter: blur(12px);
      overflow: hidden;
    }

    .login-card-body { padding: 32px; }

    .login-heading {
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -.5px;
      margin-bottom: 7px;
    }

    .login-description {
      color: var(--avia-muted);
      font-size: 14px;
      margin-bottom: 25px;
    }

    .form-label {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .input-group-text,
    .form-control {
      min-height: 48px;
      border-color: var(--avia-border);
      background: #fff;
    }

    .input-group-text {
      color: #75839a;
      border-right: 0;
      padding-left: 15px;
    }

    .form-control {
      border-left: 0;
      font-size: 14px;
      padding-left: 5px;
    }

    .form-control:focus {
      border-color: #9dc2ff;
      box-shadow: none;
    }

    .input-group:focus-within {
      border-radius: 10px;
      box-shadow: 0 0 0 4px rgba(13, 110, 253, .10);
    }

    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control,
    .input-group:focus-within .password-toggle {
      border-color: #8ab7ff;
    }

    .password-toggle {
      min-width: 46px;
      border: 1px solid var(--avia-border);
      border-left: 0;
      background: #fff;
      color: #75839a;
      border-radius: 0 .375rem .375rem 0;
    }

    .password-toggle:hover { color: var(--avia-blue); }

    .btn-login {
      min-height: 49px;
      border: 0;
      border-radius: 11px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--avia-blue), var(--avia-blue-dark));
      box-shadow: 0 10px 22px rgba(13, 110, 253, .22);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .btn-login:hover {
      transform: translateY(-1px);
      box-shadow: 0 13px 26px rgba(13, 110, 253, .28);
    }

    .alert {
      border: 0;
      border-radius: 11px;
      font-size: 13px;
      padding: 12px 14px;
    }

    .login-footer {
      text-align: center;
      color: #8792a6;
      font-size: 12px;
      margin-top: 16px;
    }

    @media (max-width: 575.98px) {
      .login-page { padding: 16px; }
      .login-card-body { padding: 25px 21px; }
      .brand { justify-content: flex-start; padding-left: 4px; }
      .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
      .brand-title { font-size: 19px; }
    }
  </style>
</head>
<body>
  <main class="login-page">
    <div class="login-shell">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">
          <i class="bi bi-grid-1x2-fill"></i>
        </div>
        <div>
          <h1 class="brand-title">Login</h1>
          <p class="brand-subtitle">Login </p>
        </div>
      </div>

      <section class="login-card" aria-labelledby="login-title">
        <div class="login-card-body">
          <h2 id="login-title" class="login-heading">Dobro došli</h2>
          <p class="login-description">Prijavite se svojim korisničkim podacima za nastavak.</p>

          <?php if (isset($_GET['timeout'])): ?>
            <div class="alert alert-warning d-flex align-items-center gap-2" role="alert">
              <i class="bi bi-clock-history"></i>
              <span>Vaša sesija je istekla zbog neaktivnosti.</span>
            </div>
          <?php endif; ?>

          <?php if (!empty($greska)): ?>
            <div class="alert alert-danger d-flex align-items-center gap-2" role="alert">
              <i class="bi bi-exclamation-circle"></i>
              <span><?= htmlspecialchars($greska) ?></span>
            </div>
          <?php endif; ?>

          <form method="POST" autocomplete="off" novalidate>
            <div class="mb-3">
              <label for="korisnicko_ime" class="form-label">Korisničko ime</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person"></i></span>
                <input
                  type="text"
                  class="form-control"
                  name="korisnicko_ime"
                  id="korisnicko_ime"
                  value="<?= htmlspecialchars($korisnik ?? '') ?>"
                  placeholder="Unesite korisničko ime"
                  autocomplete="username"
                  autofocus
                  required>
              </div>
            </div>

            <div class="mb-4">
              <label for="lozinka" class="form-label">Lozinka</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                <input
                  type="password"
                  class="form-control"
                  name="lozinka"
                  id="lozinka"
                  placeholder="Unesite lozinku"
                  autocomplete="current-password"
                  required>
                <button class="password-toggle" type="button" id="togglePassword" aria-label="Prikaži lozinku" title="Prikaži lozinku">
                  <i class="bi bi-eye" id="togglePasswordIcon"></i>
                </button>
              </div>
            </div>

            <div class="d-grid">
              <button type="submit" class="btn btn-primary btn-login">
                <i class="bi bi-box-arrow-in-right me-2"></i>Prijava
              </button>
            </div>
          </form>
        </div>
      </section>

      <div class="login-footer">Zaštićeni pristup internom sustavu</div>
    </div>
  </main>

  <script>
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('lozinka');
    const passwordIcon = document.getElementById('togglePasswordIcon');

    togglePassword.addEventListener('click', function () {
      const isPassword = passwordInput.type === 'password';
      passwordInput.type = isPassword ? 'text' : 'password';
      passwordIcon.classList.toggle('bi-eye', !isPassword);
      passwordIcon.classList.toggle('bi-eye-slash', isPassword);
      togglePassword.setAttribute('aria-label', isPassword ? 'Sakrij lozinku' : 'Prikaži lozinku');
      togglePassword.setAttribute('title', isPassword ? 'Sakrij lozinku' : 'Prikaži lozinku');
      passwordInput.focus();
    });
  </script>
</body>
</html>
