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

<div class="max-w-4xl">
  <div class="flex items-center justify-between mb-5">
    <div>
      <h1 class="text-3xl font-bold text-ink-900">Change Password</h1>
      <div class="text-sm text-ink-600 mt-1">
        Secure your account by updating your password.
      </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) ?>/" data-nav>Back</a>
  </div>

  <div class="glass rounded-[30px] overflow-hidden">
    <div class="grid md:grid-cols-[1.05fr_.95fr]">
      <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">
          ACCOUNT SECURITY
        </div>

        <h2 class="text-2xl font-bold text-ink-900">Update your password</h2>
        <p class="text-sm text-ink-600 mt-2 leading-6">
          Enter your existing password, then choose a new secure one.
        </p>

        <form class="mt-7 grid gap-4"
            action="<?= h($basePath) ?>/api/users/change-password"
            method="post"
            data-ajax
            autocomplete="off">

            <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="relative">
            <label class="text-sm font-semibold text-slate-800">Current Password</label>
            <input
                name="current_password"
                id="current_password"
                type="password"
                required
                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="Enter current password"
            />
            <button
                type="button"
                onclick="togglePwd('current_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">New Password</label>
            <input
                name="new_password"
                id="new_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="togglePwd('new_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 New Password</label>
            <input
                name="new_password_confirm"
                id="new_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 new password"
            />
            <button
                type="button"
                onclick="togglePwd('new_password_confirm', this)"
                class="absolute right-3 top-[41px] text-slate-500 hover:text-orange-600 text-sm"
                tabindex="-1"
            >👁</button>
            </div>

          <div class="pt-2">
            <button class="btn-primary px-6 py-3 rounded-2xl transition">
              Change Password
            </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">GOOD SECURITY HABITS</div>
          <div class="mt-3 space-y-3 text-sm text-ink-700 leading-6">
            <div>Do not share your password.</div>
            <div>Do not reuse old passwords.</div>
            <div>Change it immediately if you suspect exposure.</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">RECOMMENDED</div>
          <div class="mt-3 text-sm text-ink-700 leading-6">
            Use uppercase, lowercase, numbers, and special characters for stronger protection.
          </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">LOCAL AUTHENTICATION ONLY</div>
          <div class="mt-2 text-sm text-ink-700 leading-6">
            This account is managed fully inside the WSC system. No social-site authentication is used.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  document.addEventListener('submit', function(e){
    const f = e.target;
    if (!f || !String(f.action || '').includes('/api/users/change-password')) return;

    const p1 = f.querySelector('#new_password')?.value || '';
    const p2 = f.querySelector('#new_password_confirm')?.value || '';

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

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

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

document.addEventListener('DOMContentLoaded', function(){
  const form = document.querySelector('form[action$="/api/users/change-password"]');
  if (form) form.reset();
});

</script>