Japan Pasabuy \u2013 Card Order Form<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400;600&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --red: #C0392B; --red-light: #FDECEA; --red-mid: #E74C3C;\n --gold: #C8973A; --gold-light: #FDF6E3;\n --ink: #1A1A2E; --ink-mid: #3D3D5C; --muted: #7A7A9A;\n --border: #E2E2EE; --surface: #F8F7FF; --white: #FFFFFF;\n --success: #27AE60; --radius: 10px;\n --shadow: 0 2px 16px rgba(26,26,46,0.08);\n }\n body { font-family: 'DM Sans', sans-serif; background: var(--surface); color: var(--ink); min-height: 100vh; }\n\n .hero { background: var(--ink); color: white; padding: 2.5rem 2rem 2rem; text-align: center; position: relative; overflow: hidden; }\n .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(200,151,58,0.04) 40px, rgba(200,151,58,0.04) 41px); }\n .hero-flag { font-size: 2.5rem; margin-bottom: 0.5rem; position: relative; }\n .hero h1 { font-family: 'Noto Serif JP', serif; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.02em; position: relative; }\n .hero h1 span { color: var(--gold); }\n .hero p { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.55); font-weight: 300; position: relative; }\n\n \/* STEP BAR *\/\n .step-bar { padding: 1.25rem 1rem 0; max-width: 400px; margin: 0 auto; }\n .steps { display: flex; align-items: center; }\n .step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex: 1; }\n .step-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 2px solid var(--border); background: var(--white); color: var(--muted); transition: all 0.3s; }\n .step-circle.active { border-color: var(--red); background: var(--red); color: white; }\n .step-circle.done { border-color: var(--success); background: var(--success); color: white; }\n .step-label { font-size: 0.7rem; font-weight: 500; color: var(--muted); }\n .step-label.active { color: var(--red); }\n .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.25rem 1.2rem; transition: background 0.3s; }\n .step-line.done { background: var(--success); }\n\n .container { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }\n .section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--red-light); }\n .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }\n\n .field { margin-bottom: 1rem; }\n .field:last-child { margin-bottom: 0; }\n label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-mid); margin-bottom: 0.35rem; }\n input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"url\"], select, textarea {\n width: 100%; padding: 0.6rem 0.85rem; font-family: 'DM Sans', sans-serif; font-size: 0.9rem;\n color: var(--ink); background: #FAFAFA; border: 1px solid var(--border); border-radius: 7px;\n outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none;\n }\n input:focus, select:focus, textarea:focus { border-color: var(--red-mid); box-shadow: 0 0 0 3px rgba(231,76,60,0.1); background: var(--white); }\n textarea { resize: vertical; min-height: 70px; }\n select { cursor: pointer; }\n .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }\n @media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }\n\n .items-header { display: grid; grid-template-columns: 50px 1fr 110px 70px 90px 80px 36px; gap: 6px; padding: 0 0 0.5rem; font-size: 0.68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }\n .item-row { display: grid; grid-template-columns: 50px 1fr 110px 70px 90px 80px 36px; gap: 6px; margin-bottom: 0.5rem; align-items: start; }\n .item-row input, .item-row select { padding: 0.5rem 0.6rem; font-size: 0.82rem; }\n .remove-btn { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--white); color: var(--muted); border-radius: 7px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }\n .remove-btn:hover { background: var(--red-light); border-color: var(--red-mid); color: var(--red); }\n @media (max-width: 640px) {\n .items-header { display: none; }\n .item-row { grid-template-columns: 1fr 1fr; background: #FAFAFA; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; gap: 0.5rem; }\n .item-row .name-cell { grid-column: 1 \/ -1; }\n }\n .add-btn { width: 100%; padding: 0.65rem; margin-top: 0.5rem; background: transparent; border: 1.5px dashed var(--border); border-radius: 8px; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }\n .add-btn:hover { border-color: var(--red-mid); color: var(--red); background: var(--red-light); }\n\n .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); }\n .summary-row:last-child { border-bottom: none; }\n .summary-row .lbl { color: var(--muted); }\n .summary-row .val { font-weight: 500; }\n .summary-row.total .lbl { font-weight: 600; color: var(--ink); font-size: 0.9rem; }\n .summary-row.total .val { font-size: 1.05rem; font-weight: 600; color: var(--red); }\n .note-text { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; font-style: italic; }\n\n .btn-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }\n .btn { flex: 1; padding: 1rem; border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }\n .btn-primary { background: var(--ink); color: white; }\n .btn-primary:hover { background: var(--red); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,57,43,0.25); }\n .btn-ghost { background: var(--white); color: var(--ink-mid); border: 1px solid var(--border); }\n .btn-ghost:hover { background: var(--surface); }\n .btn-success { background: var(--success); color: white; }\n .btn-success:hover { opacity: 0.9; transform: translateY(-1px); }\n .btn-success:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }\n\n \/* REVIEW *\/\n .review-section { margin-bottom: 1.25rem; }\n .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }\n .review-header h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }\n .edit-link { font-size: 0.78rem; color: var(--red-mid); font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; }\n .edit-link:hover { color: var(--red); }\n .review-detail { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }\n .review-detail:last-child { border-bottom: none; }\n .review-detail .rkey { color: var(--muted); }\n .review-detail .rval { font-weight: 500; text-align: right; max-width: 65%; word-break: break-word; }\n\n .review-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }\n .review-table th { text-align: left; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }\n .review-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }\n .review-table tr:last-child td { border-bottom: none; }\n\n .badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap; }\n .badge-foil { background: var(--gold-light); color: var(--gold); }\n .badge-lang { background: #EEF2FF; color: #5560B5; }\n .badge-cond { background: #F0FDF4; color: #15803D; }\n\n .toast { display: none; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; padding: 0.9rem 1.5rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500; z-index: 999; box-shadow: 0 8px 30px rgba(0,0,0,0.2); text-align: center; max-width: 340px; width: 90%; }\n .toast.success { background: var(--success); }\n .toast.error { background: var(--red); }\n\n .req { color: var(--red); margin-left: 2px; }\n .policy { background: var(--gold-light); border: 1px solid rgba(200,151,58,0.3); border-radius: 8px; padding: 1rem 1.25rem; font-size: 0.8rem; color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.25rem; }\n .policy strong { color: var(--gold); }\n\n .page { display: none; }\n .page.active { display: block; }\n\n .success-page { text-align: center; padding: 3rem 1.5rem; }\n .success-icon { font-size: 3.5rem; margin-bottom: 1rem; }\n .success-page h2 { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }\n .success-page p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero\">\n <div class=\"hero-flag\">\ud83c\uddef\ud83c\uddf5<\/div>\n <h1>Japan <span>Pasabuy<\/span> Order Form<\/h1>\n <p>Hareruya Card Orders \u00b7 Fill in your details below<\/p>\n<\/div>\n\n<div class=\"step-bar\">\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-circle active\" id=\"sc1\">1<\/div>\n <div class=\"step-label active\" id=\"sl1\">Fill Order<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line1\"><\/div>\n <div class=\"step\">\n <div class=\"step-circle\" id=\"sc2\">2<\/div>\n <div class=\"step-label\" id=\"sl2\">Review<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line2\"><\/div>\n <div class=\"step\">\n <div class=\"step-circle\" id=\"sc3\">3<\/div>\n <div class=\"step-label\" id=\"sl3\">Done<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"container\">\n\n \n <div class=\"page active\" id=\"page-form\">\n <div class=\"policy\">\n <strong>\ud83d\udccc Order Policy<\/strong><br>\n Orders are subject to availability at Hareruya Japan. A <strong>15% handling fee<\/strong> applies on top of card price (JPY). A <strong>50% down payment<\/strong> is required to confirm. Final balance is due upon delivery.\n <\/div>\n\n <p class=\"section-label\">Your Details<\/p>\n <div class=\"card\">\n <div class=\"grid-2\">\n <div class=\"field\"><label>Full Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"name\" placeholder=\"e.g. Juan dela Cruz\"><\/div>\n <div class=\"field\"><label>Email Address <span class=\"req\">*<\/span><\/label><input type=\"email\" id=\"email\" placeholder=\"you@email.com\"><\/div>\n <\/div>\n <div class=\"grid-2\" style=\"margin-top:0.75rem\">\n <div class=\"field\"><label>Contact Number <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"contact\" placeholder=\"+63 9XX XXX XXXX\"><\/div>\n <div class=\"field\"><label>Facebook \/ GCash Name<\/label><input type=\"text\" id=\"fb\" placeholder=\"Optional\"><\/div>\n <\/div>\n <\/div>\n\n <p class=\"section-label\">Card Order List<\/p>\n <div class=\"card\">\n <div class=\"items-header\">\n <div>Qty<\/div><div>Card Name<\/div><div>Product Link<\/div>\n <div>Foil?<\/div><div>Language<\/div><div>Condition<\/div><div><\/div>\n <\/div>\n <div id=\"items-container\"><\/div>\n <button class=\"add-btn\" onclick=\"addItem()\">+ Add Another Card<\/button>\n <\/div>\n\n <p class=\"section-label\">Additional Notes<\/p>\n <div class=\"card\">\n <div class=\"field\">\n <label>Comments \/ Special Requests<\/label>\n <textarea id=\"comments\" placeholder=\"Any specific versions, artwork preferences, or other notes...\"><\/textarea>\n <\/div>\n <\/div>\n\n <p class=\"section-label\">Estimated Summary<\/p>\n <div class=\"card\">\n <div class=\"summary-row\"><span class=\"lbl\">Subtotal (JPY)<\/span><span class=\"val\" id=\"s-jpy\">\u00a50<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">15% Handling Fee<\/span><span class=\"val\" id=\"s-fee\">\u00a50<\/span><\/div>\n <div class=\"summary-row total\"><span class=\"lbl\">Total (JPY)<\/span><span class=\"val\" id=\"s-total\">\u00a50<\/span><\/div>\n <p class=\"note-text\">* PHP equivalent confirmed via email. Enter Hareruya prices per card above for auto-calculation.<\/p>\n <\/div>\n\n <button class=\"btn btn-primary\" onclick=\"goToReview()\">Review My Order \u2192<\/button>\n <\/div>\n\n \n <div class=\"page\" id=\"page-review\">\n\n <div style=\"background: var(--gold-light); border: 1px solid rgba(200,151,58,0.3); border-radius: 8px; padding: 0.85rem 1.25rem; font-size: 0.82rem; color: var(--ink-mid); margin-bottom: 1.25rem;\">\n \ud83d\udc40 <strong>Please review your order carefully before confirming.<\/strong> You can go back and edit anything below.\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Your Details<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <div class=\"review-detail\"><span class=\"rkey\">Name<\/span><span class=\"rval\" id=\"r-name\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">Email<\/span><span class=\"rval\" id=\"r-email\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">Contact<\/span><span class=\"rval\" id=\"r-contact\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">FB \/ GCash<\/span><span class=\"rval\" id=\"r-fb\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Card Order List<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem; overflow-x: auto;\">\n <table class=\"review-table\">\n <thead><tr><th>#<\/th><th>Card Name<\/th><th>Qty<\/th><th>Foil<\/th><th>Lang<\/th><th>Cond<\/th><th>Link<\/th><\/tr><\/thead>\n <tbody id=\"r-items\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Notes<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <p id=\"r-comments\" style=\"font-size:0.875rem; color:var(--ink-mid); line-height:1.6;\">\u2014<\/p>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\"><h3>Order Summary<\/h3><\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <div class=\"summary-row\"><span class=\"lbl\">Total Cards<\/span><span class=\"val\" id=\"r-count\">0<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Subtotal (JPY)<\/span><span class=\"val\" id=\"r-jpy\">\u00a50<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">15% Handling Fee<\/span><span class=\"val\" id=\"r-fee\">\u00a50<\/span><\/div>\n <div class=\"summary-row total\"><span class=\"lbl\">Total (JPY)<\/span><span class=\"val\" id=\"r-total\">\u00a50<\/span><\/div>\n <p class=\"note-text\">* PHP equivalent and exact pricing will be confirmed by Richard via email.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-ghost\" onclick=\"goBack()\">\u2190 Go Back & Edit<\/button>\n <button class=\"btn btn-success\" id=\"confirm-btn\" onclick=\"submitForm()\">Confirm & Send Order \u2713<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"page\" id=\"page-success\">\n <div class=\"card success-page\">\n <div class=\"success-icon\">\ud83c\udf89<\/div>\n <h2>Order Received!<\/h2>\n <p style=\"margin-top:0.75rem;\">Your pasabuy order has been sent to Richard.<br>Check your email for a confirmation copy.<br><br>\n <strong>Reminder:<\/strong> A 50% down payment is required to confirm your slot. Richard will reach out with payment details shortly.<\/p>\n <button class=\"btn btn-ghost\" style=\"margin-top:2rem; max-width:240px; margin-left:auto; margin-right:auto; display:block;\" onclick=\"resetForm()\">Place Another Order<\/button>\n <\/div>\n <\/div>\n\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n(function(){ emailjs.init({ publicKey: \"YOUR_EMAILJS_PUBLIC_KEY\" }); })();\n\nlet itemCount = 0;\n\nfunction addItem() {\n itemCount++;\n const id = itemCount;\n const div = document.createElement('div');\n div.className = 'item-row';\n div.id = 'item-' + id;\n div.innerHTML = `\n <input type=\"number\" min=\"1\" value=\"1\" class=\"qty-input\" oninput=\"recalc()\" placeholder=\"Qty\">\n <input type=\"text\" placeholder=\"Card name\" class=\"name-cell card-name-col\">\n <input type=\"url\" placeholder=\"hareruya.com\/\u2026\" class=\"link-input\">\n <select class=\"foil-input\"><option value=\"No\">No<\/option><option value=\"Yes\">Yes<\/option><option value=\"Any\">Any<\/option><\/select>\n <select class=\"lang-input\"><option value=\"Japanese\">Japanese<\/option><option value=\"English\">English<\/option><option value=\"Any\">Any<\/option><\/select>\n <select class=\"cond-input\"><option value=\"NM\">NM<\/option><option value=\"LP\">LP<\/option><option value=\"MP\">MP<\/option><option value=\"HP\">HP<\/option><option value=\"Any\">Any<\/option><\/select>\n <button class=\"remove-btn\" onclick=\"removeItem(${id})\" title=\"Remove\">\u2715<\/button>\n `;\n document.getElementById('items-container').appendChild(div);\n if (itemCount === 1) addItem();\n}\n\nfunction removeItem(id) {\n const el = document.getElementById('item-' + id);\n if (el) el.remove();\n recalc();\n}\n\nfunction recalc() {\n let total = 0;\n document.querySelectorAll('.item-row').forEach(row => {\n const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;\n total += qty * 0;\n });\n document.getElementById('s-jpy').textContent = '\u00a5' + total.toLocaleString();\n document.getElementById('s-fee').textContent = '\u00a5' + Math.round(total * 0.15).toLocaleString();\n document.getElementById('s-total').textContent = '\u00a5' + Math.round(total * 1.15).toLocaleString();\n}\n\nfunction getOrderedItems() {\n const rows = document.querySelectorAll('.item-row');\n const items = [];\n rows.forEach((row, i) => {\n const name = row.querySelector('.card-name-col')?.value.trim() || '';\n if (!name) return;\n items.push({\n num: items.length + 1,\n name,\n qty: row.querySelector('.qty-input')?.value || '1',\n foil: row.querySelector('.foil-input')?.value || 'No',\n lang: row.querySelector('.lang-input')?.value || 'Japanese',\n cond: row.querySelector('.cond-input')?.value || 'NM',\n link: row.querySelector('.link-input')?.value.trim() || ''\n });\n });\n return items;\n}\n\nfunction goToReview() {\n const name = document.getElementById('name').value.trim();\n const email = document.getElementById('email').value.trim();\n const contact = document.getElementById('contact').value.trim();\n if (!name || !email || !contact) { showToast('Please fill in your name, email, and contact number.', 'error'); return; }\n const items = getOrderedItems();\n if (items.length === 0) { showToast('Please add at least one card to your order.', 'error'); return; }\n\n document.getElementById('r-name').textContent = name;\n document.getElementById('r-email').textContent = email;\n document.getElementById('r-contact').textContent = contact;\n document.getElementById('r-fb').textContent = document.getElementById('fb').value.trim() || 'N\/A';\n document.getElementById('r-comments').textContent = document.getElementById('comments').value.trim() || 'None';\n\n const tbody = document.getElementById('r-items');\n tbody.innerHTML = '';\n items.forEach(item => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td style=\"color:var(--muted);font-size:0.75rem\">${item.num}<\/td>\n <td><strong>${item.name}<\/strong><\/td>\n <td style=\"text-align:center;font-weight:500\">${item.qty}<\/td>\n <td><span class=\"badge badge-foil\">${item.foil}<\/span><\/td>\n <td><span class=\"badge badge-lang\">${item.lang.slice(0,3)}<\/span><\/td>\n <td><span class=\"badge badge-cond\">${item.cond}<\/span><\/td>\n <td>${item.link ? `<a href=\"${item.link}\" style=\"color:var(--red-mid);font-size:0.75rem;text-decoration:none;border-bottom:1px dashed var(--red-mid)\" target=\"_blank\">View \u2197<\/a>` : '<span style=\"color:var(--muted);font-size:0.75rem\">\u2014<\/span>'}<\/td>\n `;\n tbody.appendChild(tr);\n });\n\n const sub = parseFloat(document.getElementById('s-jpy').textContent.replace(\/[\u00a5,]\/g,'')) || 0;\n const fee = Math.round(sub * 0.15);\n document.getElementById('r-count').textContent = items.length + ' card' + (items.length !== 1 ? 's' : '');\n document.getElementById('r-jpy').textContent = '\u00a5' + sub.toLocaleString();\n document.getElementById('r-fee').textContent = '\u00a5' + fee.toLocaleString();\n document.getElementById('r-total').textContent = '\u00a5' + (sub + fee).toLocaleString();\n\n setStep(2);\n showPage('page-review');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction goBack() {\n setStep(1);\n showPage('page-form');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction showPage(id) {\n document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));\n document.getElementById(id).classList.add('active');\n}\n\nfunction setStep(n) {\n [1,2,3].forEach(i => {\n const sc = document.getElementById('sc'+i);\n const sl = document.getElementById('sl'+i);\n sc.classList.remove('active','done');\n sl.classList.remove('active');\n if (i < n) { sc.classList.add('done'); sc.textContent = '\u2713'; }\n else if (i === n) { sc.classList.add('active'); sc.textContent = i; sl.classList.add('active'); }\n else { sc.textContent = i; }\n });\n document.getElementById('line1').classList.toggle('done', n > 1);\n document.getElementById('line2').classList.toggle('done', n > 2);\n}\n\nfunction showToast(msg, type) {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.className = 'toast ' + type;\n t.style.display = 'block';\n setTimeout(() => { t.style.display = 'none'; }, 5000);\n}\n\nfunction submitForm() {\n const btn = document.getElementById('confirm-btn');\n btn.disabled = true;\n btn.textContent = 'Sending\u2026';\n\n const items = getOrderedItems();\n const itemLines = items.map(it =>\n `[${it.num}] ${it.name} | Qty: ${it.qty} | Foil: ${it.foil} | ${it.lang} | ${it.cond}${it.link ? ' | ' + it.link : ''}`\n ).join('\\n');\n\n const params = {\n from_name: document.getElementById('name').value.trim(),\n from_email: document.getElementById('email').value.trim(),\n contact_number: document.getElementById('contact').value.trim(),\n fb_gcash: document.getElementById('fb').value.trim() || 'N\/A',\n order_items: itemLines,\n comments: document.getElementById('comments').value.trim() || 'None',\n to_email: 'richard.adefuin@gmail.com'\n };\n\n emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', params)\n .then(() => {\n setStep(3);\n showPage('page-success');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n })\n .catch(err => {\n console.error(err);\n showToast('Something went wrong. Please try again.', 'error');\n btn.disabled = false;\n btn.textContent = 'Confirm & Send Order \u2713';\n });\n}\n\nfunction resetForm() {\n document.getElementById('name').value = '';\n document.getElementById('email').value = '';\n document.getElementById('contact').value = '';\n document.getElementById('fb').value = '';\n document.getElementById('comments').value = '';\n document.getElementById('items-container').innerHTML = '';\n itemCount = 0;\n addItem();\n setStep(1);\n showPage('page-form');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\naddItem();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Japan Pasabuy \u2013 Card Order Form \ud83c\uddef\ud83c\uddf5 Japan Pasabuy Order Form Hareruya Card Orders \u00b7 Fill in your details below […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-806","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=806"}],"version-history":[{"count":2,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":808,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806\/revisions\/808"}],"wp:attachment":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":806,"date":"2026-05-05T15:37:31","date_gmt":"2026-05-05T15:37:31","guid":{"rendered":"https:\/\/digitalshelfonline.com\/?page_id=806"},"modified":"2026-05-05T15:37:31","modified_gmt":"2026-05-05T15:37:31","slug":"hareruya-japan-pasabuy","status":"publish","type":"page","link":"https:\/\/digitalshelfonline.com\/?page_id=806","title":{"rendered":"Hareruya Japan Pasabuy"},"content":{"rendered":"\n\n\n\n\n\nJapan Pasabuy \u2013 Card Order Form<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400;600&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --red: #C0392B; --red-light: #FDECEA; --red-mid: #E74C3C;\n --gold: #C8973A; --gold-light: #FDF6E3;\n --ink: #1A1A2E; --ink-mid: #3D3D5C; --muted: #7A7A9A;\n --border: #E2E2EE; --surface: #F8F7FF; --white: #FFFFFF;\n --success: #27AE60; --radius: 10px;\n --shadow: 0 2px 16px rgba(26,26,46,0.08);\n }\n body { font-family: 'DM Sans', sans-serif; background: var(--surface); color: var(--ink); min-height: 100vh; }\n\n .hero { background: var(--ink); color: white; padding: 2.5rem 2rem 2rem; text-align: center; position: relative; overflow: hidden; }\n .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(200,151,58,0.04) 40px, rgba(200,151,58,0.04) 41px); }\n .hero-flag { font-size: 2.5rem; margin-bottom: 0.5rem; position: relative; }\n .hero h1 { font-family: 'Noto Serif JP', serif; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.02em; position: relative; }\n .hero h1 span { color: var(--gold); }\n .hero p { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.55); font-weight: 300; position: relative; }\n\n \/* STEP BAR *\/\n .step-bar { padding: 1.25rem 1rem 0; max-width: 400px; margin: 0 auto; }\n .steps { display: flex; align-items: center; }\n .step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex: 1; }\n .step-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 2px solid var(--border); background: var(--white); color: var(--muted); transition: all 0.3s; }\n .step-circle.active { border-color: var(--red); background: var(--red); color: white; }\n .step-circle.done { border-color: var(--success); background: var(--success); color: white; }\n .step-label { font-size: 0.7rem; font-weight: 500; color: var(--muted); }\n .step-label.active { color: var(--red); }\n .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.25rem 1.2rem; transition: background 0.3s; }\n .step-line.done { background: var(--success); }\n\n .container { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }\n .section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--red-light); }\n .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }\n\n .field { margin-bottom: 1rem; }\n .field:last-child { margin-bottom: 0; }\n label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-mid); margin-bottom: 0.35rem; }\n input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"url\"], select, textarea {\n width: 100%; padding: 0.6rem 0.85rem; font-family: 'DM Sans', sans-serif; font-size: 0.9rem;\n color: var(--ink); background: #FAFAFA; border: 1px solid var(--border); border-radius: 7px;\n outline: none; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none;\n }\n input:focus, select:focus, textarea:focus { border-color: var(--red-mid); box-shadow: 0 0 0 3px rgba(231,76,60,0.1); background: var(--white); }\n textarea { resize: vertical; min-height: 70px; }\n select { cursor: pointer; }\n .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }\n @media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }\n\n .items-header { display: grid; grid-template-columns: 50px 1fr 110px 70px 90px 80px 36px; gap: 6px; padding: 0 0 0.5rem; font-size: 0.68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }\n .item-row { display: grid; grid-template-columns: 50px 1fr 110px 70px 90px 80px 36px; gap: 6px; margin-bottom: 0.5rem; align-items: start; }\n .item-row input, .item-row select { padding: 0.5rem 0.6rem; font-size: 0.82rem; }\n .remove-btn { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--white); color: var(--muted); border-radius: 7px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }\n .remove-btn:hover { background: var(--red-light); border-color: var(--red-mid); color: var(--red); }\n @media (max-width: 640px) {\n .items-header { display: none; }\n .item-row { grid-template-columns: 1fr 1fr; background: #FAFAFA; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; gap: 0.5rem; }\n .item-row .name-cell { grid-column: 1 \/ -1; }\n }\n .add-btn { width: 100%; padding: 0.65rem; margin-top: 0.5rem; background: transparent; border: 1.5px dashed var(--border); border-radius: 8px; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; }\n .add-btn:hover { border-color: var(--red-mid); color: var(--red); background: var(--red-light); }\n\n .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); }\n .summary-row:last-child { border-bottom: none; }\n .summary-row .lbl { color: var(--muted); }\n .summary-row .val { font-weight: 500; }\n .summary-row.total .lbl { font-weight: 600; color: var(--ink); font-size: 0.9rem; }\n .summary-row.total .val { font-size: 1.05rem; font-weight: 600; color: var(--red); }\n .note-text { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; font-style: italic; }\n\n .btn-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }\n .btn { flex: 1; padding: 1rem; border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }\n .btn-primary { background: var(--ink); color: white; }\n .btn-primary:hover { background: var(--red); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,57,43,0.25); }\n .btn-ghost { background: var(--white); color: var(--ink-mid); border: 1px solid var(--border); }\n .btn-ghost:hover { background: var(--surface); }\n .btn-success { background: var(--success); color: white; }\n .btn-success:hover { opacity: 0.9; transform: translateY(-1px); }\n .btn-success:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }\n\n \/* REVIEW *\/\n .review-section { margin-bottom: 1.25rem; }\n .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }\n .review-header h3 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }\n .edit-link { font-size: 0.78rem; color: var(--red-mid); font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; text-decoration: underline; }\n .edit-link:hover { color: var(--red); }\n .review-detail { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }\n .review-detail:last-child { border-bottom: none; }\n .review-detail .rkey { color: var(--muted); }\n .review-detail .rval { font-weight: 500; text-align: right; max-width: 65%; word-break: break-word; }\n\n .review-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }\n .review-table th { text-align: left; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }\n .review-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }\n .review-table tr:last-child td { border-bottom: none; }\n\n .badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap; }\n .badge-foil { background: var(--gold-light); color: var(--gold); }\n .badge-lang { background: #EEF2FF; color: #5560B5; }\n .badge-cond { background: #F0FDF4; color: #15803D; }\n\n .toast { display: none; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: white; padding: 0.9rem 1.5rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500; z-index: 999; box-shadow: 0 8px 30px rgba(0,0,0,0.2); text-align: center; max-width: 340px; width: 90%; }\n .toast.success { background: var(--success); }\n .toast.error { background: var(--red); }\n\n .req { color: var(--red); margin-left: 2px; }\n .policy { background: var(--gold-light); border: 1px solid rgba(200,151,58,0.3); border-radius: 8px; padding: 1rem 1.25rem; font-size: 0.8rem; color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.25rem; }\n .policy strong { color: var(--gold); }\n\n .page { display: none; }\n .page.active { display: block; }\n\n .success-page { text-align: center; padding: 3rem 1.5rem; }\n .success-icon { font-size: 3.5rem; margin-bottom: 1rem; }\n .success-page h2 { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }\n .success-page p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero\">\n <div class=\"hero-flag\">\ud83c\uddef\ud83c\uddf5<\/div>\n <h1>Japan <span>Pasabuy<\/span> Order Form<\/h1>\n <p>Hareruya Card Orders \u00b7 Fill in your details below<\/p>\n<\/div>\n\n<div class=\"step-bar\">\n <div class=\"steps\">\n <div class=\"step\">\n <div class=\"step-circle active\" id=\"sc1\">1<\/div>\n <div class=\"step-label active\" id=\"sl1\">Fill Order<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line1\"><\/div>\n <div class=\"step\">\n <div class=\"step-circle\" id=\"sc2\">2<\/div>\n <div class=\"step-label\" id=\"sl2\">Review<\/div>\n <\/div>\n <div class=\"step-line\" id=\"line2\"><\/div>\n <div class=\"step\">\n <div class=\"step-circle\" id=\"sc3\">3<\/div>\n <div class=\"step-label\" id=\"sl3\">Done<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"container\">\n\n \n <div class=\"page active\" id=\"page-form\">\n <div class=\"policy\">\n <strong>\ud83d\udccc Order Policy<\/strong><br>\n Orders are subject to availability at Hareruya Japan. A <strong>15% handling fee<\/strong> applies on top of card price (JPY). A <strong>50% down payment<\/strong> is required to confirm. Final balance is due upon delivery.\n <\/div>\n\n <p class=\"section-label\">Your Details<\/p>\n <div class=\"card\">\n <div class=\"grid-2\">\n <div class=\"field\"><label>Full Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"name\" placeholder=\"e.g. Juan dela Cruz\"><\/div>\n <div class=\"field\"><label>Email Address <span class=\"req\">*<\/span><\/label><input type=\"email\" id=\"email\" placeholder=\"you@email.com\"><\/div>\n <\/div>\n <div class=\"grid-2\" style=\"margin-top:0.75rem\">\n <div class=\"field\"><label>Contact Number <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"contact\" placeholder=\"+63 9XX XXX XXXX\"><\/div>\n <div class=\"field\"><label>Facebook \/ GCash Name<\/label><input type=\"text\" id=\"fb\" placeholder=\"Optional\"><\/div>\n <\/div>\n <\/div>\n\n <p class=\"section-label\">Card Order List<\/p>\n <div class=\"card\">\n <div class=\"items-header\">\n <div>Qty<\/div><div>Card Name<\/div><div>Product Link<\/div>\n <div>Foil?<\/div><div>Language<\/div><div>Condition<\/div><div><\/div>\n <\/div>\n <div id=\"items-container\"><\/div>\n <button class=\"add-btn\" onclick=\"addItem()\">+ Add Another Card<\/button>\n <\/div>\n\n <p class=\"section-label\">Additional Notes<\/p>\n <div class=\"card\">\n <div class=\"field\">\n <label>Comments \/ Special Requests<\/label>\n <textarea id=\"comments\" placeholder=\"Any specific versions, artwork preferences, or other notes...\"><\/textarea>\n <\/div>\n <\/div>\n\n <p class=\"section-label\">Estimated Summary<\/p>\n <div class=\"card\">\n <div class=\"summary-row\"><span class=\"lbl\">Subtotal (JPY)<\/span><span class=\"val\" id=\"s-jpy\">\u00a50<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">15% Handling Fee<\/span><span class=\"val\" id=\"s-fee\">\u00a50<\/span><\/div>\n <div class=\"summary-row total\"><span class=\"lbl\">Total (JPY)<\/span><span class=\"val\" id=\"s-total\">\u00a50<\/span><\/div>\n <p class=\"note-text\">* PHP equivalent confirmed via email. Enter Hareruya prices per card above for auto-calculation.<\/p>\n <\/div>\n\n <button class=\"btn btn-primary\" onclick=\"goToReview()\">Review My Order \u2192<\/button>\n <\/div>\n\n \n <div class=\"page\" id=\"page-review\">\n\n <div style=\"background: var(--gold-light); border: 1px solid rgba(200,151,58,0.3); border-radius: 8px; padding: 0.85rem 1.25rem; font-size: 0.82rem; color: var(--ink-mid); margin-bottom: 1.25rem;\">\n \ud83d\udc40 <strong>Please review your order carefully before confirming.<\/strong> You can go back and edit anything below.\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Your Details<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <div class=\"review-detail\"><span class=\"rkey\">Name<\/span><span class=\"rval\" id=\"r-name\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">Email<\/span><span class=\"rval\" id=\"r-email\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">Contact<\/span><span class=\"rval\" id=\"r-contact\">\u2014<\/span><\/div>\n <div class=\"review-detail\"><span class=\"rkey\">FB \/ GCash<\/span><span class=\"rval\" id=\"r-fb\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Card Order List<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem; overflow-x: auto;\">\n <table class=\"review-table\">\n <thead><tr><th>#<\/th><th>Card Name<\/th><th>Qty<\/th><th>Foil<\/th><th>Lang<\/th><th>Cond<\/th><th>Link<\/th><\/tr><\/thead>\n <tbody id=\"r-items\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\">\n <h3>Notes<\/h3>\n <button class=\"edit-link\" onclick=\"goBack()\">\u270e Edit<\/button>\n <\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <p id=\"r-comments\" style=\"font-size:0.875rem; color:var(--ink-mid); line-height:1.6;\">\u2014<\/p>\n <\/div>\n <\/div>\n\n <div class=\"review-section\">\n <div class=\"review-header\"><h3>Order Summary<\/h3><\/div>\n <div class=\"card\" style=\"padding: 1rem 1.25rem;\">\n <div class=\"summary-row\"><span class=\"lbl\">Total Cards<\/span><span class=\"val\" id=\"r-count\">0<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">Subtotal (JPY)<\/span><span class=\"val\" id=\"r-jpy\">\u00a50<\/span><\/div>\n <div class=\"summary-row\"><span class=\"lbl\">15% Handling Fee<\/span><span class=\"val\" id=\"r-fee\">\u00a50<\/span><\/div>\n <div class=\"summary-row total\"><span class=\"lbl\">Total (JPY)<\/span><span class=\"val\" id=\"r-total\">\u00a50<\/span><\/div>\n <p class=\"note-text\">* PHP equivalent and exact pricing will be confirmed by Richard via email.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-ghost\" onclick=\"goBack()\">\u2190 Go Back & Edit<\/button>\n <button class=\"btn btn-success\" id=\"confirm-btn\" onclick=\"submitForm()\">Confirm & Send Order \u2713<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"page\" id=\"page-success\">\n <div class=\"card success-page\">\n <div class=\"success-icon\">\ud83c\udf89<\/div>\n <h2>Order Received!<\/h2>\n <p style=\"margin-top:0.75rem;\">Your pasabuy order has been sent to Richard.<br>Check your email for a confirmation copy.<br><br>\n <strong>Reminder:<\/strong> A 50% down payment is required to confirm your slot. Richard will reach out with payment details shortly.<\/p>\n <button class=\"btn btn-ghost\" style=\"margin-top:2rem; max-width:240px; margin-left:auto; margin-right:auto; display:block;\" onclick=\"resetForm()\">Place Another Order<\/button>\n <\/div>\n <\/div>\n\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n(function(){ emailjs.init({ publicKey: \"YOUR_EMAILJS_PUBLIC_KEY\" }); })();\n\nlet itemCount = 0;\n\nfunction addItem() {\n itemCount++;\n const id = itemCount;\n const div = document.createElement('div');\n div.className = 'item-row';\n div.id = 'item-' + id;\n div.innerHTML = `\n <input type=\"number\" min=\"1\" value=\"1\" class=\"qty-input\" oninput=\"recalc()\" placeholder=\"Qty\">\n <input type=\"text\" placeholder=\"Card name\" class=\"name-cell card-name-col\">\n <input type=\"url\" placeholder=\"hareruya.com\/\u2026\" class=\"link-input\">\n <select class=\"foil-input\"><option value=\"No\">No<\/option><option value=\"Yes\">Yes<\/option><option value=\"Any\">Any<\/option><\/select>\n <select class=\"lang-input\"><option value=\"Japanese\">Japanese<\/option><option value=\"English\">English<\/option><option value=\"Any\">Any<\/option><\/select>\n <select class=\"cond-input\"><option value=\"NM\">NM<\/option><option value=\"LP\">LP<\/option><option value=\"MP\">MP<\/option><option value=\"HP\">HP<\/option><option value=\"Any\">Any<\/option><\/select>\n <button class=\"remove-btn\" onclick=\"removeItem(${id})\" title=\"Remove\">\u2715<\/button>\n `;\n document.getElementById('items-container').appendChild(div);\n if (itemCount === 1) addItem();\n}\n\nfunction removeItem(id) {\n const el = document.getElementById('item-' + id);\n if (el) el.remove();\n recalc();\n}\n\nfunction recalc() {\n let total = 0;\n document.querySelectorAll('.item-row').forEach(row => {\n const qty = parseFloat(row.querySelector('.qty-input')?.value) || 0;\n total += qty * 0;\n });\n document.getElementById('s-jpy').textContent = '\u00a5' + total.toLocaleString();\n document.getElementById('s-fee').textContent = '\u00a5' + Math.round(total * 0.15).toLocaleString();\n document.getElementById('s-total').textContent = '\u00a5' + Math.round(total * 1.15).toLocaleString();\n}\n\nfunction getOrderedItems() {\n const rows = document.querySelectorAll('.item-row');\n const items = [];\n rows.forEach((row, i) => {\n const name = row.querySelector('.card-name-col')?.value.trim() || '';\n if (!name) return;\n items.push({\n num: items.length + 1,\n name,\n qty: row.querySelector('.qty-input')?.value || '1',\n foil: row.querySelector('.foil-input')?.value || 'No',\n lang: row.querySelector('.lang-input')?.value || 'Japanese',\n cond: row.querySelector('.cond-input')?.value || 'NM',\n link: row.querySelector('.link-input')?.value.trim() || ''\n });\n });\n return items;\n}\n\nfunction goToReview() {\n const name = document.getElementById('name').value.trim();\n const email = document.getElementById('email').value.trim();\n const contact = document.getElementById('contact').value.trim();\n if (!name || !email || !contact) { showToast('Please fill in your name, email, and contact number.', 'error'); return; }\n const items = getOrderedItems();\n if (items.length === 0) { showToast('Please add at least one card to your order.', 'error'); return; }\n\n document.getElementById('r-name').textContent = name;\n document.getElementById('r-email').textContent = email;\n document.getElementById('r-contact').textContent = contact;\n document.getElementById('r-fb').textContent = document.getElementById('fb').value.trim() || 'N\/A';\n document.getElementById('r-comments').textContent = document.getElementById('comments').value.trim() || 'None';\n\n const tbody = document.getElementById('r-items');\n tbody.innerHTML = '';\n items.forEach(item => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td style=\"color:var(--muted);font-size:0.75rem\">${item.num}<\/td>\n <td><strong>${item.name}<\/strong><\/td>\n <td style=\"text-align:center;font-weight:500\">${item.qty}<\/td>\n <td><span class=\"badge badge-foil\">${item.foil}<\/span><\/td>\n <td><span class=\"badge badge-lang\">${item.lang.slice(0,3)}<\/span><\/td>\n <td><span class=\"badge badge-cond\">${item.cond}<\/span><\/td>\n <td>${item.link ? `<a href=\"${item.link}\" style=\"color:var(--red-mid);font-size:0.75rem;text-decoration:none;border-bottom:1px dashed var(--red-mid)\" target=\"_blank\">View \u2197<\/a>` : '<span style=\"color:var(--muted);font-size:0.75rem\">\u2014<\/span>'}<\/td>\n `;\n tbody.appendChild(tr);\n });\n\n const sub = parseFloat(document.getElementById('s-jpy').textContent.replace(\/[\u00a5,]\/g,'')) || 0;\n const fee = Math.round(sub * 0.15);\n document.getElementById('r-count').textContent = items.length + ' card' + (items.length !== 1 ? 's' : '');\n document.getElementById('r-jpy').textContent = '\u00a5' + sub.toLocaleString();\n document.getElementById('r-fee').textContent = '\u00a5' + fee.toLocaleString();\n document.getElementById('r-total').textContent = '\u00a5' + (sub + fee).toLocaleString();\n\n setStep(2);\n showPage('page-review');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction goBack() {\n setStep(1);\n showPage('page-form');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction showPage(id) {\n document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));\n document.getElementById(id).classList.add('active');\n}\n\nfunction setStep(n) {\n [1,2,3].forEach(i => {\n const sc = document.getElementById('sc'+i);\n const sl = document.getElementById('sl'+i);\n sc.classList.remove('active','done');\n sl.classList.remove('active');\n if (i < n) { sc.classList.add('done'); sc.textContent = '\u2713'; }\n else if (i === n) { sc.classList.add('active'); sc.textContent = i; sl.classList.add('active'); }\n else { sc.textContent = i; }\n });\n document.getElementById('line1').classList.toggle('done', n > 1);\n document.getElementById('line2').classList.toggle('done', n > 2);\n}\n\nfunction showToast(msg, type) {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.className = 'toast ' + type;\n t.style.display = 'block';\n setTimeout(() => { t.style.display = 'none'; }, 5000);\n}\n\nfunction submitForm() {\n const btn = document.getElementById('confirm-btn');\n btn.disabled = true;\n btn.textContent = 'Sending\u2026';\n\n const items = getOrderedItems();\n const itemLines = items.map(it =>\n `[${it.num}] ${it.name} | Qty: ${it.qty} | Foil: ${it.foil} | ${it.lang} | ${it.cond}${it.link ? ' | ' + it.link : ''}`\n ).join('\\n');\n\n const params = {\n from_name: document.getElementById('name').value.trim(),\n from_email: document.getElementById('email').value.trim(),\n contact_number: document.getElementById('contact').value.trim(),\n fb_gcash: document.getElementById('fb').value.trim() || 'N\/A',\n order_items: itemLines,\n comments: document.getElementById('comments').value.trim() || 'None',\n to_email: 'richard.adefuin@gmail.com'\n };\n\n emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', params)\n .then(() => {\n setStep(3);\n showPage('page-success');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n })\n .catch(err => {\n console.error(err);\n showToast('Something went wrong. Please try again.', 'error');\n btn.disabled = false;\n btn.textContent = 'Confirm & Send Order \u2713';\n });\n}\n\nfunction resetForm() {\n document.getElementById('name').value = '';\n document.getElementById('email').value = '';\n document.getElementById('contact').value = '';\n document.getElementById('fb').value = '';\n document.getElementById('comments').value = '';\n document.getElementById('items-container').innerHTML = '';\n itemCount = 0;\n addItem();\n setStep(1);\n showPage('page-form');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\naddItem();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Japan Pasabuy \u2013 Card Order Form \ud83c\uddef\ud83c\uddf5 Japan Pasabuy Order Form Hareruya Card Orders \u00b7 Fill in your details below […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-806","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=806"}],"version-history":[{"count":2,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":808,"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=\/wp\/v2\/pages\/806\/revisions\/808"}],"wp:attachment":[{"href":"https:\/\/digitalshelfonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}