<?php
global $config;

$siteKey = $siteKey ?? ($config['recaptcha']['site_key'] ?? '');
$basePath = rtrim(($config['app']['base_path'] ?? ''), '/');
?>

<div class="max-w-md mx-auto glass rounded-3xl p-6 border border-orange-200/60 shadow-2xl">
  <div class="mb-6">
    <div class="w-full h-28 overflow-hidden mb-6 brand-reveal sheen-wrap rounded-2xl">
      <img
        src="<?= h($basePath) ?>/assets/logo-wide.png"
        alt="WSC Logistics"
        class="w-full h-full object-cover"
      />
      <div class="sheen"></div>
    </div>
  </div>

  <form id="loginForm" class="mt-6 space-y-4" action="<?= h($basePath) ?>/api/login" method="post" data-ajax>
    <div>
      <label class="text-sm font-semibold text-slate-800">Email</label>
      <input
        name="email"
        type="email"
        required
        class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-orange-300"
        placeholder="admin@wsc.local"
      />
    </div>

    <div class="relative">
      <label class="text-sm font-semibold text-slate-800">Password</label>

      <input
        id="password"
        name="password"
        type="password"
        required
        class="mt-1 w-full px-4 py-3 pr-12 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-orange-300"
        placeholder="••••••••"
      />

      <button
        type="button"
        onclick="togglePassword()"
        class="absolute right-3 top-[41px] text-slate-500 hover:text-orange-600 text-sm"
        tabindex="-1"
      >
        👁
      </button>
    </div>

    <div class="mt-4">
      <label class="text-sm font-semibold text-slate-800 mb-2 block">
        Security check
      </label>

      <div class="inline-block scale-95 origin-left">
        <div id="recaptchaBox"></div>
      </div>

      <div class="text-xs text-slate-500 mt-1">
        Please confirm you are not a robot
      </div>
    </div>

    <div id="loginError" class="hidden text-sm text-red-600 bg-red-50 border border-red-200 rounded-2xl px-4 py-3"></div>

    <button type="submit" class="w-full px-4 py-3 rounded-2xl btn-primary transition">
      Login
    </button>
  </form>
</div>

<script>
  function togglePassword() {
    const input = document.getElementById('password');
    input.type = input.type === 'password' ? 'text' : 'password';
  }
</script>