<?php
global $config;
$basePath = rtrim(($config['app']['base_path'] ?? ''), '/');
?>

<div class="max-w-5xl">
  <div class="flex items-center justify-between mb-5">
    <div>
      <h1 class="text-3xl font-bold text-ink-900">Register New User</h1>
      <div class="text-sm text-ink-600 mt-1">
        Create a new internal WSC system user. Accounts are created only by an existing logged-in user.
      </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.15fr_.85fr]">
      <div class="p-7 md:p-9 border-r border-orange-100">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 border border-orange-200 text-orange-700 text-xs font-semibold mb-4">
          USER ADMINISTRATION
        </div>

        <h2 class="text-2xl font-bold text-ink-900">Add a new local user account</h2>
        <p class="text-sm text-ink-600 mt-2 leading-6">
          This system does not use Google, Facebook, or any social sign-in. Each user is created internally and logs in using email and password.
        </p>

        <form id="newUserForm"
              class="mt-7 grid md:grid-cols-2 gap-4"
              action="<?= h($basePath) ?>/api/users/create"
              method="post"
              data-ajax
              autocomplete="off">

          <!-- anti-autofill decoys -->
          <input type="text" name="fake_username" autocomplete="username" style="display:none">
          <input type="password" name="fake_password" autocomplete="current-password" style="display:none">

          <div class="md:col-span-2">
            <label class="text-sm font-semibold text-slate-800">Full Name</label>
            <input name="full_name"
                   type="text"
                   required
                   value=""
                   autocomplete="off"
                   readonly
                   onfocus="this.removeAttribute('readonly');"
                   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="e.g. WSC Admin" />
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Email</label>
            <input name="email"
                   id="new_user_email"
                   type="email"
                   required
                   value=""
                   autocomplete="off"
                   autocapitalize="off"
                   autocorrect="off"
                   spellcheck="false"
                   readonly
                   onfocus="this.removeAttribute('readonly');"
                   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="e.g. admin@wsc.local" />
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Phone</label>
            <input name="phone"
                   type="text"
                   value=""
                   autocomplete="off"
                   readonly
                   onfocus="this.removeAttribute('readonly');"
                   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="e.g. 0712345678" />
          </div>

          <div class="relative">
            <label class="text-sm font-semibold text-slate-800">Password</label>
            <input name="password"
                   id="new_user_password"
                   type="password"
                   required
                   minlength="8"
                   value=""
                   autocomplete="new-password"
                   readonly
                   onfocus="this.removeAttribute('readonly');"
                   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="Minimum 8 characters" />
            <button type="button"
                    onclick="toggleNewUserPwd('new_user_password', this)"
                    class="absolute right-3 top-[41px] text-slate-500 hover:text-orange-600 text-sm"
                    tabindex="-1">👁</button>
          </div>

          <div class="relative">
            <label class="text-sm font-semibold text-slate-800">Confirm Password</label>
            <input name="password_confirm"
                   id="new_user_password_confirm"
                   type="password"
                   required
                   minlength="8"
                   value=""
                   autocomplete="new-password"
                   readonly
                   onfocus="this.removeAttribute('readonly');"
                   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="Repeat password" />
            <button type="button"
                    onclick="toggleNewUserPwd('new_user_password_confirm', this)"
                    class="absolute right-3 top-[41px] text-slate-500 hover:text-orange-600 text-sm"
                    tabindex="-1">👁</button>
          </div>

          <div>
            <label class="text-sm font-semibold text-slate-800">Account Status</label>
            <select name="is_active"
                    autocomplete="off"
                    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" selected>Active</option>
              <option value="0">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">
              The new user will sign in with email + password only.
            </div>
          </div>

          <div class="md:col-span-2 pt-2">
            <button class="btn-primary px-6 py-3 rounded-2xl transition">
              Create 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">INTERNAL ACCOUNT POLICY</div>
          <div class="mt-3 space-y-3 text-sm text-ink-700 leading-6">
            <div>No self-registration.</div>
            <div>No Google or Facebook login.</div>
            <div>No Microsoft or external identity providers.</div>
            <div>Only an existing logged-in user can register another user.</div>
          </div>
        </div>

        <div class="mt-5 rounded-[24px] border border-orange-100 bg-white p-5 shadow-sm">
          <div class="text-sm font-semibold text-orange-700">PASSWORD TIPS</div>
          <div class="mt-3 text-sm text-ink-700 leading-6">
            Use a strong password with a mix of letters, numbers, and symbols. Ask the new user to change it after first use.
          </div>
        </div>

        <div class="mt-5 rounded-[24px] border border-orange-200 bg-orange-50 p-5">
          <div class="text-sm font-semibold text-orange-700">WSC LOGISTICS</div>
          <div class="mt-2 text-sm text-ink-700 leading-6">
            Clean internal user administration with secure local authentication.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  function clearNewUserForm() {
    const form = document.getElementById('newUserForm');
    if (!form) return;

    form.reset();

    form.querySelectorAll('input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]').forEach(el => {
      el.value = '';
      el.setAttribute('value', '');
    });

    const active = form.querySelector('select[name="is_active"]');
    if (active) active.value = '1';
  }

  // clear immediately on render
  clearNewUserForm();

  // clear again after browser autofill/pass manager interference
  setTimeout(clearNewUserForm, 0);
  setTimeout(clearNewUserForm, 150);
  setTimeout(clearNewUserForm, 500);

  document.addEventListener('submit', function(e){
    const f = e.target;
    if (!f || !String(f.action || '').includes('/api/users/create')) return;

    const p1 = f.querySelector('#new_user_password')?.value || '';
    const p2 = f.querySelector('#new_user_password_confirm')?.value || '';

    if (p1 !== p2) {
      e.preventDefault();
      alert('Password confirmation does not match.');
      return;
    }

    if (p1.length < 8) {
      e.preventDefault();
      alert('Password must be at least 8 characters.');
    }
  });
})();

function toggleNewUserPwd(inputId, btn){
  const input = document.getElementById(inputId);
  if (!input) return;
  input.type = input.type === 'password' ? 'text' : 'password';
  btn.textContent = input.type === 'password' ? '👁' : '🙈';
}
</script>