<%- include('partials/header', { title: 'Pengaturan Akun Admin' }) %>

<style>
  :root {
    --blue-500: #3b82f6;
    --blue-50: #eff6ff;
  }
  .text-blue-500 { color: var(--blue-500); }
  .bg-blue-50 { background-color: var(--blue-50); }
  
  .custom-scroll::-webkit-scrollbar { width: 2px; height: 2px; }
  .custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
  .custom-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
  .custom-scroll:hover::-webkit-scrollbar-thumb { background-color: #94a3b8; }
</style>

<div class="max-w-3xl mx-auto px-6 pb-2">

  <!-- Alert Success -->
  <% if (typeof success !== 'undefined' && success) { %>
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-[2px] mb-4 text-[12.5px] font-medium flex items-center gap-3">
      <div class="w-7 h-7 rounded-[2px] bg-green-100 flex items-center justify-center shrink-0">
        <i class="fas fa-check-circle text-[12.5px]"></i>
      </div>
      <p><%= success %></p>
    </div>
  <% } %>

  <!-- Alert Error -->
  <% if (typeof error !== 'undefined' && error) { %>
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-[2px] mb-4 text-[12.5px] font-medium flex items-center gap-3">
      <div class="w-7 h-7 rounded-[2px] bg-red-100 flex items-center justify-center shrink-0">
        <i class="fas fa-exclamation-circle text-[12.5px]"></i>
      </div>
      <p><%= error %></p>
    </div>
  <% } %>

  <!-- Judul -->
  <div class="flex items-center gap-2 mb-3">
    <h2 class="text-base font-medium text-gray-800">Profile Akun Admin</h2>
  </div>

  <!-- Tabel tanpa card -->
  <table class="w-full text-[12.5px] border-collapse border border-gray-300 mb-4">
    <tbody>
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800">ID User</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium"><%= (admin._id.toString()).slice(10) %></td>
      </tr>    
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800 w-1/3">Username</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium"><%= admin.username %></td>
      </tr>
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800">Email</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium"><%= admin.email %></td>
      </tr>
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800">Password</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium">••••••••</td>
      </tr>
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800">Role</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium capitalize"><%= admin.role %></td>
      </tr>
      <tr>
        <td class="px-3 py-3 border border-gray-300 font-medium text-gray-800">Tanggal Bergabung</td>
        <td class="px-3 py-3 border border-gray-300 text-gray-800 font-medium">
          <%= new Date(admin.createdAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) %>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- Tombol edit -->
  <button onclick="openEditAdminModal()" class="bg-blue-500 hover:bg-blue-600 text-white w-full px-4 py-3 rounded-[2px] text-[12.5px] font-medium shadow-sm transition-all flex items-center justify-center gap-2 mb-6">
    <i class="fas fa-pen-to-square text-[12.5px]"></i> Edit Informasi
  </button>

  <!-- ===================== MODAL EDIT ADMIN ===================== -->
  <div id="editAdminModal" class="fixed inset-0 z-[150] hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onclick="closeEditAdminModal()"></div>
    <div class="relative bg-white shadow-xl overflow-hidden w-full max-w-md transform transition-all scale-95 opacity-0 duration-200 rounded-[2px] flex flex-col max-h-[90vh]" id="editAdminModalContent">
      <div class="bg-white px-5 py-4 relative flex items-center justify-between border-b border-gray-200 shrink-0">
        <h2 class="text-sm font-medium text-gray-800">Edit Informasi Admin</h2>
        <button onclick="closeEditAdminModal()" class="w-7 h-7 flex items-center justify-center rounded-[2px] text-gray-500 hover:text-gray-700 transition-colors">
          <i class="fas fa-times text-[12.5px]"></i>
        </button>
      </div>
      <div class="p-5 overflow-y-auto custom-scroll">
        <form id="editAdminForm" method="POST" action="/admin/account" class="flex flex-col gap-4" autocomplete="off">
          <!-- Username -->
          <div>
            <label class="block text-[12.5px] font-medium text-gray-700 mb-2">Username</label>
            <div class="flex items-center bg-gray-50 border border-[#dddddd] rounded-[2px] p-1.5 transition-all focus-within:border-gray-500 focus-within:ring-1 focus-within:ring-gray-500">
              <input name="username" type="text" value="<%= admin.username %>" placeholder="Masukkan username..." 
                     class="flex-1 bg-transparent px-3 py-2 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" 
                     maxlength="15" pattern="[^\s]+" title="Username tidak boleh mengandung spasi" required>
            </div>
            <p class="text-[10px] text-gray-400 mt-1.5">Maksimal 15 karakter, tanpa spasi, huruf kecil otomatis.</p>
          </div>

          <!-- Password Baru -->
          <div>
            <label class="flex items-center justify-between text-[12.5px] font-medium text-gray-700 mb-2">
              <span>Kata Sandi Baru</span>
              <span class="text-[10px] text-gray-500 bg-gray-100 px-2 py-0.5 rounded-[2px] border border-gray-200">opsional</span>
            </label>
            <div class="flex items-center bg-gray-50 border border-[#dddddd] rounded-[2px] p-1 transition-all focus-within:border-gray-500 focus-within:ring-1 focus-within:ring-gray-500">
              <input id="newPasswordModal" name="newPassword" type="password" placeholder="••••••••" 
                     class="flex-1 bg-transparent px-2 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400">
              <button type="button" onclick="togglePassword('newPasswordModal', 'newPasswordToggleIcon')" class="w-10 h-10 text-gray-500 hover:text-gray-800 rounded-[2px] transition-all flex items-center justify-center shrink-0 ml-1">
                <i id="newPasswordToggleIcon" class="far fa-eye text-[12.5px]"></i>
              </button>
            </div>
          </div>

          <!-- Password Saat Ini -->
          <div>
            <label class="flex items-center gap-1 text-[12.5px] font-medium text-gray-700 mb-2">
              <span>Kata Sandi Saat Ini</span>
              <span class="text-red-500">*</span>
            </label>
            <div class="flex items-center bg-gray-50 border border-[#dddddd] rounded-[2px] p-1 transition-all focus-within:border-gray-500 focus-within:ring-1 focus-within:ring-gray-500">
              <input id="currentPasswordModal" name="password" type="password" placeholder="Masukkan kata sandi saat ini..." 
                     class="flex-1 bg-transparent px-2 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" required>
              <button type="button" onclick="togglePassword('currentPasswordModal', 'currentPasswordToggleIcon')" class="w-10 h-10 text-gray-500 hover:text-gray-800 rounded-[2px] transition-all flex items-center justify-center shrink-0 ml-1">
                <i id="currentPasswordToggleIcon" class="far fa-eye text-[12.5px]"></i>
              </button>
            </div>
            <p class="text-[10px] text-gray-400 mt-1.5">Wajib diisi untuk otorisasi perubahan akun.</p>
          </div>

          <!-- Tombol Simpan -->
          <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white w-full px-4 py-3 rounded-[2px] text-[12.5px] font-medium shadow-sm transition-all flex items-center justify-center gap-2 mt-2">
            <i class="fas fa-save text-[12.5px]"></i> Simpan Perubahan
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<%- include('partials/footer') %>

<script>
  // ================== MODAL EDIT ADMIN ==================
  function openEditAdminModal() {
    const modal = document.getElementById('editAdminModal');
    const modalContent = document.getElementById('editAdminModalContent');
    modal.classList.remove('hidden');
    setTimeout(() => {
      modalContent.classList.remove('scale-95', 'opacity-0');
      modalContent.classList.add('scale-100', 'opacity-100');
    }, 10);
    document.body.style.overflow = 'hidden';
  }

  function closeEditAdminModal() {
    const modal = document.getElementById('editAdminModal');
    const modalContent = document.getElementById('editAdminModalContent');
    modalContent.classList.remove('scale-100', 'opacity-100');
    modalContent.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
      modal.classList.add('hidden');
      document.body.style.overflow = '';
    }, 200);
  }

  // ================== TOGGLE PASSWORD ==================
  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');
    }
  }
</script>