` : ``; }function statusLamp(isAvail){ return ``; }function cardTemplate(item){ const cat=item.category==='bank'?'Bank Transfer':item.category==='va'?'Virtual Account':item.category==='ewallet'?'E-Wallet':'Marketplace/Outlet'; const isAvail=item.available!==false; const disable=isAvail?'':'tw-opacity-60 tw-cursor-not-allowed'; const right=isAvail ? '' : ''; return `

${logoBadge(item)}

${statusLamp(isAvail)}${item.name}

${cat}

${right}

`; } // default: show only available availableOnly = true; availableOnlyEl.checked = true;function renderPills(){pillsEl.innerHTML=CATEGORIES.map(pillTemplate).join('');} function renderLogos(){ logoPreview.innerHTML=PAYMENT_METHODS.slice(0,9).map(m=>``).join(''); }function filterList(){ const q=query.trim().toLowerCase(); return PAYMENT_METHODS.filter(m=>{ const matchCat=activeCategory==='all'||m.category===activeCategory; const hay=`${m.name} ${m.accountNumber||''} ${m.accountName||''}`.toLowerCase(); const matchQ=q?hay.includes(q):true; const isAvail=m.available!==false; const matchAvail=availableOnly?isAvail:true; return matchCat&&matchQ&&matchAvail }); }function renderGrid(){ const f=filterList(); gridEl.innerHTML=f.map(cardTemplate).join(''); emptyEl.classList.toggle('tw-hidden',f.length!==0); if(f.length===0) emptyEl.classList.remove('tw-hidden'); }/* ===== Modal enhancements ===== */ function setBrandColor(color){ const panel=modalEl.querySelector('.pw-modal-panel'); panel.style.setProperty('--brand', color || '#0ea5e9'); }function trapFocus(e){ if(e.key!=='Tab') return; const focusables=modalEl.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'); if(!focusables.length) return; const first=focusables[0], last=focusables[focusables.length-1]; if(e.shiftKey && document.activeElement===first){ last.focus(); e.preventDefault(); } else if(!e.shiftKey && document.activeElement===last){ first.focus(); e.preventDefault(); } }function openModal(item){ currentItem=item; lastFocus=document.activeElement;modalTitle.textContent=item.name; modalCategory.textContent=item.category==='bank'?'Bank Transfer':item.category==='va'?'Virtual Account':item.category==='ewallet'?'E-Wallet':'Marketplace/Outlet'; accountLabel.textContent=item.accountLabel||'No.'; accountNumber.textContent=item.accountNumber||'—'; accountName.textContent=item.accountName||'—'; stepsList.innerHTML=(item.steps||[]).map(s=>`

${s}

