<?php
global $db, $config;

$basePath = rtrim(($config['app']['base_path'] ?? ''), '/');
$id = (int)($_GET['id'] ?? 0);

$stmt = $db->prepare("SELECT * FROM users WHERE id=?");
$stmt->execute([$id]);
$u = $stmt->fetch();

if (!$u) {
  echo '<div class="glass rounded-3xl p-5">User not found.</div>';
  return;
}
?>

<div class="max-w-4xl">
  <div class="flex items-center justify-between mb-5">
    <div>
      <h1 class="text-3xl font-bold text-ink-900">Edit User</h1>
      <div class="text-sm text-ink-600 mt-1">Update full name, email, phone, and account status.</div>
    </div>

    <a class="px-4 py-2 rounded-2xl bg-white border border-orange-200 text-orange-700 hover:bg-orange-50 transition"
       href="<?= h($basePath) ?>/users" data-nav>Back</a>
  </div>

  <div class="glass rounded-[30px] overflow-hidden">
    <div class="grid md:grid-cols-[1.1fr_.9fr]">
      <div class="p-7 md:p-9 border-r border-orange-100">
        <form class="grid md:grid-cols-2 gap-4"
              action="<?= h($basePath) ?>/api/users/update" method="post" data-ajax>

          <input type="hidden" name="id" value="<?= (int)$u['id'] ?>">

          <div class="md:col-span-2">
            <label class="text-sm font-semibold text-slate-800">Full Name</label>
            <input name="full_name" required value="<?= h($u['full_name']) ?>"
                   class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 outline-none focus:ring-2 focus:ring-orange-300" />
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Email</label>
            <input name="email" type="email" required value="<?= h($u['email']) ?>"
                   class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 outline-none focus:ring-2 focus:ring-orange-300" />
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Phone</label>
            <input name="phone" value="<?= h($u['phone']) ?>"
                   class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 outline-none focus:ring-2 focus:ring-orange-300" />
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Status</label>
            <select name="is_active"
                    class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 outline-none focus:ring-2 focus:ring-orange-300">
              <option value="1" <?= (int)$u['is_active'] === 1 ? 'selected' : '' ?>>Active</option>
              <option value="0" <?= (int)$u['is_active'] === 0 ? 'selected' : '' ?>>Inactive</option>
            </select>
          </div>

          <div class="flex items-end">
            <div class="w-full rounded-2xl border border-orange-100 bg-orange-50 px-4 py-3 text-sm text-orange-800">
              Created: <?= h($u['created_at']) ?>
            </div>
          </div>

          <div class="md:col-span-2 pt-2">
            <button class="btn-primary px-6 py-3 rounded-2xl transition">
              Update User
            </button>
          </div>
        </form>
      </div>

      <div class="p-7 md:p-9 bg-gradient-to-br from-orange-50 via-white to-orange-50">
        <div class="rounded-[24px] border border-orange-100 bg-white p-5 shadow-sm">
          <div class="text-sm font-semibold text-orange-700">USER ACCOUNT</div>
          <div class="mt-3 space-y-3 text-sm text-ink-700 leading-6">
            <div>Keep contact details current.</div>
            <div>Deactivate unused accounts promptly.</div>
            <div>Reset password from the Users page when needed.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>