<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#ffffff" />
  <title><%= settings.name %></title>
  
  <% if (settings.description) { %>
  <meta name="description" content="<%= settings.description %>">
  <% } %>
  
  <% if (settings.logoUrl) { %>
  <link rel="icon" type="image/jpeg" href="<%= settings.logoUrl %>">
  <% } %>
  
  <script src="https://cdn.tailwindcss.com"></script>
  <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&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">  
  <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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
  <script>
    tailwind.config = { 
      theme: { 
        extend: { 
          fontFamily: { 
            'sans': ['Inter', 'sans-serif']
          }
        } 
      } 
    }
  </script>
  <style>
    :root {
      --cream-top: #f8e3e0;
      --blue-500: #3b82f6;
      --green-600: #16a34a;
    }
    body { 
      background: #ffffff; 
      color: #1f2937;
      font-family: 'Open Sans', sans-serif !important;
      margin: 0;
    }
    .validation-msg { font-size: 11px; margin-top: 4px; }
    .valid { color: #16a34a; }
    .invalid { color: #dc2626; }
  </style>
</head>
<body class="min-h-screen flex flex-col">

  <!-- Konten utama -->
  <div class="flex-1 flex flex-col justify-center items-center px-6 py-16 bg-white">

    <!-- Card Buat Password Baru -->
    <div class="bg-white border border-[#dddddd] rounded-[2px] px-6 py-10 w-full max-w-md flex flex-col gap-6 shadow-sm">
      
      <% if (settings.logoUrl) { %>
        <div class="text-center">
          <img src="<%= settings.logoUrl %>" alt="Logo" class="h-12 w-auto object-contain mx-auto mb-2">
          <h2 class="text-base font-medium text-gray-800">Buat Password Baru</h2>
        </div>
      <% } else { %>
        <div class="text-center">
          <h2 class="text-base font-medium text-gray-800">Buat Password Baru</h2>
        </div>
      <% } %>

      <% if (typeof error !== 'undefined' && error) { %>
        <div class="bg-[#fef2f2] border border-[#fecaca] text-[#dc2626] px-5 py-4 rounded-[2px] text-[12.5px] font-medium">
          <%= error %>
        </div>
      <% } %>

      <% if (typeof success !== 'undefined' && success) { %>
        <div class="bg-[#f0fdf4] border border-[#bbf7d0] text-[#16a34a] px-5 py-4 rounded-[2px] text-[12.5px] font-medium">
          <%= success %>
        </div>
      <% } %>

      <form method="POST" action="/reset-password/<%= typeof token !== 'undefined' ? token : '' %>" class="flex flex-col gap-4" id="resetForm" novalidate>
        
        <!-- Password Baru -->
        <div>
          <label class="block text-[12.5px] font-medium text-gray-800 mb-2 px-1">Password Baru</label>
          <div class="flex items-center bg-[#f9f9f9] border border-[#dddddd] rounded-[2px] transition-all focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
            <input id="passwordInput1" name="password" type="password" placeholder="••••••••" 
                   class="flex-1 bg-transparent px-4 py-3 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" 
                   minlength="4" required>
            <button type="button" onclick="togglePassword('passwordInput1', 'toggleIcon1')" class="w-9 h-9 text-gray-400 hover:text-gray-600 transition-all flex items-center justify-center shrink-0 mr-1">
              <i id="toggleIcon1" class="far fa-eye text-[12.5px]"></i>
            </button>
          </div>
          <p id="passwordFeedback1" class="validation-msg"></p>
        </div>
        
        <!-- Konfirmasi Password -->
        <div>
          <label class="block text-[12.5px] font-medium text-gray-800 mb-2 px-1">Konfirmasi Password</label>
          <div class="flex items-center bg-[#f9f9f9] border border-[#dddddd] rounded-[2px] transition-all focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
            <input id="passwordInput2" name="confirmPassword" type="password" placeholder="••••••••" 
                   class="flex-1 bg-transparent px-4 py-3 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" 
                   minlength="4" required>
            <button type="button" onclick="togglePassword('passwordInput2', 'toggleIcon2')" class="w-9 h-9 text-gray-400 hover:text-gray-600 transition-all flex items-center justify-center shrink-0 mr-1">
              <i id="toggleIcon2" class="far fa-eye text-[12.5px]"></i>
            </button>
          </div>
          <p id="passwordFeedback2" class="validation-msg"></p>
        </div>

        <!-- Tombol Simpan -->
        <button type="submit" id="submitBtn" class="bg-blue-500 hover:bg-blue-600 text-white w-full py-3 rounded-[2px] text-[12.5px] font-medium shadow-sm transition-all flex items-center justify-center gap-2 mt-2">
          <span id="submitBtnText">Simpan Password Baru</span>
          <i id="submitBtnSpinner" class="fas fa-spinner fa-spin text-[12.5px] hidden ml-1"></i>
          <i class="fas fa-arrow-right text-[12.5px]"></i>
        </button>
      </form>
    </div>

    <!-- Link bawah -->
    <div class="mt-8 text-center flex flex-col gap-6">
      <a href="/" class="text-[12.5px] font-medium text-blue-600 transition-colors flex items-center justify-center gap-1">
        <i class="fas fa-arrow-left text-[12.5px]"></i> Ke Beranda
      </a>
      
      <div class="text-center flex gap-1">
        <p class="text-[12.5px] text-gray-800 font-medium">Butuh bantuan?</p>
        <a href="<%= settings.contactDeveloper || '#' %>" class="text-[12.5px] font-medium text-blue-600 underline transition-colors flex items-center justify-center gap-1">
          Hubungi tim Support
        </a>
      </div>
    </div>

  </div>

  <script>
    // === Validasi & Toggle Password (sama persis seperti register) ===
    const password1 = document.getElementById('passwordInput1');
    const password2 = document.getElementById('passwordInput2');
    const feedback1 = document.getElementById('passwordFeedback1');
    const feedback2 = document.getElementById('passwordFeedback2');
    let isSubmitting = false;

    // Fungsi hapus spasi
    function removeSpaces(e) {
      const input = e.target;
      const cursorPos = input.selectionStart;
      const oldValue = input.value;
      const newValue = oldValue.replace(/\s/g, '');
      if (oldValue !== newValue) {
        input.value = newValue;
        const diff = oldValue.length - newValue.length;
        input.setSelectionRange(cursorPos - diff, cursorPos - diff);
      }
    }

    password1.addEventListener('input', removeSpaces);
    password2.addEventListener('input', removeSpaces);

    // Toggle visibility
    function togglePassword(inputId, iconId) {
      const input = document.getElementById(inputId);
      const icon = document.getElementById(iconId);
      if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
      } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
      }
    }

    // Validasi password (minimal 4 karakter)
    function validatePassword1() {
      const val = password1.value;
      if (val.length === 0) {
        feedback1.textContent = '';
        return false;
      }
      if (val.length >= 4) {
        feedback1.textContent = 'Password minimal 4 karakter';
        feedback1.className = 'validation-msg valid';
        return true;
      } else {
        feedback1.textContent = 'Password minimal 4 karakter';
        feedback1.className = 'validation-msg invalid';
        return false;
      }
    }

    // Validasi konfirmasi password
    function validatePassword2() {
      const pass = password1.value;
      const confirm = password2.value;
      if (confirm.length === 0) {
        feedback2.textContent = '';
        return false;
      }
      if (pass === confirm) {
        feedback2.textContent = 'Password cocok';
        feedback2.className = 'validation-msg valid';
        return true;
      } else {
        feedback2.textContent = 'Password tidak cocok';
        feedback2.className = 'validation-msg invalid';
        return false;
      }
    }

    password1.addEventListener('input', () => {
      validatePassword1();
      if (password2.value.length > 0) validatePassword2();
    });
    password2.addEventListener('input', validatePassword2);

    // Submit handling
    document.getElementById('resetForm').addEventListener('submit', function(e) {
      if (isSubmitting) {
        e.preventDefault();
        return false;
      }

      const isPass1Valid = validatePassword1();
      const isPass2Valid = validatePassword2();

      if (!isPass1Valid || !isPass2Valid) {
        e.preventDefault();
        if (!isPass1Valid) password1.focus();
        else if (!isPass2Valid) password2.focus();
        return false;
      }

      isSubmitting = true;
      const btn = document.getElementById('submitBtn');
      btn.disabled = true;
      btn.classList.add('opacity-70', 'cursor-not-allowed');
      document.getElementById('submitBtnText').textContent = 'Menyimpan...';
      document.getElementById('submitBtnSpinner').classList.remove('hidden');
    });

    // Reset jika halaman di-cache (back button)
    window.addEventListener('pageshow', function(event) {
      if (event.persisted) {
        isSubmitting = false;
        const btn = document.getElementById('submitBtn');
        if (btn) {
          btn.disabled = false;
          btn.classList.remove('opacity-70', 'cursor-not-allowed');
          document.getElementById('submitBtnText').textContent = 'Simpan Password Baru';
          document.getElementById('submitBtnSpinner').classList.add('hidden');
        }
      }
    });
  </script>

</body>
</html>