`).join(''); if(item.notes){notes.textContent=item.notes;notes.classList.remove('tw-hidden')}else{notes.classList.add('tw-hidden')} modalLogo.innerHTML=logoBadge(item);const isAvail=item.available!==false; statusLampEl.innerHTML=statusLamp(isAvail); statusText.textContent=isAvail?'Available':'Unavailable'; statusText.classList.toggle('ok',isAvail); statusText.classList.toggle('na',!isAvail);setBrandColor(item.color);modalEl.classList.remove('tw-hidden'); document.body.classList.add('modal-open'); requestAnimationFrame(()=>{ modalEl.setAttribute('data-state','open'); });// focus trap trapHandler=trapFocus; document.addEventListener('keydown',trapHandler); // set initial focus modalClose.focus({preventScroll:true}); }function closeModal(){ modalEl.removeAttribute('data-state'); const panel=modalEl.querySelector('.pw-modal-panel'); const overlay=modalEl.querySelector('.pw-modal-overlay'); let done=false; const finish=()=>{ if(done) return; done=true; modalEl.classList.add('tw-hidden'); currentItem=null; document.body.classList.remove('modal-open'); if(trapHandler) document.removeEventListener('keydown',trapHandler); if(lastFocus) lastFocus.focus({preventScroll:true}); }; const onEnd=(e)=>{ if(e.target===panel||e.target===overlay) finish(); }; panel.addEventListener('transitionend',onEnd,{once:true}); overlay.addEventListener('transitionend',onEnd,{once:true}); setTimeout(finish,280); // fallback }function copyAll(){ if(!currentItem) return; const lines=[ `Method: ${currentItem.name} (${modalCategory.textContent})`, `${accountLabel.textContent}: ${currentItem.accountNumber||'—'}`, `Recipient Name: ${currentItem.accountName||'—'}`, '', 'Steps:', ...(currentItem.steps||[]).map((s,i)=>`${i+1}. ${s}`) ]; if(currentItem.notes) lines.push('', `Notes: ${currentItem.notes}`); navigator.clipboard.writeText(lines.join('\n')).then(()=>showToast('All details copied ✓')); }// Listeners pillsEl.addEventListener('click',e=>{ const b=e.target.closest('button[data-cat]'); if(!b) return; activeCategory=b.getAttribute('data-cat'); renderPills(); renderGrid(); }); searchEl.addEventListener('input',()=>{ query=searchEl.value; clearSearchEl.classList.toggle('tw-hidden',!query); renderGrid(); }); clearSearchEl.addEventListener('click',()=>{ searchEl.value=''; query=''; clearSearchEl.classList.add('tw-hidden'); renderGrid(); searchEl.focus(); }); gridEl.addEventListener('click',e=>{ const b=e.target.closest('button[data-open]'); if(!b) return; const id=b.getAttribute('data-open'); const item=PAYMENT_METHODS.find(x=>x.id===id); if(item&&item.available!==false) openModal(item); }); modalEl.addEventListener('click',e=>{ if(e.target.hasAttribute('data-close')) closeModal(); }); document.getElementById('pw-modalClose').addEventListener('click',closeModal); document.addEventListener('keydown',e=>{ if(e.key==='Escape' && !modalEl.classList.contains('tw-hidden')) closeModal(); });copyAllBtn.addEventListener('click',copyAll); copyAccount.addEventListener('click',async e=>{ if(!currentItem) return; try{ await navigator.clipboard.writeText(currentItem.accountNumber||''); showToast(); const btn=e.currentTarget; btn.textContent='Copied ✓'; setTimeout(()=>btn.textContent='Copy',1100) }catch{} }); copyName.addEventListener('click',async e=>{ if(!currentItem) return; try{ await navigator.clipboard.writeText(currentItem.accountName||''); showToast(); const btn=e.currentTarget; btn.textContent='Copied ✓'; setTimeout(()=>btn.textContent='Copy',1100) }catch{} });// Dark toggle const rootEl=document.getElementById('pw-pay'); function setDark(on){rootEl.classList.toggle('dark',on);localStorage.setItem('pw_darkpref',on?'1':'0')} const savedDark=localStorage.getItem('pw_darkpref'); if(savedDark){ setDark(savedDark==='1') } document.getElementById('pw-darkToggle').addEventListener('click',()=>{ setDark(!rootEl.classList.contains('dark')) });availableOnlyEl.addEventListener('change',()=>{ availableOnly=availableOnlyEl.checked; renderGrid() });renderPills(); renderLogos(); renderGrid();// ===== FAQ toggle all ===== (function(){ const rootFaq=document.getElementById('faq-bayar'); const btn=rootFaq?.querySelector('.faq-toggle'); if(!rootFaq||!btn) return; function setAll(open){ rootFaq.querySelectorAll('details').forEach(d=>d.open=open); btn.textContent=open?'Close all':'Open all'; btn.setAttribute('aria-expanded',String(open)); } btn.addEventListener('click',()=>{ const items=[...rootFaq.querySelectorAll('details')]; const shouldOpen=items.some(d=>!d.open); setAll(shouldOpen); }); })();